BIT/O

ツクールやゲーム・WEB・デザインなど

ツクールMVで、オリジナルのメッセージウィンドウを作りたい

ツクールMVの国内販売から数ヶ月。日々さまざまなプラグインや素材などの情報が目まぐるしく飛び交う中、限られた時間ながらもゲーム作成に勤しんでおります。

最近は自身のゲーム向けにマップチップを作ることばっかりなのですが、たまには違うことをしてみようと思い、今回の記事に至っています。

今回のテーマは「メッセージウィンドウ」についてです。

オリジナルのメッセージウィンドウを作ってみたい!

ツクールMVでRPGを作成するなら、おそらく一番使用するであろうイベントコマンド「メッセージ > 文章の表示」。

このコマンドで表示される、ウィンドウメッセージの基本のデザインは初期のRPGから受け継がれる、アールのある白枠に黒背景の白抜き文字となっています(MVでは背景が少し透過しています)。

 

f:id:bitorchard:20160228180226g:plain

このウィンドウのデザインを変更するには、プロジェクトフォルダの中にある画像を変更することで調整することが可能です。

場所は、C:\Users\home\Documents\Games\<プロジェクト名>\img\system 内のフォルダ内の「Window.png」というファイルです。

※編集する前にはバックアップ用のコピーをとっておきましょう。

 

f:id:bitorchard:20160228180609p:plain

Window.pngは、初期ではこのような画像ファイルとなっています。

  • 左上がメッセージウィンドウの背景色を付けるエリアで、ウィンドウサイズいっぱいに画像が伸縮します。ただし、ウィンドウの端部分には少しだけ隙間ができます。
  • 左下がメッセージウィンドウの背景パターンを付けるエリアで、ウィンドウサイズ内でX方向・Y方向に繰り返し表示されます。こちらも、ウィンドウの端部分には少しだけ隙間ができます。
  • 右上の枠部分は、メッセージウィンドウのフレーム(端の枠)です。こちらもウィンドウいっぱいに広がりますが、左上・右上・左下・右下 各24px四方は、伸縮せず四隅に固定されます。上下のフレームは縦24pxは固定、横はウィンドウ幅に合わせて伸縮します。左右のフレームは横24pxは固定、縦はウィンドウ幅に合わせて伸縮します
  • 右上の中央部分はスクロール時などに表示される、左右上下の矢印を示すアイコンです。
  • 右下の中のさらに左上にあるやや緑っぽいエリアは、選択ウィンドウでのアクティブな場所を示す箇所の背景です。選択の領域いっぱいに伸縮します。 
  • 右下の中の右上のエリアは、メッセージの進行をユーザに促すアイコンです。実際表示ではこのエリアが4フレームアニメーションで、ウィンドウの下中央部分に表示されます
  • 右下の下の部分は、文字色のカラーパターンのエリアです。

 

これらの仕様を踏まえて、往年の名作RPGのメッセージウィンドウのデザインを再現してみると・・・

 

1. Final Fantasy IX 風のメッセージウィンドウ

f:id:bitorchard:20160228184137g:plain

f:id:bitorchard:20160228184540p:plain

※あくまでFFIX“風”です。

ファイルファンタジーシリーズ第9作目「Final fantasy IX 」のメッセージウィンドウを再現しました。実物は吹き出しですが。

左上・右下の角が削られ背景は石版のようにも見えます。
なお今回は背景の透過を避けるため、準公式プラグインの「YEP_CoreEngine」で「Window Opacity(背景色の透過度)」を透過なし(255)としています。

 

2. STAR OCEAN THE SECOND STORY風のメッセージウィンドウ

f:id:bitorchard:20160228185834p:plain

f:id:bitorchard:20160228190250p:plain

スペースファンタジーRPGスターオーシャンシリーズの第2作目「STAR OCEAN THE SECOND STORY」のメッセージウィンドウを再現しました。

左上のワンポイントデザインと矢印のアニメーションアイコン(実物は右下)が特徴です。

 

3. このすばらしきせかい風のメッセージウィンドウ

f:id:bitorchard:20160228191306p:plain

f:id:bitorchard:20160228191742p:plain

2007年にDS向けに発売されたアクションロールプレイングゲームすばらしきこのせかい」のメッセージウィンドウを再現してみました。・・・が、背景色がはみ出してしまうので、線を太くして無理やり対応したため、再現度低めです。

 

4. いけにえと雪のセツナ

f:id:bitorchard:20160228192244p:plain

f:id:bitorchard:20160228192043p:plain

最近話題のRPG作品「いけにえと雪のセツナ」のメッセージウィンドウの再現です。時間がかかった上に、残念ながらこちらも再現がなかなかうまくいきませんでした。

メッセージウィンドウデザインひとつにしても、色々と考えられることがあるんだなと思い直した今日のこの頃です。

 

ウィンドウデザインについては上記でも紹介した「YEP_CoreEngine」をはじめ、神無月サスケさん/Yoji Ojimaさんの「AltMenuScreen2」「AltMenuScreen3」プラグイン、河原つつみさん(アクマの脳髄)の「メッセージスピードオプション追加」「ウィンドウカラーオプション追加」「ウィンドウ透明度オプション追加」プラグインや、tomoakyさん(ひきも記は閉鎖しました。)の「ウィンドウキャプション」プラグイン、riruさん(ガラス細工の夢幻)の「オートピクチャウィンドウ」「通常ウィンドウを透明に」「タイトルウィンドウカスタマイズ」などなど・・・
探せば続々と出てきますので、ぜひチャレンジをしてみてください。

 

今回使用したプラグイン

プラグインを導入する際は使用上の注意をよく読み、自己責任で使用してください。プラグインの使用よって生じた損害は当方が負うものではありません。

 

このほかにもこんな方法があるよ、という方がいらっしゃれば
コメントいただければと思います。