今日はUIの実装が主な作業となる。

HPゲージと左右移動のボタンだ。

画像をHPゲージのUIとして配置する訳だが、

問題はどのようにHPが減ったように見せるかという事である。

Unityには画像の表示を減らすように表示する機能が元々あるらしい。

縦、横、円形とあるので、今回用意されている円形の画像を、

HPが減ったように見せることができる。

（カクヨムの仕様で掲載できないがここに画像がある

https://1.bp.blogspot.com/-sGRj6WZVVPo/WEKBXLMukLI/AAAAAAAATiU/dP8ikasde5kag80vvW3VKXiPqR3soYjiACLcB/s1600/arrow_6.gif）

できない

矢に当たったら体力ゲージが減少しなければいけない。

スクリプトを精査する。途中で飽きてゲームをして遊んだりしながら、

2時間ほど完成サンプルのスクリプトと睨み合った。

どうやら、UIとして扱うために必要な一文が抜けていたらしい。

（カクヨムの仕様で掲載できないがここに画像がある

https://4.bp.blogspot.com/-aRQd7O5-9TE/WEKBVLqcBNI/AAAAAAAATiQ/Kg6YezJ7Vq0jJ1phuhh6wW27kP9ici8bACLcB/s1600/arrow_7.gif）

次は左右ボタンの実装をする。

まずはプレイヤを制御するスクリプトにボタンの挙動を追加する。

次にヒエラルキービューでボタンとして存在しているUIを追加する

そこにボタンの画像を登録し、挙動を設定する。

（カクヨムの仕様で掲載できないがここに画像がある

https://1.bp.blogspot.com/-iN60RdxuOUU/WEKBe1ezhSI/AAAAAAAATiY/sTr0zwEXkg8NXoj8mk6Y86XX7sVu5scngCLcB/s1600/arrow_8.gif）

教材ではこれをスマホで動かすための作業が説明されているが、

とりあえずスマートフォンでのテストは必要になった時に参照すればよいので、

今は読み飛ばすことにする。

矢の生成量と当たり判定、キャラクタの移動量を微調整し、

これでひとまず完成である。

ゲームオーバー画面やクリア画面といったUIは次の章で説明されており、

今回の制作物にはまだ実装されていない。

この章での内容はとりあえず以上である。

制作物は下記の通りとなる。

実際にプレイしてみた感想などがあれば気軽に教えてほしい。

https://unityroom.com/games/otimono/webgl