6.12 セーブ画面を作る 〜ページ切り替え編〜

今回はページ切り替えのスクリプトを作っていくわけだけど、
ページを切り替えた時って、どこの表示を更新すればいいと思う?
えっ、最初っから問題なの?
サムネイルをクリックしてデータをセーブした時に更新した内容を考えればわかるかなーと思って。
え〜っとね…ページが切り替わると、表示されてるセーブデータが変わるから、 サムネイルとかその下の日付の表示は変えなくっちゃいけないよね。
そうだね。
他には?
う〜ん…画面の下に表示するセーブデータの情報…?
…はマウスカーソルがサムネイルの上に乗ってる時しか表示しないから、更新しなくてもいいよね。
あ、そっか。
えと、あとサムネイルをクリックした時に更新してたのは…
あ、「New」 かな。
ん、それも更新しなくちゃいけないよね。
あと1つ、サムネイルをクリックした時には更新してないけど、 ページを切り替える時には更新しなくちゃいけないのがあるんだけど、何だかわかる?
え〜っと…なんだろ?
これだけでいいような気がするんだけどな…
ページを切り替えるわけだから、今選択されてるページがどのページかってのも更新しなくちゃね。
あっ、そーか。そりゃそーだよね。
ってワケで、ページを切り替えた時に更新しなくちゃいけないのはこの4つ。

<ページを切り替えた時に更新する表示>

  1. サムネイル
  2. (サムネイルの下に表示されている)セーブデータの作成日時
  3. 最新のセーブデータを表す画像
  4. 現在選択されているページ

1 〜 3前回までに作ってるから、 新しく作らなくちゃいけないのは現在選択されてるページの表示を更新するトコだけ。
あ、それだけでいいんだ?
ただ、サムネイルとセーブデータの作成日時は10組全部更新しなくちゃいけないけどね。
そっか、ページを切り替えたら表示されてるセーブデータが全部変わっちゃうもんね。
まぁでもサムネイルの表示を更新するサブルーチンサムネイルの下に表示する日付を更新するサブルーチンを繰り返し呼び出せばいいだけなんだけどね。
こんな感じで。

<すべてのサムネイルを更新するサブルーチン>

*update_all_thumbnails
[eval exp="tf.saveload.thumbnail = 1"]
*update_all_thumbnails_loop
[call target=*update_thumbnail]
[jump cond="++tf.saveload.thumbnail <= 10" target=*update_all_thumbnails_loop]
[return]

こっちは全部のサムネイルを更新するサブルーチンの方ね。
これってループになってるの?
そうだよ。
どんなふうに実行されるかわかる?
ん〜っと…最初は tf.saveload.thumbnail1 になってる状態で *update_thumbnail が呼び出されるから、一番左上のサムネイルが更新されるのかな。
うんうん。
その後の jump タグの cond 属性は ++tf.saveload.thumbnail <= 10 ってなってるから、 tf.saveload.thumbnail10 以下の間はループするってことみたいだね。
++ 演算子はわかるよね?
変数の値を 1 増やす演算子だよね。
確か…インクリメント演算子、っていうんだったっけ?
※インクリメント演算子については §1.6 参照。
じゃ『++tf.saveload.thumbnail <= 10』と 『tf.saveload.thumbnail++ <= 10』の違いはわかる?
えっ? えーっと…
++ が左側に付くのと右側に付くのはなんか違ってたのは覚えてるんだけど、どう違ってたんだっけ…?
まず、『++tf.saveload.thumbnail <= 10』の方は、 先に tf.saveload.thumbnail の値を 1 増やしてから 10 と比較するの。
あっ、そうそう思い出した!
tf.saveload.thumbnail++ <= 10』の方は、 tf.saveload.thumbnail の値と 10 を比較してから tf.saveload.thumbnail の値を 1 増やすんだよね。
ん、そうだね。
ってことは、tf.saveload.thumbnail10 になってる状態で jump タグを実行すると tf.saveload.thumbnail11 になってから 10 と比較されるから、 条件が成り立たなくなって return タグが実行されるってことだよね?
そ。つまり、tf.saveload.thumbnail1, 2, 3, 4, 5, 6, 7, 8, 9, 10 になってる状態で *update_thumbnail が呼び出されるから、10個全部のサムネイルが更新されるってこと。
だね。
あ、そういえばこのサブルーチンって tf.saveload.thumbnail の値しか使ってないけど、 sf.saveinfo.page の方は考えなくてもいいの?
sf.saveinfo.page の値はページ番号がクリックされた時にそのページの値にセットされるから、 このサブルーチンが呼び出される時には更新済みだよ。
その辺のスクリプトはクリッカブルマップの領域アクション定義ファイルに書いたでしょ。
えっと、ページ番号をクリックすると exp に書いてあるスクリプトが実行されて、 sf.saveinfo.page の値がクリックしたページの番号になるんだったっけ?
そ。でその後サムネイルの表示を更新するサブルーチンを呼び出すから…
その時には sf.saveinfo.page の値がちゃんとセットされてるんだね。
そういうこと。
じゃセーブデータの作成日時表示を更新するサブルーチンも同じようにして作ってみて。
は〜い!

<すべてのセーブデータ作成日時表示を更新するサブルーチン>

*update_all_dates
[eval exp="tf.saveload.thumbnail = 1"]
*update_all_dates_loop
[call target=*update_date]
[jump cond="++tf.saveload.thumbnail <= 10" target=*update_all_dates_loop]
[return]

呼び出すサブルーチンをサムネイルの下に表示する日付を更新するサブルーチンに変えればいいだけのはずだから、 こんな感じになるよね?
ん、これで OK だよ。
じゃあとは選択されてるページの表示を更新するサブルーチンだけだね。
「New」 を表示するサブルーチンは変えなくていいの?
うん。あれはそのまま使えるよ。
あ、そうなんだ。
選択されてるページの表示を更新するサブルーチンは今回初めて作るわけだけど、 これは一番カンタンかな。
そうなの?
これだけだからね。

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

*update_page
[image layer=12 storage="&'save_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]

ホントだ。すごいシンプル…
じゃ説明してみて。
う、うん。
えっと、image タグを使ってるってことは、 ページの表示を更新する時にはレイヤの位置を変えるだけじゃなくて、ページ番号の画像も読み込むってことだよね。
まぁこのサブルーチンが呼び出されるのはページ番号がクリックされた時だけだからね。
マウスカーソルが乗った時に呼び出されるサブルーチンほど頻繁に呼び出されるわけじゃないから、 毎回画像を読み込んでも動作にはそんなに影響ないと思うよ。
ふぅん、そーなんだ。
んーと、storage 属性は 'save_sel_' + sf.saveinfo.page になってるから、1ページ目だと 'save_sel_1' で、 2ページ目だと 'save_sel_2' って感じだね。
選択されてるページ番号のとこに表示する画像は、§6.9 で確認したよね。
うん。確かに1ページ目の画像は save_sel_1.png だし、 2ページ目の画像は save_sel_2.png になってるね。
じゃ次は位置の設定だね。
ページ番号の表示位置はそれぞれこうなってるから、 「New」 の表示位置を計算した時と同じようにすればいいよね。
left の方は 179 から始まって 60 ずつ増えていくから 179 + (sf.saveinfo.page - 1) % 5 * 60 なんだね。
そうそう。
top の方は1段目が 16 で、 2段目が 16 + 4460 だから、 16 + (sf.saveinfo.page - 1) \ 5 * 44 なんだよね?
こっちは 「New」top と違って『% 10』っていうのがないけど。
セーブデータは 100 個あるから 10 で割った余りを使う必要があるけど、 ページ数は 10 までだから、(sf.pageinfo.page - 1) % 10sf.pageinfo.page - 1 はおんなじでしょ。
そっか。sf.pageinfo.page - 1 って 0 〜 9 の範囲になるもんね。
じゃこれでページを切り替えた時に呼び出すサブルーチンが一通りできたから、 ページ番号をクリックした時に実行されるスクリプトを作っていくね。
うん。
あ、でもその前にまず画面の下に表示するセーブデータの情報以外全部の表示を更新するサブルーチンをこんな感じで作っとくことにするね。

<画面下部に表示するセーブデータの情報以外すべての表示を更新するサブルーチン>

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

で、ページ番号がクリックされた時にはこうやって *update_all を呼び出せば OK。

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

*page
[call target=*update_all]
[s]

えっと、わざわざ *update_all を作ったのって、やっぱり何か理由があるんだよね?
まぁね。何でだと思う?
え? う〜ん…?
コンフィグ画面を作った時もおんなじこと聞かなかった?
§6.3 参照。
ん〜…そうだったっけ?
ウィンドウモードの「ウィンドウ」をクリックした時とかに実行されるスクリプトを何でサブルーチンにするの?ってね。
あ、そーいえば!
えっと、確かコンフィグ画面を初期化する時に呼び出すからって言ってたよね?
そ。今回もおんなじ理由。
そっか。じゃあ *update_all ってセーブ画面を初期化する時にも呼び出すんだ。
そういうこと。
さて、これでページ切り替えのスクリプトは出来たから、今回はここまでにしとくね。
は〜い。
次回はロールオーバー関係のスクリプトを作ってくことにするね。
それじゃ、また次回!


前へ | TOP | 次へ