Roblox セッションの半分以上がモバイルデバイスでプレイされているため、幅広いオーディエンスに向けたエクスペリエンスのデザインには、クロスプラットフォームのアクセシビリティを考慮することが重要です。マウスとキーボードの入力 およびゲームパッド などの多様な入力デバイスをサポートする必要があ
モバイルエクスペリエンスを設計するときは、ユーザーがエクスペリエンスで使用するデバイスの方向を考慮し、デバイスのオリエンテーション をContextActionService でインプットを実装して、次のモバイル関連の入力タスクを実行するために、Class.ContextActionService を使用してインプットを実装します:
- 画面ボタンを作成する モバイルデバイスにのみ表示されます。
- 同じボタンまたは入力を実行するための設定コンテキスト依存インプット これは、状況に応じて同じボタンまたは入力を実行することを可能にします。
デバイスのオリエンテーション
電話とタブレットでは、デバイスのオリエンテーションは、ユーザーエクスペリエンスとインタラクションに大きく影響します。たとえば、ランドスケープモードは、2つの指で操作することが最善ですが、ポートレートモードは、1つの指で操作することが最善です。
デフォルトでは、Roblox エクスペリエンスはランドスケープモードで実行され、ユーザーのデバイスが回転すると、エクスペリエンスが左側の「ランドスケープ左」から右側の「ランドスケープ右」に切り替わります。ただし、「ランドスケープ」のオリエンテーションを変更したい場合は、エクスペリエンスをロックできます。
オリエンテーションモード
5つのオリエンテーションモードがあります。これには、2つのセンサーベースモードと 3つのロックモードが含まれます。
センサーモード | |
---|---|
地形センサー | エクスペリエンスが常にランドスケープモードで表示され、デバイスが物理的なオリエンテーションを検出して、エクスペリエンスビューが常に上向きに表示されるようにします。 |
センサ | デバイスは、物理的なオリエンテーションを検出して、常にエクスペリエンスビューが上に向いていることを確認し、必要に応じて景観とポートレートモードを切り替えます。 |
ロックされたモード | |
---|---|
左に景観 | 物理的なホームボタンのあるデバイスでは、ホームボタンはディスプレイの左側にあります。バーチャルなホーム/ナビバーを持つデバイスでは、そのタッチ領域はディスプレイの下部にあります。 |
左に景観を変更 | 物理的なホームボタンのあるデバイスでは、ホームボタンはディスプレイの右側にあります。バーチャルなホーム/ナビバーを持つデバイスでは、そのタッチ領域はディスプレイの下部にあります。 |
自画像 | 物理的なホームボタンがあるデバイスでは、ホームボタンはディスプレイの下にあります。 バーチャルなホーム/ナビバーがあるデバイスでは、そのタッチ領域はディスプレイの下にあります。 |
オリエンテーションプロパティ
オリエンテーションを設定すると、開始オリエンテーション、インエクスペリエンスオリエンテーション、および現在のオリエンテーション を設定できます。
オリエンテーションの開始
StarterGui.ScreenOrientation は、場プレースのデフォルトのオリエンテーションを設定します。Acceptable の値には以下が含まれます:
このプロパティは、エクスペリエンスに参加するすべての新規ユーザーに影響を与えるため、StarterGui 内の Enum.ScreenOrientation → 枚Class.ScreenOrientation 内の Studio で値を設定できます。
インエクスペリエンスオリエンテーション
PlayerGui.ScreenOrientation は、ユーザーのエクスペリエンスのオリエンテーションを明示的に変更します。このプロパティを Class.LocalScript の 7> Class.PlayerGui のオリエンテーション に設定すると、エクスペリエンスはすぐに設定に一致し
Class.LocalScript の次のコードサンプルは、画面の向きをポートレートに設定します:
local Players = game:GetService("Players")local playerGUI = Players.LocalPlayer:WaitForChild("PlayerGui")task.wait(2)playerGUI.ScreenOrientation = Enum.ScreenOrientation.Portrait
現在のオリエンテーション
PlayerGui.CurrentScreenOrientation は、現在のデバイスのオリエンテーションを取得します。可能な値には以下があります:
次のコードは、ユーザーの現在の画面オリエンテーションを印刷します:
local Players = game:GetService("Players")local playerGUI = Players.LocalPlayer:WaitForChild("PlayerGui")print(playerGUI.CurrentScreenOrientation)
キャラクターの移動モード
Roblox は、モバイル デバイスのユーザーがエクスペリエンスを通じて移動できるようにするためのいくつかの StarterPlayer プロパティを提供します。
Class.StarterPlayer.DevTouchMovementMode の値を次の値の 1 つに変更して、Roblox エクスペリエンスのモバイル移動コントロールスキームを設定できまフォロー中:
オプション | 説明 |
---|---|
ClickToMove | ユーザーは、ターゲットの場所をタップすることでのみエクスペリエンスを移動できます。このモードには、画面の右下領域にジャンプボタンがあります。自動ジャンプ は常にこの移動モードで有効です。 |
DPad | |
DynamicThumbstick | ユーザーが最初に下に押すと、ダイナミックなサムリングが表示されます。このモードには、画面の右下領域にジャンプボタンがあります。これは、UserChoice が設定されている場合のデフォルトユーザー設定です。 |
Scriptable | すべてのデフォルトコントロールを無効にし、「自分のコントロールスキームをスクリプト」できるようになります。 |
Thumbpad | |
Thumbstick | 画面の左下領域に位置するモバイルサムネイル。DynamicThumbstick とは異なり、サムネイルの位置は静的であり、ユーザーが画面にタッチすると位置が変更されません。 |
UserChoice | ユーザーがエクスペリエンス中の設定メニューから好きなコントロールスキームを選択できるようにします。これはエクスペリエンスのデフォルトの移動モードです。 |
自動ジャンプ
Class.StarterPlayer.AutoJumpEnabled が有効になると、ユーザーのキャラクターはプラットフォームの端に近づくと自動的にジャンプします。StarterPlayer.AutoJumpEnabled は、モバイルデバイスのデフォルトで有効になります。
Class.StarterPlayer.AutoJumpEnabled を無効にすると、この機能を無効にし、ユーザーがキーバインドを使用してのみジャンプするように強制します。
モバイル用ボタンの追加
モバイル ボタンを追加するには、ContextActionService:BindAction() メソッドを使用します。
Class.ContextActionService:BindAction()|BindAction() メソッドは次のパラメーターを取ります:
パラメータ | タイプ | 説明 |
---|---|---|
アクション名 | 文字列 | バインド中のアクションの識別子の弦。「ContextActionService」で他の関数と一緒に「アクション名」を使用して、バインドを編集できます。 |
関数をバインド | 機能 | 指定された入力がトリガーされるときに呼び出される関数。この関数は 3つの引数を受信します:
|
ボタンを作成 | ブールーン | 有効にすると、ゲームがモバイルデバイスで実行されるときに画面上のボタンを作成します。 |
入力タイプ | tupe | 枚열コード などの列値の列。 |
次のコードサンプルを使用して、画面ボタンを作成し、キーボードとゲームパッドの入力を受け入れる Interact アクションを作成できます:
local ContextActionService = game:GetService("ContextActionService")
local function handleAction(actionName, inputState, inputObject)
if inputState == Enum.UserInputState.Begin then
print(actionName, inputObject)
end
end
-- 機能にバインドする
ContextActionService:BindAction("Interact", handleAction, true, Enum.KeyCode.T, Enum.KeyCode.ButtonR1)
モバイルボタンの削除
スクリーンからモバイルボタンを削除するには、UnbindAction() を使用して、BindAction() にパスしたアクション名のストリングを使用しています。
以下のコードサンプルを使用して、以前に作成されたインタラクトアクション操作バインド解除します:
-- アクションを名前でバインド解除ContextActionService:UnbindAction("Interact")
ボタン UI のカスタマイズ
Class.ContextActionService のいくつかの機能を使用して、BindAction() によって作成される画面ボタンをカスタマイズできます。
ボタンテキスト
モバイル ボタンのテキストラベルを変更するには、SetTitle() を呼び出し、タイトル:
-- ボタンラベルを「トーク」に設定ContextActionService:SetTitle("Interact", "Talk")
ボタン画像
モバイルボタンは、SetImage() メソッドを使用して、他の GUI ボタンと同じようにカスタム画像を使用できます。
次のサンプルコードを使用してボタン画像を設定し、アセット ID を選択した画像に置き換えます:
-- ボタン画像を設定ContextActionService:SetImage("Interact", "rbxassetid://0123456789")
ボタンの位置
デフォルトでは、新しいボタンの位置は画面の右下領域の近くに表示されます。モバイルデバイスでボタンの配置を検討するときは、親指と手の位置を考慮してください。
次のサンプルコードを使用して、ボタンの位置を SetPosition() メソッドで設定します:
-- ボタンの位置を設定ContextActionService:SetPosition("Interact", UDim2.new(1, -70, 0, 10))
コンテキストに依存する入力
モバイルデバイスで開発するときは、コンテキストに基づいて単一のボタンがどのように変更されるか常に変更したい場合があります。モバイルデバイスのスクリーンスペースが制限されているため、キャラクターが行うことができるアクションに基づくコンテキストボタンを使用してください。
たとえば、ユーザーが金の箱の近くに立っているときに「集める」ボタンを表示できます。
次のコードサンプルを使用して、「お宝を集める」とラベル付きのモバイルボタンを作成し、集める機能のコレクトTreasure:
local ContextActionService = game:GetService("ContextActionService")
local function collectTreasure(actionName, inputState, inputObject)
if inputState == Enum.UserInputState.Begin then
print("Collect treasure")
end
end
ContextActionService:BindAction("Interact", collectTreasure, true, Enum.KeyCode.T, Enum.KeyCode.ButtonR1)
ContextActionService:SetPosition("Interact", UDim2.new(1, -70, 0, 10))
-- 画像を青に設定します "コレクト" ボタン
ContextActionService:SetImage("Interact", "rbxassetid://0123456789")
ゲームの別の場所で、ユーザーが NPC の近くに立っているときにボタンを「トーク」に変更できます。代わりに、既存のボタンを追加および削除することなく、ContextActionService:BindAction() をインタラクトアクションに使用して、機能とボタン操作像を変更できます。
次のコードサンプルを使用して、既存のボタンラベルを「Talk」に設定し、「TalkToNPC」という名前の関数にバインドします:
ContextActionService:BindAction("Interact", talkToNPC, true, Enum.KeyCode.T, Enum.KeyCode.ButtonR1)-- 画像を黄色に設定します "トーク" ボタンContextActionService:SetImage("Interact", "rbxassetid://0011223344")
他のデバイスを検出する
クロスプラットフォームエクスペリエンスでは、ユーザーの現在のデバイスを知ることが、UI とディスプレイの正しいキーバインドプロンプトを調整するために必要です。
たとえば、ユーザーが宝箱に近づいて、金を集めるアクションがある場合は、モバイルユーザーに「コレクト」ボタンを表示し、デスクトップユーザーに「T」キーアイコンを表示します。
モバイルデバイスには、マウスとキーボード またはゲームパッド が接続されている可能性があります。デスクトップには、touchscreen が有効になっている可能性があります。アクティブに使用されているデバイスの入力オプションを表示するこ
この場合、UserInputService を使用して、どの入力デバイスが有効になっているかを検出できます。複数の入力デバイスが有効になっている場合は、UserInputService:GetLastInputType() を使用して、ユーザーの最後に使用された入力デバイスを表示します。
Class.ReplicatedStorage の中にある、次の ReplicatedStorage を使用して、ユーザーの入力タイプを取得し、ユーザーのインターフェースレイアウトまたはコンテキストをカスタマイズするために UserInputModule に変更し、ユーザーの入力タイプを取得するために、1>Class.ModuleScript1> を使用して、4>Class.ModuleScript</
次の ModuleScript を使用して、有効な入力デバイスと最後に使用された入力デバイスをチェックします:
local UserInputService = game:GetService("UserInputService")
local UserInput = {}
local inputTypeString
-- デバイスにアクティブなキーボードとマウスがある場合、それらの入力を仮定します
if UserInputService.KeyboardEnabled and UserInputService.MouseEnabled then
inputTypeString = "Keyboard/Mouse"
-- デバイスにタッチ機能がありますが、キーボードとマウスがありません、タッチ入力を仮定します
elseif UserInputService.TouchEnabled then
inputTypeString = "Touch"
-- デバイスにアクティブなゲームパッドがある場合、ゲームパッドの入力を仮定します
elseif UserInputService.GamepadEnabled then
inputTypeString = "Gamepad"
end
function UserInput.getInputType()
local lastInputEnum = UserInputService:GetLastInputType()
if lastInputEnum == Enum.UserInputType.Keyboard or string.find(tostring(lastInputEnum.Name), "MouseButton") or lastInputEnum == Enum.UserInputType.MouseWheel then
inputTypeString = "Keyboard/Mouse"
elseif lastInputEnum == Enum.UserInputType.Touch then
inputTypeString = "Touch"
elseif string.find(tostring(lastInputEnum.Name), "Gamepad") then
inputTypeString = "Gamepad"
end
return inputTypeString, lastInputEnum
end
return UserInput
ユーザー入力モジュールのスクリプトが配プレースされたら、Class.LocalScript 内の次のコードサンプルを使用して、ユーザーの最後の入力タイプを取得します。
local ReplicatedStorage = game:GetService("ReplicatedStorage")-- モジュールを要求するlocal UserInputModule = require(ReplicatedStorage:WaitForChild("UserInputModule"))local currentUserInput, inputEnum = UserInputModule.getInputType()print(currentUserInput, inputEnum)