2013年11月1日金曜日

【Unity,NGUI3.x】NGUI3.0を触ってみた。

先日NGUIが3.0になりましたねー。
2.7も良くわかってないのに3.0が出てしまいました。
全然ついていけてない。

とりあえずチュートリアル動画見ながら触ってみました。

NGUI 3 Tutorial


触ってみた

準備

・新規プロジェクト作成
・NGUI3.0をインポート
・Examplesフォルダをおもむろに削除
・Spritesフォルダ作成
・画像の取り込み
  こんな画像ない。もう着いていけないって思ったけど前回見たチュートリアルと同じサンプル画像使うことにした。
  http://www.tasharen.com/ngui/atlas.zip

[2013/11/3追記]
Youtube動画の説明に素材ダウンロード先書いてありました。
http://www.tasharen.com/ngui/tutorial3assets.unitypackage

テクスチャ

・NGUI->Create->Texture
・適当なテクスチャをD&Dで貼り付け
  テクスチャにズーム。3D Gizmos OFFにしたけどなんだろうね。
  マウスでぐりぐりできる。

テクスチャアトラス

・NGUI->Open->Atlas Maker
  DrawCall減らすのに重要だよー。
  画像を選択するとAtlasMakerに"Add"って出てくる。
  適当にアトラス名付けてCreate
  相変わらず簡単だなー。
  画像を追加したり更新したりする場合は画像を選択してUpdate押すだけ。

スプライト

・最初に追加したテクスチャは用済みなので削除
・NGUI->Create->Sprite
  Atlasとそれに含まれるSpriteを選択
  SpriteType
    ・Simple - ただ表示
    ・Tiled - 名前のまんま
    ・Filled - 名前のまんま
      Fill DirとFill Amountを変えると色々できる
    ・Sliced - 角がボケないように拡大縮小できる
      Inspector->Sprite->Edit->Boarderを変更        

  Pivot
    これを変えると回転中心を変えられる

ラベル

・Spriteを選択した状態でNGUI->Create->Label
   まだフォントがない。
・NGUI->Open->Font Maker
   作れるフォントは2種類。bitmapフォントとdynamicフォント。
   2.7のときdynamicフォントなんてあったっけ?
   動画だとdynamicフォントにarialがビルトインされてるって言ってるけど見つからない。というかFontMakerのUIが違う。
   と思ったらこんなの出てた。
もはやUIFont作る必要ないって。
   ただTrueTypeフォントを参照しなさい。ってマジか。すごい。
ただFont選択を押すだけでArial出てきた。
・Labelを編集
   テキスト入れて、色変えて。
   影つけたりもできるよ。
   このLabelはSpriteの子供だからSpriteのサイズや位置を変更しても追従するよ。
   もし他のコントロールに隠れてしまったら
     ・NGUI->Selection->Bring to front
     ・NGUI->Selection->Push to back
   で調整。

コライダ

・Spriteを選択して、NGUI->Attach->Collider
   これでSpriteにぴったりのColliderができる。
   Spriteのサイズ変更したときとかはもっかいAttach ColliderでOK
・ProjectSettings->Physics->Raycasts Hit Triggers
   これ確認してるけど何のためか分からなかった。
・裏に隠れてるコントロールを選択するには右クリック。
   何これすげーーーーーーーーーー。
・逆に手前にあるものを選択するには左クリック。

Buttonコンポーネント

・Spriteを選択してAddComponent->Button
・TargetにはSprite自身を設定
   これで色設定とかできるようになる。
   標準色/マウスホバー時の色/クリック時の色/無効時の色
   簡単過ぎてやばい。
   色選択のとこにPresetってあるけどこんなのあったっけ。むっちゃ便利やん。
・OnClickってとこにSprite自身を設定
・Sprite->AddComponent->NewScript
   適当なpublicメソッドを作成
・そうするだけでドロップダウンに作ったメソッドが出てくる…
   マジで言ってんのかこれ…。便利になりすぎてやばい。

Layerのお話

・Cubeを追加
   Layerを変更すればSceneビューで表示されるものを変更できるよって言ってる。
   でも自分の環境だとSpriteもLabelも全部Defaultレイヤーなんだよね。
   どこか間違えたのか…。まぁいいや。

[2013/11/03追記]
動画見直したらTexture追加した時点で2DUIレイヤーだった。
自分がやってみたらDefaultレイヤーだったし、そもそも2DUIレイヤーなんてなかった。
予めCreate->Panelで2DUIレイヤーのパネルを作っておくといいかもしれない。

Tweenコンポーネント

・Cubeを選択した状態でAddComponent->TweenPosition
   From,Toを指定。これだけで動く。
・TweenPositionを無効化しておく
・Spriteを選択して、OnClick.NotifyにCubeを指定
・OnClick.MethodにTweenPosition.Playを指定
   するとクリック時にTweenが働く。
・TweenPositio.Toggleを指定すると往復動作になったり。
・一旦OnClick.Notifyをクリアしとく

PlayTweenコンポーネント

さらに細かく指定したい場合はこっちを使う
・Spriteを選択した状態でAddComponent->PlayTween
・TargetにCubeを指定
・TriggerConditionにOnHoverを指定
   マウスオーバーでTweenPlay、アウトで逆。
・CubeのTweenPositionコンポーネントでカーブを変更したり。
・TweenコンポーネントはOnFinishedに別のメソッドを追加したりできる。
   連続するTweenの指定も楽々。

Cameraコンポーネント

・UIRoot(2D)を無効化
・MainCamera->AddComponent->Camera
・Cube->AddComponent->PlayTween
・Sceneビューを見やすく操作
・MainCameraを選択し、GameObject->AlignWithView
   これでカメラがSceneビューと同じ位置にくる。これ便利。
・暗いからDirectionalLight追加
・CubeクリックでTweenPositionが起動することを確認
   UIRootじゃなくてもいいんだなー

ウィンドウの作成

・UIRoot(2D)を有効化
・Panelに適当なSprite追加
・ウィンドウっぽく配置
・Label追加
・ウィンドウに重なるSpriteを追加
・半透明のTiledSpriteにする。
・ボタンとかのDepth調整
あれ、なんで動画ではGameビューでPanelが真正面向いてるんだ…。

Widgetをまとめる

・Panelを選択してAddComponent->UIWidgetContainer
   これでマウスダブルクリックするだけでPanelを選べるのね。
   Container単位で一気に移動できたりするのね。

Align

・適当にSprite追加->AddComponent->Anchor
・Sideを変更すると変更するとCamera表示域に対して移動する
・Containerを指定するとそのコントロールを基準にAlignされる
   なるほどなぁ。こうやって×ボタンとか位置揃えるのか。

DrawCall

・Panelを選択するとUIPanelの中にDrawCall数が表示される。
  この動画だと5つ。
    Atlas->Font->Atlas->Font->Atlas
  Depth順に描画するからこうなるらしい。

・Labelは最前面にくるから2つのラベルのDepthを10にしてみる。
   DrawCallが2つに減った!

Spriteを通り抜けるクリックイベント

・実行するとSpriteをクリックしても後ろのCubeが反応してしまう。
・SpriteにNGUI->Attach->ColliderとするとRayCastがとまるのでCubeは反応しなくなる。
  なるほど。こうやるのか。

Widget Wizard

・NGUI->Open->Widget Wizard
・PanelにScrollBar追加
・PanelにToggle(CheckBox)追加
・Toggleを複数追加し、Groupを同一にするとRadioButtonのような動作にもできる。
・Toggleを選択肢、AddComponent->ToggledObjects
・ActivateにScrolBarを指定
  Toggleが選択されているときだけScrolBarが表示されるようになった。
・PanelにSlider追加
・Sliderの背景、前景サイズ変更
  ここでもAttachCollider
・Thumb削除
  削除しても動くらしい
・Panelにスクリプト追加
  スライダーの値を使ってアルファを変更するやつ
・SliderのValueChangedにPanel.SetAlphaを指定
  これでスライダーに応じてPanelの透明度が変わるようになった。

UILabel

・Overflowを変更することで文字やラベルの自動リサイズの動きを変更できる
  ほんと何から何まで実装してあるな…。
・テキストに[99ff00]とかを含めると文字色を途中で変更できる。
・[-]を入れるとそこで色変更が止まる。

ハンドル

・背景画像などによってNGUIの選択枠が見づらくなったら
・NGUI->Handles->Set to Orageとかで色を変えられる。
   あら便利

まとめ

2.7もちょっと触っただけだけどこれは間違いなくよくなってますわー。
動画見ただけで そんなんできるの! ってのいっぱいだった。
Unityのエディタ拡張ってほんとなんでもできちゃうんだね。

まだチュートリアル触っただけで使いこなすにはほど遠いけど
迷いなく使えるようになったらめっちゃ捗りそうなのは間違いない。

とりあえず使おう!

Unity系記事まとめ

スポンサーリンク

Related Posts Plugin for WordPress, Blogger...