Unity メモ – 円ゲージの作り方

Posted: 2016年5月14日 カテゴリー: プログラミングメモ, Unity, Unity メモ
タグ:, , , ,

今回は円ゲージ、もしくは円型のカウントダウン等の演出で使える表現を紹介します。

まず、円ゲージの画像を表示する為のImageを追加します。UnityのメニューからGameObject > UI > Image を選択してImageを追加してください。

circle0今度は表示する画像ファイルをプロジェクトに追加してください。今回は適当な星の画像を追加します。そして画像をSpriteに設定して、Applyしてください。

circle1追加した画像をImageに設定してください。

circle2最後に、Image内のImage Type “Filled”に変更してください。

circle3ImageのImage TypeをFilledにした際、各種設定を元にFill Amountの値によってどの範囲を表示するかを指定出来る様になります。

 

各設定は:

Fill Method:

– 表示のしかた。HorizontalやVerticalの場合は単純に縦や横、Radial**の場合は円や半円等円を基準にした表現になります。

Fill Origin:

– 表示の原点。例を上げるとFill MethodをRadial360にした場合、原点の位置から表示が始まり、Fill Amountが上がるにつれそこから円が徐々に出来てきます。

OriginがTop, Fill Amonutが0.2

circle4Origin がRight, FIll Amountが0.2

circle5簡単な設定としてはFill Methodを Radial360にし、Fill OriginをTopにし、Fill Amountを0から徐々に1になるまで上げていけばゲージ的な表現を作れます。

Fill Amountの値はスクリプトで設定する事も出来ます。

image = GetComponent<UnityEngine.UI.Image>();
image.fillAmount = amount;

今回は以上です。動画とかあった方が解りやすそうですね・・・

コメントを残す

以下に詳細を記入するか、アイコンをクリックしてログインしてください。

WordPress.com ロゴ

WordPress.com アカウントを使ってコメントしています。 ログアウト / 変更 )

Twitter 画像

Twitter アカウントを使ってコメントしています。 ログアウト / 変更 )

Facebook の写真

Facebook アカウントを使ってコメントしています。 ログアウト / 変更 )

Google+ フォト

Google+ アカウントを使ってコメントしています。 ログアウト / 変更 )

%s と連携中