Detecta la plataforma

Detecta si tu scene se está ejecutando en mobile, desktop o web.

El @dcl/sdk/platform módulo te permite que tu scene compruebe qué client está usando un player, para que puedas adaptar tu UI, los controles y la jugabilidad en consecuencia. Esta es la forma recomendada de ofrecer una gran experiencia en todos los clients sin bifurcar tu scene.

Funciones disponibles

import { getPlatform, isMobile, isDesktop, isWeb } from '@dcl/sdk/platform'

• getPlatform() — devuelve la plataforma actual como 'mobile' | 'desktop' | 'web' | null. Devuelve null hasta que el Explorer haya informado su plataforma de vuelta a la scene (esto sucede poco después de que la scene comienza).

• isMobile() — devuelve true si el player está en el client móvil.

• isDesktop() — devuelve true si el player está en el client de escritorio.

• isWeb() — devuelve true si el player está en el client web.

📔 Nota: Estas funciones leen un valor que se rellena de forma asíncrona cuando comienza la scene. Si las llamas en el primer frame, aún pueden devolver null / false. Para la configuración de la UI, el lugar más seguro para llamarlas es desde la función main() o cualquier código que se ejecute después del primer frame.

Divide tu UI por plataforma

Un patrón común es configurar una UI diferente para players móviles y de escritorio:

import { isMobile, isDesktop } from '@dcl/sdk/platform'

function setupUI() {
  if (isMobile()) {
    // Botones más grandes, diseño más simple para tocar
    createMobileUI()
  } else if (isDesktop()) {
    // Diseño más denso, ajustado para teclado y mouse
    createDesktopUI()
  }
}

También puedes usar el mismo patrón para:

• Mostrar u ocultar instrucciones en pantalla adaptadas a cada método de entrada.

• Reemplazar elementos pequeños clicables por objetivos táctiles más grandes en móvil.

• Deshabilitar enlaces de entrada que no están fácilmente disponibles en móvil (ver Entrada en móvil).

Comprobar el valor bruto de la plataforma

Si necesitas manejar varias plataformas en un solo switch, usa getPlatform():

import { getPlatform } from '@dcl/sdk/platform'

const platform = getPlatform()

switch (platform) {
  case 'mobile':
    // comportamiento específico de móvil
    break
  case 'desktop':
    // comportamiento específico de escritorio
    break
  case 'web':
    // comportamiento específico de la web
    break
  case null:
    // la plataforma aún no se conoce
    break
}

Relacionado

• área segura para móviles

• Buenas prácticas de UI para móvil

• UI en pantalla