トップ 一覧 検索 ヘルプ RSS ログイン

unity_ngui_custom_progress_barの変更点

  • 追加された行はこのように表示されます。
  • 削除された行はこのように表示されます。
!!![NGUI] 独自のSpriteでProgressBarを作る

Spriteより、ProgressBarを作成します。
{{ref_image unity_ngui_progressbar_01.png}}
最低限必要なSpriteは、バーの背景部分、オーバレイされる部分(上画像の緑色の箇所)、の2つ。あらかじめAtlasにこの2つを格納しておきます。

オーバレイ用のSpriteは、単色の白の矩形でとりあえずOKです。Sprite側で色変更やアルファ変更できます。

!!Spriteの配置

シーンツリーでUI Rootを選択した状態で、メインメニューの「NGUI」-「Create」-「Sprite」を選択します。
InspectorでProgressBarのAtlas/Spriteを選択し、シーンビューで配置やサイズを調整。
分かりやすいように名前を「ProgressBar」としました。
{{ref_image unity_ngui_progressbar_02.png}}

!!子のSpriteの作成

ProgressBarを選択し、シーンビューを右クリックして「NGUI」-「Create」-「Sprite」-「Child」を選択。
名称を分かりやすいように「Overlay」に変更。
ここに、オーバーレイ用のSpriteを割り当てます。
配置をProgressBarと同じようになるようにそろえます。
{{ref_image unity_ngui_progressbar_03.png}}
ここではオーバレイのSpriteは単純矩形にしてますが、プログレスバーが角丸であれば、このオーバーレイも角丸で用意したほうがよいかと思います。

!!Labelの作成

パーセントを表示するラベルを作成します。
シーンビュー上でProgressBarを選択した状態で右クリックしてポップアップメニューを出します。
「Create」-「Label」-「Child」を選択すると、Spriteの下にLabelが追加されます。
ここで、表示するテキストや色を変更。
名称を分かりやすいように「ProgressLabel」に変更。
{{ref_image unity_ngui_progressbar_04.png}}

!!Box Colliderの割り当て

シーンツリーでProgressBarを選択しなおして、シーンビュー上で右クリック。
メニューの「NGUI」-「Attach」-「Box Collider」を選択します。

プログレスバーの場合は、マウス操作は行いませんのでInspectorでのBox ColliderのチェックボックスをOffにしておきます。

!!Progress Bar Scriptを割り当て

ProgressBarを選択した状態で、シーンビュー上で右クリック。
メニューの「NGUI」-「Attach」-「Progress Bar Script」を選択します。

!!UISlider値の調整

ProgressBarのInspectorで、UISliderのAppearanceのForegroundを選択して「Overlay」を選びます。
{{ref_image unity_ngui_progressbar_05.png}}
これで、UISliderのValueを調整することでスライダが移動します。
また、Alphaを変更することで半透明に出来ます。

色を緑にしたいので、シーンツリーのOverlayを選択しInspectorでWidgetのColorを緑に変更します。
以下のようになりました。
{{ref_image unity_ngui_progressbar_06.png}}

次に、プログレスバーの位置が変更されたときのパーセント表示を同期させます。
ProgressBarを選択し、InspectorのOn Value ChangeのNotifyに対してシーンツリーの「ProgressLabel」をドラッグしてきます。
この後、その下のMethodで「UILabel.SetCurrentPercent」を選択します。
{{ref_image unity_ngui_progressbar_07.png}}

これで、プログレスバーのValue値が変更されると中央にパーセント値も表示されます。
{{ref_image unity_ngui_progressbar_08.png}}

これで一通りのプログレスバーの実装は完了です。

!!スクリプトからプログレスバーの値を取得/設定

 GameObject gameObject = GameObject.Find("/UI Root/ProgressBar") as GameObject;
 UISlider slider = gameObject .GetComponent("UISlider") as UISlider;
として「slider.value」よりfloat値で値を取得できます。0.0-1.0の範囲。
また、
 slider.value = 0.5f;
のようにして値を変更できます。

これらについては、ProgressBar/Sliderともに同じ操作が可能。

----
{{lastmodified}}