Detectar a plataforma

Detecte se sua scene está sendo executada em mobile, desktop ou web.

Use a isMobile() função para adaptar a sua UI, controlos e jogabilidade especificamente para mobile. Esta é a forma recomendada de proporcionar uma ótima experiência em todos os clients sem bifurcar completamente a lógica da sua scene.

Funções disponíveis

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

• getPlatform() — devolve a plataforma atual como 'mobile' | 'desktop' | 'web' | null. Devolve null até que o Explorer tenha reportado a sua plataforma de volta para a scene (isto acontece pouco depois de a scene começar).

• isMobile() — devolve true se o jogador estiver no cliente mobile.

• isDesktop() — devolve true se o jogador estiver no cliente desktop.

• isWeb() — devolve true se o jogador estiver no cliente web.

📔 Nota: Estas funções leem um valor que é preenchido de forma assíncrona quando a scene começa, e nada garante que já esteja disponível quando main() é executado. Se as chamar demasiado cedo, ainda podem devolver null / false. Para maior segurança, adie qualquer configuração dependente da plataforma até getPlatform() devolver algo diferente de null, por exemplo, verificando dentro de um system:

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

function platformCheckSystem() {
  if (getPlatform() === null) return
  engine.removeSystem(platformCheckSystem)
  setupUI()
}

engine.addSystem(platformCheckSystem)

Dividir a sua UI por plataforma

Um padrão comum é configurar uma UI diferente para jogadores mobile e desktop:

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

function setupUI() {
  if (isMobile()) {
    // Botões maiores, disposição mais simples para toque
    createMobileUI()
  } else if (isDesktop()) {
    // Disposição mais densa ajustada para teclado e rato
    createDesktopUI()
  }
}

Também pode usar o mesmo padrão para:

• Mostrar ou ocultar instruções no ecrã adaptadas a cada método de input.

• Substituir elementos clicáveis pequenos por alvos táteis maiores no mobile.

• Desativar ligações de input que não estejam facilmente disponíveis no mobile (ver Input no mobile).

Verificar o valor bruto da plataforma

Se precisar de lidar com várias plataformas num único switch, use getPlatform():

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

const platform = getPlatform()

switch (platform) {
  case 'mobile':
    // comportamento específico para mobile
    break
  case 'desktop':
    // comportamento específico para desktop
    break
  case 'web':
    // comportamento específico para web
    break
  case null:
    // a plataforma ainda não é conhecida
    break
}

Relacionado

• Área segura para mobile

• Boas práticas de UI para mobile

• UI no ecrã