roblox-user-interfaces

roblox-user-interfaces

表示面に合わせて GUI コンテナーを選び、レイアウトと制約を使って画面サイズに対応します。ScreenGui 内のパーティクルには 2D UI オブジェクトを使います。ParticleEmitter は ScreenGui 内には描画されません。

主な情報源：

• https://create.roblox.com/docs/en-us/ui
• https://create.roblox.com/docs/en-us/ui/on-screen-containers
• https://create.roblox.com/docs/en-us/ui/in-experience-containers
• フレーム、ラベル、ボタン、テキスト入力、位置とサイズ、リスト・フレックスレイアウト、グリッド・テーブルレイアウト、外観モディファイアー、スタイリング、近接プロンプト、UI ドラッグ検出器などのサブガイド
• roblox-animation スキル（これらのオブジェクトのモーション用）
• エンジンクラス：ScreenGui、SurfaceGui、BillboardGui、GuiObject とそのすべての派生クラス、各種 UILayout クラスと UIConstraint クラス、CanvasGroup、ViewportFrame など

UI のモーションについては、roblox-animation を参照してください。3D ワールドのエフェクトについては、roblox-vfx を参照してください。

GUI コンテナーを選ぶ

ScreenGui（画面上のオーバーレイ）

• StarterGui の子にすると、各プレイヤーの PlayerGui に自動的に複製されます。
• .Enabled（または親子関係の操作）で表示状態を制御します。
• .DisplayOrder（値が大きいほど前面）で複数のレイヤーを重ねます。
• .ScreenInsets は CoreUISafeInsets（デフォルト。トップバーとデバイスのノッチを考慮）、DeviceSafeInsets、TopbarSafeInsets、または None に設定します。
• .ResetOnSpawn の動作は、StarterGui からの直接の祖先関係によって異なります。
• すべての操作とロジックはクライアント専用です（LocalScripts またはクライアント側の ModuleScripts）。

SurfaceGui（パーツの面に表示するワールド空間 UI）

• BasePart の子として直接配置できます（その場合は .Face を使用します）。または StarterGui/PlayerGui に配置し、.Adornee でパーツを指定できます。
• 操作可能なボタンが入力を受け付けるのは、SurfaceGui が最終的に表示プレイヤーの PlayerGui の下にあり、かつパーツの CanQuery が true の場合のみです。
• .AlwaysOnTop、.Brightness（0～1000）、.LightInfluence（0～1）、.MaxDistance、.ZOffset（同じ面にある複数の UI の並び順用）。
• 端末、車両のダッシュボード、キーパッド、看板に最適です。

BillboardGui（常にカメラを向くワールド空間 UI）

• SurfaceGui と同様のプロパティに加えて、.StudsOffset（カメラの向きに対するオフセット）と .StudsOffsetWorldSpace（ワールド軸に対するオフセット）を使用します。Size のスケール要素でサイズをスタッド単位で指定します（例：UDim2.fromScale(4, 2) は 4×2 スタッドのビルボードを作成し、画面上のサイズは距離に応じて変化します）。
• ネームプレート、浮遊する体力バー、クエストマーカー、ダメージ数値、頭上やオブジェクト上に表示するコンテキストプロンプトに最適です。
• 操作可能な要素には、SurfaceGui と同じ PlayerGui の祖先関係のルールに加えて、BillboardGui.Active = true（およびボタン自体の Active）が必要です。

その他／特殊なコンテナー：

• CoreGui（Roblox が所有。StarterGui:SetCoreGuiEnabled(Enum.CoreGuiType.XXX, false) で制御します）。
• ViewportFrame（3D カメラとワールドを 2D の長方形内に表示します。アイテムのプレビューや静的な 3D モデルに最適です。実際の ParticleEmitter、Beam、Trail のエフェクトは描画されません）。

レイアウトオブジェクトとモディファイア

現代の Roblox UI の大部分は、次の要素で構築されています。

• Frame または CanvasGroup をコンテナとして使用します（ClipsDescendants、AutomaticSize = X/Y/XY、Background* プロパティ、Rotation）。
• 表示には TextLabel / ImageLabel を使用します。
• 操作には TextButton / ImageButton を使用します（クロスプラットフォーム対応のイベントとして Activated が推奨されます）。
• 入力には TextBox を使用します。
• ScrollingFrame（CanvasSize、AutomaticCanvasSize、ScrollBar* プロパティ）。
• 3D コンテンツには ViewportFrame を使用します。

レイアウトオブジェクト（真価を発揮する機能）：

• UIListLayout / UIGridLayout / UIPageLayout：自動配置、FillDirection、Horizontal/VerticalAlignment、Padding、SortOrder を設定します。UIListLayout はフレックス機能（HorizontalFlex、VerticalFlex、ItemLineAlignment、Wraps）にも対応しており、オブジェクトごとのフレックス設定には UIFlexItem を組み合わせて使用します。
• これらを親の AutomaticSize と組み合わせることで、コンテンツや言語に応じて拡大・縮小する、真にレスポンシブな UI を構築できます。

外観と制約のモディファイア（古い回避策の代わりに使用します）：

• UIStroke（ApplyStrokeMode、Color、Enabled、LineJoinMode、Thickness、Transparency、ZIndex）。あらゆる GuiObject で使える最新の境界線です。
• UIGradient（Color は ColorSequence、Transparency は NumberSequence です）。Type では Linear、Radial、Conical、Elliptical を選択します（Elliptical はベータ版の「Upgraded UIGradients」機能の一部です）。Scale で範囲を制御し、TileMode では Clamp、Repeat、Mirror を選択します。Radial グラデーションでは Rotation は無視されます。https://create.roblox.com/docs/ui/appearance-modifiers#gradient を参照してください。
• UICorner（CornerRadius。角丸長方形には、9 スライスを使った古い回避策よりもはるかに優れています）。
• UIPadding、UISizeConstraint、UIAspectRatioConstraint、UIScale、UIFlexItem。

配置の基本（高品質な UI に欠かせません）：

• ほとんどの場合、Offset（ピクセル数）よりも Scale（0～1）を優先してください。
• AnchorPoint はオブジェクトの支点を制御します（0,0 = 左上、0.5,0.5 = 中央。Position または Size をトゥイーンする前に設定してください）。
• 1 つのコンテナ内のレイヤーには ZIndex を、ScreenGui 全体のレイヤーには DisplayOrder を使用します。
• ワールド空間では、BillboardGui の StudsOffset と、Surface および Billboard の両方で ZOffset + AlwaysOnTop を使用します。

プロパティの一覧表、一般的な階層、レスポンシブなレシピについて詳しくは、references/gui-containers.md を参照してください（構成要素とレイアウトを解説しています）。

インタラクションモデル

• ボタン：.Activated を優先してください（リリース時に発生し、マウス、タッチ、ゲームパッドで動作します）。
• MouseButton1Click / MouseButton1Down なども引き続き使用できますが、クロスプラットフォーム対応にはあまり適していません。
• TextBox には FocusLost、Focused、ReturnPressedFromOnScreenKeyboard などがあります。
• 新しい機能：スライダー、スピナー、ドラッグ可能なオブジェクト、ドアなどに使える UI ドラッグ検出器（2D）と 3D ドラッグ検出器。
• 3D ワールドで「E を押して操作」のようなプロンプトを表示するには ProximityPrompt を使用します（UI とは別の機能ですが、UI と組み合わせて使われることがよくあります）。

StarterGui:SetCoreGuiEnabled(Enum.CoreGuiType.PlayerList, false) などを使って、Roblox の標準 UI を制御します。独自の入力機能を提供する場合は、GuiService.TouchControlsEnabled = false を使って仮想コントロールを非表示にします。

UI でのパーティクルエフェクト

ParticleEmitter は 3D ワールド内（Part または Attachment の子）に直接配置します。2D UI では、次の優れた方法があります。

1. スクリプトによる 2D パーティクルプール。ImageLabel のテーブル（または小さな子要素を多数含む単一の CanvasGroup）を使用します。TweenService で Position（スケールまたはローカル）、Size、Transparency、Rotation、Color を操作します。インスタンスをプールして再利用します。紙吹雪、火花、浮かぶ数値、報酬のバースト、ヒットマーカーに最適です。
2. ViewportFrame への埋め込み。ScreenGui 内に ViewportFrame を配置します。その中に 3D パーツ、メッシュ、カメラ、小さなリグを入れます。実際の ParticleEmitter、Beam、Trail、Light オブジェクトは、ViewportFrame 内では描画されません。ViewportFrame 自体のプロパティ、または内部のカメラやパーツを Tween で操作します。多くの 3D アビリティプレビューや、光るアイテムの確認表示はこの方法で実現されています。
3. CanvasGroup + 高速な Tween。グループの「ポップ」、きらめき、またはディゾルブエフェクトに使用します。
4. UIStroke + アニメーションする UIGradient。エネルギーの境界線、チャージエフェクト、アニメーションするラインに使用します。
5. Text + MaxVisibleGraphemes と小さな画像の「パーティクル」の組み合わせ。凝った会話やタイトルシーケンスに使用します。

パフォーマンスの実情：モバイルでは、透明なオーバードローとフィルレートがボトルネックになります。同時に表示する UI の「パーティクル」は少なく抑え、インスタンスを積極的に再利用し、小さなテクスチャを使い、低いグラフィック品質でテストしてください。

具体的なプールの実装方法、ViewportFrame の設定パターン、3D マーカーとの連携、パフォーマンス上の注意点については、専用リファレンスの particles-in-ui.md を参照してください。

レスポンシブレイアウト

• 基準となる解像度やアスペクト比（例：1920x1080、または一般的なモバイルの解像度）で設計しますが、実装ではすべてスケールと制約を使用します。
• 行や列には、位置を手動で計算する代わりに UIListLayout + AutomaticSize + Padding を使用します。
• デバイスのクラスごとに異なる ScreenGui を用意して UserInputService で切り替えるか、レイアウトオブジェクトとサイズ修飾子を使って柔軟に変化する単一のレイアウトを作成します。
• ユニバーサルスタイル（Style Editor + StyleRules）は、Roblox における CSS に相当します。複数の UI 要素で色、線、フォント、さらにはトランジションを統一するために使用します。

UI のレビューチェックリスト

新しい ScreenGui：

• コンテンツに適切な ScreenInsets を設定している（操作可能な要素 → CoreUISafeInsets）。
• 他のレイヤーより上または下に表示する必要がある場合は、DisplayOrder を設定している。
• ResetOnSpawn の動作を理解し、意図した設定にしている。
• すべての子要素でスケール + AnchorPoint + 制約を使用している。

新しいインタラクティブ要素：

• ボタンで Activated を使用している。
• ワールド空間にある場合は、入力に関する階層ルールを満たしている（PlayerGui）。また、パーツの CanQuery が true になっている。
• ホバー時や押下時の状態（Tween、またはボタン自体や兄弟要素のハイライトの状態変化）で視覚的なフィードバックを提供している。

UI のパーティクル / VFX：

• インスタンスをプールして再利用している。
• 同時に表示する数を制限している。
• 最低のグラフィック品質でテストしている。
• アニメーションスキルのマーカーまたは UI イベントを通じて、意味のあるゲームプレイのタイミングに連動させている。

すべてのプロパティと最新の追加機能（新しいレイアウト、ドラッグ検出機能、スタイリング機能など）の完全な一覧については、https://create.roblox.com/docs/reference/engine の Engine API リファレンスを参照してください。

リファレンス一覧

• gui-containers.md：画面空間またはワールド空間のコンテナを選択し、レイアウトの動作を設定します。
• particles-in-ui.md：2D パーティクルエフェクトを作成するか、UI と 3D プレビューを組み合わせます。