こがしぱんです。
前回は、「文字を表示する」をやってみました。
今回は、「文字を表示する_その2」ということで、縦書きの表示方法やフレーム画像を利用した表示方法をやっていきます！
まずは、縦書きで表示する方法について実践！
まず、「data」フォルダの「system」を開く。
「Config.tjs」をエディタで開く。
いっぱい何か書いてある！！
公式によると、Config.tjsに↓の記述を追記しないといけない(↓)みたいですけど、どこに記述すればいいんだ...。
下にスクロールしてみると「//---------○○の設定」みたいに項目が分かれているので、とりあえず、メッセージレイヤの設定を探して記述したいと思います。
・
・
・
メッセージレイヤの設定あった！
どこに記述しよう...。
・
・
・
記述場所を求めて下にスクロールしていたら、なんと既に記述してありました...！
縦書きの設定はされているみたいなので、次はスクリプトの入力です。
スクリプト例は↓になります。(公式より引用)
前回のスクリプトを全消しして、コピペしました。
保存して、実行！
・
・
・
縦書きになりましたー！！
今回使用した[position]タグですが、メッセージウィンドウに対する様々な属性を指定することができるとのこと。
例えば、↓の様な感じ。(公式より引用)
今回の様な縦書き表示の場合だと、「vertical」が「縦書きにするかどうか」
「true」を入れることで「はい」つまり「縦書きにする」
「false」で「いいえ」つまり「縦書きにしない、横書きにする」
ということになります。
公式からタグ一覧について分かりやすく解説しているページもあります(↓)
次は、アドベンチャー形式で表示するです！
↓の様なテキストが常に下で表示されている形式になります。ノベルゲームでよく見る！
アドベンチャー形式で表示するためには、メッセージエリアの高さと横幅を指定する必要があります。
さっそく、実践！
以下スクリプト(公式より引用)をエディタにコピペ。
保存して、実行！
・
・
・
おおおー！！下に表示されてる！
heightがメッセージウィンドウの高さを指定、topがメッセージウィンドウの上端位置を指定します。
次は、メッセージ枠に画像を利用するです。
好きなフレーム画像をメッセージエリアに合わせて使用する方法です。
それでは、公式に沿ってやっていきます！
まず、フレーム画像を準備。
今回、こちらからお借りしました。
フレーム画像は、dataの「image」フォルダの中に保存。
次に以下スクリプト(公式より引用)をエディタにコピペ。(右端が若干切れてる！)
今回、コピペしたスクリプトの画像ファイル名と先ほど保存したファイル名が違いますので、保存したファイル名に合わせます。
ファイル名が「box_blue_name.png」なので、
「"frame.png"」→「"box_blue_name.png"」へ変更。
保存して、実行！
・
・
・
メッセージがめっちゃはみ出てる！！
位置調整しなくては...。
まずは、メッセージウィンドウの調整から。
公式によると、下記注意点(↓)の記載がありましたので、
画像サイズと同じにします。
widthがメッセージウィンドウの横幅、heightがメッセージウィンドウの高さを指定するので、ダウンロードした画像の横幅775と高さ183に合わせます。
次に、topがメッセージウィンドウの上端位置、leftがメッセージウィンドウの左端位置を指定するので、
とりあえず、200と200にしてみました。
保存、実行！
・
・
・
めっちゃ上に行くやん！！
topは数が小さくなると上になって、leftは数が大きくなると右寄りになるってこと...！？
上記を踏まえて位置を微調整して...、
いい感じになりましたね！
数値は↓になります。
今のままだと、メッセージがフレーム画像からはみ出ていますので、フレーム画像とメッセージが表示される隙間を調整します。
margint→メッセージウィンドウの上余白を指定。
marginl→メッセージウィンドウの左余白を指定。
marginr→メッセージウィンドウの右余白を指定。
marginb→メッセージウィンドウの下余白を指定になります。
それでは、文字を上につめて、少し右寄りにしていきます。
・
・
・
こんな感じになりました！(↓)
数値は↓になります。
margintの上余白を小さくして、marginlの左余白を大きくしました。
これで、メッセージウィンドウとメッセージの調整は完了です。
ということで、今回はここまで！
今回は、文字を表示する_その2をやってみました。
タグを使うことで動きを指定し、数値で細かく位置や幅などを設定できるのでこだわりのゲーム画面が作れそうですね！
次回もティラノスクリプトやっていきます！
