07 «1.2.3.4.5.6.7.8.9.10.11.12.13.14.15.16.17.18.19.20.21.22.23.24.25.26.27.28.29.30.31.» 09

ハルシオンシステムの気ままBlog

株式会社ハルシオンシステムのメンバーが送る、UnityやらJavaやらの技術的話題から、自社開発のアプリの宣伝とかとかのブログです。ほんと気ままにいきたいと思います。更新日は毎週 月 木でっす!

 

【Unity】NGUIの基本操作その8 

こんにちは。大坂です。

何か風邪をひいたようで体調が良くないです。
みなさんも風邪には気をつけてくださいね!

今週はNGUIのsliderについて簡単に。
sliderを使用するとゲームを作る際のHPバーとかが簡単に作れちゃいます。

ということで早速。

UIWizardで新しいUIを作成するのは今までと同じですので省略。
UIを作成したら、WidgetWizard(NGUI⇒Open⇒Widget Wizard)を開きTamplateのリストから「Slider」を選択し、スライダーを作成すると以下のような構成になります。





補足:
Backgroundはバーの枠
Foregroundはバー
Thumbはバーのつまみ
今回はHPバーとしているのでThumbは削除します。

次にBackgroundの設定です。
SpriteTypeを「Sliced」に設定し、Spriteの右端にあるEditボタンをおしてBorderの設定を変更します。
使用する画像に合わせて微調整してみてください。画像のように点線が外枠の中に入っていればいい感じです。
この設定をすることによってDimensionsで外枠の大きさを変えても綺麗な外枠が作成できます。





試しにDimensionsを「100」×「30」に設定した画像がこんな感じ。
変な点がありますね。。。



この点はバーの中身になりますので、Foregroundの設定も変えていきます。
こちらも同じくSpriteTypeを「Sliced」に設定。色はHPバーっぽく赤に設定してみました。
Dimensionsは枠より少し小さく「94」×「24」で設定。この辺も作成しながら微調整する感じです。
今回は「2」×「2」の画像を使用しているので、「Border」の設定は特にしていませんが、使用する画像によっては「Border」バーもきれいにできると思います。





位置がずれているので、あとはこれを直せば見た目上HPバーが完成します。



こんな感じですね。
あとはバーの長さを変更するにはプログラムから「UISlider」の「value」の値を変更すれば変わります。
  
GameObject.Find("Slider").GetComponent().value = 0.5f;


これでバーが半分になります。



今週は以上となります。
ではではまた来週~(。・ω・)ノシ
スポンサーサイト

Category: 開発日記(Unity)

tb 0 : cm 0   

コメント

コメントの投稿

Secret

トラックバック

トラックバックURL
→http://halcyonsystemblog.blog.fc2.com/tb.php/60-96fef713
この記事にトラックバックする(FC2ブログユーザー)