Entrée mobile

Plus de la moitié de toutes les sessions Roblox sont jouées sur les appareils mobiles, donc il est important de prendre en compte la disponibilité sur mobile lors de la conception d'une expérience pour un large public. Vous devriez viser à prendre en charge une gamme de dispositifs d'entrée, y compris entrée de souris et clavier et gamepad.

Lors de la conception d'une expérience mobile, tenez compte de la orientation de l'appareil que vous souhaitez que les utilisateurs utilisent dans votre expérience, puis implémentez vos entrées avec ContextActionService pour exécuter les tâches d'entrée liées aux mobiles suivantes :

• Créer des boutons sur l'écran visibles uniquement sur les appareils mobiles.
• Personnalisez les boutons et l'interface utilisateur mobile pour créer une expérience mobile unique
• Configurer les entrées contextuelles dépendantes qui permet de faire une action différente en fonction de la situation.
• Détectez d'autres appareils d'entrée , tels qu'une souris ou un clavier connecté à une tablette mobile, pour fournir les commandes correctes sur l'écran au utilisateur.

Orientation de l'appareil

Sur les téléphones et les tablettes, l'orientation de l'appareil affecte principalement l'expérience de l'utilisateur et l'interaction. Par exemple, le mode paysage est mieux géré avec deux doigts alors que le mode portrait peut se prêter à une interface à un doigt.

Par défaut, les expériences Roblox s'exécutent en mode paysage, ce qui permet à l'expérience de basculer entre le paysage « gauche » et le paysage « droite » à mesure que l'appareil de l'utilisateur tourne. Cependant, les expériences peuvent être verrouillées à une orientation spécifique si nécessaire.

Modes d'orientation

Il y a cinq modes d'orientation différents, dont deux modes basés sur les capteurs et trois modes verrouillés.

Propriétés d'orientation

Lors de la définition d'une orientation, vous pouvez définir la Orientation de départ, la Orientation dans l'expérience et la Orientation actuelle.

Orientation de démarrage

StarterGui.ScreenOrientation définit l'orientation par défaut pour un emplacement. Les valeurs acceptables incluent :

• ScreenOrientation.LandscapeSensor
• ScreenOrientation.Sensor
• ScreenOrientation.LandscapeLeft
• ScreenOrientation.LandscapeRight
• ScreenOrientation.Portrait

Puisque cette propriété affecte tous les nouveaux utilisateurs qui rejoignent l'expérience, vous pouvez définir sa valeur dans StarterGui → Enum.ScreenOrientation dans Studio.

Orientation dans l'expérience

PlayerGui.ScreenOrientation change explicitement l'orientation de l'expérience pour un utilisateur. Lorsque cette propriété est réglée sur l'un des Enum.ScreenOrientation enums dans un LocalScript, l'expérience s'alignera immédiatement pour correspondre à l'ensemble de l'paramètre. Cela peut être utile lorsqu'une expérience doit fournir une

L'exemple de code suivant dans un LocalScript définit l'orientation de l'écran sur le portrait :

local Players = game:GetService("Players")
local playerGUI = Players.LocalPlayer:WaitForChild("PlayerGui")

task.wait(2)

playerGUI.ScreenOrientation = Enum.ScreenOrientation.Portrait

Orientation actuelle

PlayerGui.CurrentScreenOrientation obtient l'orientation de l'appareil actuel. Les valeurs possibles incluent :

• ScreenOrientation.LandscapeLeft
• ScreenOrientation.LandscapeRight
• ScreenOrientation.Portrait

Le code suivant imprime l'orientation de l'écran actuelle de l'utilisateur :

local Players = game:GetService("Players")
local playerGUI = Players.LocalPlayer:WaitForChild("PlayerGui")

print(playerGUI.CurrentScreenOrientation)

Modes de déplacement du personnage

Roblox offre plusieurs propriétés StarterPlayer que vous pouvez définir pour modifier la façon dont les utilisateurs sur les appareils mobiles peuvent se déplacer dans votre expérience.

Vous pouvez configurer les schémas de contrôle de déplacement mobile pour les expériences Roblox en changeant les valeurs de StarterPlayer.DevTouchMovementMode à l'un des suivre:

Saut automatique

Lorsque StarterPlayer.AutoJumpEnabled est activé, le personnage de l'utilisateur saute automatiquement à travers les espaces lorsqu'il approche l'edge d'une plateforme. StarterPlayer.AutoJumpEnabled est activé par défaut pour les appareils mobiles.

Désactivez StarterPlayer.AutoJumpEnabled pour désactiver cette fonctionnalité et forcer les utilisateurs à sauter uniquement en utilisant leurs raccourcis clavier.

Ajouter des boutons mobiles

Pour ajouter des boutons mobiles, utilisez la méthode ContextActionService:BindAction().

La méthode BindAction() prend les paramètres suivants :

Vous pouvez utiliser le code suivant pour créer une action Interact qui crée un bouton sur l'écran et accepte également une entrée clavier et gamepad.

local ContextActionService = game:GetService("ContextActionService")

local function handleAction(actionName, inputState, inputObject)
	if inputState == Enum.UserInputState.Begin then
		print(actionName, inputObject)
	end
end

-- Lier l'action pour fonctionner
ContextActionService:BindAction("Interact", handleAction, true, Enum.KeyCode.T, Enum.KeyCode.ButtonR1)

Suppression des boutons mobiles

Pour supprimer un bouton mobile de l'écran, appelez UnbindAction() en utilisant la chaîne actionName que vous avez passée à BindAction() .

Utilisez l'exemple de code suivant pour désinterrompre l'action Interagir créée précédemment :

-- Désassocier l'action par nom
ContextActionService:UnbindAction("Interact")

Personnalisation de l'interface utilisateur bouton

Vous pouvez utiliser l'une des plusieurs fonctions de ContextActionService pour personnaliser les boutons sur l'écran qui sont créés par BindAction() .

Texte du bouton

Pour modifier l'étiquette de texte pour un bouton mobile, appelez SetTitle() avec la chaîne actionName et un titre :

-- Définir l'étiquette du bouton sur « Parler »
ContextActionService:SetTitle("Interact", "Talk")

Image de bouton

Les boutons mobiles peuvent utiliser des images personnalisées comme d'autres boutons de GUI en utilisant la méthode SetImage().

Utilisez le code d'exemple suivant pour définir une image de bouton, en remplaçant l'ID de la ressource par une image de votre choix :

-- Définir image bouton
ContextActionService:SetImage("Interact", "rbxassetid://0123456789")

Position du bouton

Par défaut, la position d'un nouveau bouton apparaît près de la section inférieure droite de l'écran. Vous devez prendre soin de la disposition des boutons sur les appareils mobiles et garder à l'esprit les positions des doigts et des mains.

Utilisez le code d'exemple suivant pour définir la position d'un bouton avec la méthode SetPosition() :

-- Définir la position du bouton
ContextActionService:SetPosition("Interact", UDim2.new(1, -70, 0, 10))

Entrées contextuelles

Lorsque vous développez pour les appareils mobiles, vous voudrez souvent changer ce qu'un seul bouton fait en fonction du contexte. Étant donné que l'espace d'écran sur les appareils mobiles est limité, utilisez les boutons contextuels qui effectuent différentes actions en fonction de ce que le personnage est capable de faire.

Par exemple, vous pouvez afficher un bouton « Collecter » actif lorsque l'utilisateur est près d'un coffre en or :

Utilisez l'exemple de code suivant pour créer un bouton mobile qui est étiqueté « Collecter » et est lié à la fonction collectTreasure :

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))
-- Définir l'image sur le bouton bleu "Collecter"
ContextActionService:SetImage("Interact", "rbxassetid://0123456789")

À un autre moment dans le jeu, vous pouvez modifier le bouton pour "Parler" lorsque l'utilisateur est près d'un PNJ. Au lieu d'ajouter et de supprimer le bouton existant, vous pouvez simplement utiliser ContextActionService:BindAction() sur l'action d'interaction existante, en changeant la fonction et l'image du bouton.

Utilisez le code suivant pour définir l'ancienne étiquette de bouton « Parler » et la lier à une fonction nommée talkToNPC :

ContextActionService:BindAction("Interact", talkToNPC, true, Enum.KeyCode.T, Enum.KeyCode.ButtonR1)
-- Définir l'image sur jaune bouton "Parler"
ContextActionService:SetImage("Interact", "rbxassetid://0011223344")

Détection des autres appareils

Dans les expériences cross-platform, il est nécessaire de connaître le périphérique actuel de l'utilisateur pour ajuster les提示 de clé de commande correctes.

Par exemple, si un utilisateur approche un coffre au trésor et qu'il y a une action liée à la collecte de l'or, vous pouvez montrer aux utilisateurs mobiles un bouton "Collect" sur l'écran et aux utilisateurs de bureau un bouton "T" sur l'écran.

Gardez à l'esprit qu'un appareil mobile peut également avoir un souris et clavier ou gamepad connecté. Il est également possible qu'un bureau ait un touchscreen activé. Il est important de référencer les options d'entrée préférées de l'utilisateur en affichant les options d'entrée pour le dispositif actuellement utilisé.

Dans ces cas, vous pouvez utiliser UserInputService pour détecter les appareils d'entrée qui sont activés. Si plusieurs appareils d'entrée sont activés, utilisez UserInputService:GetLastInputType() pour obtenir le dernier appareil d'entrée de l'utilisateur à afficher sur l'interface utilisateur.

Vous pouvez utiliser le suivant ModuleScript, placé dans ReplicatedStorage et renommé en UserInputModule, pour récupérer le taperd'entrée de l'utilisateur, après quoi vous pouvez ajuster le layout ou le contexte de l'expérienceà vos besoins spécifiques.

Utilisez le suivant ModuleScript pour vérifier les appareils d'entrée activés et le dernier appareil d'entrée utilisé :

local UserInputService = game:GetService("UserInputService")

local UserInput = {}

local inputTypeString
-- Si l'appareil a un clavier et une souris actifs, supposez que ces entrées
if UserInputService.KeyboardEnabled and UserInputService.MouseEnabled then
	inputTypeString = "Keyboard/Mouse"
-- Sinon, si l'appareil a la capacité tactile mais pas de clavier et de souris, supposez que l'entrée tactile
elseif UserInputService.TouchEnabled then
	inputTypeString = "Touch"
-- Sinon, si l'appareil a un gamepad actif, supposez que l'entrée gamepad est activée
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

Une fois le script UserInputModule en emplacement, utilisez l'exemple de code suivant dans un LocalScript pour obtenir le dernier taperd'entrée de l'utilisateur :

local ReplicatedStorage = game:GetService("ReplicatedStorage")

-- Exigez le module
local UserInputModule = require(ReplicatedStorage:WaitForChild("UserInputModule"))

local currentUserInput, inputEnum = UserInputModule.getInputType()
print(currentUserInput, inputEnum)