6.11 セーブ画面を作る 〜セーブデータの情報表示編〜

今回はサムネイルをクリックした時に実行されるスクリプトの続きね。
あとちょっとだけ残ってたんだよね。
ん、後は画面の下の方に表示されるセーブデータ情報の表示を更新するスクリプトだけだね。
今まではサブルーチンを呼び出してたけど、これってメソッドを呼び出してるんだよね?
そうだよ。
なんでこれだけメソッドになってるの?
メソッドにしとくと後でロールオーバー用の領域アクションを作る時に便利だからだよ。
ふぅん、そうなんだ。
で、これが update_saveinfo メソッドの中身ね。

<セーブデータ情報の表示を更新する update_saveinfo メソッド>

function update_saveinfo(thumbnail)
{
    var i;
    // レイヤに表示されている内容をクリアします
    for(i=1;i<=3;i++)
        kag.fore.messages[kag.numMessageLayers - i].clear();

    // 更新するセーブデータの番号を n に代入します
    var n = (sf.saveinfo.page - 1) * 10 + thumbnail;
    var saveDate = kag.getBookMarkDate(n);  // セーブデータの日付を取得して saveDate に代入します
    if(saveDate != "")
    {
        // セーブデータがある場合
        var d = new Date(saveDate);  // セーブデータの日付を持つ Date クラスのオブジェクトを生成します
        var week = "日月火水木金土".charAt(d.getDay());  // week に曜日の文字を代入します
        var info = [];
        // info[1] : SCENARIO の項目に表示する情報 → セーブデータの見出し
        info[1] = kag.getBookMarkPageName(n);
        // info[2] : TIME の項目に表示する情報 → セーブデータの作成日時
        info[2] = d.getYear() + "年" + (d.getMonth() + 1) + "月" + d.getDate() + "日(" + week + ")" + d.getHours() + "時" + d.getMinutes() + "分";
        // info[3] : DATA No. の項目に表示する情報 → セーブデータの番号
        info[3] = string n;
        // 表示する情報をレイヤに書き込みます
        for(i=1;i<=3;i++)
            kag.fore.messages[kag.numMessageLayers - i].processCh(info[i]);
    }
}

うわ、すごい複雑…
ま、とりあえず最初から見ていこっか。
う、うん。
まず、最初の for ループでセーブデータの情報表示用レイヤの内容をクリアしてるんだ。
ちなみにセーブデータの情報表示用レイヤってのはこの3つのレイヤのことね。

<セーブデータの情報表示用レイヤ>

えっと、じゃあメッセージレイヤの clear っていうメソッドを呼び出すと、 メッセージレイヤに表示されてる文字が消えるってこと?
ん、そうだよ。
じゃこの for ループがどんなふうに実行されるかわかる?
i1 から始まって、 i1 ずつ増やしながら 3 になるまでループするんだから、 (kag.numMessageLayers - 1)番と (kag.numMessageLayers - 2)番と (kag.numMessageLayers - 3)番のメッセージレイヤの内容がクリアされるんだよね?
ちゃんとセーブデータの情報表示用レイヤがクリアされるようになってるでしょ。
うん、そうだね。
※メッセージレイヤの番号については §6.9 参照。
んじゃ次はセーブデータの日付を取得してる部分ね。
最初の var n ... のとこはわかるよね?
(sf.saveinfo.page - 1) * 10 + tf.saveload.thumbnail はセーブデータの番号だから、 変数 n にセーブデータの番号を代入してるんだよね。
そうそう。セーブデータの番号はこのスクリプトの中で何回か使うから、いちいち計算しなくてもいいように、 ここで変数 n に代入してるの。
それから getBookMarkDate メソッドでセーブデータの日付を取得してるんだね。
そ。じゃその次の if の条件はどうなってるかわかる?
saveDate != "" になってるから、セーブデータがあったら if ブロックの中身を実行するってことだよね。
そう。このブロックの中でレイヤにセーブデータの情報を表示してるわけだね。
あ、Date クラスが使われてるね。 なんか久し振りに見た気がする〜。
3章とかで良く使ったよね。
あ、でも今回はコンストラクタに引数があるよ。
確か Date クラスって今までコンストラクタに引数は指定してなかったよね?
今までは Date クラスを作った時の時間を知りたかったからコンストラクタに引数を指定しなかったんだけど、 今回はセーブデータの時間を持つ Date クラスのオブジェクトを作りたいから引数を指定してるんだ。
えっと、それってどういうことなの?
前に Date クラスのオブジェクトのメソッドは、 そのオブジェクトが作られた時の時間を返すって言ったよね?
§1.3 参照。
うん。例えば d = new Date(); が実行された時刻が 12 時 34 分だったら、d.getHours はいつ呼び出しても 12 を返すし、 d.getMinutes は 34 を返すんだよね。
そうそう。つまり、Date クラスのオブジェクトは時刻の情報を記憶してて、 getHours とかのメソッドを呼び出すと、そのオブジェクトが記憶してる時間を参照して時間の値を返すわけね。
うん、それはなんとなくわかるよ。
時刻の情報が記憶できるってことは、別にオブジェクトが作られた時の時刻じゃなくても、 他の時刻も記憶できるってことだよね。
んー、確かにそー言われればそーだね。
で、Date クラスに任意の時刻を記憶してもらうためには、 コンストラクタで引数に時刻の情報を指定すればいいの。
えっと、それってつまりコンストラクタの引数に『12時34分』って指定すれば、 オブジェクトが作られた時間が 12 時 34 分じゃなくても getHours メソッドを呼び出すと 12 が返って、 getMinutes メソッドを呼び出すと 34 が返るってこと?
ん、そういうこと。
まぁ Date クラスのコンストラクタに指定できる時刻の表現形式には決まりがあるから、 "12時34分" っていう文字列を指定してもダメなんだけどね。
あ、そうなの?
時刻の表現形式の詳しい説明はパスさせてもらうけど、 getBookMarkDate メソッドで取得できる時刻の情報は Date クラスのコンストラクタに指定できる形式になってるんだ。
Date クラスのコンストラクタに指定できる時刻の表現形式については「TJS2リファレンス」の「Date クラス」の項目を参照してください。
へぇ、そうなんだ。
だから d = new Date(saveDate); でオブジェクトを作ると、 d にセーブデータの時刻が記憶されるの。
なるほど、じゃああとはフツーに getHours メソッドとかが使えるんだね。
うん。
その次の行getDay メソッドが使われてるけど、 なんか文字列の後ろに .charAt がくっつけてあってちょっとヘンだよね…?
このスクリプトってどうなってるの?
この書き方は前に時計を作った時にも出てきたでしょ。
§3.6 参照。
あ〜、sprintf メソッドを使った時だね。
charAt メソッドも前に使ったよね。
§1.11 参照。
charAt(x)x 番目の文字が取得できるんだよね。
charAt(0) が1文字目だから、 charAt(x) で取得できるのは (x + 1) 文字目だよ。
あ、そっか。
じゃ例えばセーブデータの日付の曜日が月曜日だったとすると、 charAt メソッドの引数はどうなる?
ん〜と…月曜日だと getDay メソッドは 1 を返すから、 "日月火水木金土".charAt(1); になるよね?
つまり week に代入されるのは…?
"日月火水木金土" の2文字目だから… "月"
そ。だからこうすると week にセーブデータの曜日が代入されるの。
あ、なるほど。
じゃ次ね。
次はレイヤに表示するセーブデータの情報を info っていう配列に入れてるんだけど、 それぞれどうなってるかわかる?
info[1] には kag.getBookMarkPageName っていうメソッドの戻り値を代入してるみたいだけど、これってどんなメソッドなの?
getBookMarkPageName メソッドはセーブデータの見出しを取得できるメソッドだよ。
引数は getBookMarkDate メソッドと同じでセーブデータの番号ね。
じゃあ info[1] はセーブデータの見出しになるんだね。
info[2] には Date クラスのメソッドを使って、 セーブデータの日付と曜日と時間を代入してるみたいだね。
ちなみに『何年何月何日(何曜日)何時何分』っていう形式ね。
あと info[3] はセーブデータの番号を代入してるみたいだけど、 n の前の string ってなんなの?
string 演算子だよ。
§1.6 で出てきたよね。
あ〜、そういえばそんな演算子があったっけ…ほとんど使ってないから忘れちゃってた。
えっと、これって確か変数を文字列型にする、みたいな感じだったよね?
そう。n の中身はセーブデータの番号だから整数型なんだけど、 この後メッセージレイヤにセーブデータの番号を表示する時には文字列型を使った方がいいから一応変換してるの。
ふ〜ん、そうなんだ。
で、最後はセーブデータの情報をメッセージレイヤに表示してる部分ね。
processCh っていうのがメッセージレイヤに文字を表示するメソッドなの?
そうだよ。引数に指定した文字列がメッセージレイヤに表示されるの。
※本来 processCh メソッドの引数には1文字だけの文字列を指定しますが、 今回は複数の文字を含む文字列を指定しても支障がないのでこのような使い方をしています。
えっと、じゃあこの for ループで i1 の時に SCENARIO: のとこにセーブデータの見出しを表示して、 2 の時に TIME: のとこにセーブデータの作成日時を表示して、 3 の時に DATA No. のとこにセーブデータ番号を表示してるってことだよね?
ん、そういうこと。
それじゃこれでサムネイルをクリックした時に実行されるスクリプトは一通りチェックできたね。
なんかすごい色んなコトやったよねぇ…
まぁサムネイルも使ったしセーブデータの情報も表示したからねー。
じゃあ今回はこれくらいにして、次回はページ切り替えのスクリプトを作っていくね。
ページの切り替えもなんか色々やらなきゃいけなそうだよね?
ん〜、でもサムネイルをクリックした時に実行するサブルーチンが大体そのまま使えるから、そーでもないかな。
あ、そうなんだ。
うん、ページ切り替えは次回1回だけで十分終われると思うよ。
それじゃ、また次回ね!


前へ | TOP | 次へ