トップ 差分 一覧 ソース 検索 ヘルプ RSS ログイン

unity_ngui_custom_progress_bar

[NGUI] 独自のSpriteでProgressBarを作る


Spriteより、ProgressBarを作成します。

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

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

 Spriteの配置


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


 子のSpriteの作成


ProgressBarを選択し、シーンビューを右クリックして「NGUI」-「Create」-「Sprite」-「Child」を選択。
名称を分かりやすいように「Overlay」に変更。
ここに、オーバーレイ用のSpriteを割り当てます。
配置をProgressBarと同じようになるようにそろえます。

ここではオーバレイのSpriteは単純矩形にしてますが、プログレスバーが角丸であれば、このオーバーレイも角丸で用意したほうがよいかと思います。

 Labelの作成


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


 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」を選びます。

これで、UISliderのValueを調整することでスライダが移動します。
また、Alphaを変更することで半透明に出来ます。

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


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


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


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

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


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ともに同じ操作が可能。


最終更新時間:2014年03月02日 09時17分03秒