Mais da metade de todas as sessões do Roblox são jogadas em dispositivos móveis, portanto, é importante considerar a acessibilidade em todos os sistemas de plataforma ao projetar uma experiência para um grande público. Você deve alvoar uma variedade de dispositivos de entrada, incluindo entrada do mouse e teclado e gamepad.
Ao projetar uma experiência móvel, considere a orientação do dispositivo que você planeja que os usuários usem em sua experiência, então implemente seus controles com ContextActionService para executar as seguintes tarefas relacionadas a dispositivos móveis:
- Criar botões na tela visíveis apenas em dispositivos móveis.
- Configurar contextos dependentes de entrada que permite que o mesmo botão ou entrada executem uma ação diferente dependendo da situação.
- Detectar outros dispositivos de entrada, como um mouse ou teclado conectado a um tablet móvel, para fornecer os prompts corretos na tela ao usuário.
Orientação do Dispositivo
Em telefones e tablets, a orientação do dispositivo afeta significativamente a experiência do usuário e a interação. Por exemplo, o modo de paisagem é melhor operado com dois dedos enquanto o modo de retrato pode se dar ao modo de um dedo.
Por padrão, as experiências do Roblox são executadas no modo de paisagem, permitindo que a experiência seja alternada entre paisagem "esquerda" e paisagem "direita" à medida que o dispositivo do usuário gira. No entanto, as experiências podem ser bloqueadas para uma orientação específica se desejar.
Modos de Orientação
Existem cinco modos de orientação diferentes, incluindo dois modos baseados em sensores e três modos bloqueados.
| Modos de Sensor | |
|---|---|
| Sensor de Landscape | A configuração padrão do Roblox, na qual a experiência sempre aparece no modo de paisagem (sem modo de retrato), e o dispositivo detecta sua orientação física para garantir que a visão da experiência esteja sempre orientada para cima. |
| Sensor | O dispositivo detecta sua orientação física para garantir que a visão da experiência esteja sempre orientada para cima, alternando entre o modo de paisagem e o modo de retrato necessário. |
| Modos bloqueados | |
|---|---|
| Paisagem Esquerda | Em dispositivos com um botão de início físico, o botão de início está à esquerda da tela. Em dispositivos com uma barra de início virtual, sua região de toque está na parte inferior da tela. |
| Paisagem Direita | Em dispositivos com um botão de início físico, o botão de início está à direita da tela. Em dispositivos com uma barra de início virtual, sua região de toque está na parte inferior da tela. |
| Retrato | Em dispositivos com um botão de início físico, o botão de início está abaixo da tela. Em dispositivos com uma barra de início virtual, sua região de toque está na parte inferior da tela. |
O Roblox não inclui um modo " retrato de cabeça para baixo " pois muitos dispositivos não suportam essa orientação nativamente.
Propriedades de Orientação
Ao definir uma orientação, você pode definir a Orientação de Inicialização, a Orientação In-Experience e a Orientação Atual.
Começando Orientação
StarterGui.ScreenOrientation define a orientação padrão para um local. Os valores aceitáveis incluem:
Como esta propriedade afeta todos os novos usuários que se juntam à experiência, você pode definir seu valor em StarterGui → Enum.ScreenOrientation dentro do Studio.
Orientação na Experiência
PlayerGui.ScreenOrientation Explica explícita a orientação da experiência para um usuário. Quando esta propriedade é definida para uma das Enum.ScreenOrientation enums em um LocalScript, a experiência imediatamente se orientará para corresponder à configuração. Isso pode ser útil quando uma experiência precisa fornecer uma experiência particular, como bloquear a visualização para um
O seguinte código de exemplo em um LocalScript define a orientação da tela para o retrato:
Orientação Atual
PlayerGui.CurrentScreenOrientation obtém a orientação do dispositivo atual. Os valores possíveis incluem:
O seguinte código imprime a orientação de tela atual do usuário:
Modos de Movimento de Personagem
O Roblox oferece várias propriedades StarterPlayer que você pode configurar para alterar como os usuários em dispositivos móveis podem mover através de sua experiência.
Você pode configurar esquemas de controle de movimento móvel para experiências do Roblox alterando os valores de StarterPlayer.DevTouchMovementMode para um dos seguindo:
| Opção | Descrição |
|---|---|
| ClickToMove | Os usuários só podem mover através da experiência clicando em um local de alvo. Este modo inclui um botão de pulo na região inferior direita da tela. Saltar automaticamente está sempre ativo neste modo de movimento. |
| DPad | Essa opção foi removida do aplicativo móvel do Roblox e não deve ser usada para experiências de produção. |
| DynamicThumbstick | Um joystick dinâmico aparece onde o usuário pressiona inicialmente para baixo. Este modo inclui um botão de pulo na região inferior direita da tela. Esta é a configuração padrão do usuário para os usuários móveis, se UserChoice for configurar. |
| Scriptable | Desativa todos os controles padrão e permite que você script your own control scheme . |
| Thumbpad | Essa opção foi removida do aplicativo móvel do Roblox e não deve ser usada para experiências de produção. |
| Thumbstick | Um joystick móvel localizado na região inferior esquerda da tela. Diferente de DynamicThumbstick, a posição do joystick é estática e não muda quando o usuário toca na tela. |
| UserChoice | Permite que os usuários escolham o esquema de controle desejado a partir do menu In-Experience Settings. Este é o modo de movimento padrão para experiências. |
Salto Automático
Quando StarterPlayer.AutoJumpEnabled é ativado, o personagem do usuário salta automaticamente entre espaços quando se aproxima da borda de uma plataforma. StarterPlayer.AutoJumpEnabled é ativado por padrão para dispositivos móveis.
Desabilite StarterPlayer.AutoJumpEnabled para desativar essa função e forçar os usuários a pular apenas usando suas configurações de teclado.
Adicionando Botões Móveis
Para adicionar botões móveis, use o método ContextActionService:BindAction() .
O método BindAction() leva os seguintes parâmetros:
| Parâmetro | Tipo | Descrição |
|---|---|---|
| açãoNome | string / cadeia / texto | Uma string de identificador para a ação que você está vinculando. Você pode usar o actionName com outras funções em ContextActionService para editar o binding. |
| funçãoToBind | função | A função para ser chamada quando o entrada especificado for acionado. Essa função recebe três argumentos:
|
| criarButton de Ajuste | booleano | Quando ativado, cria um botão na tela quando o jogo está em um dispositivo móvel. |
| Tipos de entrada | tupla | As entradas que você intenciona vincular à função, como valores de lista de Enum.KeyCode. |
Você pode usar o seguinte código de exemplo para criar uma ação Interact que cria um botão na tela e também aceita um 键盘 e 游戏手柄 entrada:
local ContextActionService = game:GetService("ContextActionService")
local function handleAction(actionName, inputState, inputObject)
if inputState == Enum.UserInputState.Begin then
print(actionName, inputObject)
end
end
-- Vincular a ação para funcionar
ContextActionService:BindAction("Interact", handleAction, true, Enum.KeyCode.T, Enum.KeyCode.ButtonR1)
Removendo Botões Móveis
Para remover um botão móvel da tela, chame UnbindAction() usando a string de ação que você passou para BindAction() .
Use o seguinte código de exemplo para desvincular a ação Interact criada anteriormente:
Personalizando a Interface do Botão
Você pode usar uma das várias funções de ContextActionService para personalizar os botões na tela que são criados por BindAction() .
Texto do Botão
Para alterar a etiqueta de texto para um botão móvel, chame SetTitle() com a string de ação e um título:
Imagem de Botão
Botões móveis podem usar imagens personalizadas, assim como outros botões de GUI usando o método SetImage().
Use o seguinte código de exemplo para definir uma imagem de botão, substituindo o ID da imagem com uma imagem de sua escolha:
Posição do Botão
Por padrão, a posição de um novo botão aparece perto da seção inferior direita da tela. Você deve considerar cuidadosamente a posição do botão em dispositivos móveis e levar em conta as posições dos dedos e das mãos.
Use o seguinte código de exemplo para definir a posição de um botão com o método SetPosition() :
Entradas Contexto-Dependentes
Ao desenvolver para dispositivos móveis, você pode muitas vezes querer alterar o que um único botão faz com base no contexto. Como o espaço de tela em dispositivos móveis é limitado, use botões contextuais que executam diferentes ações com base no que o personagem é capaz de fazer.
Por exemplo, você pode exibir um botão "Coletar" ativo quando o usuário estiver perto de um baú de ouro:
Use o seguinte código de exemplo para criar um botão móvel que está etiquetado como "Coletar" e está vinculado à função coletarTreasure":
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))
-- Configure a imagem para o botão azul "Coletar"
ContextActionService:SetImage("Interact", "rbxassetid://0123456789")
Em outro ponto do jogo, você pode alterar o botão para "Falar" quando o usuário estiver perto de um NPC. Em vez de adicionar e remover o botão existente, você pode simplesmente usar ContextActionService:BindAction() na ação de Interagir atual, alterando a função e a imagem do botão.
Use o seguinte código de exemplo para definir a etiqueta de botão existente para "Talk" e vinculá-la a uma função chamada talkToNPC>:
Detectando Outros Dispositivos
Em experiências de plataforma cruzada, é necessário conhecer o dispositivo atual do usuário para ajustar as solicitações de teclado corretas.
Por exemplo, se um usuário se aproxima de um baú do tesouro e há uma ação vinculada à coleta de ouro, você pode mostrar aos usuários móveis um botão "Coletar" na tela e aos usuários do desktop um ícone de chave "T".
Tenha em mente que um dispositivo móvel também pode ter um mouse e teclado ou gamepad plugado. É também possível que um desktop tenha um touchscreen ativado. É importante referenciar as opções de entrada preferidas do usuário ao exibir opções de entrada para o dispositivo ativamente usado.
Nesses casos, você pode usar UserInputService para detectar quais dispositivos de entrada estão habilitados. Se vários dispositivos de entrada estiverem habilitados, use UserInputService:GetLastInputType() para obter o dispositivo de entrada usado por último pelo usuário para exibir na UI.
Você pode usar o seguinte ModuleScript, colocado dentro de ReplicatedStorage e renomeado para UserInputModule, para obter o digitarde entrada do usuário, após o qual você pode adaptar o layout ou o contexto da UI às necessidades específicas do seu experiência.
Use o seguinte ModuleScript para verificar se os dispositivos de entrada ativados e o último dispositivo de entrada usado:
local UserInputService = game:GetService("UserInputService")
local UserInput = {}
local inputTypeString
-- Se o dispositivo tiver teclado e mouse ativo, assuma que essas entradas
if UserInputService.KeyboardEnabled and UserInputService.MouseEnabled then
inputTypeString = "Keyboard/Mouse"
-- Caso o dispositivo tenha capacidade de toque, mas não tenha teclado e mouse, assuma que a entrada de toque seja
elseif UserInputService.TouchEnabled then
inputTypeString = "Touch"
-- Caso o dispositivo tenha um controle / controle de jogoativo, assuma a entrada do gamepad
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
Uma vez que o script UserInputModule está em local, use o seguinte código de exemplo em um LocalScript para obter o último digitarde entrada do usuário: