前置き
現在、洋館(初代バイオハザードみたいな)を探索して鍵を見つけて脱出する、といったゲームを制作しています。
そこで、仕様として、
①洋館内に落ちている武器を拾ってそれを装備する
②装備の変更する
といった機能 を実装することになりました。
装備を拾う & 装備を変更するだけなら、フラグを立てる & 変更するだけで済むと思いますが、
①現在装備中の武器を表示
②装備変更を簡単にわかりやすく
この二つを実装したかったので、武器選択のUIを作ることにしました。
実装するとなって見た目をどんなものにしようかと考えたところ、パッと思いついたのがモンハンのアイテム選択UIでした。
画面の右下にある回復薬とか研ぎ石を選択して使用するやつですね。
モンハンのそれは武器選択じゃなくてアイテム選択ですが、それくらいシンプルな方が良いかなと思ったので、それをもとに作成することにしました。
大分四苦八苦しましたが最終的に完成したのがこれです。
元にしたモンハンのUIを結構再現できたんじゃないかなと思います。
因みにアニメーションは一切使わずにプログラムでごり押ししているので、アニメーションの方を求めている方は今回の記事は全く参考にならないと思います。
準備
今回実装した機能はツールとかは使用していないのでインストールするものとかは無いです。
もし、私が使用したUIの素材を使いたいとかいった場合のために画像を置いときます。
あとはゲームシーンへのImageオブジェクトの配置ですね。
ちょっと見づらいかもしれませんが、こんな感じにImageオブジェクトを5つ横並びに配置します。
座標はx軸は-108 y軸は-188を左端に設定し、そこからx軸に 54 づつ足していきます
三角の座標はどこでもいいと思いますが、両端のImageオブジェクトに重なる辺りに配置するのが良いと思います。
準備はこれで完了しましたので、次は実装していきましょう。
実装
見た目は結構シンプルなんですが、中身は大分複雑になっております...。
Unityを始めて1年半くらいになりますが、
一番トライアンドエラーが多かった機能だと思います。
トライアンドエラーの過程をこの記事に書こうかと思ったのですが、多すぎて記事に収まりなさそうなので、時間があれば別の記事で補足しようかと思います。
なので、最終的な実装方法だけを記すと、
①武器画像表示用のImageオブジェクトを5個用意
②その5個のうち両端を透明
③武器画像をスライドする際には、MoveTowads()を使用
④端から逆の端に移動するときは透明状態のまま瞬間移動
⑤画像の配置は武器の装備数によって変更
さわりだけでもこんな感じですね...。多いですね...。
まずなぜ５個表示して両端の２個を透明にするのかということを以下の図で説明しようと思います。
番号で言うと①~④の説明ですね。
スライドの仕方
ひとまず、上の図の0と4を排除して、123の３個のオブジェクトだけを使って実装した時のことを考えてみます。
③に書いてあるように、武器画像の移動はMoveTowadsを使用しています。
結論から言うと
これを使っているのが両端の透明化の理由なのです。
MoveTowadsは現在の座標から目的地の座標まで正確に移動してくれるという優れものなのですが、これを使うと3から1への移動が少しおかしくなるんですね。
私的には、3が右にスライドしていって、Right0に差し掛かったらLeft0に瞬間移動して、そのまま1の位置に収まらせたいのです。
これをMoveTowadsを使って実装すると、
①Right0までMoveTowadsで移動
②Right0に到達したら、Left0に瞬間移動
③Left0から1の位置までMoveTowadsで移動
だいたいこんな感じになってしまいます。
これでも良いかなーと思ったんですが、MoveTowardsを2回呼び出すのはあまりスマートでないなと個人的に感じました。
なので、色々考えた結果、両端に次に表示する武器画像を透明にして用意しておくという方法に行きつきました。
その実装方法を、右にスライドしているのを例にして説明すると、
①Right0を超えたら、透明にする
②Right1を超えたら、0の位置に瞬間移動する
これだけですね。
こうすると、123での移動はMoveTowadsできれいに移動する。
4と0での移動は綺麗に移動はしていないが、透明化されて見えないので問題はない。
これでMoveTowadsでの端から端への移動の問題は解決しました。
次は⑤の説明をしていきます。
武器画像の配置の設定
武器が一個だけなら、その一個の武器を延々とループさせるだけで良いので配置とかは何も気にしなくても良いのですが、2個3個と増えてきた場合は話は別です。
取り敢えず2個の場合を考えてみましょう。
多分こんな感じになると思います。(ナはナイフです)
この状態から左右どちらでもいいですが、スライドさせたときを考えてみてください。
まあこうなると思うんですよ。
何が問題かというと、
もう一回スライドさせると銃が2個並んで表示されてしまうんですね。
これはよろしくないですね。
なので、0と4に位置している武器画像はスライドする毎に2に位置している武器画像に更新してやらないといけません。
ちなみに言うと、3個の場合はまた変わってきます。
3個の場合は、0は3の位置の武器画像、4は1の位置の武器画像に更新してあげないといけないのです。
このあたりのスクリプトを書いてるときに、余計にめんどくさくなってね？と少し疑問に思いましたが、MoveTowadsを2回呼び出すよりはスマートなやり方だろうと、自分を説得して完成させました。
ちなみに、図にある0~4の数字はImageオブジェクトに割り当てられた数字なので、もちろんスライドさせるとその数字も一緒にスライドしていきます。
ようするにこういうことですね。
なので、両端の画像を更新するときは、ちょっと簡単な計算をしてやらないとダメなんですね。
その計算方法はプログラムの方に載っているので、頑張って解析してみてください。
そこまで難しくないので。規則性を見つけられたらすぐ理解できると思います。
スクリプト
ついにスクリプトの登場です。
リポジトリにスターくれたら嬉しくて小躍りします
SelectWepon.cs
AtkPlayer.cs
こっちは使用例程度に見てくれた良いかと思います。
github.com
最後に
処理がいままで記事にしてきたものと比べて複雑だったので、説明が大分長くなってしまいました。
もうちょっと図を差し込んで説明した方が良いのでしょうが、あまり時間がないのでこれで勘弁してください。
9月終わるまでにもう１つか２つくらいは記事を書きたいとは思っているのですが、まあそれは私の進捗具合によるので、何かしら記事にできそうなものを作ったら書こうかと思います。