로컬 서버에서 실행

게임 개발과 테스트를 편리하게 하기 위해 로컬 서버에서 게임을 실행할 수 있습니다. 테스트는 prod-dev-환경에서 모두 가능합니다.

로컬 서버에서 게임을 실행하면 SDK의 모든 기능을 사용할 수 있습니다.

Prod-환경

제한

Yandex Games 플랫폼에 계정 등록게임 초안 생성이 필요합니다.

게임을 모더레이션 제출 전 최종 점검 단계에 적합합니다. 이 모드에서 게임은 실제 Yandex Games 플랫폼과 상호작용합니다.

특징:

  • 게임은 실제 주소인 yandex.com/games에서 열립니다.
  • 외부 호스트로 요청을 보내려면 CSP 규칙에 추가해야 합니다.
  • 실제 광고가 표시됩니다.
  • 플레이어는 Yandex 계정으로 인증됩니다.
  • 플레이어 데이터와 리더보드 정보는 서버에 저장됩니다.
  • 상품 카탈로그는 서버에서 로드되며, 구매는 서버에서 처리됩니다.
  • 디버깅을 위해 주소 표시줄 매개변수 &debug-mode=16 을 사용해 디버그 패널을 활용할 수 있습니다.

로컬 버전의 게임을 prod-환경에서 실행하도록 설정하는 방법:

로컬 서버 직접 설정

  1. localhost 서버를 설정하세요.
  2. 초안 모드에서 게임을 엽니다.
  3. 주소에 ?game_url=https://localhost 매개변수를 추가하세요.

참고

보안상의 이유로 game_url 매개변수에는 localhost 도메인만 지원됩니다.

npm 패키지로 로컬 서버 설정

  1. Node.JS 사이트의 안내에 따라 npm을 설치하세요.

  2. npm 을 사용해 @yandex-games/sdk-dev-proxy 패키지를 설치하세요:

    npm install -g @yandex-games/sdk-dev-proxy
    
  3. 게임을 실행하세요. 다음 중 선택할 수 있습니다:

    npx @yandex-games/sdk-dev-proxy -h <로컬 서버 주소>
    
    npx @yandex-games/sdk-dev-proxy -p <게임 리소스 폴더 경로>
    

    패키지는 SDK 리소스에 대한 요청을 게임이 위치할 서버로 프록시합니다.

--app-id 매개변수를 지정하면 게임이 yandex.com/games에서 열립니다:

npx @yandex-games/sdk-dev-proxy -p <게임 리소스 폴더 경로> --app-id=<게임 ID>

--app-id 를 지정하지 않으면 콘솔에 서비스 상의 게임 템플릿 링크와 로컬 서버 링크가 표시됩니다.

실행 매개변수

매개변수

설명

--help

도움말.

--host, -h

게임 로컬 서버가 위치한 호스트 (예: webpack-dev-server 사용 시).

--path, -p

게임 리소스가 위치한 폴더 경로.

--port

서버가 열릴 포트 (기본값 8080).

--app-id, -i

게임 초안 ID.

--csp, -c

Content-Security-Policy 메타태그 추가. 서비스의 index.html에 생성될 태그와 동일합니다.

--log, -l

콘솔에 요청 로깅 활성화 (기본값 활성화).

--tld

yandex.tld 도메인 변경 (예: yandex.com, 기본값 ru).

--dev-mode

true 인 경우 dev-환경에서 게임 실행 (기본값 false, prod-환경에 해당).

Dev-환경

참고

Yandex Games 플랫폼 계정 등록 및 게임 초안이 필요 없습니다.

게임 로직 개발 및 디버깅 단계에 적합합니다. 이 모드에서는 게임이 Yandex Games 플랫폼과 실제 연결되지 않으며, 모든 SDK 호출이 모의 객체로 대체되어 페이지를 빠르게 새로 고치고 업데이트를 확인할 수 있습니다.

특징:

  • 게임이 https://localhost 에서 직접 열립니다.
  • CSP 제한이 없어 모든 외부 호스트로 요청을 보낼 수 있습니다.
  • 광고 대신 스터브가 표시되며, 모든 콜백 함수는 prod-환경과 동일하게 작동합니다.
  • 플레이어 인증은 모의 브라우저 대화 상자를 통해 이루어집니다.
  • 플레이어 데이터와 리더보드 정보는 localStorage 에 저장됩니다.
  • 상품 카탈로그는 로컬 파일에서 로드되며, 플레이어 구매는 localStorage 에 저장됩니다.
  • 디버깅을 위해 브라우저 주소 표시줄을 통해 매개변수를 설정할 수 있습니다.
  • 브라우저 콘솔에는 모듈별로 분류된 모든 SDK 호출이 자동으로 기록됩니다.

dev-환경에서의 실행은 npm 패키지 @yandex-games/sdk-dev-proxy를 통해서도 가능합니다. 설정 방법은 prod-환경과 유사하지만, 실행 시 --dev-mode=true 매개변수를 지정해야 합니다.

다음 중 선택할 수 있습니다:

npx @yandex-games/sdk-dev-proxy -h <로컬 서버 주소> --dev-mode=true
npx @yandex-games/sdk-dev-proxy -p <게임 리소스 폴더 경로> --dev-mode=true

브라우저 주소 표시줄 매개변수

export interface SDKMocks {
    /** 바탕 화면에 바로가기 추가 가능한가? */
    canShowPrompt?: boolean;
    /** 플레이어가 인증되었는가? */
    isAuthorized?: boolean;
    /** 게임의 화면 방향이 고정되었는가. */
    lockedOrientation?: ELockedOrientation;
}

/** 모바일 화면에서 게임의 고정된 화면 방향. */
export enum ELockedOrientation {
    /** 게임이 가로 모드만 지원. */
    LANDSCAPE = 'landscape',
    /** 게임이 모든 방향 지원. */
    NONE = 'none',
    /** 게임이 세로 모드만 지원. */
    PORTRAIT = 'portrait',
}

예시

localhost:8080?mocks={"canShowPrompt":true,"isAuthorized":true,"lockedOrientation":"landscape"}

로컬 상품 카탈로그 설정

상품 카탈로그를 에뮬레이션하려면 프로젝트 루트에 purchases-catalog.json 파일을 생성하고 개발자 콘솔에 추가했거나 추가할 예정인 구매 목록을 입력하세요. SDK는 dev-모드에서 이 파일에서 구매 목록을 로드합니다.

예시

[
    {
        "description": "Well styled modern avatar image",
        "id": "avatar",
        "imageURI": "{path-to-image}",
        "price": "100 RUB",
        "priceCurrencyCode": "RUB",
        "priceValue": "100",
        "title": "Premium avatar",
        "getPriceCurrencyImage": "return ''"
    }
]

구매 호출 시 성공과 취소 시나리오를 모두 테스트할 수 있도록 모의 대화 상자가 표시됩니다.

가로 모드.

세로 모드.

외부 리소스나 컴포넌트에 의존하지 않고 코드를 테스트하기 위해 실제를 모방한 인공 객체나 함수.

'' 안에 이미지 경로를 입력할 수 있습니다.