進捗報告(10) + UI用ボタンの作成とか
概要
泡盛もろみです。
今回は
・UIボタンの作成 (byミサゴ)
・作成したアニメーションの紹介 (by昇)
です。
UIボタンの作成
東雲ミサゴです。
今回は技術面の記事として、前回作ったゲージ付きボタンの作成の流れを紹介したいと思います。
詳しい方も沢山おられると思いますが、自分用の覚書も兼ねて初歩的な事も書いておきたいと思います。
今回はまず、ゲージのついたボタンの見た目を作っていきます。
画像の準備（エディタ外の作業）
スプライト（2D画像）として使う画像を作成します。
ボタンのアイコンとして用いる円形の画像と、その画像より外径が20px大きい円形の画像を作成します。
これらを重ねた際にはみ出す10px分をゲージとします。今回は100pxと120pxとしました。
（↑使いたい部分以外は透過させておく）
これを、pngなどの透過情報が保存される形で出力しておきます。
後に説明がありますが、特にゲージ用の物は真っ白にしておきます。
エディタへの取り込みと設定
上記の画像をエディタに取り込み、InspectorからTexture TypeをSpriteに変更します。
（↑この部分が最初はDefaultになっている）
（↑設定を終えたら、下の方にあるApplyを押して適用する）
ボタン用、ゲージ用どちらも設定してくださいね！
ボタンの配置
ボタン本体となるオブジェクトを作成します。
HierarchyウィンドウにCanvasを、その子オブジェクトとしてUi-Buttonを作成します。
（CanvasはUIを描画するための領域です）
このButtonを選択し、WidthとHeightを大きい方の画像の外径に合わせます。（↓ここでは120x120）
（↑配置はこんなイメージ）
そして、Image内のSource Imageに先程の外径120のSpriteを指定します。
Projectウィンドウから設定欄にドラッグ&ドロップが分かりやすいと思います。
（↑ここへドラッグアンドドロップの他、右のボタンを押して出る窓から選択することもできます）
ここでSource Image直下のColorを変更しておいても良いでしょう。上の画像ではグレーっぽい色になっています。
ゲージがない状態での背景として表示させたい色を指定しておきます。
最初に画像を準備した際に真っ白にしたのは、ここの都合です。
指定色になるのではなく乗算のようで、あとから色を変更する事を考えると白が分かりやすそうです。
（特に私はこれまで画像を触ってきていないので、目的の色を出すのに苦労する）
画像を複数準備して差し替える、という場合はこの限りではありません。
さらに画像を配置
続けて、ゲージとして伸縮する部分とボタン中央のアイコンとなる部分の画像も配置します。
先程のボタンの子オブジェクトとしてUI-Imageを2つ作成し、同様の流れでSource Imageを指定していきます。
（↑ゲージとボタンアイコンのオブジェクトをボタンの子として配置）
1つめにはゲージ用の外径120、2つめにはボタンアイコン用の外径100のものを指定します。
ここで注意点ですが、UI-Imageはデフォルトでは100x100で作成されてしまうようなので、ゲージに用いる側のオブジェクトはInspectorのRect TransformからWidthとHeightを120にしておきます。
指定できたら、ゲージのInspectorから色を変更してみましょう。
サイズの設定が出来ていれば、アイコン部分の外側にゲージの色が表示されるはずです。
（↑この順番でぴったり重なっているイメージ）
これで見た目が出来上がりました。
この緑色の部分が表示される割合を増減させることで、ゲージを表現しています。
ゲージとして動かすために
さて、形は出来上がりましたが、どこをどう操作すればゲージが動いて見えるでしょうか。
設定していくのは動かしたい部分なので真ん中の画像ですね。
Hierarchyウィンドウからボタンの子オブジェクトとして配置したUI-Imageを選択し、Inspectorから…
Image Typeの指定
Image Typeでは画像の表示方法を指定することとができますが、この中からFilledを選択します。
（↑デフォルトではSimpleになっている）
するとImage Type以下の項目がFiled用に変わり、その中にFill Amountというものがあります。
（↑Filledを選択すると項目が変わる）
このFill Amountを0〜1の間で指定することで、画像がその割合だけ表示されるようになります
（拡大縮小ではなく、始点から終点に向けて順に表示していく形）
Fill MethodとFill Originの指定
Fill Methodの項目からRadial 360を選択します。初期値がこれかもしれません。
さらにFill Originの項目から起点を選択します。
（↑今回はTopを選択し、上を起点とした）
Clockwiseのチェックボックスは、有効にすると時計回り、無効にすると反時計回りになります。
〜〜
余談になりますが、回転する動きは他にRadial 90、Radial 180があり、それぞれ90度、180度の扇形に動きます。
デジタル式のスピードメーターのような動きには良いかもしれませんね。
直線的に動くものはHorizontal、Verticalでそれぞれ横向き、縦向きの動きになります。
こちらは棒状のゲージが伸びていくイメージですね。
〜〜
とりあえず完成
こうして下のようなものが出来ました。
（↑順にゲージが伸びていく様子）
エディタ上ではこれで一段落となります。やったぜ。
最終的にはこれをスクリプトから操作していく事になります。
切りが良いので今回はここまでとします。
フォロワー以上限定無料
ゲーム進捗に関する内容はフォロワー限定公開になります。
無料