6.13 セーブ画面を作る 〜ロールオーバー編〜
 |
今回はロールオーバー処理を作っていくね。 |
 |
セーブ画面でロールオーバーするのって、サムネイルと、ページ番号と、あと「Close」と「Load」かな？ |
|
ん、そーだね。
それじゃその順番で作っていこっか。 |
 |
うん。 |
|
じゃまずはサムネイルのロールオーバー処理からね。
サムネイルの上にマウスカーソルが乗ったらどうすればいいと思う？ |
|
ロールオーバー用の画像をそのサムネイルの所に表示すればいいんだよね？ |
|
ん、そうそう。
じゃあサムネイルのロールオーバー処理のスクリプト書いてみて。
ちなみに領域アクション定義ファイルはこんな感じにしとくから。 |
＜領域アクション定義ファイル(save_bg.ma)の中身（領域番号 0 〜 10 番のアクション定義）＞
0: autodisable=false;
1: storage="save.ks"; target="*thumbnail"; onenter="thumbnail_onenter(1)"; onleave="thumbnail_onleave()"; exp="tf.saveload.thumbnail = 1";
2: storage="save.ks"; target="*thumbnail"; onenter="thumbnail_onenter(2)"; onleave="thumbnail_onleave()"; exp="tf.saveload.thumbnail = 2";
3: storage="save.ks"; target="*thumbnail"; onenter="thumbnail_onenter(3)"; onleave="thumbnail_onleave()"; exp="tf.saveload.thumbnail = 3";
4: storage="save.ks"; target="*thumbnail"; onenter="thumbnail_onenter(4)"; onleave="thumbnail_onleave()"; exp="tf.saveload.thumbnail = 4";
5: storage="save.ks"; target="*thumbnail"; onenter="thumbnail_onenter(5)"; onleave="thumbnail_onleave()"; exp="tf.saveload.thumbnail = 5";
6: storage="save.ks"; target="*thumbnail"; onenter="thumbnail_onenter(6)"; onleave="thumbnail_onleave()"; exp="tf.saveload.thumbnail = 6";
7: storage="save.ks"; target="*thumbnail"; onenter="thumbnail_onenter(7)"; onleave="thumbnail_onleave()"; exp="tf.saveload.thumbnail = 7";
8: storage="save.ks"; target="*thumbnail"; onenter="thumbnail_onenter(8)"; onleave="thumbnail_onleave()"; exp="tf.saveload.thumbnail = 8";
9: storage="save.ks"; target="*thumbnail"; onenter="thumbnail_onenter(9)"; onleave="thumbnail_onleave()"; exp="tf.saveload.thumbnail = 9";
10: storage="save.ks"; target="*thumbnail"; onenter="thumbnail_onenter(10)"; onleave="thumbnail_onleave()"; exp="tf.saveload.thumbnail = 10";
|
えっと、サムネイルのアクションに onenter と onleave が増えてるんだよね？ |
|
そだよ。 |
|
onenter の方は thumbnail_onenter っていうメソッドを呼び出してるみたいだけど、
これってセーブデータの情報を表示する update_saveinfo メソッドみたいに、
セーブ画面用に作ったメソッドなの？ |
|
うん。thumbnail_onenter メソッドはサムネイルのロールオーバー処理をするためのメソッドで、
引数にはサムネイルの番号を指定するの。
ってワケで、thumbnail_onenter メソッドを作ってみて。 |
|
えーと、確かサムネイルのロールオーバー用画像って専用のレイヤに読み込んどくんだったよね？ |
|
10 番の前景レイヤがサムネイルのロールオーバー用画像のレイヤだね。 |
|
※§6.9 参照。 |
|
じゃあその 10 番の前景レイヤをサムネイルの所に表示すればいいってことだよね？
あ、でもロールオーバー用の画像を表示する位置ってどうなってるの？ |
|
サムネイルとおんなじ位置で OK だよ。 |
|
※サムネイル画像の配置については §6.9 参照。 |
|
あと、left と top って引数の値を使って計算するんだよね？ |
|
うん。引数の名前は thumbnail にでもしといて。
あとは  の時と同じように計算すればいいよ。
ただ top の値はサムネイル画像の方が 17 ピクセル下になるけどね。 |
|
の left は 8 + (sf.saveinfo.latest - 1) % 5 * 126 だったから、
サムネイルだと sf.saveinfo.latest を thumbnail に置き換えて
8 + (thumbnail - 1) % 5 * 126 でいいのかな？ |
|
ん、それで OK。
じゃ top の方は？ |
|
93 + (thumbnail - 1) % 10 \ 5 * 140…って言いたいとこだけど、
サムネイル画像の top 方が 17 ピクセル下になるってことは
110 + (thumbnail - 1) % 10 \ 5 * 140 なのかな？ |
|
そうそう。
あとは大丈夫そう？ |
|
うん、あとは書けると思うよ。 |
|
ん、じゃ書いてみて。
それとセーブデータの情報の表示を更新するのも忘れないでね。 |
|
あ、そだね。あれも更新しなくちゃね。
え〜っと、じゃあ… |
＜マウスカーソルがサムネイルの上に乗った時に呼び出される thumbnail_onenter メソッド＞
function thumbnail_onenter(thumbnail)
{
kag.fore.layers[10].setPos(8 + (thumbnail - 1) % 5 * 126, 110 + (thumbnail - 1) \ 5 * 140);
kag.fore.layers[10].visible = true;
update_saveinfo(thumbnail);
}
 |
こんな感じでいいのかな？ |
|
ん、これで OK だよ。
じゃあとサムネイルの外にマウスカーソルが出て行った時に実行される
thumbnail_onleave メソッドも作ってみて。 |
|
ロールオーバー用画像のレイヤを非表示にすればいいんだよね？ |
|
それとセーブデータの情報表示を消す必要もあるよね。 |
|
あ、そっか。セーブデータの情報が表示されてるのって、マウスカーソルがサムネイルの上に乗ってる時だけだもんね。
えっと、セーブデータの情報を消すのって、メッセージレイヤの clear メソッドだったっけ？ |
|
ん、そうだよ。§6.11 で使ったよね。 |
|
おっけー。じゃあやってみるね。 |
＜マウスカーソルがサムネイルの外に出て行った時に呼び出される thumbnail_onleave メソッド＞
function thumbnail_onleave()
{
kag.fore.layers[10].visible = false;
for(var i=1;i<=3;i++)
kag.fore.messages[kag.numMessageLayers - i].clear();
}
|
こんな感じだよね？ |
|
ん、こっちも OK だね。
じゃこの調子でページ番号のロールオーバー処理もやってみよっか。 |
|
うんっ！ |
|
まず、ページ番号のとこにマウスカーソルが乗ったら何をすればいい？ |
|
え〜っと…ページ番号も確かそれぞれロールオーバー用のレイヤがあったよね？ |
|
13 番 〜 22 番の前景レイヤがページ番号のロールオーバー用のレイヤだよ。 |
|
※§6.9 参照。 |
|
じゃあマウスカーソルが乗ってるページ番号のレイヤを表示するだけでいいんじゃない？ |
|
ん、そういうこと。
じゃマウスカーソルがページ番号のレイヤの外に出た時は？ |
|
そのレイヤを非表示にすればいいんだよね？ |
|
そ。ページ番号のロールオーバー処理はサムネイルに比べるとカンタンだよね。 |
|
だね。 |
|
じゃスクリプト書いてみて。 |
|
visible を変えるだけなら、領域アクション定義ファイルの中に書けそうだよね？ |
|
そだね。 |
|
えっと、じゃあ… |
＜領域アクション定義ファイルの中身（領域番号 11 〜 20 番のアクション定義）＞
11: storage="save.ks"; target = "*page"; onenter="kag.fore.layers[13].visible = true"; onleave = "kag.fore.layers[13].visible = false"; exp="sf.saveinfo.page = 1";
12: storage="save.ks"; target = "*page"; onenter="kag.fore.layers[14].visible = true"; onleave = "kag.fore.layers[14].visible = false"; exp="sf.saveinfo.page = 2";
13: storage="save.ks"; target = "*page"; onenter="kag.fore.layers[15].visible = true"; onleave = "kag.fore.layers[15].visible = false"; exp="sf.saveinfo.page = 3";
14: storage="save.ks"; target = "*page"; onenter="kag.fore.layers[16].visible = true"; onleave = "kag.fore.layers[16].visible = false"; exp="sf.saveinfo.page = 4";
15: storage="save.ks"; target = "*page"; onenter="kag.fore.layers[17].visible = true"; onleave = "kag.fore.layers[17].visible = false"; exp="sf.saveinfo.page = 5";
16: storage="save.ks"; target = "*page"; onenter="kag.fore.layers[18].visible = true"; onleave = "kag.fore.layers[18].visible = false"; exp="sf.saveinfo.page = 6";
17: storage="save.ks"; target = "*page"; onenter="kag.fore.layers[19].visible = true"; onleave = "kag.fore.layers[19].visible = false"; exp="sf.saveinfo.page = 7";
18: storage="save.ks"; target = "*page"; onenter="kag.fore.layers[20].visible = true"; onleave = "kag.fore.layers[20].visible = false"; exp="sf.saveinfo.page = 8";
19: storage="save.ks"; target = "*page"; onenter="kag.fore.layers[21].visible = true"; onleave = "kag.fore.layers[21].visible = false"; exp="sf.saveinfo.page = 9";
20: storage="save.ks"; target = "*page"; onenter="kag.fore.layers[22].visible = true"; onleave = "kag.fore.layers[22].visible = false"; exp="sf.saveinfo.page = 10";
|
こんなふうに、onenter の時は visible を true にして、
onleave の時は visible を false にすればいいってことだよね？ |
|
そうそう。 |
|
あとは「Load」と「Close」だけど、これってページ番号とおんなじで visible が変わるだけだよね？ |
|
ん、そうだね。 |
|
じゃあ… |
＜領域アクション定義ファイルの中身（領域番号 21, 22 番（「Load」「Close」）のアクション定義）＞
21: storage = "save.ks"; target = "*load"; onenter = "kag.fore.layers[23].visible = true"; onleave = "kag.fore.layers[23].visible = false";
22: storage = "save.ks"; target = "*close"; onenter = "kag.fore.layers[24].visible = true"; onleave = "kag.fore.layers[24].visible = false";
|
これでおっけーだよね？ |
 |
うん、バッチリ。 |
 |
やった！ |
|
じゃこれでロールオーバー処理も作れたね。 |
|
もうかなり完成に近づいたんじゃない？ |
|
そうだね。セーブ画面は次回でほぼ完成できると思うよ。 |
|
セーブ画面って色々作らなきゃいけないから大変だったよね〜。 |
|
まぁ確かにかなり長くなっちゃってるね。 |
|
でもそれも次回までなんだよね？ |
|
セーブ画面ができたら次はロード画面も作らなくちゃいけないし、
さらにシステムボタンからセーブ／ロード画面を呼び出せるようにもしなくちゃいけないけどねー。 |
|
う、まだまだやることいっぱいあるんだね… |
|
ま、セーブ画面が出来てればロード画面を作るのはそんな大変じゃないし、
システムボタンからセーブ／ロード画面を呼び出すのも、
今まで使ってた右クリックサブルーチンをちょっと変えればできるから。 |
|
あ、そうなんだ？ |
|
うん。
まずは次回でセーブ画面を仕上げちゃうことにするね。
それじゃ、また次回！ |