!!![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}}