ティラノV5のメニューに変数表示しようぜ

変数表示 #

メニューに変数を表示したい時の改造です。ティラノのgithubのV5現時点で最新版使ってます。

とりあえず表示させる変数を定義します。前の書き方が適当すぎたので、今回はfirst.ksに書くテイで初期化しておきます。連想配列にする必要性とはという感じなのはそのままです。

[iscript]
    if(f.masao===undefined){
        f.masao= {like:0,hate:0}
    }
[endscript]

パターン1 jQueryでDOM操作 #

menu.htmlに表示したい変数を表示させるdivを追加します。div内にspan入れてそれで表示させても良いと思います。appendさせてもいいです。ここで振ったクラスの要素に後で変数表示させるようにします。

<div class="like" style="position:absolute;top:150px;left:400px;color:#000;font-size:20px;"></div>

今回styleで表示位置とか指定してますが、CSSファイルで定義作るのが面倒だっただけなので、ファイル内で指定する方が分かりやすいと思います。font-familyは統一するならCSSファイルでメニューレイヤーで指定しちゃうか全要素でやっちゃった方が楽な気がします。

menu.htmlに書く（2021/01/05追加） #

これまでmenu.jsを改造していましたが、menu.htmlに直接jQueryを書いても動くということをめも調の hororoさんにお教えいただきまして、滅茶苦茶簡単じゃないか！となったので、そうします。scriptタグで囲って書きます。menu.htmlでは既にインラインスクリプトが書かれているので、そのなかにお邪魔してもいいですが、紛らわしそうなので今回はその上に追加しました。分かりやすい方法でいいんじゃないかと思います。

<script>
    //好感度だよ
    $(".like").text(TYRANO.kag.stat.f.masao.like);
</script>

表示されました。やったぜ！種類多くなると大変そうですが、このくらいなら見やすいですね。変数はフルで書かないとだめなので、そこだけ気を付けます。

    //ゲーム変数
    TYRANO.kag.stat.f
    //システム変数
    TYRANO.kag.variable.sf
    //一時変数
    TYRANO.kag.variable.tf

menu.jsを改造する #

めんどいやり方ですが、ついでにmenu.jsも改造できます。する必要とは。やるならmenu.html改造せずにここでDOM作っちゃってもいいですね。

githubからtyrano>plugin>kag>kag.menu.js内のメニューのコード持ってきて、first.ksにiscriptタグでぶっこんで、変数表示足します。「★変数表示追加するぞー」で追加してます。javascriptファイルとして切り出してプラグイン化して読み込んだ方がバージョンアップ時含め管理はしやすいと思いますが、変数書くのがめんどいんで今回はとりあえずこんな感じでできたよー記事です。なお下記の★以外のコメントはgithub内コードのものそのままです。空白行そのままだと長くなるので大体削除しましたが、あった方が見る分には見やすいと思います。ない方が軽くはなります（ティラノのスタンダードパッケージだとコードが圧縮済なので、無改造の場合はそっち使った方が早いですが、後で自分で圧縮しても良いです）。

[iscript]
//★showMenu関数　これがメニュー表示する時使ってるやつ
tyrano.plugin.kag.menu.showMenu = function(call_back) {
        if (this.kag.layer.layer_event.css("display") == "none" && this.kag.stat.is_strong_stop != true) {
            return false;
        }
        if(this.kag.stat.is_wait == true){
            return false;
        }
        var that = this;
        this.kag.stat.is_skip = false;
        this.kag.stat.is_auto = false;
        this.kag.stat.is_auto_wait = false;
        var layer_menu = this.kag.layer.getMenuLayer();
        layer_menu.empty();
        var button_clicked = false;

        this.kag.html("menu", {
            "novel" : $.novel
        }, function(html_str) {

            var j_menu = $(html_str);
            layer_menu.append(j_menu);

            //★変数表示追加するぞー
            layer_menu.find(".like").html("マサオの好感度：" + f.masao.like + "<br>マサオの嫌度　：" + f.masao.hate);
            //★変数表示追加したぞー

            layer_menu.find(".menu_skip").click(function(e) {
                layer_menu.html("");
                layer_menu.hide();
                if (that.kag.stat.visible_menu_button == true) {
                    $(".button_menu").show();
                }
                that.kag.stat.is_skip = true;
                if (that.kag.layer.layer_event.css("display") == "none") {
                } else {
                    that.kag.ftag.nextOrder();
                }
                e.stopPropagation();
            });

            layer_menu.find(".menu_close").click(function(e) {
                layer_menu.hide();
                if (that.kag.stat.visible_menu_button == true) {
                    $(".button_menu").show();
                }
                e.stopPropagation();
            });

            layer_menu.find(".menu_window_close").click(function(e) {
                that.kag.layer.hideMessageLayers();
                layer_menu.hide();
                if (that.kag.stat.visible_menu_button == true) {
                    $(".button_menu").show();
                }
                e.stopPropagation();
            });

            layer_menu.find(".menu_save").click(function(e) {
                if(button_clicked==true){
                    return;
                }
                button_clicked = true;
                that.displaySave();
                e.stopPropagation();
            });

            layer_menu.find(".menu_load").click(function(e) {
                if(button_clicked==true){
                    return;
                }
                button_clicked = true;
                that.displayLoad();
                e.stopPropagation();
            });

            layer_menu.find(".menu_back_title").click(function() {
                that.kag.backTitle();
            });
            
            $.preloadImgCallback(j_menu,function(){
                layer_menu.fadeIn(300);
                $(".button_menu").hide();
            },that);

        });

    };
[endscript]

これで表示されます。シナリオ進んで値が変化しても反映されます。文字だけ表示するならtext()でも良いと思います。その方が純粋な文字で扱えます。

これだとfont-familyがコンフィグ通りじゃないので、コンフィグ通りにしたい場合は以下のような感じです。でもCSSファイルで指定した方が楽なのでは。

layer_menu.find(".like").html("マサオの好感度：" + f.masao.like + "<br>マサオの嫌度　：" + f.masao.hate)
.css("font-family",that.kag.config.userFace);

パターン2 JsRenderに投げてHTMLで表示 #

JsRenderにmenu投げる時に変数を渡します。saveとかで利用してるやつです。menu.jsを改造するので、上記か何らかの方法でプラグイン化しておきます。

改造（2021/01/05修正） #

tyrano.kag.plugin.menu.showMenu #

        this.kag.html("menu", {
            //★投げる
            array : this.kag.stat.f.masao,
            //★投げ終わる
            "novel" : $.novel
        }, function(html_str) {

前の書き方変数ちゃんと書いてませんでした……すみません……。

改造　menu.html #

書き方二つくらい。

        {{:array.like}}
        {{:array.hate}}

        {{for array}}
            {{:like}}
            {{:hate}}
        {{/for}}

配列のまま書くかループさせるかですね。表示は何か適当にクラス名つけていい感じにします。変数を配列で作っている場合、HTML上でループできるので、便利です。複数の変数を渡したい時は、渡す前に合わせるか渡す時に配列にするかでやりますが、考えて作らないと分岐が大変なことになったりします（敗北）。

以下メニュー画面系補足 #

このメニュー画面とかセーブ画面とかはJsRenderというテンプレートエンジン使ってHTMLとして出力されてるのですが、JsRenderの扱いについては、めも調さんの記事が参考になります。

表示したい変数が配列で沢山ある場合、JsRenderに変数渡してHTMLでfor回しちゃった方が早いと思います。ただそこまで説明できる頭がないのでこの辺で……。ちなみにセーブとロードがそんな感じで表示されてます。HTML上で{{}}でくくられてるのが条件式とか渡されてる変数です。バックログはメニューと同じでHTML自体にはスクリプトないですが、今回やったのと同じ方法でログが表示されています。以下kag.menu.jsより引用。

var log_str = "";
var array_log = that.kag.variable.tf.system.backlog;
for (var i = 0; i < array_log.length; i++) {
    log_str += array_log[i] + "<br />";
}
layer_menu.find(".log_body").html(log_str);
layer_menu.find(".log_body").css("font-family", that.kag.config.userFace);

バックログは配列ごとにここで改行がぶっこまれるわけですね。バックログの表示をゲーム上と同じ感じにしたい場合、この改行外してrタグとpタグのコード内でpushで改行タグ入れた方がいいかもしれません（pタグで二つ改行入れるなりhr入れるなりすると改ページごとに分割できる）。その前にkag.tag.jsのshowMessageでキャラ名のpushBackLog時に改行タグ入れるよう改造する必要もあるかも。という具合に色々できます（投）。

とか書きましたがバックログについてはめも調さんのバックログプラグインで整形できますので、そちらを入れると色々できて便利です。V5にも対応してくださっている！

あとメニューはHTML上の要素のクラスによってそれがクリックされたらスキップするぜーとかロード呼び出すぜーとかやってます。ですのでHTML側でクラスついてるdiv削除したら機能は使われません。逆に言うとHTML側でクラス足してコード内にバックログ呼び出すぜーコードとか足すと使えるようになります。以下製作wikiさんのメニュー画面についてのページです。

メニュー画面-ティラノスクリプト製作テクニックwiki

プラグインは便利なものを色々な方が作られているので、利用させていただきつつコードも見てみると改造の参考になると思います。以下公式プラグインサイト。

Tyrano Plugin Library-ティラノスクリプト

追記の追記（9月10日） #

何でJavascriptファイルにすると変数書くのがめんどいかというと、アクセスがフルになるからですね。何を言っている！？自分がうろ覚えの知識で説明するよりも分かっている方の説明の方が正しいので、以下参考記事です。

自分なりの話をしますと、iscriptタグ以下に書いたコードはendscriptタグでkag.jsのevalScriptが呼び出されて実行されるのですが、このevalScriptでfとかsfを、

    evalScript:function(str){
        var TG = this;
        var f = this.stat.f;
        var sf = this.variable.sf;
        var tf = this.variable.tf;
        var mp = this.stat.mp;
        eval(str);
        this.saveSystemVariable();
        if(this.kag.is_studio){
            this.kag.studio.notifyChangeVariable();
        }
    },

こんな風に変換してくれます。わーい間違えようがないぞー。更にthis.saveSystemVariable()でシステム変数も保存されるので安心。ただこれはkag.js内なので、kag.menu.jsとかからはバックログのコードでもあったように、

//バックログの配列を文字列とするための準備ですね
var array_log = that.kag.variable.tf.system.backlog;
//自分で作ったゲーム変数を変更する時はこんな感じ
this.kag.stat.f.kuti_left = 0;
//自分で作ったシステム変数（ｒｙ
this.kag.variable.sf.quick = true;

みたいに書きます。sfとtf、fとmpで違う罠。私はこれを正しく書くのを間違えることがあるので今回はfirst.ksにてiscriptでやりましたが（あと圧倒的にパッとできますね）、ティラノの既存の機能自体の改造に関しては、プラグインのように個別にJavascriptファイルとしてinit.ksで読み込むというのが何を改造したかが分かって良いと思います。

プラグインを自作する-ティラノスクリプト