ティラノスクリプトのメニュー画面をカスタマイズする

い　つ　も　の

ティラノスクリプトのメニュー画面はhtmlファイルでできているわけですが、中身は背景画像の上にボタン画像を配置しているだけなので、そんなに難しい構造をしているわけではないです。

一番手っ取り早いのは、画像だけ差し替えることです。

元の画像は「tyrano/images/system」に入っているので、それぞれ対応する画像を新しく作った画像で上書きしてやればおしまいです。簡単だね！

ボタンの配置を変えたい場合は、それぞれ対応するボタンのhtmlを以下のように書き換えます。

<div class="menu_item " style="position: absolute;top: 100px;left: 200px;width: 100%;">
<a href="javascript:void(0)"><img class="menu_save" src="tyrano/images/system/menu_button_save.png" /></a>
</div>

style属性のtop、leftにはそれぞれ画像を表示させたい位置を指定してください。
単位（px）も忘れずに書くこと。
単位を書かないとスタイルが反映されません。

メニュー画面にフルスクリーン切り替えボタンを追加する

ゲーム画面を、ウィンドウサイズとフルスクリーンで切り替えるボタンを追加したいときは、↑のボタン配置に加えて次の作業が必要です。

1. ボタン画像をhtmlに配置する
2. ボタン画像のhtmlを以下のように書いて保存

   <div class="menu_item" style="[ボタン配置のスタイルを参考に書く]">
   <a href="javascript:void(0)"><img class="menu_fullscreen" src="[ボタン画像のパス]" /></a>
   </div>
   

   <img>タグに「menu_fullscreen」というクラスを指定しています。ここ重要
3. 「tyrano/plugin/kag/kag.menu.js」を開く
4. 55行目あたりに次のように追加

   layer_menu.find(".menu_back_title").click(function () {
       that.kag.backTitle()
   });
   //ここから追加
   layer_menu.find(".menu_fullscreen").click(function (e) {
       that.screenFull()
       layer_menu.hide();
       if (that.kag.stat.visible_menu_button == true) $(".button_menu").show();
       e.stopPropagation()
   });
   //ここまで追加
   $.preloadImgCallback(j_menu, function () {
       layer_menu.fadeIn(300);
       $(".button_menu").hide()
   }, that)
   

5. kag.menu.jsを保存して閉じる
6. フルスクリーンボタンが正常に動くことを確認する

ついに…来てしまいましたね…

ティラノスクリプトのメニュー画面にはなぜかコンフィグ画面へのボタンがないんですが、これを追加するのにはちょっと面倒な手順が必要です。

それでもいい、どんとこい！という方のみ続きを読んでください。

1. menu.htnlにコンフィグ画面用のボタン画像を配置する
2. ボタン画像のhtmlを以下のように書いて保存

   <div class="menu_item" style="[ボタン配置のスタイルを参考に書く]">
   <a href="javascript:void(0)"><img class="menu_config" src="[ボタン画像のパス]" /></a>
   </div>
   

   <img>タグに「menu_config」というクラスを指定しています。
3. 「tyrano/plugin/kag/kag.menu.js」を開く
4. 最後らへんに以下の通り追加

   screenFull: function () {
     ...（中略）...
       else if (elem.msRequestFullscreen)
         if (isFullScreen) document.msExitFullscreen();
         else elem.msRequestFullscreen()
     }
   },
   //ここから追加
     displayConfig: function(){
       TYRANO.kag.ftag.startTag("sleepgame", {storage: "config.ks"})
     },
   //ここまで追加
     test: function () {}
   };
   

   追加箇所の一番最後に「,」半角カンマがあります。半角カンマまですべて書いてください。
   というか上のコードをコピペしてください。
5. 次に、kag.menu.jsの50行目あたりに次のように追加

   layer_menu.find(".menu_back_title").click(function () {
      that.kag.backTitle()
   });
   //ここから追加
   layer_menu.find(".menu_config").click(function () {
       that.displayConfig()
       layer_menu.hide();
   });
   //ここまで追加
   $.preloadImgCallback(j_menu, function () {
     layer_menu.fadeIn(300);
     $(".button_menu").hide()
   }, that)
   

6. kag.menu.jsを保存して閉じる
7. 動くか確認

メニュー画面カスタマイズは地味にめんどくさい

今回はmenu.htmlを書き換えてカスタマイズしていますが、html書くよりティラノのスクリプト書く方が楽だという方は、いっそメニュー画面を.ksファイルで作ってしまうのも手だと思います。

以下、メニュー画面とかで使えそうな素材のリンクです。