Ctrlk

Detetar a plataforma

Detete se a sua cena está a ser executada em mobile, desktop ou web.

A @dcl/sdk/platform módulo permite que sua scene verifique qual client um player está usando, para que você possa adaptar sua UI, controles e gameplay de acordo. Esta é a maneira recomendada de oferecer uma ótima experiência em todos os clients sem fazer fork da sua scene.

Funções disponíveis

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

  • getPlatform() — retorna a plataforma atual como 'mobile' | 'desktop' | 'web' | null. Retorna null até que o explorer tenha reportado sua plataforma de volta para a scene (isso acontece pouco depois que a scene começa).

  • isMobile() — retorna true se o player estiver no client mobile.

  • isDesktop() — retorna true se o player estiver no client desktop.

  • isWeb() — retorna true se o player estiver no client web.

📔 Nota: Essas funções leem um valor que é preenchido de forma assíncrona quando a scene inicia. Se você chamá-las no primeiro frame, elas ainda podem retornar null / false. Para a configuração da UI, o lugar mais seguro para chamá-las é a partir da função main() ou de qualquer código que seja executado após o primeiro frame.

Divida sua UI por plataforma

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

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

function setupUI() {
  if (isMobile()) {
    // Botões maiores, layout mais simples para toque
    createMobileUI()
  } else if (isDesktop()) {
    // Layout mais denso, ajustado para teclado e mouse
    createDesktopUI()
  }
}

Você também pode usar o mesmo padrão para:

  • Mostrar ou ocultar instruções na tela adaptadas a cada método de entrada.

  • Substituir elementos clicáveis pequenos por alvos de toque maiores no mobile.

  • Desativar bindings de entrada que não estão facilmente disponíveis no mobile (veja Entrada no mobile).

Verificando o valor bruto da plataforma

Se você precisar lidar com várias plataformas em um único switch, use getPlatform():

Relacionado

AnteriorVisão geralPróximoPré-visualizar no mobile

Atualizado