11-2. GUIの実装
GUIの実装
エクスペリエンス開発において、GUI(グラフィカルユーザーインターフェース)は、様々な情報表示や、体験のわかりやすさなどのために重要な要素です。GUIの表示変更にはScriptによる制御が必須となります。こちらでは、クライアント側の代表的な制御の1つとして、GUIの概要と制御方法について見ていきます。
主要GUIタイプ
Robloxには基本的に以下の3種のGUIが存在し、用途に応じて使い分けます。
- ScreenGui: スクリーン平面上に表示されるGUI。メニューやHUD、ダイアログなど様々な情報表示やインターフェイスに使用されます。
- SurfaceGui: 3Dオブジェクトの表面に表示するGUI。インタラクティブなオブジェクトや看板などの表面に情報やコントロールを配置するなどで利用します。
- BillboardGui: 3D世界の特定位置において画面に正対表示されるGUI。例えば、プレイヤーの頭上に名前を表示する際などに使用されます。
GUIの実装の基本
GUI配置のルール
GUI要素の配置はタイプに合わせて変更します。通常、ScreenGuiはStarterGuiサービス配下に作成します。SurfaceGui、BillboardGuiは表示先のパーツの配下に配置します。StarterGui配下のGUIは実行時は、Player配下のPlayerGUIの中に配置されクライアント実行されます。
GUIの構築
GUI要素は、StudioのUIエディタを使用して画面上に配置し、必要に応じてプロパティを調整します。プロパティ調整では、サイズの指定において、マルチデバイスに対応するようにScale値で設定する、などの意識が重要となります。
Scriptでの制御
GUIの動作を制御するには、GUI配下にScriptを配置し、必要なロジックを記述するパターンが基本となります。別なScriptからGUI要素にアクセスして制御をすることも可能です。ScreenGuiではLocalScriptが基本となりますが、SurfaceGui、BillboardGuiは、workspace内に配置されている場合、LocalScriptでは動作しないのでScriptなどで制御することが多くなります。
イベント制御の注意
GUIのScript制御では、GUIのイベント(ボタンイベントなど)は、LocalScriptでのみ有効となることに注意が必要です。そしてLocalScriptが実行されるルールはDataModelのどのサービス配下にあるかで変わるため、イベントを使う際にはScriptが動作する設定であることに注意が必要です。通常、GUI系のイベントはPlayerGui(StarterGui)にて実装するケースが多く、以下のような実装パターンが考えられます。
- StarterGui配下のScreenGUIにLocalScriptを配置してイベント処理(基本パターン)
- StarterGui配下のLocalScriptからworkspace内のSurfaceGui、BillboardGuiにアクセスしてイベント処理
- SurfaceGui、BillboardGuiをStarterGuiに作成して、Adorneeで表示先を設定して制御
3D空間に配置されるSurfaceGui、BillboardGuiにはプロパティがあり、表示先を別途明示的に指定できます。これを利用して、LocalScriptが動作する配置でGUIを構築し、表示位置だけ3D位置指定する、というのが最後の手法になります。
実装例：コインの数の表示更新
以下で代表的なGUI制御実装サンプルを提示します。基本となるGUI配下にLocalScriptを配置した場合の制御となります。
コードサンプル
この例では、プレイヤーのコイン数を表示し、コイン数が変更されるたびにGUIを更新します。
実装例：ボタンイベント実装例
コードサンプル
この例では、ボタンがクリックされたときのイベントハンドラを実装しています。
Buttonには様々なイベントが用意されていますが、Activatedが最も汎用的に様々な閑居におけるボタンイベントを検知できるイベントとなります。
参照すべき情報
以下のガイド等には、UIのサイズ調整方法から、実装サンプルまで記載されているので非常に有用です。