 |
前回は背景レイヤ関係をやったから、 今回は前景レイヤとメッセージレイヤを作っていくね。 |
 |
今回は前景レイヤとメッセージレイヤって何に使うの？ |
|
んー、前景レイヤはサムネイル画像の表示とロールオーバー用かな。 んで、メッセージレイヤはセーブデータの日付とかの情報を表示するのに使うの。 だから今回は結構レイヤの枚数が多くなっちゃうね。 |
|
ふぅん、そうなんだ。 ちなみにどれくらいレイヤを使うの？ |
|
前景レイヤが２５枚でメッセージレイヤが１３枚だから、全部で３８枚だね。 |
 |
うわっ、ホントに枚数多いね。 |
|
まぁ１ページに１０個セーブデータを表示するし、ページ数も１０ページあるからね。 |
|
え〜っと、じゃあサムネイルとセーブデータの日付を表示するだけでも、 前景レイヤとメッセージレイヤが１０枚ずつ必要ってことなのかな？ |
|
そういうことになるね。 じゃ、コンフィグ画面の時と同じようにレイヤの初期化をするスクリプトを作っていくね。 |
 |
はーい。 |
|
今回は使うレイヤの数が多いから、まず前景レイヤの初期化スクリプトから作ってくね。 |
|
やっぱりレイヤの数が多いからスクリプトも長いねぇ。 |
|
まぁね。じゃ最初から見ていこっか。 |
|
そうだね。 |
|
まず laycount タグで必要な前景レイヤとメッセージレイヤを確保してるわけだけど、 これはコンフィグ画面を作った時とおんなじやり方だからわかるよね？ |
| ※§6.5参照。 | |
|
layers 属性が 25 だから前景レイヤを２５枚にしてて、 messages 属性は &kag.numMessageLayers + 13 だから、 メッセージレイヤを１３枚増やすってことだよね。 |
|
そうそう。 なんでメッセージレイヤは１３枚にするんじゃなくて１３枚「増やす」のか覚えてる？ |
|
えっ？ えーっと…確かメッセージレイヤの内容は tempload タグでデータをロードしても復元されないから、じゃなかったっけ？ |
|
そ。だからセーブ画面を表示する前から使われてたメッセージレイヤの内容を書き換えちゃわないようにするために、
レイヤの数を増やしてるんだったよね。 で、レイヤを確保したら image タグで背景画像、 つまりクリッカブルマップを読み込んで、それから前景レイヤの設定をするわけね。 |
|
0 番 〜 9 番の前景レイヤは layopt タグになってるから、 画像は読み込まないってことだよね？ |
|
0 番 〜 9 番の前景レイヤはサムネイルを表示するために使うからね。 サムネイルは必要になった時点で読み込むようにするから、初期化の段階では画像を読み込まずに位置だけ合わせとくんだ。 |
|
あ、そうなんだ。 |
|
layopt タグを実行した後の 0 番 〜 9 番の前景レイヤの配置はこうなるよ。 例えば１番のサムネイルだと、left と top はそれぞれ 8 と 110 になるってことね。 |
|
えっと、visible は全部 false になってるけど、 visible が false だと「No Data」が表示されるの？ |
|
そうだよ。「No Data」は背景画像に元々描かれてるから、セーブデータが無い時はサムネイルを非表示にして、 「No Data」が見えるようにするの。 |
|
じゃあセーブデータがあれば前景レイヤにサムネイル画像を読み込んで、 セーブデータが無かったら前景レイヤを非表示にして「No Data」を表示するってことになるのかな？ |
|
ん、そうなるね。 じゃ次はサムネイルのロールオーバー用画像の初期化ね。 |
|
save_ro_thumbnail っていうのがサムネイルの上にマウスカーソルが乗った時に表示される画像だよね？ |
|
うん。サムネイルの上にマウスカーソルが乗った時は、この画像を使ってそのサムネイルを枠で囲むようにするの。 枠の内側は透明になってるから、この画像をサムネイルの上に表示すると、サムネイルが枠で囲まれてるように見えるわけね。 |
＜サムネイルのロールオーバー画像(save_ro_thumbnail.png)＞
|
このレイヤの位置ってコンフィグ画面のチェックボックスのロールオーバー処理の時みたいに、 領域アクションの onenter で設定するの？ |
|
そうだよ。ま、その辺はまた後で作っていくつもりだけどね。 次は最新のセーブデータを表す画像を表示するためのレイヤの初期化ね。 使う画像はコレ。 |
＜最新のセーブデータを示す画像(save_new.png)＞
|
この画像を読み込んだレイヤを最新のセーブデータのサムネイルの所に表示するの。 |
|
最新のセーブデータってどうやって調べるの？ |
|
新しくセーブデータを作ったり、セーブデータを上書きしたりする時に、
そのセーブデータの番号をシステム変数に記録しとくの。 そうすればそのシステム変数の値が最新のセーブデータの番号になるからね。 |
|
ふ〜ん、なるほどねぇ。 |
|
ま、これも後でスクリプトを作るときに詳しくやることにするね。 これでサムネイル関係はおしまい。次はページ番号関係ね。 まずは現在選択されているページを示す画像用のレイヤなんだけど、これは初期化の必要はないんだ。 |
|
え、そうなの？ …っていうか、現在選択されているページを示す画像って？ |
|
選択されてるページはこんなふうにオレンジ色で表示されるんだ。 |
＜現在選択されているページの表示（１ページ目選択時）＞
|
この例だと今１ページ目が選択されてるから、 「１」の部分に現在選択されているページを示す画像用のレイヤがあるわけね。 |
|
えっと、じゃあ現在選択されているページを示す画像っていうのは１から１０まであるってこと？ |
|
そうだよ。こんな感じにね。 |
| １ページ目(save_sel_1.png) |  |
| ２ページ目(save_sel_2.png) |  |
| ３ページ目(save_sel_3.png) |  |
| ４ページ目(save_sel_4.png) |  |
| ５ページ目(save_sel_5.png) |  |
| ６ページ目(save_sel_6.png) |  |
| ７ページ目(save_sel_7.png) |  |
| ８ページ目(save_sel_8.png) |  |
| ９ページ目(save_sel_9.png) |  |
| １０ページ目(save_sel_10.png) |  |
|
で、ページ番号の部分がクリックされたら、レイヤにそのページ番号の画像を読み込んで表示するの。 だからこのレイヤに初期化は必要ないんだ。 |
|
最初から画像を読み込んどくんじゃなくて、クリックされたら読み込むようにするの？ |
|
別に最初から画像を読み込んでてもいいんだけど、それだとページ数の分だけレイヤが必要になるからね。 |
|
でもロールオーバー用のレイヤはページ数の分だけ作って、 最初からそれぞれのページ番号の画像を読み込んどくんでしょ？ |
|
普通はロールオーバー処理の方が選択されてるページ番号の切り替え処理より頻繁に発生するからそうしてるんだけど、 その辺をどう設計するかは人それぞれかな。 |
|
ふぅん、そうなんだ。 |
|
じゃ次はページ番号のロールオーバー用レイヤの初期化ね。 まずマウスカーソルがページ番号の上に乗った時に表示する画像はコレ。 |
＜マウスカーソルがページ番号の上に乗った時に表示する画像＞
| １ページ目(save_ro_1.png) |  |
| ２ページ目(save_ro_2.png) |  |
| ３ページ目(save_ro_3.png) |  |
| ４ページ目(save_ro_4.png) |  |
| ５ページ目(save_ro_5.png) |  |
| ６ページ目(save_ro_6.png) |  |
| ７ページ目(save_ro_7.png) |  |
| ８ページ目(save_ro_8.png) |  |
| ９ページ目(save_ro_9.png) |  |
| １０ページ目(save_ro_10.png) |  |
|
選択されてるページの画像と似てるけど、数字の色が違ってるね。 |
|
違う色にしとけば選択されてるページとマウスカーソルが乗ってるページの区別がつくからね。 ロールオーバー用のレイヤは位置が決まってるから、 left と top は初期化の時にそれぞれこう設定してるよ。 |
＜ページ番号のロールオーバー用(13 番 〜 22 番)の前景レイヤの配置＞
|
赤い枠で囲まれてる部分が前景レイヤの領域で、 座標はそれぞれのレイヤの左上の点の left と top ね。 |
|
ページ番号のレイヤって領域アクションの onenter で visible を切り替えるんだよね？ |
|
そうだよ。 じゃあ最後は「Load」と「Close」の初期化だね。 ロールオーバー用の画像はそれぞれこんな感じ。 |
＜「Load」のロールオーバー用画像(save_ro_switch.png)＞
＜「Close」のロールオーバー用画像(save_ro_close.png)＞
|
この２つも位置が決まってるから、最初に位置を指定しといて、 ロールオーバー処理の時に onenter で visible を切り替えるんだよね？ |
|
そ。だからその辺はページ番号のレイヤと基本的に同じだね。 さて、これで前景レイヤの初期化処理は終わりだから、次はメッセージレイヤの初期化処理ね。 |
|
わ、これも長い… |
|
見た目は長いけど、ほとんどおんなじ設定を繰り返してるだけだから。 |
|
うーん、そう言われればどのメッセージレイヤも current タグと position タグと deffont タグを実行してるみたいだね。 |
|
設定してる内容もほぼ同じだしね。 じゃあまずはそれぞれのセーブデータの日時表示用のメッセージレイヤの設定から見ていくね。 |
|
current タグの layer 属性が "&'message' + (kag.numMessageLayers - 13)" とかになってるけど、 これってコンフィグ画面のフォント名を表示してたメッセージレイヤの時みたいに指定してるんだよね？ |
| ※§6.5参照。 | |
|
そうだよ。 |
|
前回はメッセージレイヤを１枚しか使わなかったからまだわかりやすかったけど、 今回はメッセージレイヤの数が多いからなんかややこしいよねぇ。 |
|
まぁね。 じゃあメッセージレイヤの番号をちょっとまとめてみるね。 |
| レイヤ番号 | レイヤの用途 |
|---|---|
| kag.numMessageLayers - 13 | １番のサムネイルのセーブデータの日付表示 |
| kag.numMessageLayers - 12 | ２番のサムネイルのセーブデータの日付表示 |
| kag.numMessageLayers - 11 | ３番のサムネイルのセーブデータの日付表示 |
| kag.numMessageLayers - 10 | ４番のサムネイルのセーブデータの日付表示 |
| kag.numMessageLayers - 9 | ５番のサムネイルのセーブデータの日付表示 |
| kag.numMessageLayers - 8 | ６番のサムネイルのセーブデータの日付表示 |
| kag.numMessageLayers - 7 | ７番のサムネイルのセーブデータの日付表示 |
| kag.numMessageLayers - 6 | ８番のサムネイルのセーブデータの日付表示 |
| kag.numMessageLayers - 5 | ９番のサムネイルのセーブデータの日付表示 |
| kag.numMessageLayers - 4 | １０番のサムネイルのセーブデータの日付表示 |
| kag.numMessageLayers - 3 | セーブデータの番号表示 |
| kag.numMessageLayers - 2 | セーブデータの詳細日時表示 |
| kag.numMessageLayers - 1 | セーブデータの見出し表示 |
|
えっと、例えばセーブ画面を表示する前に使ってたメッセージレイヤが１枚だったら、 kag.numMessageLayers は 14 になるから、 セーブ画面で使うメッセージレイヤは "message1" 〜 "message13" になるってことだよね？ |
|
ん。元々使われてたメッセージレイヤが "message0" で、 １番のサムネイルのセーブデータの日時表示用レイヤが "message1" で、 セーブデータの見出し表示用のレイヤが "message13" になるね。 |
|
あ、そーいえば、最初の１０個のメッセージレイヤをサムネイルの下に表示するのはわかるんだけど、 最後の３つのメッセージレイヤってどう使うの？ |
|
最後の３つのメッセージレイヤは画面の下にセーブデータの情報を表示するために使うの。 こんな感じにね。 |
＜セーブデータの番号・詳細日時・見出し表示用メッセージレイヤ＞
|
あ〜、最後の３つのメッセージレイヤってこれのことだったんだ。 |
|
じゃ、それぞれのセーブデータの日時表示用のメッセージレイヤの設定の話に戻るね。 current タグで操作対象のメッセージレイヤを選択してるとこは解るよね？ |
|
うん、だいじょぶだよ。 |
|
じゃあその次の position タグだけど、 位置とサイズ以外はコンフィグ画面のフォント名を表示するメッセージレイヤと同じ設定になってるよ。 |
| ※§6.5参照。 | |
|
opacity 属性が 0 で、 marginl と marginr と margint と marginb が全部 0 だから、 透明で上下左右に余白がないメッセージレイヤ、ってことだよね。 |
|
ん、そういうこと。 あと、サイズは全部 120×24 ピクセルで、こんな感じに配置してるよ。 |
＜各セーブデータの日時表示用メッセージレイヤの配置＞
|
で、位置とサイズを設定したら、次は deffont タグでフォント関係の設定ね。 |
|
サイズが 13 ピクセルのＭＳ ゴシックで、色は #804040 だから暗めの赤色だね。 あと、shadow と bold が false だから、 影付き文字とか太字にはしないんだね。 |
|
これでサムネイルの下に表示するメッセージレイヤの設定は OK かな？ |
|
うん、おっけーだよ。 |
|
それじゃ、後は残り３つのメッセージレイヤの設定だね。 …っていっても、設定内容はほとんど変わらないけどね。 |
|
そうだね。 レイヤの位置と大きさと、あとフォントのサイズが違ってるだけだね。 |
|
レイヤの配置はこんな感じね。 |
＜セーブデータの番号・詳細日時・見出し表示用メッセージレイヤの配置＞
|
セーブデータの番号と日時表示はだいじょうぶそうだけど、 セーブデータの見出しは長くすると表示しきれなくなっちゃいそうだね。 |
 |
そーなんだよね。でもレイヤの長さには限りがあるから、
どうしてもある程度の長さまでしか表示できないしね。 まぁ、見出しはあんまり長くしないようにするしかないかな。 |
|
文字をちっちゃくすればもっと表示できるようになりそうだよね？ |
|
まぁ文字が見づらくならない程度にちっちゃくするのはアリかもね。 その辺はセーブデータに付ける見出しの長さに合わせて適当に設定するようにしてね、ってことで。 |
|
うん、わかった。 |
|
さて、これでレイヤの初期化は一通り終わったから、今回はここまでにしとくね。 次回からはクリッカブルマップをクリックした時に実行するスクリプトを作っていくね。 |
|
はーい。 |
|
それじゃ、また次回ね！ |