[UI]の変更点 - Unityぺたぺたゲームパーツ【Unity】

「UI」(2016/02/24 (水) 17:14:20) の最新版変更点

追加された行は緑色になります。

削除された行は赤色になります。

<ul><li>かんたんライフゲージ</li> <li>スマホにビルドするとGUIがちっちゃくなる問題</li> <li>クールダウン付アイコンの制御</li> <li>ボタンとスクリプトの連携</li> <li>テクスチャをボタンに貼る</li> <li>ボタンの名前を変更する</li> </ul><hr /><ul><li> <h2>かんたんライフゲージ</h2> </li> </ul>UI→SliderでCanvas配下に初期ゲージが表示される。 プロパティのDirectionでLeft To Rightが初期状態なのをBottom To Topにすると縦ゲージ <img alt="" src="http://www63.atwiki.jp/katzmier?cmd=upload&act=open&pageid=4&file=001.png" />→<img alt="" src="http://www63.atwiki.jp/katzmier?cmd=upload&act=open&pageid=4&file=004.png" />　<img alt="" src="http://www63.atwiki.jp/katzmier?cmd=upload&act=open&pageid=4&file=002.png" /><img alt="" src="http://www63.atwiki.jp/katzmier?cmd=upload&act=open&pageid=4&file=003.png" /> 後はBackground(背景)を半透明ぎみに、Fill Areaを黄色、Handle Slide Areaをオレンジにするとそれっぽくなる。 <ul><li> <h2>スマホにビルドするとGUIがちっちゃくなる問題</h2> </li> </ul>標準の設定ではスマホに持っていくとGUIがちっちゃくなっちゃうので、設定を変える。 CanvasのCanvas Scaler→Ui Scale Modeを Constant Pixel SizeからScale With Screen Sizeに変更する <img alt="" src="http://cdn63.atwikiimg.com/katzmier?cmd=upload&act=open&pageid=4&file=01.png" style="width:425px;height:457px;" /> <ul><li> <h2>クールダウン付アイコンの制御</h2> </li> </ul><img alt="" src="http://cdn63.atwikiimg.com/katzmier?cmd=upload&act=open&pageid=4&file=cool1.png" style="width:115px;height:97px;" /> 下地に白黒バージョンを置いて、上にカラーバージョンを置く。カラーバージョンUI.Imageのfillをいじるかんじ。 var B1 : UI.Image; B1 = GameObject.Find("Canvas/Attack1").GetComponent(UI.Image); B1.fillAmount = 0.5f;←これで50%チャージ状態 ディアブロ系クールダウンアイコン設定 [Image Type]Filled [Fill Method]Radial 360 [Fill Irigin]Top クールダウン管理機能 function fillGet(Img : UI.Image){ return Img.fillAmount; } function fillZero(Img : UI.Image){ Img.fillAmount = 0.0f; } function fillRate(Img : UI.Image, rate : float){ Img.fillAmount += rate; if(Img.fillAmount >= 1.0f) Img.fillAmount = 1.0f; } んで、ボタン押したか判定の中で function Button1() { if(fillGet(B1) == 1.0f){ fillZero(B1);←ボタン押したらゼロにする PlAni.SetBool("a1", true); } } あとはOnGUIあたりで fillRate(B1, 0.02f); しとけば勝手に増える。 増加レート指定じゃなくて最大フレーム指定のほうが使いやすいかな？(遅延効果発動みたいな) 使用可能状態(fill=1.0)になったら光るエフェクトとか必要かもね。 <ul><li> <h2>ボタンとスクリプトの連携</h2> </li> </ul><h2>Canvas > 押したいボタンのOn Click()に+で設定追加する スクリプトが入っているオブジェクト指定(管理用オブジェクトなど)に押された時のプログラムを書く</h2> private function Button1() { print("Button1"); } ・On Click()で増えたオプションのNo Functionになってるのをスクリプトが入っているGameObject→スクリプト名に変更 <img alt="" src="http://cdn63.atwikiimg.com/katzmier?cmd=upload&act=open&pageid=4&file=02.png" style="width:425px;height:87px;" /> **古い方法** ・On Click()で増えたオプションのNo FunctionになってるのをGameObject→SendMessage(string)に変更 ・ボタンが押された時に反応するスクリプト名を表記[Button1] <img alt="" src="http://cdn63.atwikiimg.com/katzmier?cmd=upload&act=open&pageid=4&file=aaaaaa.png" /> <ul><li> <h2>テクスチャをボタンに貼る</h2> </li> </ul>・テクスチャのInspectorで見た時に[Texture Type]が[Texture]だと使えないので、 [Sprite(2D and UI)]に変更してボタンの[Image(Script)]→[Source Image]に放り込む <img alt="" src="http://cdn63.atwikiimg.com/katzmier?cmd=upload&act=open&pageid=4&file=aaa.png" style="line-height:1.6em;" /> ・[Sprite(2D and UI)]に変更する <img alt="" src="http://cdn63.atwikiimg.com/katzmier?cmd=upload&act=open&pageid=4&file=bbb.png" style="line-height:1.6em;" /> ・[Source Image]にぶっこむ <ul><li> <h2>ボタンの名前を変更する</h2> </li> </ul>・Canvas > (作成したボタン) > Text内の[Text]値を変更する <img alt="" src="http://cdn63.atwikiimg.com/katzmier?cmd=upload&act=open&pageid=4&file=ccc.png" style="line-height:1.6em;" />

<ul><li>かんたんライフゲージ</li> <li>スマホにビルドするとGUIがちっちゃくなる問題</li> <li>クールダウン付アイコンの制御</li> <li>ボタンとスクリプトの連携</li> <li>テクスチャをボタンに貼る</li> <li>ボタンの名前を変更する</li> </ul><hr /><ul><li> <h2>かんたんライフゲージ</h2> </li> </ul>UI→SliderでCanvas配下に初期ゲージが表示される。 プロパティのDirectionでLeft To Rightが初期状態なのをBottom To Topにすると縦ゲージ <img alt="" src="http://www63.atwiki.jp/katzmier?cmd=upload&act=open&pageid=4&file=001.png" />→<img alt="" src="http://www63.atwiki.jp/katzmier?cmd=upload&act=open&pageid=4&file=004.png" />　<img alt="" src="http://www63.atwiki.jp/katzmier?cmd=upload&act=open&pageid=4&file=002.png" /><img alt="" src="http://www63.atwiki.jp/katzmier?cmd=upload&act=open&pageid=4&file=003.png" /> 後はBackground(背景)を半透明ぎみに、Fill Areaを黄色、Handle Slide Areaをオレンジにするとそれっぽくなる。 チャージ量やライフゲージはValueのところで%指定にするか(やった)、Min ValueとMax Valueで定数にするか？(こっちはやったことない) <ul><li> <h2>スマホにビルドするとGUIがちっちゃくなる問題</h2> </li> </ul>標準の設定ではスマホに持っていくとGUIがちっちゃくなっちゃうので、設定を変える。 CanvasのCanvas Scaler→Ui Scale Modeを Constant Pixel SizeからScale With Screen Sizeに変更する <img alt="" src="http://cdn63.atwikiimg.com/katzmier?cmd=upload&act=open&pageid=4&file=01.png" style="width:425px;height:457px;" /> <ul><li> <h2>クールダウン付アイコンの制御</h2> </li> </ul><img alt="" src="http://cdn63.atwikiimg.com/katzmier?cmd=upload&act=open&pageid=4&file=cool1.png" style="width:115px;height:97px;" /> 下地に白黒バージョンを置いて、上にカラーバージョンを置く。カラーバージョンUI.Imageのfillをいじるかんじ。 var B1 : UI.Image; B1 = GameObject.Find("Canvas/Attack1").GetComponent(UI.Image); B1.fillAmount = 0.5f;←これで50%チャージ状態 ディアブロ系クールダウンアイコン設定 [Image Type]Filled [Fill Method]Radial 360 [Fill Irigin]Top クールダウン管理機能 function fillGet(Img : UI.Image){ return Img.fillAmount; } function fillZero(Img : UI.Image){ Img.fillAmount = 0.0f; } function fillRate(Img : UI.Image, rate : float){ Img.fillAmount += rate; if(Img.fillAmount >= 1.0f) Img.fillAmount = 1.0f; } んで、ボタン押したか判定の中で function Button1() { if(fillGet(B1) == 1.0f){ fillZero(B1);←ボタン押したらゼロにする PlAni.SetBool("a1", true); } } あとはOnGUIあたりで fillRate(B1, 0.02f); しとけば勝手に増える。 増加レート指定じゃなくて最大フレーム指定のほうが使いやすいかな？(遅延効果発動みたいな) 使用可能状態(fill=1.0)になったら光るエフェクトとか必要かもね。 <ul><li> <h2>ボタンとスクリプトの連携</h2> </li> </ul><h2>Canvas > 押したいボタンのOn Click()に+で設定追加する スクリプトが入っているオブジェクト指定(管理用オブジェクトなど)に押された時のプログラムを書く</h2> private function Button1() { print("Button1"); } ・On Click()で増えたオプションのNo Functionになってるのをスクリプトが入っているGameObject→スクリプト名に変更 <img alt="" src="http://cdn63.atwikiimg.com/katzmier?cmd=upload&act=open&pageid=4&file=02.png" style="width:425px;height:87px;" /> **古い方法** ・On Click()で増えたオプションのNo FunctionになってるのをGameObject→SendMessage(string)に変更 ・ボタンが押された時に反応するスクリプト名を表記[Button1] <img alt="" src="http://cdn63.atwikiimg.com/katzmier?cmd=upload&act=open&pageid=4&file=aaaaaa.png" /> <ul><li> <h2>テクスチャをボタンに貼る</h2> </li> </ul>・テクスチャのInspectorで見た時に[Texture Type]が[Texture]だと使えないので、 [Sprite(2D and UI)]に変更してボタンの[Image(Script)]→[Source Image]に放り込む <img alt="" src="http://cdn63.atwikiimg.com/katzmier?cmd=upload&act=open&pageid=4&file=aaa.png" style="line-height:1.6em;" /> ・[Sprite(2D and UI)]に変更する <img alt="" src="http://cdn63.atwikiimg.com/katzmier?cmd=upload&act=open&pageid=4&file=bbb.png" style="line-height:1.6em;" /> ・[Source Image]にぶっこむ <ul><li> <h2>ボタンの名前を変更する</h2> </li> </ul>・Canvas > (作成したボタン) > Text内の[Text]値を変更する <img alt="" src="http://cdn63.atwikiimg.com/katzmier?cmd=upload&act=open&pageid=4&file=ccc.png" style="line-height:1.6em;" />

表示オプション

横に並べて表示：

変化行の前後のみ表示：

Unityぺたぺたゲームパーツ【Unity】

UI

並び順はUnity マニュアル

メニュー

リンク

「UI」(2016/02/24 (水) 17:14:20) の最新版変更点