플랫폼 감지

씬이 모바일, 데스크톱, 웹 중 어디에서 실행 중인지 감지합니다.

사용하세요 isMobile() 모바일에 맞게 UI, 컨트롤, 게임플레이를 조정하는 함수입니다. 씬 로직 전체를 분기하지 않고도 모든 클라이언트에서 훌륭한 경험을 제공하는 권장 방법입니다.

사용 가능한 함수

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

getPlatform() — 현재 플랫폼을 다음 값으로 반환합니다 'mobile' | 'desktop' | 'web' | null. 반환합니다 null 탐색기가 자신의 플랫폼을 씬에 보고할 때까지(이는 씬이 시작된 직후에 발생합니다).
isMobile() — 반환합니다 true 플레이어가 모바일 클라이언트를 사용하는 경우.
isDesktop() — 반환합니다 true 플레이어가 데스크톱 클라이언트를 사용하는 경우.
isWeb() — 반환합니다 true 플레이어가 웹 클라이언트를 사용하는 경우.

📔 참고: 이러한 함수는 씬이 시작될 때 비동기적으로 채워지는 값을 읽으며, 다음 시점에 이미 사용 가능하다고 보장되지 않습니다 함수 내부, 실행됩니다. 너무 일찍 호출하면 여전히 반환할 수 있습니다 null / false. 안전하게 하려면 플랫폼에 의존하는 설정은 다음 때까지 미루세요 getPlatform() 다음이 아닌 값을 null, 예를 들어 시스템 내부에서 확인하는 방식입니다:

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)

플랫폼별로 UI를 분기하세요

일반적인 패턴은 모바일 플레이어와 데스크톱 플레이어를 위해 서로 다른 UI를 구성하는 것입니다:

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

function setupUI() {
  if (isMobile()) {
    // 터치용으로 더 큰 버튼과 더 단순한 레이아웃
    createMobileUI()
  } else if (isDesktop()) {
    // 키보드와 마우스에 맞춘 더 촘촘한 레이아웃
    createDesktopUI()
  }
}

같은 패턴을 다음에도 사용할 수 있습니다:

각 입력 방식에 맞춘 화면 안내를 표시하거나 숨길 수 있습니다.
모바일에서는 작은 클릭 요소를 더 큰 터치 타깃으로 대체합니다.
모바일에서 쉽게 사용할 수 없는 입력 바인딩을 비활성화합니다(참조 모바일에서의 입력).

원시 플랫폼 값 확인

하나의 switch에서 여러 플랫폼을 처리해야 한다면, 다음을 사용하세요: getPlatform():

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

const platform = getPlatform()

switch (platform) {
  case 'mobile':
    // 모바일 전용 동작
    break
  case 'desktop':
    // 데스크톱 전용 동작
    break
  case 'web':
    // 웹 전용 동작
    break
  case null:
    // 플랫폼이 아직 알려지지 않음
    break
}

사용 가능한 함수

플랫폼별로 UI를 분기하세요

원시 플랫폼 값 확인

관련