スマホでプレイ可能なノベルゲーム作ろうぜ UI編

ゲーム開発

やってまいりました。ティラノスクリプトでスマホゲームを作ろうの第2回。今回はユーザーインターフェース、略してUIを変更していこうと思います。

メニューボタンを押した時のカスタマイズ

メニューボタンを押した時に、デフォルトだと視覚的にページ移動をする感じだが、それをポップアップするような形にカスタマイズしたい。

このカスタマイズの意味はあまりない(おい

ユーザーはそこまでUIとか意識していない。あまりにUIが使い難い時に「ひでぇUIだ」と気付く程度で、システム周りは結構自己満足な部分が大きいと金豚は思う。なので作業の前に完成形だけ見せるので、こんな感じのUIにしたいーって人は参考にしてみてください。

作業を始める前の前提条件

  1. 画像編集ソフトを持っていて多少は使える(有料無料問わず)
  2. 自分でボタンを作成できる

UIとは何か

ユーザーインターフェース、つまりは見た目とか操作性のことだよね。ここに拘るとユーザー視点からしてゲームや作者への印象がガラッと変わるから丁寧に、かつ無難にカスタマイズしたいね。

ティラノスクリプトのサンプルゲームだと、メニューボタン(画面右下の黒い丸)を押した時のUIはこんな感じだよ。

このメニュー画面を変更してみよう。そしてメニューボタンを押した時の動作も変更してみよう。

メニュープラグインをダウンロードして読み込む

 

【ティラノスクリプト】メニュー改造プライグイン - ネコモジブログ

上記URLからメニュー改造プラグイン(Ver1.00)をダウンロードしよう。ダウンロードされたmenu_plugin_v100.zipを解凍するとmenu_plugin_v100というフォルダが出来る。

menu_pluginというフォルダをdata/others/pluginにぶち込もう!

ぶち込んだら、プラグインを呼び出そう!

data/scenario/scene1.ksを開いて、[plugin name=”menu_plugin”]と書こう。

;ティラノスクリプトサンプルゲーム

*start
[cm ]
[clearfix]
[start_keyconfig]

[plugin name="menu_plugin"]

[bg storage="room.jpg" time="100"]

適当な部分に書けばいいからね。そうするとプラグインが呼び出されているはずだ。サンプルゲームを起動して確認してみよう。

今まではメニューボタンを押すと、メニュー画面に移動するという動きだったが、このプラグインを入れるとメニュー一覧が画面上に現れるという動作に変わったことがわかる。メニューの種類もクイックセーブ・クイックロード・バックログ・コンフィグ・クローズが増えているね。

だがプラグインを入れただけでは、メニューが表示される位置もズレているし、とても簡素なメニュー表示な上に、スマホでのプレイ時には小さすぎて実用性は低いだろう。

メニュー素材のカスタマイズ

data/others/plugin/menu_plugin/imageを開いてみよう。確認となるが、先ほどプラグインファイルをぶち込んだのがdata/others/pluginというフォルダだ。

なのでこれからやるのは画像の差し替えということになる。

中身はこんな感じだ。試しにsave.pngを書き換えてみよう。適当に画像を作ってきた。

ファイル形式はpng。ファイルをsave.pngにリネームしよう。リネームしたファイルをdata/others/plugin/menu_plugin/imageに上書き保存だ。

ここでワンポイント画像を上書きする時は出来るだけ、取り返しのつくようにコピーを作成しておくことを忘れないようにしよう。こんな感じ

同じ名前で上書きをしてやると、画像の差し替えが行われているはずだよね。サンプルゲームを起動して確かめてみよう。

上書き出来ていることが確認できる。画像の差し替え方法がわかったところで、次はメニュー一覧からいらない項目を削除してしまおう。

いらないメニュー項目の削除

data/others/plugin/menu_plugin/htmlを開こう。中にはmenu.htmlというファイルがポツンと一つだけ存在している。Meryで開こう。

<div class="display_menu block_menu">

<div class="menu_base" style="left:0;top:0;width:100%;height:100%;position:absolute;">

<img src="data/others/plugin/menu_plugin/image/save.png" class="menu_item_button menu_save" style="left:880px;top:61px;" />

<img src="data/others/plugin/menu_plugin/image/load.png" class="menu_item_button menu_load" style="left:880px;top:107px;" />

<img src="data/others/plugin/menu_plugin/image/quicksave.png" class="menu_item_button menu_quicksave" style="left:880px;top:153px;" />

<img src="data/others/plugin/menu_plugin/image/quickload.png" class="menu_item_button menu_quickload" style="left:880px;top:199px;" />

<img src="data/others/plugin/menu_plugin/image/skip.png" class="menu_item_button menu_skip" style="left:880px;top:245px;" />

<img src="data/others/plugin/menu_plugin/image/auto.png" class="menu_item_button menu_auto" style="left:880px;top:291px;" />

<img src="data/others/plugin/menu_plugin/image/backlog.png" class="menu_item_button menu_backlog" style="left:880px;top:337px;" />

<img src="data/others/plugin/menu_plugin/image/config.png" class="menu_item_button menu_config" style="left:880px;top:383px;" />

<img src="data/others/plugin/menu_plugin/image/title.png" class="menu_item_button menu_title" style="left:880px;top:429px;" />

<img src="data/others/plugin/menu_plugin/image/close.png" class="menu_item_button game_close" style="left:880px;top:475px;" />

</div>

htmlの記述があるね。上から順にセーブ、ロード、クイックセーブ、クイックロード、スキップ、オート、バックログ、コンフィグ、タイトル、クローズという並びになっている。

金豚が個人的に必要ないなーと思ったものを削除してみるよ。

<div class="display_menu block_menu">

<div class="menu_base" style="left:0;top:0;width:100%;height:100%;position:absolute;">

<img src="data/others/plugin/menu_plugin/image/save.png" class="menu_item_button menu_save" style="left:880px;top:61px;" />

<img src="data/others/plugin/menu_plugin/image/load.png" class="menu_item_button menu_load" style="left:880px;top:107px;" />

<img src="data/others/plugin/menu_plugin/image/skip.png" class="menu_item_button menu_skip" style="left:880px;top:245px;" />

<img src="data/others/plugin/menu_plugin/image/auto.png" class="menu_item_button menu_auto" style="left:880px;top:291px;" />

<img src="data/others/plugin/menu_plugin/image/backlog.png" class="menu_item_button menu_backlog" style="left:880px;top:337px;" />

<img src="data/others/plugin/menu_plugin/image/config.png" class="menu_item_button menu_config" style="left:880px;top:383px;" />

<img src="data/others/plugin/menu_plugin/image/close.png" class="menu_item_button game_close" style="left:880px;top:475px;" />

</div>

クイックセーブ、クイックロード、タイトルを消してみた。実行してみる。

削除した項目が消えているのがわかる。これで画像の差し替え方法と、項目の削除方法がわかったということなので、適当に画像差し替えと位置調整をしてみる。

<div class="display_menu block_menu">

<div class="menu_base" style="left:0;top:0;width:100%;height:100%;position:absolute;">

<img src="data/others/plugin/menu_plugin/image/save.png" class="menu_item_button menu_save" style="left:170px;top:61px;" />

<img src="data/others/plugin/menu_plugin/image/load.png" class="menu_item_button menu_load" style="left:420px;top:61px;" />

<img src="data/others/plugin/menu_plugin/image/skip.png" class="menu_item_button menu_skip" style="left:670px;top:61px;" />

<img src="data/others/plugin/menu_plugin/image/auto.png" class="menu_item_button menu_auto" style="left:920px;top:61px;" />

<img src="data/others/plugin/menu_plugin/image/backlog.png" class="menu_item_button menu_backlog" style="left:170px;top:300px;" />

<img src="data/others/plugin/menu_plugin/image/config.png" class="menu_item_button menu_config" style="left:420px;top:300px;" />

<img src="data/others/plugin/menu_plugin/image/close.png" class="menu_item_button game_close" style="left:670px;top:300px;" />

<img src="data/others/plugin/menu_plugin/image/author.png" class="menu_item_button menu_author" style="left:920px;top:300px;" />
</div>

さてどうなるか。

カスタマイズ出来ている。これだけ大きいアイコンであればスマホの画面でもわかりやすいんじゃないだろうか。

メニューカスタマイズまとめ

このカスタマイズで大変なのは、それぞれの項目のアイコンを自分で作る必要があるというのが最大の難所です。アイコンの作成はセンスが問われますので、金豚としてはフリー素材を組み合わせたりして作ったりするのも全然ありだと思う。

注意点としては、何か項目を追加したい時は、自分でjsファイルを弄る必要があるということだ。これはボタンを押した時にどのように動作させるのかを記述する必要があるということだ。興味がある人はdata/others/plugin/menu_pluginの中にあるkag.menu.jsを開いてみよう。

コンフィグ画面のカスタマイズ

コンフィグ画面はゲームを通して開くことは数えるほどだろう。だがコンフィグ画面を一度も開かないというのも中々無いことだ。ここではコンフィグ画面のカスタマイズをしていくよ。

デフォルトのコンフィグ画面はこんな感じだ。

コンフィグのカスタマイズは骨が折れるので、画像だけ差し替えるだけでもデフォルト感は多分に減少すると思う。

tyrano\images\systemを開こう。その中にbg_config.jpgという画像がある。つまりはコンフィグ画面の見た目は1枚の画像で成り立ってので、これをまるまる自分の好きなデザインに書き換えてしまえばいい。

ちょっと急用が出来たので一旦保存

 

コメント

タイトルとURLをコピーしました