[Phaser3] Survival Game(5) - survival-game.js 코드 짜기

일단 survival-game.js 작성하기

이전 포스팅에서 survival-game.js 파일을 생성했습니다.

 

이후 survival-game.js의 코드를 작성합니다.

 

코드에 대한 설명은 코드를 작성한 뒤 하겠습니다.

survival-game.js

const config = {
    width: 512,
    height: 512,
    backgroundColor: '#333333',
    type: Phaser.AUTO,
    parent: 'survival-game',
    scene: [],
    scale: {
        zoom: 2,
    },
    physics: {
        default: 'matter',
        matter: {
            debug: true,
            gravity: {y: 0},
        }
    },
    plugins: {
        scene: [
            {
                plugin: PhaserMatterCollisionPlugin,
                key: 'matterCollision',
                mapping: 'matterCollision'
            }
        ]
    }
}

new Phaser.Game(config);

반응형

survival-game.js 코드 설명

survival-game.js 코드에 대한 간단한 설명을 해보도록 하겠습니다.

width와 height

width와 height 속성은 Phaser가 생성할 캔버스 요소의 크기를 설정합니다. 

 

저의 경우엔 512 x 512 픽셀입니다.

 

이 속성들은 게임이 표시할 해상도입니다.

backgroundColor

게임 캔버스의 배경 색상이며, 일반적으로 헥사 데시멀로 입력합니다.

 

기본 값은 검은색입니다. 

type

type 속성의 속성값은 Phaser.AUTO, Phaser.CANVAS, Phaser.WEBGL로 나눠지며, 이 속성은 게임에서 사용하려는 렌더링 컨텍스트입니다.

 

권장 값은 Phaser.AUTO이며, 자동으로 WebGL을 사용하려고 시도하지만 브라우저나 장치에서 지원하지 않는 경우 Canvas로 대체되게 합니다.

parent

게임 캔버스를 포함할 DOM 요소 또는 id입니다. 

 

정의되지 않았다면, 게임 캔버스가 문서 본문에 추가됩니다.

scene

게임에 추가할 장면입니다.

 

원래 여기에 preload, create, update 함수가 있어야 하는데, 저는 MainScene.js로 분리시켰기 때문에 아직 적지 않았습니다. 

 

다음 포스팅에서 MainScene.js를 작성할 예정입니다.

scale

스케일 매니저 구성입니다.

zoom

게임 캔버스의 확대/축소 값입니다. 기본 값은 1입니다.

physics

물리학 구성입니다.

default

기본 물리 시스템이며, 장면마다 시작됩니다.

 

Phaser는 'arcade', 'impact', 'matter'를 제공합니다.

matter

물질 물리학 구성입니다.

debug: boolean

Matter Debug Rendering 옵션을 제어합니다.

gravity

Phaser.Physics.Matter.World의 중력을 설정합니다. (이 설정이 없으면, 생성한 캐릭터가 바닥에 안 붙어 있습니다...🙄)

plugins

설치할 플러그인입니다.

scene

설치할 장면 플러그인입니다.

plugin

플러그인 자체이며, 일반적으로 클래스/생성자입니다.

key

Plugin Manager에서 플러그인을 식별하기 위한 키입니다.

mapping

이 플러그인이 장면 시스템에 삽입되는 경우 사용되는 속성 키 맵입니다.

Phaser.Game

다음 코드는 Phaser2에서 사용되는 코드입니다.

var game = new Phaser.Game(config);

 

Phaser.Game 개체의 인스턴스는 호출된 로컬 변수에 할당되고, game 구성 개체가 전달됩니다.

 

이렇게 하면 Phaser에 생명을 불어넣는 과정이 시작됩니다.

 

그러나 Phaser3에선 더 이상 게임 인스턴스를 전역 변수에 저장하는 것이 더 이상 유용하지 않습니다.

 

저는 Phaser3을 사용하기 때문에 아래와 같이 코드를 바꿨습니다.

new Phaser.Game(config);