ホーム / ゲームの作り方 /

ティラノスクリプトのセーブ・ロード画面をカスタマイズする

ゲームの作り方

t f B! P L

ティラノスクリプトのセーブ・ロード画面の構造

親の顔より見たデザイン
これはロード画面の画像ですが、ティラノスクリプトのセーブ画面とロード画面はほとんど同じ構造になっています。

という話を踏まえて、セーブ・ロード画面がどのように表示されているかの説明。

セーブ・ロード画面はhtmlでできている

まあ厳密には普通のゲーム画面も最終的にはhtmlでできていることになるんですが、この場合は「htmlファイルでセーブ・ロード画面が作られている」という意味で理解してください。

ゲームのプロジェクトフォルダの中、「tyrano/html」フォルダにsave.htmlとload.htmlというhtmlファイルがあります。これがセーブ・ロード画面の本体です。

htmlとCSSがわかる人なら、このhtmlファイルを改造するだけでセーブ・ロード画面のデザインが変えられる…んですが、このhtmlファイル、普通のhtmlファイルとは違う、少し特殊な作りをしています。

セーブ・ロード画面にはセーブデータの情報が表示される

特殊な作りの理由がこれ。
そんなの当たり前だろセーブ画面だぞと思われる方もいるでしょうが、セーブデータというのは、可変です。
可変とは、変化する可能性があるという意味です。

セーブデータですから、いちばん最初にゲームをプレイするときには、何もセーブされていないまっさらな状態です。
そこからプレイヤーごとにいろいろなポイントでセーブをしていって、時にはセーブスロットが足りなくて上書きしたりして…

まったく同じセーブデータというものが存在しないことは、だれにだってわかると思います。
人によって、プレイ環境によって変わるセーブデータを、htmlファイルに書いていくにはどうしたらいいか？

この、可変となる情報を記述するために、セーブ・ロード画面のhtmlファイルには、普通のhtmlファイルにはない特別な文が含まれているのです。

特殊な書き方

画像は、save.htmlの一部です。
見覚えのあるhtmlタグの他に、見慣れない文が書かれていますね。
{{for array_save}}
  ...
{{/for}}
とか、 
{{if img_data != ""}}
　<img src="{{:img_data}}" style="width: 100px;" />
{{/if}}
とか、
{{:save_date}}
{{:title}}
とかいう、「{{ほにゃらら}}」という文？です。

実はこれが、「セーブデータの情報」なんですね。

最初の「{{for}}～{{/for}}」というのは、「ここからここまで、セーブスロットの数だけ繰り返しますよ」という意味です。

次の「{{if img_data != ""}}～{{/if}}」は、「img_dataという変数が空白じゃない場合は、セーブデータに記録されているサムネイルを表示します」という意味です。

最後の「{{:save_date}}」は「セーブ日付を表示します」、「{{:title}}」は「セーブタイトルを表示します」という意味です。

「{{}}」の中で指定している「img_data」とかは、ティラノスクリプト側で用意された変数です。これについての解説はまた後ほど

セーブ画面のデザインを変える

さて、セーブ画面の構造がわかったところで、まずはセーブ画面のデザインを変えてみましょう。

セーブ・ロード画面のスタイルは、save.html、load.htmlだけでなく「tyrano.css」にも記述されています。

ふたつのファイルを行き来するのは面倒なので、「tyrano.css」側のセーブ・ロード画面に関する記述を切り取って、別のファイルにコピペしてやると管理しやすいです。

CSSをカスタマイズするときは、開発者ツール（DevTools）を利用すると効率的に進められます。
ティラノスタジオを使っているのであれば、「プレビュー」→「ゲーム再生」画面の「デバッグを表示する」にチェックを入れてゲームを再生すると開発者ツールのウィンドウが表示されます。

こんな感じで、実際のゲーム画面と、ゲーム画面内のhtml要素、html要素に適用されているスタイルが表示されます。

セーブスロットの日付をゼロ埋めする

ティラノスクリプトのゲームは、セーブデータその他諸々の日付表示が「ゼロ埋めされていない」という特徴があります。

ゼロ埋めとは何かというと、たとえば「一月」を「1月」と表現することです。ゼロ埋めした場合は、これが「01月」となります。
日本語表記だとゼロ埋めなしの方が自然ですが、「2020/1/1」ではなく「2020/01/01」と表記したくなる人間も、世の中にはいるのです。

というわけで、日付をゼロ埋めしましょう。
これから紹介する方法は、ティラノスクリプト上での日付の表記をすべて「ゼロ埋めあり」に変える方法なので、いちおう注意してください。

  1. 「tyrano」フォルダにある「lib.js」を開きます。
  2. 「$.getNowDate」という関数を以下のように書き換えてください。 
    $.getNowDate = function() {
    var nowdate = new Date();
    var year = nowdate.getFullYear();
    // 年
    var mon = ("000" + (nowdate.getMonth()+1)).slice(-2);
    // 月
    var date = ("000" + (nowdate.getDate()+1)).slice(-2);
    // 日
    return year + "/" + mon + "/" + date;
};
  3. 次に、「$.getNowTime」という関数を以下のように書き換えてください。 
        $.getNowTime = function() {

        var nowdate = new Date();

        var h = ("000" + (nowdate.getHours())).slice(-2);
        var m = ("000" + (nowdate.getMinutes())).slice(-2);
        var s = ("000" + (nowdate.getSeconds())).slice(-2);

        return h + "：" + m + "：" + s;
    };
  4. ゲームを再起動して、セーブデータの日付がゼロ埋めされていることを確認しましょう。

セーブスロットに主人公の名前を表示する

主人公の名前を変えられるタイプのゲームだと、セーブデータごとに主人公の名前を表示したくなります。
そんなときは、ひと手間ふた手間必要です。

  1. まず、主人公の名前をゲーム変数（「f.変数名」の変数）に保存しておいてください。
  2. セーブ画面で主人公の名前を表示する部分を用意します。
    今回は主人公の名前を入れる変数を「player_name」として、セーブデータタイトルの下に表示することにしました。 
    
<span class="save_list_item_date">{{:save_date}}</span>
　　<span class="save_list_item_text">{{:title}}</span>
　　<span class="save_list_item_text">{{:player_name}}</span>
</span>
  3. 「tyrano/plugin/kag/kag.menu.js」を開きます。
  4. 「kag.menu.js」の中の「snapSave」という関数を書き換えます。
    セーブデータのサムネイルを表示しているのなら177行目あたりに、サムネイルを表示していないなら163行目あたりに、次のように行を追加してください。 
    data.title = title;
data.stat = _stat;
data.current_order_index = _current_order_index;
data.save_date = $.getNowDate() + "　" + $.getNowTime();
data.palyer_name = TYRANO.kag.stat.f.player_name　　//ここを追加
data.img_data = img_code;
    ここでは、「セーブデータに主人公名（player_name）の情報を格納する」処理を行っています。
  5. セーブ画面の表示位置を調整して終了です。

セーブスロットにゲーム中の日数を表示する

日付が進行していくタイプのアドベンチャーゲームだと、セーブデータに日数も表示させたいです。
これも、主人公の名前を表示させるのとやり方は同じです。

  1. ゲーム中の日数をゲーム変数に保存しておく
  2. セーブ画面・ロード画面に日数を表示させる場所を用意する
  3. 「tyrano/plugin/kag/kag.menu.js」の「snapSave」関数に、日数のデータを追加する

セーブスロットの数の話

セーブスロットの数はconfig.tjsで変えられるんですが、ブラウザゲームとして公開を考えているのならセーブスロットの数には考慮が必要です。
ティラノスクリプトは、ブラウザゲームとして公開している場合、セーブデータをブラウザのキャッシュに保存します。
キャッシュの容量は、それほど多くありません。
だいたい、セーブスロットの数は5つ程度に抑えておいた方がいいです。

タグ一覧最初から表示

このブログを検索

連絡先

名前

メール *

メッセージ *

QooQ