phaser tutorial 웹팩 (3)

개발을 좀 더 편하게 하기위해서 이미 만들어져있는 템플릿이 있습니다.

https://github.com/photonstorm/phaser3-project-template

해당 깃에서 클론 받으시고 바벨 및 웹팩 설정을 확인해주세요.

git clone https://github.com/photonstorm/phaser3-project-template.git

클론 받으시면 해당 폴더가 생길꺼에요 하지만 노드 모듈 같은 경우에는 제가 미리 install 해놨기 때문에

생긴거고 package-lock 파일은 이미 있던거에요

npm install

하시고

src 폴더를 살펴 볼께요

1. src index

import Phaser from 'phaser';
import logoImg from './assets/logo.png';

class MyGame extends Phaser.Scene
{
    constructor ()
    {
        super();
    }

    preload ()
    {
        this.load.image('logo', logoImg);
    }
      
    create ()
    {
        const logo = this.add.image(400, 150, 'logo');
      
        this.tweens.add({
            targets: logo,
            y: 450,
            duration: 2000,
            ease: "Power2",
            yoyo: true,
            loop: -1
        });
    }
}

const config = {
    type: Phaser.AUTO,
    parent: 'phaser-example',
    width: 800,
    height: 600,
    scene: MyGame
};

const game = new Phaser.Game(config);

일단 클래스 형식으로 되어 있습니다.

여기서 제일 처음으로 보아야할것은

1. Phaser.Game()

const game = new Phaser.Game(config)

인데요

https://photonstorm.github.io/phaser3-docs/Phaser.Game.html

새로운 Phaser.Game의 객체를 만들고 있는데 매개변수로는 config를 받고 있네요.

1. config

config의 구성으로는

https://photonstorm.github.io/phaser3-docs/Phaser.Types.Core.html#.GameConfig

여기를 참고 하시면 될것 같아요.

저희가 이용하는 구성을 보자면

const config = {
    type: Phaser.AUTO,
    parent: 'phaser-example',
    width: 800,
    height: 600,
    scene: MyGame
};

2. type

type에는
사용할 렌더러 Phaser.AUTO가 있습니다.
여기서 렌더러의 종류는
Phaser.AUTO, Phaser.CANVAS, Phaser.WEBGL가 있는데
CANVAS나 WEBGL는 알겠는데 AUTO가 뭔지 모르는 분들이 있습니다.
AUTO는 일단 WEBGL로 선택하고 그것이 선택 되지 않을때
CANVAS가 선택이 되는겁니다.
이부분은 나중에 자세히 다뤄 보도록 하고 일단은 진행하겠습니다.

parent에는
html요소나 문자열을 받는데 여기서는 문자열을 받고 있네요.

width와 height는 해당 캔버스의 너비와 높이를 설정 하고 있습니다
width와 height가 없다면 기본적으로 1024x768으로 설정이 됩니다.
해당 숫자는 픽셀 기준입니다.

scene에는
게임에 추가할 장면을 설정 합니다 여기에서는 MyGame으로 되어 있는데
지금 해당 코드에 존재 하는 MyGame 클래스를 사용합니다.

2. MyGame Class

class MyGame extends Phaser.Scene
{
    constructor ()
    {
        super();
    }

    preload ()
    {
        this.load.image('logo', logoImg);
    }
      
    create ()
    {
        const logo = this.add.image(400, 150, 'logo');
      
        this.tweens.add({
            targets: logo,
            y: 450,
            duration: 2000,
            ease: "Power2",
            yoyo: true,
            loop: -1
        });
    }
}

다음으로는 MyGame 클래스를 확인해볼게요.

일단 MyGame 클래스는 Phaser.Scene에서 상속 받아서

constructor에 모든 메소드들을 상속 시켜 줬네요.

Phaser.Scene을 보시자면

https://photonstorm.github.io/phaser3-docs/Phaser.Scene.html

안에 생각보다 많은 메소드들이 있는걸 확인 하실수있습니다.

해당 소스코드 입니다.

https://github.com/photonstorm/phaser/blob/v3.51.0/src/scene/Scene.js

일단 여기서는 이렇게 있다는걸 아시면 되고

MyGame의 메소드들은 2개가 있는데

preload와 create가 있습니다.

두개는 장면의 유형에 속하는데요 장면의 유형에는

https://photonstorm.github.io/phaser3-docs/Phaser.Types.Scenes.html#.SettingsConfig

init,
preload,
create,
update,
extend

가 있습니다.

저희가 사용하는 preload와 create만 살펴 보시면.

preload에서는

    preload ()
    {
        this.load.image('logo', logoImg);
    }

해당 이미지를 사전에 로드하기 위해서 사용을 하였고

    create ()
    {
        const logo = this.add.image(400, 150, 'logo');
      
        this.tweens.add({
            targets: logo,
            y: 450,
            duration: 2000,
            ease: "Power2",
            yoyo: true,
            loop: -1
        });
    }

create에서는 사전에 로드한 이미지를 생성해주었습니다.

1. preload()

해당 메소드를 보시면

딱 한줄이 있습니다

this.load.image('logo',logoImg)

자세히 보시면

this.load가 있네요 load는

Phaser.Scene에서 상속 받는 메소드로

https://photonstorm.github.io/phaser3-docs/Phaser.Loader.LoaderPlugin.html

문서를 보시면 확인 가능합니다.

this.load.image('key',URL)

첫번째 매개변수는 key라고 하고
두번째 매개변수는 URL입니다 해당 파일의 경로를 의미해요.

2. create()

    create ()
    {
        const logo = this.add.image(400, 150, 'logo');
      
        this.tweens.add({
            targets: logo,
            y: 450,
            duration: 2000,
            ease: "Power2",
            yoyo: true,
            loop: -1
        });
    }

첫번째줄

const logo = this.add.image(400,150,'logo')

this.add.image의 첫번째 매개변수는 x
두번째는 y
세번째는 key 입니다.

x,y는 해당 캔버스에서 이미지를 띄울 좌표 입니다.

key는 아까 설명해드린

this.load.image('key',url)

key 입니다.

해당 코드에서는 logo 이므로 문자열로 logo를 적어줍니다.

마지막 코드인

this.tweens.add({
            targets: logo,
            y: 450,
            duration: 2000,
            ease: "Power2",
            yoyo: true,
            loop: -1
        });