RPGツクールMZのウィンドウスキンについて【記：あおたく】

こんばんは、あおたくです。

引き続き戦闘システムを組んでいます。この一週間は重い腰を上げてウインドウ周りをいじっていました。

まず、そもそも RPGツクールMZ のウィンドウスキンがどういう規格になっているかということなんですが、これは基本的に RPGツクールVX のシステム画像の規格を踏襲しています。

RPGツクールVX 素材規格

Ａ
ウィンドウの背景１。64×64のパターンが、実際のウィンドウに合わせて拡大縮小して描画されます。厳密には、ウィンドウの周囲を２ドットずつ小さくしたサイズになります。これは角の丸いウィンドウを自然に見せるための仕様です。

Ｂ
ウィンドウの背景２。64×64のパターンが、背景１の上に重なるようにタイリング状に描画されます。

Ｃ
ウィンドウの枠および矢印。四隅の16×16はそのまま描画され、残りの枠（辺の部分）はウィンドウに合わせて16ドットの太さでタイリング状に描画されます。矢印は、ウィンドウの内容をスクロールできる場合の目印として使用します。

Ｄ
コマンドカーソル。ウィンドウ内で選択されている項目を表わすために使用します。周囲の 2 ドットは縦横のみに拡大縮小され、残りはカーソルの大きさに合わせて平面的に拡大縮小して描画されます。

Ｅ
ポーズサイン。メッセージウィンドウのボタン入力待ち状態を表わすために使用します。16×16のパターン４種でアニメーションします。

Ｆ
イベントコマンド［文章の表示］の制御文字で使用できる文字色です。８×８の画像を横方向に８枚（色）並べたものを縦方向に４個並べます。

RPGツクールMV 以降での変更点は、解像度が 1.5 倍になったことと、ウィンドウ枠の辺部分がタイリングではなく拡大縮小で表示されるようになったことの二点です。解像度のほうは単純に1.5倍して読み替えれば、ツクールVX の規格のとおりの理解で問題ないと思います。

たとえばこういう画像を用意して実際のゲーム画面を見てみると、

こうなります。確かにタイリングでなく拡大縮小になっていますね。

ところで、ガストロの戦闘画面イメージはこんな感じです。

この画面にするためには、

• 背景画像は繰り返しではなく、ウィンドウ枠やカーソルのように四隅固定、辺と中心を拡大縮小表示が望ましい
• ウィンドウ枠や背景にはグラデーションを使わないため、拡大縮小部分は極論1×1pxでも足りる
• 区切り線や装飾枠など追加の素材が必要
• マージン・パディングがデフォルトのウィンドウと異なる

といった点を改修していく必要があります。

追加の素材を収めようにも、システム画像に余分に使える領域はほとんどありません。スクロール表示用の矢印のところにちょっとだけ未使用領域がありますが、これだけでは足りません。
たとえばシステム画像を大きくしたり、別途画像を読み込んでもいいんですが、このシステム画像にはやや冗長な部分があるので、切り詰めればもう少し余分に使える領域を確保できそうです。

調整した画像がこれです。

拡大縮小して表示する部分は単色で 12px あればよいので 12px に切り詰めています。これでウィンドウ枠を二つ埋められるようになりました。そのかわりウィンドウ枠の内側にスクロール矢印を並べられなくなったので、他の隙間に移動しています。
ここはちょっと直感的ではないですが、元のコードでも座標を指定するのに基準座標にオフセットを加えるような処理になっていて、そこから処理が大きく変わるようなものではないかなと思います。

システム画像をパーツに分解してスプライトとして保持する処理は、rmmz_core.js の
Window.prototype._refreshBack、Window.prototype._refreshFrame、Window.prototype._refreshCursor あたりに書かれています。ここの処理を書き換えるプラグインを書けば、上記規格のシステム画像を元にウィンドウの表示ができるようになります。

ところで、システム画像の色の部分に数字が振られていても文字色に数字部分が影響していない理由ですが、実は文字色は各色部分の中心1pxしか読み取っていません。なので色部分は実はこんなに大きくなくてよくて、1色1px で充分です。そこまでやればもっとコンパクトにできますが、今回はまだ必要ではないのでそこまではしていません。