West Hill 開発メモ

uGUIのUIをキーボードやゲームパッドで操作制御する方法について調べました。
Unityのバージョンは5.0.0f4です。

StandaloneInputModuleについて
 キーやパッドでのUI操作を有効にするためには、
 StandaloneInputModuleコンポーネントが必要で、
 通常はシーン内でメニューからUI要素を作った際に自動的に生成される
 EventSystemにくっついています。
ugui_input_01
InputActionsPerSecond
 ジョイスティックや左右上下キーを倒しっぱなしにした場合に、
 1秒間にリピート判定する回数を指定する。

Allow Activation on Mobile Device
 iOSやAndroid等のモバイルデバイスで
 キー操作を受け付ける場合はチェックする。 

HorizontalAxisVerticalAxisSubmitButtonCancelButton
 縦横操作、キャンセル、決定に使用するのインプットの名称を指定する。 
 
 インプット名称がどのボタン・キーに対応するかは
 InputManagerで設定した値が参照される。
 (メニューのEdit→ProjectSettings→Input)
 デフォルトである程度は設定されていて、
 例えばジョイスティックの0ボタンとキーボードのEnterキーが
 Submitとして登録済なので、これらが決定操作となる。
ugui_input_02

●Selectableについて
 選択可能にしたいUIオブジェクトには、Selectableコンポーネントを付けるか、
 Selectableを継承したButtonSlider等のコンポーネントをつけます。
ugui_input_03
Intaractable
 チェックを外すことで非活性状態にできる。
 この場合、キー操作による選択はできるが決定ができなくなる。

 選択もさせたくない場合はSelectableButtonそのものを無効化する必要がある。
 (スクリプトからenable = falseを指定)
 iOSやAndroid等のタッチインターフェースなら、
 覆いかぶさるようにUIを重ねた場合に後ろのボタンは押せなくなるが、
 パッドやキーの場合は背後に隠れていても操作できてしまうため、対応が必要。

Transition
 通常時、選択中、決定時、非活性時の状態変化を
 色変化、スプライト変更、アニメーションのどれかで指定できる。

Navigation
 キー操作時の移動先指定の種別。
 AutomaticだとUIの位置から自動で設定してくれるが、精度は怪しい。
 移動先に制限をかけたい場合や、隣接していないUIへ飛びたい場合には、
 Explicitにすることで上下左右の遷移先を手動で指定できる。

 Visualizeボタンを押すと、シーン上にUIの遷移矢印が表示されるので、わかりやすい。
ugui_input_04
 UIを選択した状態でSubmitに設定されたキーを押すと、
 Submitイベントが呼び出されます。(Buttonの場合はOnClickも)

●スクリプトからの制御について
 現在選択中の情報はEventSystemコンポーネントが持っていて、
 以下の用に取得できる。 

// 選択中のGameObjectを取得 GameObject go = EventSystem.current.currentSelectedGameObject;
 
 ※この辺のプロパティ情報は何故かAPIドキュメントに載っていないが、
 UIとEventSystemはソースコードが公開されているので困ったときに参照できる。

 スクリプトから選択状態にしたい場合は、
 選択状態にしたいSelectableからSelectメソッドを呼べば選択状態にできる。

// 自分を選択状態にする Selectable sel = GetComponent<Selectable> (); sel.Select ();
 

 逆に、選択状態を解除したい場合には
 EventSystemのSetSelectedGameObjectメソッドでnullを入れれば解除できる。 

// 選択を解除 EventSystem.current.SetSelectedGameObject (null);
 

このエントリーをはてなブックマークに追加 Clip to Evernote

UnityのuGUIと同じカメラ内でパーティクルや他のメッシュを重ねたい場合、
Unity2DのSpriteRendererに重ねる場合と同じく、SortingLayerかOrderInLayerで制御可能です。

SortingLayerに対応するシェーダー(Transparent~等)が適用されたRendererがついているGameObjectに、以下のテラシュールブログさんのSortingLayer.csをAddComponentすると、SortingLayerとOrderInLayerの変更が手軽できます。

参考:UnityのSpriteとパーティクルとかモデルの描画順番について 

UI側のSortingLayerとOrderInLayerは親であるCanvasで設定された値になるため、
「奥:UI-パーティクル-UI:手前」と挟んで描画したい場合は手前に表示したいUIを別のCanvasの子にする必要があります。

子のCanvasのOverrideSortingにチェックを入れるとLayerの変更ができます。
※Canvasが増えるとその分ドローコールが増えます。 
uguilayercheck02

重ねてみた出力結果。
uguilayercheck01

SortingLayerは全てDefault
上のボタンのOrderInLayerは1
下のボタンのOrderInLayerは3
青キューブとパーティクルのOrderInLayerは0
赤キューブとパーティクルのOrderInLayerは2
緑キューブとパーティクルのOrderInLayerは4

青は再背面、赤は中間、緑は最前面に描画されています。

また、以下のようにUI階層にキューブやパーティクルを混ぜた場合、
GameObjectにRectTransformをつければアンカーやピボットの設定も適用されました。
uguilayercheck03
このエントリーをはてなブックマークに追加 Clip to Evernote

uGUIでグラデーション、色合成(乗算、加算、減算)を行うUIエフェクトを作りました。

グラデーション。縦、横、両方。
ugui-effect-tool_gradient01

色合成。左上から乗算、加算、減算、合成なし上塗り、元々の状態。
ugui-effect-tool_blend01

使い方はAdd ComponentでそれぞれUIオブジェクトにくっつけるだけです。
・Gradient Color - (Add Component >> UI/Effects/Gradient Color)
ugui-effect-tool_gradient02
・Blend Color - (Add Component >> UI/Effects/Blend Color)
ugui-effect-tool_blend02

標準エフェクトであるShadowやOutlineと同じように、BaseVertexEffectを継承して
ModifyVerticesメソッドで受け取った頂点に対して頂点カラーを設定しています。 

参考:
Outline.cs
Shadow.cs
BaseVertexEffect

このエントリーをはてなブックマークに追加 Clip to Evernote

このページのトップヘ