Entrée mobile

Plus de la moitié de toutes les sessions Roblox sont jouées sur des appareils mobiles, il est donc important de tenir compte de l'accessibilité cross-plateforme lors de la conception d'une expérience pour un large public.Vous devez viser à prendre en charge une variété d'appareils d'entrée, y compris la saisie de la souris et du clavier et le gamepad.

Lors de la conception d'une expérience mobile, tenez compte de l'orientation de l'appareil que vous prévoyez que l'utilisateur utilisera dans votre expérience, puis implémentez vos entrées avec pour effectuer les tâches d'entrée liées à la mobilité suivantes :

• Créer des boutons sur l'écran visible uniquement sur les appareils mobiles.
• Configurer les entrées contextuelles dépendantes qui permettent au même bouton ou entrée d'effectuer une action différente en fonction de la situation.
• Détecter d'autres appareils d'entrée, tels qu'une souris ou un clavier connecté à une tablette mobile, pour fournir aux utilisateurs les bonnes invitations à l'écran.

Orientation de l'appareil

Sur les téléphones et les tablettes, l'orientation de l'appareil affecte principalement l'expérience utilisateur et l'interaction.Par exemple, le mode paysage est le mieux géré avec deux pouces tandis 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 passer d'un paysage "gauche" à un paysage "droit" lorsque l'appareil de l'utilisateur tourne.Cependant, les expériences peuvent être verrouillées à une orientation spécifique si désiré.

Modes d'orientation

Il existe cinq modes d'orientation différents, y compris deux modes basés sur des capteurs et trois modes verrouillés.

Propriétés d'orientation

Lorsque vous définissez une orientation, vous pouvez définir l'orientation de départ , l'orientation en expérience et l'orientation actuelle .

Orientation de départ

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

Comme 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 définie sur l'un des enums Enum.ScreenOrientation dans un LocalScript, l'expérience s'orientera immédiatement pour correspondre au paramètre.Cela peut être utile lorsqu'une expérience doit fournir une expérience spécifique comme verrouiller la vue en portrait pour un mini-jeu.

L'exemple de code suivant dans un LocalScript définit l'orientation de l'écran en 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 du dispositif actuel. Les valeurs possibles incluent :

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

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

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

print(playerGUI.CurrentScreenOrientation)

Modes de mouvement 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 définir des schémas de contrôle du mouvement mobile pour les expériences Roblox en modifiant les valeurs de StarterPlayer.DevTouchMovementMode à l'une des suivre:

Saut automatique

Lorsque StarterPlayer.AutoJumpEnabled est activé, le personnage de l'utilisateur saute automatiquement à travers les espaces lorsqu'il approche le bord 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.

Boutons mobiles personnalisés

Pour ajouter des boutons mobiles personnalisés, utilisez la méthode ContextActionService:BindAction() qui prend les paramètres suivants :

Vous pouvez utiliser l'exemple de code suivant pour créer une action d'interaction qui crée un bouton sur l'écran et accepte également une entrée clavier et manette de jeu:

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 à la fonction
ContextActionService:BindAction("Interact", handleAction, true, Enum.KeyCode.T, Enum.KeyCode.ButtonR1)

Une fois qu'un bouton personnalisé a été ajouté, vous pouvez utiliser l'une des plusieurs fonctions de ContextActionService pour personnaliser les boutons sur écran créés par BindAction() .

• Pour modifier l'étiquette de texte pour un bouton mobile, appelez SetTitle() avec la chaîne actionName et une chaîne de titre.
• Pour utiliser une image personnalisée comme les autres boutons GUI, appelez la méthode SetImage(), en remplaçant l'ID de ressource d'exemple ci-dessous par une image de votre choix.
• Pour définir la position d'un bouton, appelez SetPosition() avec une valeur de position UDim2.

-- Définir la balise de bouton à "Parler"
ContextActionService:SetTitle("Interact", "Talk")
-- Définir l'image du bouton
ContextActionService:SetImage("Interact", "rbxassetid://104919049969988")
-- Définir la position du bouton
ContextActionService:SetPosition("Interact", UDim2.new(1, -70, 0, 10))

Entrées dépendantes du contexte

Lors du développement pour les appareils mobiles, vous pouvez souvent vouloir modifier ce que fait un seul bouton en fonction du contexte.Puisque l'espace d'écran sur les appareils mobiles est limité, utilisez des 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 "Collect" actif lorsque l'utilisateur se trouve près d'un coffre d'or, 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:SetTitle("Interact", "Collect")
ContextActionService:SetPosition("Interact", UDim2.new(1, -70, 0, 10))

À un autre moment pendant le partie, vous pouvez changer le bouton pour "Parler" lorsque l'utilisateur se trouve près d'un PNJ.Au lieu de supprimer le bouton existant pour en placer un autre, vous pouvez simplement appeler BindAction() sur l'action existante "Interact", en modifiant la fonction cible et le titre du bouton :

ContextActionService:BindAction("Interact", talkToNPC, true, Enum.KeyCode.T, Enum.KeyCode.ButtonR1)
ContextActionService:SetTitle("Interact", "Talk")

Détecter d'autres appareils

Dans les expériences cross-plateformes, 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 l'appareil actuellement utilisé.Par exemple, un appareil mobile peut avoir une souris et un clavier ou une manette de jeu connectés, ou il est possible qu'un bureau ait un écran tactile activé.Si plusieurs sources d'entrée sont activées, vous pouvez utiliser GetLastInputType() pour obtenir le dernier appareil d'entrée utilisé par l'utilisateur.

En tant que fondation, 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 la disposition ou le contexte de l'interface utilisateur aux besoins spécifiques de votre expérience.

local UserInputService = game:GetService("UserInputService")

local UserInput = {}

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

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

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