6.15 ロード画面を作る

今回からロード画面だね。
ロード画面もセーブ画面と同じように作っていこうと思うんだけど、 ロード画面はセーブ画面と共通してる部分が多いから、セーブ画面と違うとこだけ見ていくことにするね。
うん、りょーかい。
じゃまずは背景画像とクリッカブルマップからね。
背景のメイン画像と領域画像はそれぞれこんな感じ。

<メイン画像(load_bg.png)>

<領域画像(load_bg_p.png)>

※それぞれ縮小表示しています。

ロード画面ってクリックできるとこがセーブ画面とおんなじだから、 領域画像もセーブ画面とおんなじになってるのかな?
うん、ロード画面の領域画像はセーブ画面の領域画像と同じ画像だよ。
※セーブ画面の領域画像については §6.8 参照。
ってことは、ロード画面用の領域画像を作らなくても…

[image storage="load_bg" layer=base page=fore mapimage="save_bg_p"]

…って感じで mapimage 属性を指定して領域画像を共有してもいいんだよね?
うん、もちろんそれでも OK だよ。
まぁでも領域画像はそんなにファイルサイズも大きくないし、別々に作った方が多分わかりやすいと思うから、 今回はセーブ画面用とは別に領域画像を用意することにするね。
そっか。うん、わかった。
で、これがそれぞれのパレットインデックスの色とクリックした時の動作ね。

<領域画像の各パレットインデックスの色とクリックした時の動作>
パレットインデックス領域内をクリックした時の動作
0なし(クリックできない領域)
1((現在のページ−1)×10+1)番のデータをロードする
2((現在のページ−1)×10+2)番のデータをロードする
3((現在のページ−1)×10+3)番のデータをロードする
4((現在のページ−1)×10+4)番のデータをロードする
5((現在のページ−1)×10+5)番のデータをロードする
6((現在のページ−1)×10+6)番のデータをロードする
7((現在のページ−1)×10+7)番のデータをロードする
8((現在のページ−1)×10+8)番のデータをロードする
9((現在のページ−1)×10+9)番のデータをロードする
10((現在のページ−1)×10+10)番のデータをロードする
111ページ目を表示する
122ページ目を表示する
133ページ目を表示する
144ページ目を表示する
155ページ目を表示する
166ページ目を表示する
177ページ目を表示する
188ページ目を表示する
199ページ目を表示する
2010ページ目を表示する
21セーブ画面を表示する
22ロード画面を閉じる
23〜255なし(不使用)
※パレットインデックス 23 番 〜 255 番は使用しないので、0 番 〜 22 番と重複しない色であればどんな色でも構いません。

やっぱりセーブ画面の時とほとんどおんなじだね。
まぁ基本的に「セーブ」が「ロード」に変わっただけだね。
じゃ次は領域アクション定義ファイルね。

<領域アクション定義ファイル(load_bg.ma)の中身>

; autodisable を false にすることで、クリッカブルマップをクリックしても、
; クリッカブルマップが無効にならないようにします(何回でもクリックできるようにします)
0: autodisable=false;
; 1番目のサムネイルをクリックした時のアクション
1: storage="load.ks"; target="*thumbnail"; onenter="thumbnail_onenter(1)"; onleave="thumbnail_onleave()"; exp="tf.saveload.thumbnail = 1";
; 2番目のサムネイルをクリックした時のアクション
2: storage="load.ks"; target="*thumbnail"; onenter="thumbnail_onenter(2)"; onleave="thumbnail_onleave()"; exp="tf.saveload.thumbnail = 2";
; 3番目のサムネイルをクリックした時のアクション
3: storage="load.ks"; target="*thumbnail"; onenter="thumbnail_onenter(3)"; onleave="thumbnail_onleave()"; exp="tf.saveload.thumbnail = 3";
; 4番目のサムネイルをクリックした時のアクション
4: storage="load.ks"; target="*thumbnail"; onenter="thumbnail_onenter(4)"; onleave="thumbnail_onleave()"; exp="tf.saveload.thumbnail = 4";
; 5番目のサムネイルをクリックした時のアクション
5: storage="load.ks"; target="*thumbnail"; onenter="thumbnail_onenter(5)"; onleave="thumbnail_onleave()"; exp="tf.saveload.thumbnail = 5";
; 6番目のサムネイルをクリックした時のアクション
6: storage="load.ks"; target="*thumbnail"; onenter="thumbnail_onenter(6)"; onleave="thumbnail_onleave()"; exp="tf.saveload.thumbnail = 6";
; 7番目のサムネイルをクリックした時のアクション
7: storage="load.ks"; target="*thumbnail"; onenter="thumbnail_onenter(7)"; onleave="thumbnail_onleave()"; exp="tf.saveload.thumbnail = 7";
; 8番目のサムネイルをクリックした時のアクション
8: storage="load.ks"; target="*thumbnail"; onenter="thumbnail_onenter(8)"; onleave="thumbnail_onleave()"; exp="tf.saveload.thumbnail = 8";
; 9番目のサムネイルをクリックした時のアクション
9: storage="load.ks"; target="*thumbnail"; onenter="thumbnail_onenter(9)"; onleave="thumbnail_onleave()"; exp="tf.saveload.thumbnail = 9";
; 10番目のサムネイルをクリックした時のアクション
10: storage="load.ks"; target="*thumbnail"; onenter="thumbnail_onenter(10)"; onleave="thumbnail_onleave()"; exp="tf.saveload.thumbnail = 10";
; ページ1をクリックした時のアクション
11: storage="load.ks"; target = "*page"; onenter="kag.fore.layers[13].visible = true"; onleave = "kag.fore.layers[13].visible = false"; exp="sf.saveinfo.page = 1";
; ページ2をクリックした時のアクション
12: storage="load.ks"; target = "*page"; onenter="kag.fore.layers[14].visible = true"; onleave = "kag.fore.layers[14].visible = false"; exp="sf.saveinfo.page = 2";
; ページ3をクリックした時のアクション
13: storage="load.ks"; target = "*page"; onenter="kag.fore.layers[15].visible = true"; onleave = "kag.fore.layers[15].visible = false"; exp="sf.saveinfo.page = 3";
; ページ4をクリックした時のアクション
14: storage="load.ks"; target = "*page"; onenter="kag.fore.layers[16].visible = true"; onleave = "kag.fore.layers[16].visible = false"; exp="sf.saveinfo.page = 4";
; ページ5をクリックした時のアクション
15: storage="load.ks"; target = "*page"; onenter="kag.fore.layers[17].visible = true"; onleave = "kag.fore.layers[17].visible = false"; exp="sf.saveinfo.page = 5";
; ページ6をクリックした時のアクション
16: storage="load.ks"; target = "*page"; onenter="kag.fore.layers[18].visible = true"; onleave = "kag.fore.layers[18].visible = false"; exp="sf.saveinfo.page = 6";
; ページ7をクリックした時のアクション
17: storage="load.ks"; target = "*page"; onenter="kag.fore.layers[19].visible = true"; onleave = "kag.fore.layers[19].visible = false"; exp="sf.saveinfo.page = 7";
; ページ8をクリックした時のアクション
18: storage="load.ks"; target = "*page"; onenter="kag.fore.layers[20].visible = true"; onleave = "kag.fore.layers[20].visible = false"; exp="sf.saveinfo.page = 8";
; ページ9をクリックした時のアクション
19: storage="load.ks"; target = "*page"; onenter="kag.fore.layers[21].visible = true"; onleave = "kag.fore.layers[21].visible = false"; exp="sf.saveinfo.page = 9";
; ページ10をクリックした時のアクション
20: storage="load.ks"; target = "*page"; onenter="kag.fore.layers[22].visible = true"; onleave = "kag.fore.layers[22].visible = false"; exp="sf.saveinfo.page = 10";
; 「Save」をクリックした時のアクション
21: storage = "load.ks"; target = "*save"; onenter = "kag.fore.layers[23].visible = true"; onleave = "kag.fore.layers[23].visible = false";
; 「Close」をクリックした時のアクション
22: storage = "load.ks"; target = "*close"; onenter = "kag.fore.layers[24].visible = true"; onleave = "kag.fore.layers[24].visible = false";

ま、これもセーブ画面の時とほとんど同じだね。
違ってるのは、セーブ画面の時は storage"save.ks" だったけど、 ロード画面だと "load.ks" になってる、ってトコくらいだね。
thumbnail_onenter メソッドthumbnail_onleave メソッドもセーブ画面の時と同じなんでしょ?
ん、おんなじだよ。
あと、21 番の領域アクションの target もセーブ画面の時とはちょっと違うけどね。
あ、ホントだ。
セーブ画面の時はロード画面に切り替えるから "*load" っていうラベルになってたけど、 今回はセーブ画面に切り替えるから "*save" にしてるんだね。
そ。じゃ次はレイヤの初期化スクリプトを見ていくね。

<各レイヤの初期化スクリプト>

; レイヤを必要な数(前景レイヤ×25,メッセージレイヤは13枚追加)確保します
[laycount layers=25 messages="&kag.numMessageLayers + 13"]
; 背景レイヤに画像(クリッカブルマップ)を読み込みます
[image layer=base storage="load_bg" page=fore]
; 前景レイヤの設定をします
; #0: 1番目のサムネイル用画像
[layopt layer=0 page=fore visible=false left=8 top=110]

; 中略(2番目〜10番目のサムネイル用画像の設定はすべてセーブ画面の時と同じです)

; #10: サムネイルのロールオーバー用画像
[image layer=10 storage="load_ro_thumbnail" page=fore visible=false]
; #11: 最新のセーブデータを表す画像
[image layer=11 storage="load_new" page=fore visible=false]
; #12: 現在選択されているページを示す画像(ここでは何もする必要ありません)
; #13: ページ1のロールオーバー用画像
[image layer=13 storage="load_ro_1" page=fore visible=false left=179 top=16]

; 中略(ページ2〜ページ10のロールオーバー用画像の設定は storage 属性を除いてすべてセーブ画面の時と同じです)

; #23:「Save」のロールオーバー用画像
[image layer=23 storage="load_ro_switch" page=fore visible=false left=511 top=15]
; #24:「Close」のロールオーバー用画像
[image layer=24 storage="load_ro_close" page=fore visible=false left=511 top=59]

; メッセージレイヤの設定をします
; セーブデータの日時表示用メッセージレイヤ
; 1番のサムネイル用メッセージレイヤの設定
[current layer="&'message' + (kag.numMessageLayers - 13)"]
[position left=8 top=200 width=120 height=24 frame="" opacity=0 marginl=0 marginr=0 margint=0 marginb=0 visible=true]
[deffont size=13 face="MS ゴシック" color=0x404080 shadow=false bold=false]

; 中略(2番〜10番のサムネイル用メッセージレイヤの設定は color 属性を除いてすべてセーブ画面の時と同じです)

; セーブデータの番号表示用メッセージレイヤ
[current layer="&'message' + (kag.numMessageLayers - 3)"]
[position left=154 top=381 width=56 height=30 frame="" opacity=0 marginl=0 marginr=0 margint=0 marginb=0 visible=true]
[deffont size=24 face="MS ゴシック" color=0x404080 shadow=false bold=false]
; セーブデータの日時詳細表示用メッセージレイヤ
[current layer="&'message' + (kag.numMessageLayers - 2)"]
[position left=292 top=381 width=330 height=30 frame="" opacity=0 marginl=0 marginr=0 margint=0 marginb=0 visible=true]
[deffont size=24 face="MS ゴシック" color=0x404080 shadow=false bold=false]
; セーブデータの見出し表示用メッセージレイヤ
[current layer="&'message' + (kag.numMessageLayers - 1)"]
[position left=154 top=433 width=462 height=30 frame="" opacity=0 marginl=0 marginr=0 margint=0 marginb=0 visible=true]
[deffont size=24 face="MS ゴシック" color=0x404080 shadow=false bold=false]

えっと、これもセーブ画面の時とほとんどおんなじ…なんだよね?
ん、前景レイヤの初期化は読み込む画像がロード画面用の画像に変わってるだけ。
サムネイル用レイヤは画像を読み込まないからセーブ画面の時と全く同じだよ。
じゃあメッセージレイヤも画像を読み込まないからセーブ画面の時と同じなの?
んーん、画面全体の色に合わせてメッセージレイヤに表示する文字の色を変えてるよ。
セーブ画面の時は赤色の文字だったけど、 ロード画面の時は青色の文字にしてるの。
ほんとだ。deffont タグの color 属性の値がセーブ画面の時と違ってるね。
他はセーブ画面の時と同じだよ。
じゃ次はクリッカブルマップをクリックした時に実行するスクリプトを見ていくね。
まずはサムネイルをクリックした時に実行されるスクリプトから。

<サムネイルがクリックされた時に実行されるスクリプト>

*thumbnail
[load place="&(sf.saveinfo.page - 1) * 10 + tf.saveload.thumbnail"]
[s]

これはセーブ画面の時とだいぶ違ってるけど…ずいぶんシンプルなんだね。
セーブの時はセーブした後表示を色々更新しなくちゃいけなかったけど、 ロードの場合はその必要はないからね。
そっか。確かにロードしたらロード画面は消えちゃうから表示を更新する必要ないもんね。
だからロードするだけで OK。
あ、でもセーブデータがあるかどうかチェックしなくていいの?
load タグを実行すると、 place 属性で指定した番号に対応するセーブデータがあるかどうかチェックして、 あればロードするし、なければ何もしないようにしてあるから大丈夫だよ。
そうなんだ。
あ、それと、ロードする時は確認のダイアログボックス出さないの?
ここでは出さないことにしてるけど、もちろん出しても OK だよ。その辺は仕様の問題だからね。
確認のダイアログボックスを表示する場合は、セーブデータの上書き確認の時と同じように askYesNo を使って確認すればいいよ。
そっか、わかった。
んじゃ次はページ番号をクリックした時に実行されるスクリプトね。

<ページ番号をクリックした時に実行されるスクリプト>

*page
; すべての表示を更新します
[call target=*update_all]
[s]

これってセーブ画面の時とおんなじだよね?
ん、セーブ画面の時と同じスクリプトだよ。
*update_all サブルーチンはこう。

<すべての表示を更新するサブルーチン>

*update_all
; サムネイル・セーブデータの作成日時・現在のページ・最新セーブデータの表示をすべて更新します
[call storage="save.ks" target=*update_all_thumbnails]
[call storage="save.ks" target=*update_all_dates]
[call target=*update_page]
[call storage="save.ks" target=*update_new]
[return]

えっと…これって *update_page サブルーチン以外は全部セーブ画面用のサブルーチンを呼び出す、ってことだよね?
そ。つまり、*update_page サブルーチン以外はセーブ画面用のがそのまんま使えるってこと。
へぇ、そうなんだ。
ホントは *update_page サブルーチンもやってることはセーブ画面の時と変わらないんだけど、 このサブルーチンだけレイヤの画像を変更しなくちゃいけないから、こんなふうにロード画面用に作らなくちゃいけないんだ。

<現在選択されているページの表示を更新するサブルーチン>

*update_page
[image layer=12 storage="&'load_sel_' + sf.saveinfo.page" page=fore visible=true left="&179 + (sf.saveinfo.page - 1) % 5 * 60" top="&16 + (sf.saveinfo.page - 1) \ 5 * 44"]
[return]

セーブ画面の時は選択されてるページの画像が "save_sel_1" とかだったけど、 ロード画面だと "load_sel_1" とかだから、storage 属性が違ってるんだね。
ん、だからこのサブルーチンだけはロード画面用に作ってるの。
ちなみに他の属性は全部セーブ画面の時とおんなじだよ。
じゃあ次は「Save」がクリックされた時に実行するスクリプトね。
「Save」をクリックするとセーブ画面に切り替えるんだよね。
セーブ画面で「Load」をクリックした時のサブルーチンもまだ作ってなかったから、ここで一緒に作っちゃうね。
あ、そーいえばそれってロード画面を作る時に作るって言ってたよね。
まず、セーブ画面で「Load」をクリックした時に、ロード画面に切り替えるスクリプトはこう。

<「Load」がクリックされた時に実行されるスクリプト(save.ks 内に記述します)>

*load
[jump storage="load.ks" target=*initialize_from_save]

で、これがロード画面で「Save」をクリックした時に、セーブ画面に切り替えるスクリプト。

<「Save」がクリックされた時に実行されるスクリプト(load.ks 内に記述します)>

*save
[jump storage="save.ks" target=*initialize_from_load]

なんかどっちも単にジャンプしてるだけみたいだね。
セーブ画面を作った時に、初期化のとこで *initialize_from_load ってラベルがあったの覚えてる?
うん、なんか初期化の途中のトコにそんなラベルがあったよね。
§6.14 参照。
ロード画面の「Save」をクリックすると、そのラベルにジャンプするんだ。
あのラベルの後って、レイヤの設定と表示の更新をやってるんだったよね?
そだよ。
それ以外の初期化処理はどっちの画面を作る時も同じだから、 レイヤの設定を変えて表示を更新するだけでロード画面に切り替えられるんだ。
じゃあロード画面の初期化のスクリプトにも、レイヤの設定の前に画面切り替えのための *initialize_from_save ってラベルがあるってことだよね?
ん、そういうこと。
ちなみにこれがロード画面の初期化スクリプトだよ。

<ロード画面の初期化スクリプト>

*initialize
; 右クリックでセーブ画面を閉じられるように右クリックの設定を変更します
[rclick jump=true storage="load.ks" target=*close enabled=true]

; この部分のスクリプト(rclick タグ(↑)と laycount タグ(↓)も)はセーブ画面の初期化スクリプトと同じです。

; レイヤを必要な数(前景レイヤ×25,メッセージレイヤは13個追加)確保します
[laycount layers=25 messages="&kag.numMessageLayers + 13"]

*initialize_from_save
; 背景レイヤに画像(クリッカブルマップ)を読み込みます
[image layer=base storage="load_bg" page=fore]

; 中略(各レイヤの初期化についてはこちらを参照)

; すべての表示を初期化します
[call target=*update_all]
; ユーザの操作を待ちます
[s]

なんか短くない?
省略してる部分が多いからね。
まず最初の *initialize ラベルから laycount タグまではセーブ画面の初期化処理と全く同じ。
で、その後がレイヤの設定をやってる部分だから、画面の切り替えに使う *initialize_from_save ラベルがあるわけね。
あ、そういえばセーブ画面の初期化のスクリプトlaycount タグの後に *initialize_from_load ラベルがあったね。
ん、まぁセーブ画面もロード画面も初期化のスクリプトでやってることは基本的に同じだから、 画面切り替え用のラベルも同じ位置になるよね。
なるほどね。
で、画面切り替え用のラベルの後は、レイヤの設定をやって、表示の更新をやったら初期化は完了だよ。
ロード画面を閉じる処理はどうなるの?
セーブ画面を閉じる時の処理とおんなじだから、 こんなふうにセーブ画面の *close ラベルにジャンプすれば OK。

<ロード画面を閉じるスクリプト>

*close
[jump storage="save.ks" target=*close]

これだけでいーんだ…
ん、これだけで OK だよ。
さて、これでロード画面は完成だね。
え、もう完成なの?
セーブ画面を作るのはすごい長かったのに、ロード画面は今回だけで終わっちゃったね…
ま、それだけロード画面とセーブ画面は構造が似てるってことだね。
サムネイルをクリックした時のスクリプト以外ほとんどセーブ画面のスクリプトを使い回した感じだったよね。
しかもサムネイルをクリックした時のスクリプトも簡単だったし。
そうだね。
まぁカンタンに出来たんだし良かったじゃない?
うん、まーね。
それじゃ今回はこれくらいにしとこっか。
えっ、ロード画面完成したのに実行してみないの?
次回はメッセージレイヤに付けたシステムボタンからセーブ/ロード画面と、 あとコンフィグ画面も表示できるようにするつもりだから、 そんときに実行すればいーかなと思うんだけど?
あ、そうなんだ。
うん、それでおっけーだよ。
ん、それじゃまた次回ね!


前へ | TOP | 次へ