FC2ブログ
    08 «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.» 10

    ハルシオンシステムの気まま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.jp/tb.php/60-96fef713
    この記事にトラックバックする(FC2ブログユーザー)