うえすと開発メモ

カテゴリ： uGUI

以前作成したUnity UI（uGUI）で頂点カラーを付けるUIエフェクト（uGUI-Effect-Tool）に
だんだん透明になるアルファグラデーション用のコンポーネントを追加しました。

使い方は(Add Component >> UI/Effects/Gradient Alpha)でUIオブジェクトにつけるだけです。
ugui-effect-tool_gradient_alpha01
テキストの場合、全体か1文字づつか選べます。
ugui-effect-tool_alpha02
カラーグラデーションの方にも同様のパラメーターを追加しました。
ugui-effect-tool_gradient03 
カラーグラデーション、色合成についての以前の記事
タグ ：
Unity
uGUI
このエントリーをはてなブックマークに追加

uGUIでワールド位置のオブジェクト上に追従するHUDの実装方法。
ugui_bmfont_07
CanvasのRenderModeが「Screen Space - Cameta」か「WorldSpace」の場合にUI座標を3D空間のオブジェクト位置から取得したい場合、
Camera.WorldToScreenPointで、メインカメラ上のスクリーンポジションを取得して、
RectTransformUtility.ScreenPointToLocalPointInRectangleで、
表示したいUIの親RectTransform配下のローカルポジションを取得します。 

↑の動画では以下のスクリプトコンポーネントをHUD用のUIに付けて、
ターゲットを指定しています。


タグ ：
Unity
uGUI
このエントリーをはてなブックマークに追加

uGUIのTextでビットマップフォント（フォントアトラス）を使う方法です。
Unityのバージョンは5.0.0f4です。

uGUIのTextコンポーネントのFontにカスタムフォントを指定すると表示出来ます。
カスタムフォントについては以下のページの下の方に説明があります。
Unity -Manual:Font - https://docs.unity3d.com/Manual/class-Font.html
ugui_bmfont_05
見た目はあまり変わりませんが、
上がビットマップフォントが適用されたTextコンポーネントで、
下がttfファイルをそのまま指定した場合のダイナミックフォントです。

今回使ったフォントは自家製 Rounded M+になります。
自家製 Rounded M+ - https://jikasei.me/font/rounded-mplus/

ビットマップフォントの生成はBMFont（Bitmap Font Generator）を使用します。
BMFontからは以下の設定で出力しました。
ugui_bmfont_03ugui_bmfont_04
BMFontで出力した.fontファイルから、テキストのuv情報をUnityのカスタムフォントに適用させるため、以下のEditor拡張を使わせてもらいます。

●手順●
1.ChrRectSet.csをEditorフォルダ配下に、
BMFontで吐き出されたpngとfontファイル（拡張子を.txtに変更）を適当な箇所にインポートする。
テクスチャのインポート設定は以下のようにしました。
ugui_bmfont_02
2.UnityEditorのProjectView上で右クリック→「Create」→「Custom Font」を指定してカスタムフォントを作る。

3.カスタムフォントに割り当てるマテリアルを新規作成する。
シェーダーはなんでもよいが「Unlit/Texture」にしておく。
カスタムフォントのDefaultMaterialにマテリアルを設定。

4.メニューから「Custom」→「Custom Font Setting」→「ChrRectSet」を選択し、
カスタムフォントにuv設定を反映させる。
詳しい手順はChrRectSet.cs-使い方を参照。

5.カスタムフォントのAscii Start Offsetに、使う文字の一番最初のASCIIコードを入力。
LineSpacingに改行時のスペースサイズを入力。
通常はビットマップフォント作成時のフォントサイズで良いかと思う。
ugui_bmfont_06
6.uGUIのTextコンポーネントのFontに↑で作ったカスタムフォントを指定する。
カスタムフォントの場合はfont sizeを変更しても反映されないため、
サイズ変更はスケーリングで行う必要がある。
以下のコンポーネントを付ければ、BMFontで設定したフォントサイズを元にスケーリングできる。
ugui_bmfont_01

Textを作って、カスタムフォントを適用して、BitmapFontScalerをアタッチする流れを
自動化したEditorスクリプトも作ったので、Editorフォルダ配下に入れておくと便利。
右クリック→「UI」→「Bitmap Font Text」で上記のテンプレGameObjectが作られる。
ugui_bmfont_07
DEFAULT_FONT_PATHを適宜変更して使用する。

※カスタムフォントは内部で文字ごとのuv座標をすべて持っているので、文字数に比例してデータサイズが大きくなります。
（半角文字すべて＋かなカナ＋第一水準漢字＋全角記号で約1MB）
タグ ：
Unity
uGUI
このエントリーをはてなブックマークに追加

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

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

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

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

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

　選択もさせたくない場合はSelectableやButtonそのものを無効化する必要がある。
　（スクリプトから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);
 

タグ ：
Unity
uGUI
このエントリーをはてなブックマークに追加

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
タグ ：
Unity
uGUI
このエントリーをはてなブックマークに追加

このページのトップヘ