WEBGL

이 간단한 Phaser 튜토리얼은 심플한 2D 플랫폼을 만드는 방법을 보여줍니다.

이 튜토리얼에서는 이미 Phaser에 익숙하다고 가정합니다.  만약에 익숙하지 않으면 먼저 Phaser Js 로 Flappy Bird 만들기 - 1 과 Phaser Js 로 Flappy Bird 만들기 - 2 를 확인해 하시면 됩니다.

기본적으로 빈 페이저 프로젝트 인 게임의 구조를 만들어 보겠습니다.

// 전체 게임을 포함 할 상태 만들기
var mainState = {
    preload: function() {
        // 여기에 자산을 미리로드합니다.
    },

    create: function() {
        // 여기에 게임을 만듭니다.
    },

    update: function() {
        // 게임을 초당 60 회 업데이트합니다.
    },
};

// 게임 초기화 및 상태 시작
var game = new Phaser.Game(500, 200);
game.state.add('main', mainState);
game.state.start('main');

create () 함수름 다음과 같이 변경하여 게임 설정을 합니다.

    create: function() {
        // 배경색을 파란색으로 설정하십시오.
        game.stage.backgroundColor = '#3598db';
        // 아케이드 물리 시스템을 시작하십시오 (이동 및 충돌 용).
        game.physics.startSystem(Phaser.Physics.ARCADE);
        // 모든 게임 개체에 물리 엔진 추가
        game.world.enableBody = true;
    },

그리고 preload () 함수에서 다음과 같이 사용하는 스프라이트를 로드합니다.

    preload: function() {
        // 여기에 자산을 미리로드합니다.
        game.load.image('player', 'assets/player.png');
        game.load.image('wall', 'assets/wall.png');
        game.load.image('coin', 'assets/coin.png');
        game.load.image('enemy', 'assets/enemy.png');
    },

화살표 키로 제어 할 수있는 플레이어를 추가해 봅시다.

그래서 다음 코드를 create () 함수에 추가하십시오.

        // 화살표 키를 저장하는 변수
        this.cursor = game.input.keyboard.createCursorKeys();
        // 플레이어 만들기
        this.player = game.add.sprite(70, 100, 'player');
        // 중력을 가하여 떨어 뜨립니다.
        this.player.body.gravity.y = 600;

그리고 다음 코드를 update () 함수에 추가합니다.

        // 화살표 키를 누르면 플레이어가 움직입니다.
        if (this.cursor.left.isDown)
            this.player.body.velocity.x = -200;
        else if (this.cursor.right.isDown)
            this.player.body.velocity.x = 200;
        else
            this.player.body.velocity.x = 0;

        // 플레이어가 땅에 닿으면 점프하게하십시오.
        if (this.cursor.up.isDown && this.player.body.touching.down)
            this.player.body.velocity.y = -250;

다음 단계는 플레이어에게 레벨을 부여하는 것입니다. create () 함수에서 다음과 같이 설정합니다.

        // 객체를 포함 할 3 개의 그룹을 만듭니다.
        this.walls = game.add.group();
        this.coins = game.add.group();
        this.enemies = game.add.group();

        // 레벨을 디자인하십시오. x = 벽, o = 동전,! = 용암.
        var level = [
            'xxxxxxxxxxxxxxxxxxxxxx',
            '!         !          x',
            '!                 o  x',
            '!         o          x',
            '!                    x',
            '!     o   !    x     x',
            'xxxxxxxxxxxxxxxx!!!!!x',
        ];

        // 배열을 통해 레벨 만들기
        for (var i = 0; i < level.length; i++) {
            for (var j = 0; j < level[i].length; j++) {

                // 벽을 만들어 '벽'그룹에 추가하십시오.
                if (level[i][j] == 'x') {
                    var wall = game.add.sprite(30+20*j, 30+20*i, 'wall');
                    this.walls.add(wall);

                    wall.body.immovable = true;

                }

                // 동전을 만들어 '동전'그룹에 추가하십시오.
                else if (level[i][j] == 'o') {
                    var coin = game.add.sprite(30+20*j, 30+20*i, 'coin');
                    this.coins.add(coin);
                }

                // 적을 만들어 '적'그룹에 추가하십시오.
                else if (level[i][j] == '!') {
                        var enemy = game.add.sprite(30+20*j, 30+20*i, 'enemy');
                        this.enemies.add(enemy);
                }
            }
        }

마지막으로 update () 함수에서 이와 같은 플랫폼 작성자의 모든 충돌을 처리해야합니다.

        // 플레이어와 벽을 충돌 시키십시오.
        game.physics.arcade.collide(this.player, this.walls);

        // Call the 'takeCoin' function when the player takes a coin
        game.physics.arcade.overlap(this.player, this.coins, this.takeCoin, null, this);

        // Call the 'restart' function when the player touches the enemy
        game.physics.arcade.overlap(this.player, this.enemies, this.restart, null, this);

그리고이 두 가지 새로운 기능을 추가해야합니다.

    // 동전 제거 함수
    takeCoin: function(player, coin) {
        coin.kill();
    },

    // 게임 재시작 함수
    restart: function() {
        game.state.start('main');
    }

여기에 우리가 함께 만든 작은 2D 플랫폼이 있습니다.

오늘은 Phaser js 로 간단한 브레이크 아웃(일명: 벽돌깨기) 게임을 만들어 보겠습니다.

이 튜토리얼에서는 이미 Phaser에 익숙하다고 가정합니다.  만약에 익숙하지 않으면 먼저 Phaser Js 로 Flappy Bird 만들기 - 1 과 Phaser Js 로 Flappy Bird 만들기 - 2 를 확인해 하시면 됩니다.

기본적으로 빈 페이저 프로젝트 인 게임의 구조를 만들어 보겠습니다.

// 전체 게임을 포함 할 상태 만들기
var mainState = {
    preload: function() {
        // 여기에 Asset 을 미리로드합니다.
    },

    create: function() {
        // 여기에 게임을 만듭니다.
    },

    update: function() {
        // 게임을 초당 60 회 업데이트합니다.
    },
};

// 게임 초기화 및 상태 시작
var game = new Phaser.Game(400, 450);
game.state.add('main', mainState);
game.state.start('main');

그리고 이것을 create () 함수 안에 추가하여 게임 설정을 할 수 있습니다.

// 배경색을 파란색으로 설정하십시오.
game.stage.backgroundColor = '#3598db';

// 아케이드 물리 시스템을 시작하십시오 (이동 및 충돌 용).
game.physics.startSystem(Phaser.Physics.ARCADE);

// 모든 게임 개체에 물리 엔진 추가
game.world.enableBody = true;

이 튜토리얼의 나머지 부분에서는 mainState 내부의 코드에만 초점을 맞출 것입니다.

화살표 키로 제어 할 수있는 패들을 추가합시다. 아래에서 변경된 코드 만 작성 했으므로 이전에 추가 한 설정이없는 경우 놀라지 마십시오.

preload: function() {
    game.load.image('paddle', 'assets/paddle.png');
},

create: function() {
    // 왼쪽 / 오른쪽 화살표 키 만들기
    this.left = game.input.keyboard.addKey(Phaser.Keyboard.LEFT);
    this.right = game.input.keyboard.addKey(Phaser.Keyboard.RIGHT);

    // 화면 하단에 패들을 추가하십시오.
    this.paddle = game.add.sprite(200, 400, 'paddle');

    // 패들이 공을 때리면 움직이지 않도록하십시오.패들이 공을 때리면 움직이지 않도록하십시오.
    this.paddle.body.immovable = true;
},

update: function() {
    // 화살표 키를 누르면 패들을 왼쪽 / 오른쪽으로 움직입니다.화살표 키를 누르면 패들을 왼쪽 / 오른쪽으로 움직입니다.
    if (this.left.isDown) this.paddle.body.velocity.x = -300;
    else if (this.right.isDown) this.paddle.body.velocity.x = 300;

    // 아무 키도 누르지 않으면 패들 정지아무 키도 누르지 않으면 패들 정지
    else this.paddle.body.velocity.x = 0;
},

이제 상단에 5x5 벽돌을 추가하겠습니다. 다시 말하면, 변경된 코드 만 아래에 쓰여 있습니다.

preload: function() {
    game.load.image('brick', 'assets/brick.png');
},

create: function() {
    // 모든 벽돌을 포함 할 그룹을 만듭니다.
    this.bricks = game.add.group();

    // 그룹에 25 개의 벽돌을 추가하십시오 (5 열과 5 줄).
    for (var i = 0; i < 5; i++) {
        for (var j = 0; j < 5; j++) {
            // 정확한 위치에 벽돌 만들기
            var brick = game.add.sprite(55+i*60, 55+j*35, 'brick');

            // 공이 그것을 때릴 때 벽돌이 움직이지 않도록하십시오.
            brick.body.immovable = true;

            // 그룹에 브릭 추가
            this.bricks.add(brick);
        }
    }
},

다음으로 튀는 공을 추가합시다.

preload: function() {
    game.load.image('ball', 'assets/ball.png');
},

create: function() {
    // 공 추가
    this.ball = game.add.sprite(200, 300, 'ball');

    // 공에 속도 추가
    this.ball.body.velocity.x = 200;
    this.ball.body.velocity.y = 200;

    // 공이 튀어 오를지 확인
    this.ball.body.bounce.setTo(1);
    this.ball.body.collideWorldBounds = true;
},

마지막으로 우리 게임에서 모든 충돌을 처리해야합니다.

preload: function() {
    game.load.image('ball', 'assets/ball.png');
},

create: function() {
    // 공 추가
    this.ball = game.add.sprite(200, 300, 'ball');

    // 공에 속도 추가
    this.ball.body.velocity.x = 200;
    this.ball.body.velocity.y = 200;

    // 공이 튀어 오를지 확인
    this.ball.body.bounce.setTo(1);
    this.ball.body.collideWorldBounds = true;
},

update: function() {
    // 패들과 볼 사이에 충돌을 추가합니다.
    game.physics.arcade.collide(this.paddle, this.ball);

    // 공이 벽돌에 닿으면 'hit'기능 호출
    game.physics.arcade.collide(this.ball, this.bricks, this.hit, null, this);

    // 공이 패들 아래에 있으면 게임을 다시 시작하십시오.
    if (this.ball.y > this.paddle.y)
        game.state.start('main');
},

// 게임에서 벽돌을 제거하는 함수
hit: function(ball, brick) {
    brick.kill();
},

그리고 실행을 하면

50 줄 미만의 코드를 사용하면 간단한 브레이크 아웃 클론을 만들어 보았습니다.