全然ついていけてない。
とりあえずチュートリアル動画見ながら触ってみました。
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 MakerDrawCall減らすのに重要だよー。
画像を選択すると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
作れるフォントは２種類。bitmapフォントとdynamicフォント。
2.7のときdynamicフォントなんてあったっけ？
動画だとdynamicフォントにarialがビルトインされてるって言ってるけど見つからない。というかFontMakerのUIが違う。
と思ったらこんなの出てた。
ただTrueTypeフォントを参照しなさい。ってマジか。すごい。
・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->TweenPositionFrom,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調整
Widgetをまとめる
・Panelを選択してAddComponent->UIWidgetContainerこれでマウスダブルクリックするだけでPanelを選べるのね。
Container単位で一気に移動できたりするのね。
Align
・適当にSprite追加->AddComponent->Anchor・Sideを変更すると変更するとCamera表示域に対して移動する
・Containerを指定するとそのコントロールを基準にAlignされる
なるほどなぁ。こうやって×ボタンとか位置揃えるのか。
DrawCall
・Panelを選択するとUIPanelの中にDrawCall数が表示される。この動画だと５つ。
Atlas->Font->Atlas->Font->Atlas
Depth順に描画するからこうなるらしい。
DrawCallが２つに減った！
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系記事まとめ
