[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秒