トップページへ戻る


メニュー画面のデザイン
 
「それじゃ、メインの練習用スクリプトを直してごらん」

「んーと……」

[title name="タイトル"]\
[wc time=20]\
*start|スタート
[playbgm storage="title"]\
[layopt layer=message0 page=fore visible=false]\
[image storage="title" page=back layer=base]\
[backlay layer=message0]\
[trans time=2000 rule="trans1" vague=100]\
[wt]\
[ct]\
[backlay]\
[layopt layer=message0 page=back visible=true]\
[trans time=2000 rule="trans1" vague=100]\
[wt]\
[locate y=300]\
[style align=center]\
[link target=*opening]ゲームをはじめる[endlink]
[link target=*dataload]セーブデータをロードする[endlink]
[link target=*option]オプション[endlink]
[link target=*end]ゲームを終了する[endlink]
[style align=default]\
[s]
;--------------------------------------------
*opening
[ct]\
はじまりはじまり−。
[s]
;--------------------------------------------
*dataload
[ct]\
でーたをろーどすんだもん。
[s]
;--------------------------------------------
*option
[ct]\
おぷしょんぺーじだもん。
[s]
;--------------------------------------------
*end
[ct]\
おしまい。
[s]

「これを実行してみると……あれー? 変じゃんよもー」

「何がどのように変だ?」

「みっつあんもん。いっこ目は、選択肢なのに、一瞬でぱっと表示されないこと。もういっこは、選択肢の上にマウスを置いたときの四角の形がバラバラで揃ってないこと。もういっこは、改ページ待ちの三角が出ちゃってること」

「それじゃ、まずは一つ目の、選択肢の表示方法から直していこう」

「どうやんの?」

「KAGのコンフィギュレーションファイルには、文字の表示速度の規定値が書かれている。通常はそれに従ってどの文字も表示される」

「選択肢がそれじゃかっこ悪いもん!」

「そう。そこで [delay] タグを使う。このタグは文字の表示速度を調整することができるんだ。書式は簡単、[delay speed=***] で書く」

「こめこめには何がはいんのかなー?」

「三つある。nowait、user、そしてミリ秒単位の数値だ」

「どれがどーゆーやつなのかなー?」

「nowait は、文字の通り、ウエイトを掛けずに一瞬で表示させる。user は、ゲームプレイ時に吉里吉里のコマンドメニューについている『速い・標準・遅い・ノーウェイト』のスイッチに対応する。最後に、数値を入れた場合はその速度で文字が表示されるようになる」

「それじゃー、ここでは nowait を使えばいいんだねー」

「注意しろよ。それを使ってノーウェイト指定をしたら、ノーウェイトにしたい文字が表示された後で必ず user に戻しておかないとだめだ」

「わかってんもん」

[title name="タイトル"]\
[wc time=20]\
*start|スタート
[playbgm storage="title"]\
[layopt layer=message0 page=fore visible=false]\
[image storage="title" page=back layer=base]\
[backlay layer=message0]\
[trans time=2000 rule="trans1" vague=100]\
[wt]\
[ct]\
[backlay]\
[layopt layer=message0 page=back visible=true]\
[trans time=2000 rule="trans1" vague=100]\
[wt]\
[locate y=300]\
[delay speed=nowait]\
[style align=center]\
[link target=*opening]ゲームをはじめる[endlink]
[link target=*dataload]セーブデータをロードする[endlink]
[link target=*option]オプション[endlink]
[link target=*end]ゲームを終了する[endlink]
[style align=default]\
[delay speed=user]\
[s]
;--------------------------------------------
*opening
[ct]\
はじまりはじまり−。
[s]
;--------------------------------------------
*dataload
[ct]\
でーたをろーどすんだもん。
[s]
;--------------------------------------------
*option
[ct]\
おぷしょんぺーじだもん。
[s]
;--------------------------------------------
*end
[ct]\
おしまい。
[s]

「これで実行してみようかなー。あ、選択肢がいっぺんに出てきた」

「第一の問題はクリアだ」

「んじゃ、ふたつ目。選んだときに出てくる四角がかっこ悪いのは何でかなー?」

「特に指定をしない場合、KAGの選択領域は文字に対して表示される。上の写真の場合、それぞれのメニューの文字数は異なるから、四角の大きさはバラバラになる」

「メニューの四角は同じ大きさのほーがかっこいーのになー」

「文字の両側に全角と半角のスペースを入れて文字数を揃えればいい。ただしこの方法は、デフォルトフォントがプロポーショナルではなく等幅フォントの場合にしか使えないけどね」

「んーと……」

[title name="タイトル"]\
[wc time=20]\
*start|スタート
[playbgm storage="title"]\
[layopt layer=message0 page=fore visible=false]\
[image storage="title" page=back layer=base]\
[backlay layer=message0]\
[trans time=2000 rule="trans1" vague=100]\
[wt]\
[ct]\
[backlay]\
[layopt layer=message0 page=back visible=true]\
[trans time=2000 rule="trans1" vague=100]\
[wt]\
[locate y=300]\
[delay speed=nowait]\
[style align=center]\
[link target=*opening]  ゲームをはじめる  [endlink]
[link target=*dataload]セーブデータをロードする[endlink]
[link target=*option]    オプション    [endlink]
[link target=*end]  ゲームを終了する  [endlink]
[style align=default]\
[delay speed=user]\
[s]
;--------------------------------------------
*opening
[ct]\
はじまりはじまり−。
[s]
;--------------------------------------------
*dataload
[ct]\
でーたをろーどすんだもん。
[s]
;--------------------------------------------
*option
[ct]\
おぷしょんぺーじだもん。
[s]
;--------------------------------------------
*end
[ct]\
おしまい。
[s]

「それいけー! ほらー! ぴったりぢゃんよもー! すきゃんてぃったら、てんさーい!」

「これで第二の問題もクリアだ」

「それじゃー、みっつ目だもん。三角が出ちゃうのは何でかなー?」

「文字レイヤーの最下端までテキストが達しているからだ。こういう場合は文字レイヤーを伸ばしてやるか、テキストの位置をずらしてやるといい」

「テキストをずらすのはやだから、文字レイヤーを伸ばしちゃうもん」

「そういう場合は [position] タグを使う。このタグは、文字レイヤーの位置や大きさ、透明度の設定や、黒い四角の代わりに他の画像をフレームとして指定するためのタグだ」

「なんかわかりにくいもん」

「まあ、普段あまり使わないタグだと思うし、ここでは文字レイヤーを縦に伸ばす方法だけ知っておけばいいかもね。書式は [position layer=message0 height=***] でOKだ。*** にはピクセル単位の高さが入る」

「んーと、てきとーでいーのかなー?」

「だめだめ。まずはKAGのコンフィギュレーションファイルを確認して、デフォルトの高さがいくつになっているかを知っておかないとだめだ」

「どこにあんのよもー!」

「config.tjs のメッセージレイヤの設定の部分だ」

// 初期位置
// これらは、position タグのそれぞれの属性に対応します。
left=16; // 左端位置 // 1.0
top=16; // 上端位置 // 1.0
width=608; // 幅 // 1.0
height=448; // 高さ // 1.0

「448だって」

「それじゃ、480にして画面いっぱいに伸ばしてみよう。コンフィギュレーションファイルは閉じて、スクリプトの方に [position] タグを書いてごらん」

[title name="タイトル"]\
[wc time=20]\
*start|スタート
[playbgm storage="title"]\
[layopt layer=message0 page=fore visible=false]\
[image storage="title" page=back layer=base]\
[backlay layer=message0]\
[trans time=2000 rule="trans1" vague=100]\
[wt]\
[ct]\
[backlay]\
[layopt layer=message0 page=back visible=true]\
[trans time=2000 rule="trans1" vague=100]\
[wt]\
[position height=480]\
[locate y=300]\
[delay speed=nowait]\
[style align=center]\
[link target=*opening]  ゲームをはじめる  [endlink]
[link target=*dataload]セーブデータをロードする[endlink]
[link target=*option]    オプション    [endlink]
[link target=*end]  ゲームを終了する  [endlink]
[style align=default]\
[delay speed=user]\
[s]
;--------------------------------------------
*opening
[ct]\
[position height=448]\
はじまりはじまり−。
[s]
;--------------------------------------------
*dataload
[ct]\
[position height=448]\
でーたをろーどすんだもん。
[s]
;--------------------------------------------
*option
[ct]\
[position height=448]\
おぷしょんぺーじだもん。
[s]
;--------------------------------------------
*end
[ct]\
[position height=448]\
おしまい。
[s]

「ちゃーんと、次のページに行くときに文字レイヤーをもとの高さに直してんもん。えらいでしょもー」

「うん。えらいえらい。それじゃ実行してごらん」

「よーし! 三角が消えたもんねー。これでおっけーだもん!」

「ところで、W.Dee氏から手紙が届いてる」

「なんだって?」

選択肢の表示画面に改ページ待ちの記号が出てしまうのは、
文字列が画面の下端まで行ってしまっているのが原因と見られます。

[position]タグでメッセージレイヤを下方に伸張する方法もありますが
[endlink]のあとで改行してしまっているので、最後の[endlink]のあとに
\を書けばOKです。

;--------------------------------------------
(前略)
[link target=*opening]  ゲームをはじめる  [endlink]
[link target=*dataload]セーブデータをロードする[endlink]
[link target=*option]    オプション    [endlink]
[link target=*end]  ゲームを終了する  [endlink]\
(後略)
;--------------------------------------------

「んきゃー! こっちのがぜんっぜんっ簡単ぢゃないのよもー!」

「そうだね」

「あんたってばなんでわざとむづかしーやりかたをさせんのよもー!」

「で、でも、そのおかげで [position] タグを覚えただろ?」

「どーなるかわかってんでしょーねー!」

「や、や、やめ……」

SE:がりがりがりがり!

……(死)

「スクリプトを直すもん! [position] を全部消してを入れんもん!」

[title name="タイトル"]\
[wc time=20]\
*start|スタート
[playbgm storage="title"]\
[layopt layer=message0 page=fore visible=false]\
[image storage="title" page=back layer=base]\
[backlay layer=message0]\
[trans time=2000 rule="trans1" vague=100]\
[wt]\
[ct]\
[backlay]\
[layopt layer=message0 page=back visible=true]\
[trans time=2000 rule="trans1" vague=100]\
[wt]\
[locate y=300]\
[delay speed=nowait]\
[style align=center]\
[link target=*opening]  ゲームをはじめる  [endlink]
[link target=*dataload]セーブデータをロードする[endlink]
[link target=*option]    オプション    [endlink]
[link target=*end]  ゲームを終了する  [endlink]\
[style align=default]\
[delay speed=user]\
[s]
;--------------------------------------------
*opening
[ct]\
はじまりはじまり−。
[s]
;--------------------------------------------
*dataload
[ct]\
でーたをろーどすんだもん。
[s]
;--------------------------------------------
*option
[ct]\
おぷしょんぺーじだもん。
[s]
;--------------------------------------------
*end
[ct]\
おしまい。
[s]

「これでおっけーだもんねー!」

練習日記 3日目 まとめへ


トップページへ戻る