現在アイテム表示画面を開くとこんな感じの画面が出てくる.

gree社が開発したwebviewというプラグイン(?)を用いて,HTML上にiframeでアイテム表示画面を出している感じ.このアイテム表示画面を消したりするときに,左上のボタンを使う事になるのだけど,もう少しこれデザイン的にどうにかできないかなと思い,その方法を検討.

最終的に以下の二つのunity公式ドキュメントと

https://docs.unity3d.com/ja/2019.4/Manual/class-GUISkin.html

https://docs.unity3d.com/ja/2021.3/Manual/class-GUIStyle.html

以下のブログの記事が有益な情報をくれました.

https://qiita.com/Jshirius/items/4a64e1996e4acb2b4aed

収集した情報を参考にしながら作成したコードは以下のような感じ.

基本的にボタンは「new GUI.Button(new Rect(-, -, -, -), “ボタン上に載せたい文字”)」 でC#でも作成することができる.

しかし,これだけではデザインを細かく設定することが難しい.そんなときに使うのがGUI skin.あらかじめ細かい設定がしてあるファイル(GUI skin)を用意して,ボタンと結びつけることで,C#によって作成されるボタンは任意のデザインに変更できる.ちなみにGUI skin設定ファイルはProjectウィンドウ中のasset上任意のフォルダを指定して,右クリック,Create→GUI skinで作成できる.

このコードを取り付けたオブジェクトのInspector画面は下の画像のようになる.

3つのボタンに今回はそれぞれ異なるGUI skinのファイルを割り振ってある.

例としてdelete_buttonのGUI skin設定を下に示す.

ここら辺の細かいパラメータは正直全部理解していません.詳しく知りたい人はunityの公式ドキュメントを読んでください.

とりあえずこのGUI skinでボタンの画像等を指定できそうだったので以下のようなボタンの画像を作成.

通常時とhover時は一見すると同じように見えるかもだけど,透明度を変化させている.

これをdelete_buttonのGUI skin ボタン設定に反映させました.

他のボタンもあれこれ設定した結果,最終的に以下のような感じになりました.

ボタンは何とか変更が反映されている感じ.

すごいオシャレになったわけではないけど,以前の質素すぎるボタンと比較したらマシにはなりましたかね.とりあえずボタンを変更できるようになったという事自体が進捗でしょう.

投稿者 horseshoe

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です