見出し画像

［ティラノスクリプト］全画面ノベルへの道③メニュー画面の改造と歯車ボタン編

あいはらまひろ

　ここまで
　①テキスト表示、バックログ
　②セーブ／ロード画面改造
　とすすめてきて、今回はメニュー画面の改造についてです。いわゆる右クリックメニューですね。
　今回の重要な点は３点です。
　・右クリックメニューから環境設定にいけるようにすること
　・メニュー画面のデザインを改造する
　・メニュー画面へ行くためのボタン（歯車ボタン）

メニュー画面から環境設定（コンフィグ）へ

　これは先人の知恵に頼るしかありません。
　というわけで、こちらを参考にしました。方法は他にもあるようですが、このやり方が簡単だと思います。
　新たにボタンをひとつ用意する必要があります。

メニュー画面のデザイン

画像1

　メニュー画面はtyrano\html\menu.html。今回はボタンサイズをデフォルトと同じにして、ボタンの画像ファイル差替え＋ボタン追加で対応しました。
　それから以下のmarginで上と右余白を増やしてBackボタンの位置を修正。（←余白が均等でないと落ち着かない人）

<div class="menu_item" style="float:right;margin: 30px 30px 0 0;">
<img class="menu_close" src="tyrano/images/system/menu_button_close.png" />

　ボタン数が増えたので、全体の上余白も50px→5pxへ減らしています。

<div style="margin-top:5px">

　さらにtryrano.cssの以下の部分でmargin-top:2%→1%に。
　これで各ボタンの上余白が少し狭くなりました。

.menu_item {position:relative;margin-top:2%;text-align:center;cursor:pointer}

​　各ボタンはtop座標を指定しています（上余白をいじる必要はなかったかもしれない）。コンフィグ用のボタンを増やしたので、調整しないと一番下のボタンが画面下まで押し出されます。width 100%を指定しているのは、制作したボタンが縮小されているようだったので指定。（効果不明）

<div style="margin-top:5px">

<div class="menu_item" style="position: absolute;top: 100px;width: 100%;">
<img class="menu_save" src="tyrano/images/system/menu_button_save.png" />
</div>

<div class="menu_item" style="position: absolute;top: 180px;width: 100%;">
<img class="menu_load" src="tyrano/images/system/menu_button_load.png" />
</div>

<div class="menu_item" style="position: absolute;top: 260px;width: 100%;">
<img class="menu_skip" src="tyrano/images/system/menu_button_skip.png" />
</div>

<div class="menu_item" style="position: absolute;top: 340px;width: 100%;">
<a href="javascript:void(0)" onclick="myobj.config();">
<img class="menu_config" src="tyrano/images/system/menu_button_config.png" />
</a></div>

<div class="menu_item" style="position: absolute;top: 420px;width: 100%;">
<img class="menu_back_title" src="tyrano/images/system/menu_button_title.png" />
</div>

</div>

　最後に背景画像の差替え、ラベル画像（メニューロゴ）を削除しました。

<img class="img_label img_label_menu block_menu" src="tyrano/images/system/label_menu.png" style="left:0;top:0;position:absolute;">
<img class="img_bg_base" src="tyrano/images/system/bg_base.png" style="z-index:-1;left:0;top:0;width:100%;height:100%;position:absolute;">config.tjs

歯車ボタンをどうするか

　[showmenubutton]タグを使うと画面右下に歯車ボタンがあらわれます。
　テキストが画面いっぱいに表示されるのに、そのうえセーブやロードなどの機能ボタンまでたくさん並ぶのは避けたい。
　というわけで、ボタンはこの歯車ボタンのみにしました。
　この歯車ボタンには、いくつか注意点があります。まずはこれ。

　data\systemConfig.tjsの以下の部分です。true→falseで完了。この処置をした場合は、ゲーム開始後テキストウィンドウ表示した後のタイミングで、[showmenubutton]タグをいれる必要があります。
　下のleft,topは、画面のxy座標を入れるとボタンを好みの位置へと移動できます。今回はウィンドウ内に収まるようleft=880／top=560にしました。

;configVisible = true;  //コンフィグアイコンを表示
;configLeft    = -1     //コンフィグアイコンの左位置を指定できます。-1の場合は画面右下
;configTop     = -1     //コンフィグアイコンの上位置を指定できます。-1の場合は画面右下

歯車ボタンをオンマウスで変化させるには

　歯車ボタンも、Backボタンのように変化させたい。現時点（Ver1.0）では実装していませんが、方法はロールボタンを使うようです。
　fixレイヤーに常駐する機能ボタンを１つだけ用意して、それにメニュー機能を割りふれば動きます（テスト済み）。一時的に消すときは[clearfix]で指定すればＯＫ。

テキストウィンドウ表示時に実行
[button name="m_button" role="menu" graphic="button_menu.png"  enterimg="button_menu2.png" x=515 y=665]

ボタンを消すとき
[clearfix name=m_button ]　

　今回はここまで。
　最後までお読みいただきありがとうございました。
　よかったらゲームもプレイしてみてください。ブラウザからも遊べます。


この記事が気に入ったらサポートをしてみませんか？