令和の MoE スキン作成術
概要
Master of Epic (以下 MoE と称する) のスキンにおいて、512x512 より大きなサイズで画像を作成することによって、アルファ（透明度）情報を持ち込めるテクニックについて解説する。
原理
MoE のスキンの画像サイズは、規定では 512x512 とされている。実際はこれ以上のサイズの画像も正常に読み込める。その場合、画像のピクセルは補完される。
このピクセルの補完は透明扱いのピクセル（R0 G255 B0）に対しても行われる。
以降の例では、4 倍の 2048x2048 で作成する。編集と理解を容易にし、ドット絵部分は補完しないように使い分けるには整数倍が適切である。また、汎用的なディザリングパターンを使用するには偶数倍にするとよい。2 倍ではアルファ情報を 4 段階（アルファ 0 も含めると 5 段階）しか持ち込めず、大きすぎても編集に難儀するので 4 倍が妥当であろう。
説明と確認のため、公式で配布されているスキンを 4 倍のサイズにする。必ずピクセルの補完方法に最近傍点（ニアレストネイバー）を選択すること。
HP バーの場所にテスト用のパターンを作成した。この手のテストは等倍近くで表示される適度な面積のあるところが良い。HP バーにはカラー設定内のスタティックウィンドウフレームの透明度が反映されるので、テストとして有用な結果を得るにはこれを 255 にしておく。
等倍でスキンが表示されるパーツであれば、4 倍で作成するスキンでは 4ドット x 4ドット が MoE 上の 1 ドットとなる。この 4x4 を 1 ユニットとして、 1 ユニット中の描画色が占める数を 1 から 16 まで変化させる。確認がしやすいよう、同じドット数のものを 3 ユニットずつ並べてある。
左上から右下へドットを詰めるように埋めたため人間の見るディザリングパターンとしてはいささか不適切ではあるが、MoE に扱わせる際には 4x4 の 1 ユニット中の割合だけが全てなので見た目のいびつさは結果に影響しない。（実際のスキン作成で手作業でドットを打つ場合、視覚的にも適切なパターンにしておいたほうが目に優しいが、数を数えてやる場合にはクソ雑すし詰めパターンの方が楽）当然、ユニットの切れ目がどこなのかが重要なので、実作業では 4x4 の市松模様など確認用レイヤーを作っておくとよい。
これを MoE 内で表示して、実際の表示色をサンプリングした。白背景はモラの家の中の天井照明付近、黒背景は /viewport で開けたスペースを使った。
白背景において徐々に描画色の彩度が失われていることから、透明ピクセル（R0 G255 B0）は R0 G0 B0 と扱われていることが予想できる。想定される式は
描画色の割合 ^ 2 * 描画色 + (1 - 描画色の割合) * 背景色確認。
原理上、徐々に黒ずむという難点があるが、描画色か背景色が黒に近いなら黒ずみは無視できる。特に文字のアンチエイリアシングでは黒ずみが発生しても視認性を上げるための縁取りをつけた印象となり、殆どの場合において工夫を必要とせず利用できる。透明度が高くなる箇所や明度の落ち込みには、前もって補正しておくという手段も取れる。原理を理解して適切に扱えば強力な表現手段となる。
実際に作る
不透明なパーツ
普通の不透明なパーツはフツーに縮小されるだけなので、何も考えずそのまま描く。スキン作成の仕上げに自前でキャンバスのサイズを 512x512 に縮小した時と同じということだ。使用する縮小アルゴリズムの差はあるが、通常なら優秀な Lanczos もドット絵に使うと余計な影響が出てしまうのだから大抵の場合は MoE の縮小アルゴリズムで十分である。
どうしても Lanczos アルゴリズムなどでシャープに縮小したい場合は前もって縮小して 4x4 ユニットに合わせて配置するという手段も取れる。これについては後述する。
透明ピクセルとアンチエリアシング
透明ピクセル（R0 G255 B0）を塗るときには、アンチエイリアシングをせず必ず R0 G255 B0 かそうでないかになるよう扱う。つまり
こうしなければならず
こうしてしまうと、正確に R0 G255 B0 なピクセル以外は透明とみなされないのだから、MoE 内で薄黄緑の縁がついてしまう。公式スキンを 4 倍にするときに「ピクセルの補完方法に最近傍点（ニアレストネイバー）を選択すること」と指定したのはこのためだ。公式スキンをピクセルパーフェクトに持ち越したいからでもあるが。
正しい例を 4x4 のユニットで考えてみよう。
描画色と透明色を双方含むユニットは、ユニット内を平均して不透明ではないピクセルになることを思い出してほしい。4 倍画像でガタガタに見えていても、最終的に透明度によってアンチエイリアシングされる。
検証の通りであるなら、この < 記号は白で塗られているのでアンチエイリアシングされたピクセルは微妙にグレーかかってゆく。
流石に明るい場所を背景にするとグレーが目立つが、ぶっちゃけそこまで明るい場所のほうが少ない。ありふれた明度の背景ではむしろ視認性が良くなる。
ドットの打ち方のコツ
人間の目は本来対称なものが崩れている箇所を目ざとく見つけてしまう。MoE のスキンでありがちなのが、このメニューの送り戻しボタンのように縮小拡大がかかる箇所で文字が崩れて不自然さを感じるというケースだ。
これを防ぐには、最終的なピクセル――つまり 4x4 のユニット単位で左右や上下の対称をとると良い。例にあげた記号では上下方向においてユニット単位で対称になっている。→ SS 撮った時点ではなってませんでした。このあとこのパーツは差し替えたので説明用の SS も撮れないし
ドット絵に慣れた人なら < 記号の左側の挟まれた位置のユニットに一個だけある透明色が気になるかもしれない。普通のドット絵なら手を入れるこのような点も、4 倍作成法ではユニット内の割合が全てで位置は関係ないのだから放置でよい。むしろ、このようなドットをそのまま残しておけば、消してしまった時よりも適切な透明度を持ち越せる。端的な話、
このようにドットが飛び散ってもユニット単位で割合が同じであれば同じ結果になる。この点を踏まえておくと色々と手抜きができる。言い換えれば、ドット絵的なテクニックはユニット単位で使うということだ。透明度の変化が 16 段階で足りない場合はユニット単位でディザリングを行う。
最初の例が MoE 内で表示されると、こうなる。
ちなみに、ショートカットのアイコンを設定していない時に出る数字やメニューバーの折りたたみボタンなんかは最近傍点での上下左右両方面の縮小拡大っぽく不規則にドットが伸ばされたりしてスキン作成者泣かせである。
ドット絵をピクセルパーフェクトにする
公式スキンのサイズを 4 倍にするときにピクセルの補完方法に最近傍点（ニアレストネイバー）を使ったなら、MoE 内での見た目は画像を拡大する前としたあとで全く変わっていないはずだ。もともと等倍で書かれているドット絵も、4x4 のユニットに合わせることで劣化を起こさずそのまま行き来できる。
また、シャープさのために Lanczos アルゴリズムなどを使って縮小したい場合も縮小後のものをユニットに合わせて貼り込めばよい。
他の部分は手抜きでそのまま塗った。潰れるけど楽しいから描いた。
汎用性のあるクソ雑な縁の処理
半透明ピクセルの計算上のグレーかぶり問題も、縁が黒であれば関係なくなる。黒に近い背景色の上に配置するパーツであればなおのことだ。ウィンドウ部分が黒系のスキンであれば多くのパーツの縁を機械的に処理できる。
グレーかぶりの性質上、ポップで明るい色調のデザインでは 4 倍作成法の恩恵を得ることが難しい。普通に等倍でドット絵を極めるか、4 倍作成法の恩恵を得られる部分とドット絵部分を別に作成。最後にドット絵側を拡大、4x4 ユニットに合わせて張るのが妥当だろうか。
完全に半透明なウィンドウヘッダを作る
等倍でのスキン作成では、フレームが一体化した半透明なウィンドウを作るのは困難だ。透明度がグラデーションしているヘッダ部分にフレームの透明度を合わせられないからだ。フレームの透明度はカラー設定で変えられるが一律に変更されてしまう。
このため、これまでの透明系のスキンでは割り切ってスキンのウィンドウフレーム部分をすべて削除しているケースが多い。これには、最小化したウィンドウの形が変にならない、吹き出しのまわりにフレームのゴーストのようなものが出ないといった利点もある。
合わせられないなら表示しなければいい。ヘッダとウィンドウの間に隙間はあくけど。
それでも人は透明を求めるんだ。
そこで、4 倍作成法であれば透明度情報をもたせられるのだから、ヘッダのグラデーションと一体化したフレームをつけられる。このためのコツを以下にまとめておく。
フレームの両端を除いたほとんどの部分は、等倍スキン換算でわずか 10 ピクセルの範囲を横に引き伸ばして表示している。なら透明度は 10 段階使えるのかというとそうはならない。特に透明系スキンでヘッダの透明度を上げた場合、端から端までの透明度の変化はゆるやかで、4 倍作成法による 16 段階の透明度でも実際に一致するのはそのうちの 3～4 段階である。引き伸ばしがあるためディザリングも難しい。グラデーションの切れ目はどうしてもできるので妥協が必要。
これをなんとかしようとすると下側の枠線も必要になり、他がうまくいかなくなる。
同じグレーでも、白背景の上の不透明なグレーと、半透明な黒は結果的に同じに見えても異なる情報を持っている。
ヘッダ部分と合わせるにはこれを考慮して透明度も合わせる必要がある。透明度が異なると背景色次第で見え方が変わってしまう。真っ白な背景が得られる場所で色をスポイトすれば、ヘッダのグラデーションの特定位置の透明度をおおよそ知ることができる。
n 倍作成法の場合、補完の際に透明ピクセルを R0 G0 B0 として計算する仕組み上、同じ描画色ならば透明度が高くなるほど色は黒くなる。これまでにも触れたこの問題は、文字では逆に活かしたり雑な調整でごまかすことが可能であったが、ヘッダと全く同じに一致させたい場合そうはいかない。単にヘッダと同じ色、同じ透明度でフレームを作ってもズレが生じてしまうからだ。
// 一般的なブレンド式
// MoE 側が透明度をコントロールしているヘッダ部分は
// このようにして背景にブレンドされているはず
描画色の割合 * 描画色 + (1 - 描画色の割合) * 背景色
// n 倍作成法によるスキンのブレンド式
// 透明ドットが 0, 0, 0 として計算されるため透明になるほど黒くなる
描画色の割合 ^ 2 * 描画色 + (1 - 描画色の割合) * 背景色
// なので同じ透明度で本来の式の部分とスキン由来の部分の色を一致させるには
前もって明るくしておく色 = 描画色 / 描画色の割合逆算して透明度が高くなるところは明るい色で塗っておけばよいはずだ。しかし、ほぼ黒に近い色であっても描画色が 1 ユニットに含まれる割合が 2/16 あたりより小さくなると 255 255 255 より明るい色は使えないために無理が生じるし、明るい色であれば再現可能なのはわずか 13/16 ~ 15/16 の三段階くらいになる。この都合もあってこの手法はダークカラーのスキン向きといえる。
例えば、当該スキンで使っているヘッダ色 R30 G30 B35 であれば、前もって明るくしておく色は以下のようになる。
明るい色であればあるほど、再現不可能な範囲は増える=グレー被りする。
このような手法で特定のカラーに合わせて作成する都合、カラー設定からウィンドウフレームの色や透明度を変えると無意味になってしまう。自由にヘッダの色を変えたいなら、隙間ができることは妥協してスキンのウィンドウフレーム部分をすべて削除してしまうのがよいだろう。
ルーレットの STOP ボタン
合わせが難しい箇所と思われるため、テンプレートを添付しておく。
赤い部分が表示可能範囲。右の四色部分を目安にすれば既存スキンと位置合わせが可能。
応用
もうちょっと調整の余地はあるが……
方位磁針の回転、最近傍点なのですごく汚くなりがちなのだが、半透明使って見せ方次第ではこのくらいきれいに出来るよ的な。最近傍点サンプリングによるちらつきも瞬きのように見える。
ぶっちゃけダークカラーのスキン向きのテクニックって時点であまり需要はないと思っているが（なんかかわいいスキンの人が多いイメージ）このテクニックを駆使したスキンを未だ見たことがないので広めたく。
希望がありそうなら完成次第配布します。
おまけ
#MasterOfEpic 用に M+ をベースに調整したフォントを公開していますhttps://t.co/vZu5P8UxM2
— elz (@6elz) November 22, 2023
ダメ・ディレイ・技名を見やすく、サイズを大きくしなくてよいためアイコンでうるさくなりにくい
下段は比較用です。比較するなら BIZ UD あたりな気がしますが、その辺使ってる人なら自分で調整してそう pic.twitter.com/hU62c1gSks
MoE 向けに微調整したフォントも配布しています。
この記事が気に入ったらサポートをしてみませんか？