基本概念(UIコントロール)

UIコントロールとは、パソコンやスマホの画面に表示されるテキストやアイコン、ボタンなどを作成するために使用される部品のことです。

UIコントロールは、あらかじめ画面に表示しておくことができ、いくつかの部品をまとめたテンプレートとして準備して、ノードを介して表示することもできます。
また、ステージ実行中に表示されるUIコントロールは、画面レイアウトに依存します。

UIコントロールの分類

UIコントロールには、最初から用意されている「組み込みパーツ」と自由にカスタムして使う「組み合わせパーツ」の2種類があります。

・固有内容
→これが「組み込みパーツ」です。
 ゲームの仕組みと直接つながっている、必須のパーツです。

・カスタム
→これが「組み合わせパーツ」です。
 細かい素材を自由に使って、自分好みの見た目や機能を作れるパーツです。

組み込みパーツ

自分で画面に追加する必要はなく、あらかじめ用意されています。

ゲームのロジックと深く結びついているため、削除や配置場所の変更、サイズを変えることはできません。
少しの設定変更や、表示・非表示の切り替えのみ可能です。

・ミニマップ
→UIレイアウトの左上に表示されます。
 特定条件を満たすと、ミニマップマークを持つエンティティがミニマップのUIコントロール上に表示され、コンポーネントの設定に応じた内容が映し出されます。

・スキルエリア
→キャラクターのスキルを発動するために使用するボタンです。

・チーム情報
→同じステージをプレイ中のプレイヤーキャラクター情報を表示します。

・キャラHPゲージ
→現在のキャラクターのHPを表示するUIコントロールです。

・スティック
→モバイル端末のプレイヤーが、キャラクターを移動させるためのUIコントロールです。

・創造物HPゲージ
→創造物の名前とHPを表示するUIコントロールです。

・退出ボタン
→プレイを中断・退出するために使用するボタンです。

・オプションタブ
→オプションタブコンポーネントと連動します。
 コンポーネントの設定条件を満たすと、対応する情報が表示されます。

・チャットボタン
→チャットウィンドウを開くためのキーです。

・ネットワークの状態
→リアルタイムのネットワーク接続状態を表示するUIコントロールです。

・抵抗ボタン
→キャラクターが現在「抵抗」状態であることを示すUIコントロールです。

・ボイスチャットボタン
→ボイスチャットの設定画面を開くために使用するUIコントロールです。

・ボイスチャットヒントキュー
→現在どのプレイヤーがボイスチャットで発言しているかをリアルタイムで表示するUIコントロールです。

組み合わせパーツ

作成中のレイアウト画面にそのまま配置して使用することができます。

また、複数のパーツを組み合わせた「テンプレート」として編集することもできます。
テンプレートにしておくことで、ノードを介していつでも画面に呼び出すことができます。

組み合わせパーツの基本設定

インデックス
→UIコントロールがテンプレートとして保存されると、ノードグラフ内で参照できるようにインデックスが割り当てられます。
 インデックスはUIコントロールテンプレートを一意に識別するためのIDです。

・デバイス
→キーボード&マウス、モバイルのタッチスクリーン、コンソール用コントローラー、モバイル用コントローラーの設定を切り替えることができます。

・位置
→UIコントロールの位置を数値で設定できます。
 編集画面でドラッグして位置調整することもできます。

・サイズ
→UIコントロールのサイズを変更できます。一部のUIコントロールでは対応していません。

・ズーム
→UIコントロールの拡大、縮小ができます。

・回転
→UIコントロールを回転させることができます。

・ワープポイントタイプ
→「カスタム」「固有モジュールに追従」のどちらかを選択できます。

・ワープポイント設定
→ワープポイントタイプが「カスタム」の場合にのみ設定できます。
 画像解像度が変更された時、設定したアンカー位置を基準にして相対的な位置関係が維持されます。

・モジュール選択
→ワープポイントタイプが「固有モジュールに追従」の場合にのみ設定できます。
 追従する組み込みパーツを選択します。

・中心
→UIコントロールの中心点の位置を設定します。回転させる際に、この位置を中心に回転します。

・レイヤー
→数値が大きいほど、全面に表示されるようになります。

・可視性
→オフの場合、UIコントロールが表示されなくなります。
 このパラメータは、ノードを介して変更することができます。

レンダリングモードの切り替え

Luna6でUIコントロールのレイヤー機能が修正されました。
ここをクリックすることで、Luna5以前の描画モード(シーケンシャルレンダリング)とLuna6以降の描画モード(レイヤードレンダリング)の切り替えを行うことができます。

Luna5以前→作成された順序に基づいて描画される順次描画
Luna6以降→設定されたレイヤー順序に基づいて描画されるレイヤー描画(同レイヤーの場合は、順次描画)

Luna5以前に作成したステージにLuna6以降に追加されたUIコントロールを使用する場合は、旧モードではサポートされないため、レイヤードレンダリングモードに切り替えることを推奨されています。

Luna6以降に新しくステージを作成する場合は、デフォルトでレイヤードレンダリングモードになっているため、切り替える必要はありません。

ゲームプレイ中、事前に編集されたテキスト内容を表示します。
テキスト内容にカスタム変数が含まれている場合、カスタム変数の値が変更されるとリアルタイムで表示が更新されます。

テキストボックス設定

・フォントサイズ
→文字のサイズを設定します。

・フォントサイズの自動調整
→オンにするとテキストの内容が枠を超えた場合に、全文が表示されるように自動でフォントサイズが変更されます。
 変更後の最小のフォントサイズを設定することができます。

・文字色
→テキスト全体の文字色を変更します。
 ※<color=カラーコード></color>で囲まれている場合は、その箇所はカラーコードが優先されます。

・背景色
→テキストボックスの背景色を変更します。

・文字の縁取りを有効にする
→オンの場合、縁取り色に設定された色で文字を縁取ります。

・配置
→テキストボックス内に表示されるテキスト内容の配置を設定します。

・テキスト内容
→テキストボックスの内容を設定できます。テキストやカスタム変数を使用することができます。
 ※プレイヤーエンティティとステージエンティティのカスタム変数のみ使用可能です。

クライアントコントロールのテキストボックス

クライアントスクリプトを紐づけることができます。

・コントローラーナビゲーション
→コントローラーで上下左右を押した時に、どのUIコントロールへ移動するかを設定することができます。

ゲームプレイ中、設定された画像を画面レイアウト上に表示します。

画像設定

・画像ソース
→「静的参照」「動的参照」「アイテム」「装備」「スキル」「ユニット状態」「陣営」「通貨」「プレハブ」のいずれかを選択できます。

・素材アセットの参照
→画像ソースを「静的参照」にした場合のみ設定できます。
 クリックすることで画像リソースライブラリを開くことができ、プリセットアセットを選択できます。
 一部のアセットはカラー設定に対応しています。

・各カスタム変数
→画像ソースが「静的参照」以外の場合のみ設定できます。
 カスタム変数に設定されたIDに対応する画像を表示します。

クライアントコントロールの画像

クライアントスクリプトを紐づけることができます。

マスク設定

・マスキングを有効にする
→オンにすることでマスク設定を行うことができるようになります。
 また、画像を階層構造にすることで、子画像は親画像の形に合わせてはみ出た部分が自動的に隠れるようになります。

・境界線のぼかし
→オンにすると設定したパラメータに基づいて画像の輪郭がぼかされます。

・ぼかしモード
→境界線のぼかしが「オン」の場合のみ設定できます。
 「ピクセル」「パーセンテージ」のいずれかを選択できます。

ピクセル:x軸、y軸の値に基づいて画像の輪郭をぼかします
パーセンテージ:横方向、縦方向の寸法の割合に基づいて画像の輪郭をぼかします

・進捗に応じた塗りつぶし
→現在の進捗に応じて画像の対応する領域が表示されます。

・形状
→進捗に応じた塗りつぶしが「オン」の場合のみ設定できます。
 「横方向」「縦方向」「90度円軌道」「180度円軌道」「360度円軌道」のいずれかを選択できます。

・方向
→進捗に応じた塗りつぶしが「オン」の場合のみ設定できます。
 どの方向に向かって画像が表示されていくかを設定します。

・開始位置
→形状が「90度円軌道」「180度円軌道」「360度円軌道」のいずれかの場合のみ設定できます。
 表示が始まる位置を設定します。

・進捗
→現在の進捗を設定します。

・マスクエリア反転
→オンの場合、元々マスクされていた領域が表示され、元々表示されていた領域がマスクされて非表示になります。

コントローラーナビゲーション

コントローラーで上下左右を押した時に、どのUIコントロールへ移動するかを設定することができます。

ゲームプレイ中、設定された画像エフェクトを画面レイアウト上に表示します。

画面レイアウト編集中、歯車マークから「画面エフェクトの常時プレビュー」をオンにすることで、
編集時のレイヤーの順序に関わらず、画面エフェクトがプレビュー上で常に表示されるようになります。

画面エフェクト設定

・画面エフェクトを選択
→画面レイアウト上に表示するエフェクトを選択します。

・効果音の再生
→「オン」の場合、画面エフェクトに含まれている効果音が再生されます。

・レイヤー
→「全モジュールより上」「全モジュールより下」のどちらかを設定できます。

クライアントコントロールの画面エフェクト

クライアントスクリプトを紐づけることができます。

・コントローラーナビゲーション
→コントローラーで上下左右を押した時に、どのUIコントロールへ移動するかを設定することができます。

ゲームプレイ中、設定されたフルスクリーンエフェクトを画面レイアウト上に表示します。

フルスクリーンエフェクトは、デフォルトで全レイヤーの一番下に配置され、変更することはできません。
また、画面全体を覆うため、有効範囲も変更することはできません。

画面エフェクト設定

・画面エフェクトを選択
→画面レイアウト上に表示するエフェクトを選択します。

・効果音の再生
→「オン」の場合、画面エフェクトに含まれている効果音が再生されます。

クライアントコントロールのフルスクリーンエフェクト

クライアントスクリプトを紐づけることができます。

・コントローラーナビゲーション
→コントローラーで上下左右を押した時に、どのUIコントロールへ移動するかを設定することができます。

ゲームプレイ中、特殊数字を設定することで、スキル、アイテム、ユニット状態に関する様々なデータを表示します。

ユニット状態は、同一効果が発生した時、効果を上書きせずに別枠で効果を保持する設定にできます。
この時、画面に表示される数字は、層数はすべての合計数が表示され、残り継続時間は一番長く残っている時間が表示されます。

特殊数字

・データソース
→「スキル」「アイテム」「ユニット状態」のいずれかを選択できます。

・スキルスロットをモニタリング
→データソースに「スキル」を選択した場合のみ設定できます。
 監視対象のスキルスロットを選択できます。

・道具配置IDをモニタリング
→データソースに「アイテム」を選択した場合のみ設定できます。
 配置ID型のカスタム変数を設定できます。

・監視モード
→データソースに「ユニット状態」を選択した場合のみ設定できます。
 「モニタリングエンティティ変数」「親エンティティを監視」のどちらかを設定できます。

モニタリングエンティティ変数:指定したエンティティの情報をそのまま画面に表示します
親エンティティを監視:「状態表示エリア」を使用する必要があります。状態表示エリアで割り当てられたユニット状態を表示します。

・モニタリングエンティティ変数
→データソースに「ユニット状態」、監視モードに「モニタリングエンティティ変数」を選択した場合のみ設定できます。
 エンティティ型のカスタム変数を設定できます。

・ユニット状態配置ID
→データソースに「ユニット状態」、監視モードに「モニタリングエンティティ変数」を選択した場合のみ設定できます。
 配置ID型のカスタム変数を設定できます。

・データ内容
→データソースに設定した内容で選択項目が変わります。
 表示する内容を選択します。

・計測単位
→「秒」「分」「時間」のいずれかを選択できます。

・フォントサイズ
→文字のサイズを設定します。

・文字色
→テキスト全体の文字色を変更します。

・文字の縁取りを有効にする
→オンの場合、縁取り色に設定された色で文字を縁取ります。

・配置
→テキストボックス内に表示されるテキスト内容の配置を設定します。

コメント