21/6/2020 Desarrollo multiplataforma

APRENDA ROBLOX > PLATAFORMA CRUZADA

Desarrollo multiplataforma
10 minutos

Este artículo describe las mejores prácticas para el desarrollo de juegos de Roblox en múltiples
plataformas.

Filosofía Roblox
A diferencia de algunos motores de juegos, Roblox es inherentemente multiplataforma : los
jugadores pueden descubrir y jugar juegos en una PC, luego levantar su teléfono y continuar
jugando donde lo dejaron. En la mayoría de los casos, los juegos de Roblox deben ser
accesibles y divertidos en todas las plataformas, en lugar de estar optimizados para una
plataforma y simplemente "básicamente funcionales" en otras.

Primero móvil
Las estadísticas recientes indican que más del 55% de las sesiones de juego de Roblox se
realizan en dispositivos móviles, por lo que debe centrar un esfuerzo proporcional en crear una
gran experiencia móvil. Cuando planifique su interfaz de usuario y controles, tenga en cuenta lo
siguiente:

Diseño de interfaz de usuario

El hecho de que una GUI se ajuste perfectamente en la pantalla de una PC no significa que sea
tan funcional en una pantalla móvil más pequeña. Por ejemplo, los mosaicos de personalización
de color en esta GUI se vuelven pequeños y pequeños en un teléfono:

En contraste, un ligero rediseño de la GUI ofrece una experiencia de usuario positiva tanto en la
PC como en el teléfono:

CONTENIDO

Filosofía Roblox
odinetnoc
ratlucO

Primero móvil


Diseño de interfaz de
usuario
Regiones reservadas
Zonas del pulgar
IU adaptable
IU basada en contexto

Detección de entrada
Regiones reservadas

https://developer.roblox.com/en-us/articles/cross-platform-development 1/4
21/6/2020 Desarrollo multiplataforma

En dispositivos móviles, controles predeterminadosocupan una parte de las esquinas

inferior izquierda y / o inferior derecha de la pantalla. Cuando diseñe la interfaz de usuario del
juego, evite colocar información importante o botones virtuales en estas regiones.

Si su juego usa la configuración predeterminada de control UserChoice ( referencia), los

controles en pantalla pueden variar ligeramente. Recuerde diseñar su interfaz de usuario en
torno a esta posibilidad.

Zonas del pulgar

Most mobile players use two thumbs — one on the virtual thumbstick/DPad and one on the
jump button. Depending on the physical size of the device and the player’s hands, “reaching”
too far from the bottom corners becomes uncomfortable or impossible, so you should avoid
placing frequently-used buttons outside of the green zones.

Adaptable UI
Comfortable thumb zones differ between phones and tablets since tablets have a larger
screen. Remember that a button placed 30% below the screen’s top edge is easily reachable on
a phone but almost unreachable on a tablet.

A more reliable way to position custom buttons is in direct relation to the jump button. The
following code fetches the position of the jump button and creates a placeholder ImageButton
above it:

EXPAND

https://developer.roblox.com/en-us/articles/cross-platform-development 2/4
21/6/2020 Desarrollo multiplataforma

1. -- Get reference to player's jump button

2. local player = game.Players.LocalPlayer
3. local PlayerGui = player:WaitForChild("PlayerGui")
4. local ScreenGui = PlayerGui:WaitForChild("ScreenGui")
5. local TouchGui = PlayerGui:WaitForChild("TouchGui")
6. local TouchControlFrame = TouchGui:WaitForChild("TouchControlFrame")
7. local JumpButton = TouchControlFrame:WaitForChild("JumpButton")
8.
9. -- Get absolute size and position of button
10. local absSizeX, absSizeY = JumpButton.AbsoluteSize.X, JumpButton.Absolut
11. local absPositionX, absPositionY = JumpButton.AbsolutePosition.X, JumpBu
12.
13. -- Create new button above jump button
14. local customButton = Instance.new("ImageButton")
15. customButton.Parent = ScreenGui
16. customButton.AnchorPoint = Vector2.new(0.5, 1)

COPY CODE LIGHT THEME

Context-Based UI
Screen space is considerably smaller on mobile devices, so you should show only the most vital
information during active gameplay. For example, if there’s a special player action to open
doors, it doesn’t make sense to constantly show an “Open Door” button — instead, the button
should appear only when the player is near a door and disappear when they’ve moved a
certain distance away.

Input Detection
In some cases, it’s necessary to know the player’s current device in order to adjust the UI, show
action buttons/reminders, etc. For instance, if a player approaches a treasure chest and there’s
an action bound to collecting the gold, you may want to show PC players an on-screen T key
icon but show mobile players an active “Collect” button.

Mobile — Active Collect button PC — T key reminder

The following ModuleScript , placed within ReplicatedStorage and renamed to

PlayerInputModule, can be used to fetch the player’s input type, after which you can adapt the
UI layout or context as suggested above.

EXPAND

https://developer.roblox.com/en-us/articles/cross-platform-development 3/4
21/6/2020 Desarrollo multiplataforma

1. local UserInputService = game:GetService("UserInputService")

2.
3. local PlayerInput = {}
4.
5. local inputTypeString
6. -- If device has active keyboard and mouse, assume those inputs
7. if UserInputService.KeyboardEnabled and UserInputService.MouseEnabled th
8. inputTypeString = "Keyboard/Mouse"
9. -- Else if device has touch capability but no keyboard and mouse, assume
10. elseif UserInputService.TouchEnabled then
11. inputTypeString = "Touch"
12. -- Else if device has an active gamepad, assume gamepad input
13. elseif UserInputService.GamepadEnabled then
14. inputTypeString = "Gamepad"
15. end
16.

COPY CODE LIGHT THEME

Note that the script uses the UserInputService:GetLastInputType() method instead of just
checking whether the device has an input "capability" like touch. This is because a PC player
may prefer using their mouse and keyboard, even if their PC has touchscreen functionality,
and your UI should respect the active input type.

Once the PlayerInputModule script is in place, you can get the player’s last input type from a
LocalScript as follows:

EXPAND

1. local ReplicatedStorage = game:GetService("ReplicatedStorage")

2.
3. -- Require module
4. local PlayerInputModule = require(ReplicatedStorage:WaitForChild("Player
5.
6. local currentPlayerInput, inputEnum = PlayerInputModule.getInputType()
7. print(currentPlayerInput, inputEnum)

COPY CODE LIGHT THEME

TAGS: multiplataforma móvil gui

ARTÍCULOS RELACIONADOS

Crear botones de GUI Personalizar controles Crear botones móviles

de juego

https://developer.roblox.com/en-us/articles/cross-platform-development 4/4