ツクれぬ者の歩み【8】 ~ 画像を使ったUI作り その① ~

スロットシステム

　画面の見栄えを良くしてテンションを上げるため、
　戦闘時に表示されるUI作りに少し手を出します。

　でも自分にはスクリプトを弄ってUI作りなんて芸当、出来ません。

　なので画像を使った簡単UIを作っていきたいと思います。

　今回作るのはタワーディフェンス中に表示される戦闘UIの一部、
　スロットの切り替えです。

　使用する武器やスキルの変更を手軽に行えるシステム、
　それを分かりやすく伝える為に作ります。

　まずはスロットの枠に使う画像を用意。

　BOOTHにある無料素材のドットフレームを使わせていただきます。

　18禁要素を扱ってるとこういう時に堂々とリンクを貼れなくて辛い。

　金と銀の2パターンを用意して画面の左上に並べます。

　脳内設定では金が選択中のスロットです。

　それをゲームにも実装すべく、以下の様に「コモンイベント」を作ります。

　《選択中のスロット》という変数が条件に合っている時に
　拡大率100%で表示、そうでない時は80%で表示するよう設定してます。

　原点は中央になってます。

　原点が左上だと切り替え時の拡大縮小に違和感が出てしまうためです。

　ついでに任意でいつでもプレイヤーがスロットを切り替えられる様、

　プラグインの「TMCommonEventKey」で
　作ったコモンイベントを呼び出せるように設定します。

　今回はスロットの切り替え...ということで、

　Cキーで起動できるように設定しましょう。

　実際にマップでCキーを押し、作ったコモンイベントを起動。

　わりと良い感じじゃないでしょうか。

　切り替わったのを分かりやすく伝えるためSEを追加してます。

　作ったのはあくまで「枠」となる部分なので、
　次はこの上に表示するアイコン画像などを設定します。
　

　アイコンの画像はなんでもいいのですが、
　今回は「32x32」のものを用意しました。

　こういう時、個別に分けられているアイコンセットのありがたさを実感。

　設定と言ってもアイコンの画像を「枠」の上に乗せるだけです。
　同じ座標で設定すればいいだけなので簡単ですね。

　アイコン画像の縮小操作は「ピクチャの移動」コマンドで行ってます。

　ひとまずスロットシステムのUIは一旦これでいいかなと。

　簡単な作りで質素に見えなくもないですが、個人的には満足。

　もう少し凝るんだったら枠の下にまた別の画像を
　置いたりすれば豪華に見えるかもしれません。

　でも今回はここまで。

　他のUI作りもまたの機会に。

雑記とか

　マップの工作できる部分作りはひとまずこの画像で完成。

　マップの4か所を工作出来て、それぞれ３パターンあるって感じです。

　ちょっと物足りない感はあるものの、残りはイベントを使った
　罠の設置や回復・バフの装置でも置けるようにしてお茶を濁します。

　マップばっかり弄ってる時間が長いと先に進んでないと感じるので、
　マップ制作はしばらく後回し。

　今回はシステム紹介ついでにUI作りなんて紹介しましたが、

　最初の頃はこういった方法を知らず、
　専門知識が必要なものだと思ってました。

　それが画像を重ね合わせるだけの簡単なものだと知った時には
　一人勝手にﾎﾟｶｰﾝとしてました。

　もちろんアイテム選択などのメニュー画面作りとかになると
　スクリプトとかも必要になるんですけどね。

　いずれ「カスタムメニュー作成プラグイン」もやる予定なのですが、

　何度も挑戦してなお未だ理解しきれていないので不安です。

　ところで記事のタイトルに「その①」とついていますが、
　次の記事もUI作りという訳ではありません。

　また気が向いたらUI作りの記事を作ります。