HTML5GAME :: 'PROGRAMMING/Phaser Js' 카테고리의 글 목록 (6 Page)

달력

52024  이전 다음

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31

Phaser Js 기본 타이머 사용 설명서 


타이머는 게임 개발의 큰 부분을 합니다. 플레이어가 메시지를 읽을 때까지 몬스터를 공개하거나 게임의 다음 부분이 나타나는 주기를 설정할 수 있습니다. 또한 타이머를 사용하여 카운트 업 또는 카운트 다운 할 수 있습니다.


자 이제 Phaser js에서 사용할수 있는 타이머를 확인해 보겠습니다.


원샷 타이머

원샷 타이머는 지정된 시간 (초) 후에 이벤트를 한 번 실행하는 타이머입니다. 지연 타이머로 생각할 수도 있습니다. 아래의 예제는 5 초 후에 delayOver 함수를 호출합니다.

game.time.events.add (Phaser.Timer.SECOND * 5, this.delayOver, this);



루핑 타이머

루핑 타이머는 원샷과 거의 같은 방식으로 작동하지만 멈출 때까지 기능을 계속 실행합니다. 이 코드는 초마다 addMonster라는 함수를 호출합니다.

game.time.events.loop (Phaser.Timer.SECOND, this.addMonster, this);



타이머 멈춤

타이머를 정지 시키려면 먼저 변수에 할당하여 참조를 추가해야합니다.

this.monsterTimer = game.time.events.loop (Phaser.Timer.SECOND, this.addMonster, this);

그런 다음 타이머를 멈추고 싶을 때 다음과 같이 타이머를 끌 수 있습니다 :

game.time.events.remove (this.monsterTimer);



시간 조정

Phaser 타이머는 밀리 초 단위로 측정됩니다. 1000 밀리 초는 1 초와 같습니다. Phaser.Timer.SECOND를 사용하는 것은 첫 번째 매개 변수로 1000을 배치하는 것과 동일하지만 상수를 사용하면 더 쉽게 읽을 수 있습니다. 이 상수를 곱하거나 나눔으로써 함수가 호출되는 빈도를 조정할 수 있습니다.

Phaser.Timer.SECOND = 1 초

Phaser.Timer.SECOND * 5 = 5 초

Phaser.Timer.SECOND / 2 = 0.5 초 또는 함수를 초당 두 번 호출

Phaser.Timer.SECOND / 10 = 10 분의 1 초



카운트 다운 타이머 만들기

레벨이나 게임을 완료하기 위해 일정 시간 (분 또는 초)을 사용자에게 부여하려고한다고 가정 해보십시오. 게임을 끝내기 위해 원샷 타이머를 설정하면됩니다. 그러나 남은 시간 (초)을 표시하려면 카운트 다운 시계를 설정해야합니다. 우리는 초를 잡아두고 루프 타이머에서 초당 하나를 뺀 변수를 설정함으로써 이것을 할 수 있습니다. 초를 초로 변환 할 수도 있습니다. 다음은 이를 수행 할 수있는 몇 가지 샘플 코드입니다.



var StateMain = {

    preload: function() {},

    create: function() {

        //total time until trigger

        this.timeInSeconds = 120;

        //make a text field

        this.timeText = game.add.text(game.world.centerX, game.world.centerY, "0:00");

        //turn the text white

        this.timeText.fill = "#ffffff";

        //center the text

        this.timeText.anchor.set(0.5, 0.5);

        //set up a loop timer

        this.timer = game.time.events.loop(Phaser.Timer.SECOND, this.tick, this);

    },

    tick: function() {

        //subtract a second

        this.timeInSeconds--;

        //find how many complete minutes are left

        var minutes = Math.floor(this.timeInSeconds / 60);

        //find the number of seconds left

        //not counting the minutes

        var seconds = this.timeInSeconds - (minutes * 60);

        //make a string showing the time

        var timeString = this.addZeros(minutes) + ":" + this.addZeros(seconds);

        //display the string in the text field

        this.timeText.text = timeString;

        //check if the time is up

        if (this.timeInSeconds == 0) {

            //remove the timer from the game

            game.time.events.remove(this.timer);

            //call your game over or other code here!

            this.timeText.text="Game Over";

        }

    },

    /**

     * add leading zeros to any number less than 10

     * for example turn 1 to 01

     */

    addZeros: function(num) {

        if (num < 10) {

            num = "0" + num;

        }

        return num;

    },

    update: function() {}

}


Posted by 마스터킹
|



이 간단한 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 플랫폼이 있습니다.



Posted by 마스터킹
|


오늘은 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 줄 미만의 코드를 사용하면 간단한 브레이크 아웃 클론을 만들어 보았습니다.



Posted by 마스터킹
|




이 튜토리얼의 첫 번째 파트에서는 간단한 Flappy Bird 복제본을 만들었습니다. 그것은 좋았지 만 아주 지루했습니다.  이 부분에서는 애니메이션과 사운드를 추가하는 방법을 살펴 보겠습니다. 우리는 게임의 메 커닉을 바꾸지 않겠지 만, 게임은 훨씬 더 재미있을 것입니다.


새는 아주 지루한 방법으로 위아래로 움직입니다. 원래 게임에서와 같은 애니메이션을 추가하겠습니다.



위의 그림처럼

- 새가 천천히 특정 지점까지 아래로 회전합니다.

-그리고 새가 뛰었을 때, 그것은 위로 회전합니다.

첫 번째는 쉽습니다. 이것을 update () 함수에 추가하면됩니다.

if (this.bird.angle < 20)
this.bird.angle += 1;


jump () 함수에서 애니메이션을 생성하면됩니다.

// 새 애니메이션 만들기
var animation = game.add.tween(this.bird);

// 100 밀리세컨드 동안 angle은 -20도로 변경
animation.to({angle: -20}, 100);

// 애니메이션 시작하기
animation.start();


위의 코드를 한줄로 작성하면 다음과 같습니다.

game.add.tween(this.bird).to({angle: -20}, 100).start();


지금 게임을 테스트하면 새가 원래의 Flappy Bird처럼 회전하고 있지 않음을 알 수 있습니다. 왼쪽 그림과 같이 회전하는 것보다, 오른쪽 그림처럼 보이기를 원할겁니다.


우리가해야 할 일은 "anchor"라고 불리는 새의 회전 중심 (위의 빨간색 점)을 변경하는 것입니다. 그래서 다음과 같은 코드를 create () 함수에 추가합니다.

// 앵커를 왼쪽과 아래쪽으로 움직입니다.
this.bird.anchor.setTo(-0.2, 0.5);


지금 게임을 테스트하면 애니메이션이 훨씬 좋아 보일 것입니다.



새가 죽으면 즉시 게임을 다시 시작합니다. 대신, 우리는 새가 화면에서 떨어지게 할 것입니다.


먼저 update () 함수에서 다음 코드를 업데이트하여 새가 파이프를 때릴 때 restartGame () 대신 hitPipe ()를 호출합니다.

game.physics.arcade.overlap(this.bird, this.pipes, this.hitPipe, null, this);


이제 새로운 hitPipe () 함수를 만듭니다.

hitPipe: function() {
// 새가 이미 파이프에 부딪쳤다면 아무 것도하지 않습니다
// 새가 벌써 화면에서 떨어지고있는 것을 의미합니다.
if (this.bird.alive == false)
return;

// 새의 alive 속성을 false로 설정합니다.
this.bird.alive = false;

// 새 파이프가 나타나지 않도록하십시오.
game.time.events.remove(this.timer);

// 모든 파이프를 통과 및 이동을 중지하십시오.
this.pipes.forEach(function(p){
p.body.velocity.x = 0;
}, this);
},



마지막으로, 새가 죽었을 때  도약 하는것을 원하지 않습니다. 그래서 우리는 함수의 시작 부분에이 두 줄을 추가하여 jump () 함수를 편집합니다.

if (this.bird.alive == false)
return;


그리고 애니메이션이 추가된 화면입니다.



Phaser로 소리를 추가하는 것은 매우 쉽습니다.


preload () 함수에서 점프 사운드를 로드하는 것으로 시작합니다.

game.load.audio('jump', 'assets/jump.wav');


이제 create () 함수에 다음 코드를 넣음으로써 사운드를 게임에 추가합니다.

this.jumpSound = game.add.audio('jump');


마지막으로 jump () 함수에 다음 코드를 추가하여 실제로 사운드 효과를 재생합니다.

this.jumpSound.play();



이제 게임에 애니메이션과 사운드가 생성되었습니다.


Posted by 마스터킹
|

Flappy Bird는 Phaser Js 프레임 워크를 사용하여 간단히 만들어 볼수 있는 프로그램입니다.


Phaser는 무료, 오픈 소스이며 모든 웹 브라우저에서 게임을 즐길 수있는 멋진 프레임 워크입니다.


- SETUP

먼저 게임을 만들려면, 빈 템플릿을 다운로드 하여 압축을 해제 하세요.


파일 구성은

phaser.min.js: Phaser 프레임 워크 v2.4.3.

index.html: 게임이 표시됩니다.

main.js는 모든 코드를 작성하는 파일입니다.

assets /, 2 개의 이미지와 하나의 사운드 효과가있는 디렉토리.


- Empty Project


우리가 할 첫 번째 일은 빈 프로젝트를 만드는 것입니다.


index.html 파일을 열어 다음  코드를 추가하십시오

<!DOCTYPE html>
<html lang="en">
<head>

<script type="text/javascript" src="phaser.min.js"></script>
<script type="text/javascript" src="main.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0,
maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, minimal-ui" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta name="HandheldFriendly" content="true" />
<meta name="mobile-web-app-capable" content="yes" />
<style type="text/css">
body {
padding: 0px;
margin: 0px;
background: #000;
}
</style>
</head>
<body>

</body>
</html>

코드를 보시면 단순히 pharse.min.js 와 main.js 파일만 로드합니다.


그리고 main.js 파일에 다음 코드를 추가 합니다.

var mainState = {
preload: function() {
// 이 기능은 처음에 실행됩니다.
// 그것이 이미지와 사운드를 로드하는 곳입니다.
},

create: function() {
// 이 함수는 preload 함수 후에 호출됩니다.
// 여기에서는 게임을 설정하고 스프라이트를 표시합니다.
},

update: function() {
// 이 함수는 초당 60 회 호출됩니다.
// 여기에는 게임의 로직이 포함되어 있습니다.
},
};

// 페이저 초기화 및 400 x 490 게임 만들기
var game = new Phaser.Game(400, 490);

// 'mainState'를 추가하고 'main' 이라고 설정합니다.
game.state.add('main', mainState);

// 실제로 게임을 시작하기 위해 'main' 을 시작합니다..
game.state.start('main');


Phaser로 게임을 만들기 위해해야 할 일은 preload (), create () 및 update () 함수를 채우는 것입니다.


먼저 스페이스 바 키를 누를 때 뛰는 새를 게임에 추가하는 데 집중하십시오.


모든 것은 매우 간단하고 잘 주석 처리되어 있으므로 아래 코드를 이해할 수 있어야합니다.

더 나은 가독성을 위해 Phaser 초기화를 제거하고 위에서 볼 수있는 관리 코드를 설명합니다.


먼저 preload (), create () 및 update () 함수를 업데이트합니다.

// 새 스프라이트 로드
preload: function() {
game.load.image('bird', 'assets/bird.png');
},

create: function() {
// 게임의 배경색을 파란색으로 변경하십시오.
game.stage.backgroundColor = '#71c5cf';

// 물리 시스템 설정
game.physics.startSystem(Phaser.Physics.ARCADE);

// 새를 x = 100 및 y = 245 위치에 표시하십시오.
this.bird = game.add.sprite(100, 245, 'bird');

// 새를 물리 시스템에 추가
// 추가내용 : movements, gravity, collisions, etc.
game.physics.arcade.enable(this.bird);

// 새에 중력을 가하여 떨어 뜨립니다.
this.bird.body.gravity.y = 1000;

// 스페이스 키가 눌려지면 'jump'함수를 호출하십시오.
var spaceKey = game.input.keyboard.addKey(
Phaser.Keyboard.SPACEBAR);
spaceKey.onDown.add(this.jump, this);
},

update: function() {
// 새가 화면에서 벗어난 경우 (너무 높거나 너무 낮은 경우)
// 'restartGame'함수를 호출하십시오.
if (this.bird.y < 0 || this.bird.y > 490)
this.restartGame();
},


그리고 새로운 함수를 추가 합니다.

// 새가 점프하는 함수
jump: function() {
// 중력을 반대로 설정
this.bird.body.velocity.y = -350;
},

// Game Restart 함수
restartGame: function() {
// 게임을 다시 시작하게 합니다.
game.state.start('main');
},


Javascript가 로컬 파일 시스템에서 파일을로드 할 수 없기 때문에 Phaser 게임을 브라우저에서 직접 실행하는 것은 효과가 없습니다. 이를 해결하기 위해 웹 서버를 사용하여 게임을 테스트해야합니다.


컴퓨터에 로컬 웹 서버를 설치하는 데는 여러 가지 방법이 있으며 아래에서 3 번을 빠르게 다룰 것입니다.


- Brackets을 사용하십시오. Brackets editor 에서 게임이 포함 된 디렉토리를 열고 창의 오른쪽 상단 모서리에있는 작은 볼트 아이콘을 클릭하십시오. 이렇게하면 웹 서버의 실시간 미리보기로 브라우저가 바로 열립니다. 그것은 아마도 가장 쉬운 해결책 일 것입니다.


- 앱을 사용하십시오. WAMP (Windows) 또는 MAMP (Mac)를 다운로드 할 수 있습니다. 둘 다 간단한 설치할수 있습니다.


- 파이썬이 설치되어 있고 명령 행에 익숙하다면 python -m SimpleHTTPServer를 입력하여 웹 서버가 현재 디렉토리에서 실행되도록하십시오. 그런 다음 127.0.0.1:8000 URL을 사용하여 게임을 즐기십시오.


실행하면 다음과 같이 표시됩니다.


장애물이없는 Flappy Bird 게임 (녹색 파이프)은 실제로 흥미롭지 않으므로 변경하십시오.


먼저 preload () 함수에서 파이프 스프라이트를 로드합니다.

game.load.image('pipe', 'assets/pipe.png');


게임에서 많은 파이프를 다루기 때문에 "group" 이라는 Phaser 기능을 사용하는 것이 더 쉽습니다. 그룹에는 모든 파이프가 포함됩니다. 그룹을 만들려면 create () 함수에 추가하십시오.

// 빈 그룹을 만듭니다
this.pipes = game.add.group();


이제 게임에 파이프를 추가하는 새로운 함수가 필요합니다.

addOnePipe: function(x, y) {
// x와 y 위치에 파이프 만들기
var pipe = game.add.sprite(x, y, 'pipe');

// 이전에 생성된 그룹에 추가
this.pipes.add(pipe);

// 파이프를 물리 시스템에 추가
game.physics.arcade.enable(pipe);

// 파이프에 속도를 추가하여 왼쪽으로 이동합니다.
pipe.body.velocity.x = -200;

// 파이프가 더 이상 보이지 않을 때 자동으로 파이프를 삭제합니다.
pipe.checkWorldBounds = true;
pipe.outOfBoundsKill = true;
},


앞의 함수는 하나의 파이프를 생성하지만, 중간에 구멍이있는 행에 6 개의 파이프를 표시해야합니다. 자 이

제 그냥하는 새로운 함수를 만들어 봅시다.

addRowOfPipes: function() {
// 무작위로 1과 5 사이의 숫자 선택
// 구멍 위치가됩니다.
var hole = Math.floor(Math.random() * 5) + 1;

// 6 개의 파이프 추가
// '구멍'과 '구멍 + 1' 위치에 하나의 큰 구멍이있는 상태
for (var i = 0; i < 8; i++)
if (i != hole && i != hole + 1)
this.addOnePipe(400, i * 60 + 10);
},


hole = 2 일 때,  다음과 같은 상태가 됩니다.




우리 게임에서 파이프를 실제로 추가하려면 1.5 초마다 addRowOfPipes () 함수를 호출해야합니다. create () 함수에 타이머를 추가하여 이 작업을 수행 할 수 있습니다.

this.timer = game.time.events.loop(1500, this.addRowOfPipes, this);


이제 파일을 저장하고 코드를 테스트 할 수 있습니다. 이것은 천천히 실제 게임처럼 보이기 시작합니다.



게임을 끝내기 위해 마지막으로해야 할 일은 스코어를 추가하고 충돌을 처리하는 것입니다. 그리고 이것은 매우 쉽게 할 수 있습니다.


스코어를 왼쪽 상단에 표시하기 위해 create () 함수에 다음을 추가합니다.

this.score = 0;
this.labelScore = game.add.text(20, 20, "0",
{ font: "30px Arial", fill: "#ffffff" });


그리고 우리는 addRowOfPipes ()에 다음 코드를 넣어 새로운 파이프가 생성 될 때마다 점수를 1 씩 증가시킵니다.

this.score += 1;
this.labelScore.text = this.score;


다음으로 update () 함수에 다음코드를 추가하여 새가 파이프 그룹의 파이프와 충돌 할 때 restartGame ()을 호출합니다.

game.physics.arcade.overlap(this.bird, this.pipes, this.restartGame, null, this);


오! 이제 거의 비슷하게 게임을 만들었군요!




게임은 작동하지만 조금 지루합니다. 다음 부분에서는 사운드와 애니메이션을 추가하여 사운드를 더 잘 만들 수있는 방법을 살펴 보겠습니다. 파트 2에서 만나요~

Posted by 마스터킹
|

이번의 튜토리얼에서는 멀티 플랫폼 게임인 Monster Wants Candy의 소스를 분석하여 HTML5 게임 엔진 인 Phaser를 이용하여 만들것입니다. 이 방법으로 엔진에 대한 실질적인 사용법 얻게되며 자신 만의 HTML5 모바일 및 브라우저 게임을 제작하는 데 사용할 수 있는 개념을 배우게됩니다.


소개

HTML5 게임을 만들려면 프레임 워크 또는 엔진을 선택하는 것이 좋습니다. 물론 평범한 JavaScript로 할 수도 있지만 프레임 워크를 사용하면 개발 속도가 크게 빨라지고 쉽게 할 일을 처리 할 수 있습니다.


Phaser는 최신 HTML5 게임 개발 프레임 워크로, 아직 들어 본 적이 없다면 반드시 시도해야합니다.


Phaser 란 무엇입니까?

Phaser는 데스크톱 및 모바일 HTML5 게임을 제작하기위한 프레임 워크입니다. 그것은 Photon Storm에 의해 만들어졌습니다. 이 프레임 워크는 순수한 JavaScript로 작성되었지만, 간혹 TypeScript 정의 파일을 포함합니다.


Phaser 코드는 Flash gamedev 플랫폼 Flixel을 기반으로하므로 Flash 개발자는 바로 느낄 수 있습니다. 내부적으로 Pixi.js 엔진을 사용하여 Canvas 또는 WebGL을 사용하여 화면의 모든 부분을 렌더링합니다.


HTML5GameDevs 포럼에서 활발한 커뮤니티의 도움으로 빠르게 성장하고 있습니다. 사용할 수있는 자습서와 기사가 이미 많이 있으며, 공식 문서와 개발 중에 매우 도움이 될 수있는 수많은 예제를 확인할 수도 있습니다. 오픈 소스이며 GitHub에서 무료로 사용할 수 있으므로 소스 코드로 직접 들어가서 배울 수 있습니다.


Monster Wants Candy 

게임을 제작할 때 먼저 핵심 아이디어를 생각하고 작동하는 프로토 타입을 신속하게 설정하려고합니다. 이 연구에서는 Monster Wants Candy라고 불리는 게임의 간단한 데모부터 시작합니다.


프로토 타입으로 작업하는 대신 프로젝트의 구조를 먼저 보여 주므로 전체 아이디어를 이해할 수 있습니다. 그런 다음 Assets 로드에서부터 메인 메뉴 제작 및 실제 게임 루프에 이르기까지 단계를 거치게됩니다. 지금 Monster Wants Candy 데모를 보시면 우리가 함께 만드는 것을 보실 수 있습니다.


코딩은 Enclave Games의 Andrzej Mazur가 담당했으며 모든 그래픽 Assets은 Blackmoon Design의 Robert Podgórski가 만들었습니다.


Monster Wants Candy의 이야기는 간단합니다. 사악한 왕이 당신의 사랑을 납치했고 그녀를 되찾기 위해 충분한 사탕을 모아야합니다. 게임 플레이도 간단합니다 : 과자가 떨어지고 있고 그들을 먹을 수 있습니다. 캔디를 먹으면 얻는 점수가 많을수록 좋습니다. 당신이 무엇이든 놓치고 화면에서 떨어지면 인생을 잃고 게임은 끝납니다.


보시다시피 매우 단순한 게임이지만 구조가 완벽합니다. 프레임 워크의 가장 중요한 용도는 이미지로드, 스프라이트 렌더링 및 사용자 활동 감지와 같은 작업에 해당합니다. 또한 코드를 복사하고 코드를 시작하고 자신 만의 게임을 만들 수있는 좋은 출발점이됩니다.


프로젝트 설정 및 구조

Phaser를 시작하는 방법에 대해 프레임 워크 작성자가 직접 작성한이 유용한 기사를 읽거나 GitHub 레포의 phaser.min.js 파일을 프로젝트 디렉토리에 복사하여 처음부터 작업을 시작할 수 있습니다. 

브라우저에서 index.html 파일을 실행하기 만하면 소스 코드에서 변경 한 내용을 즉시 볼 수 있습니다.


우리 프로젝트 폴더에는 HTML5 구조와 필요한 모든 JavaScript 파일을 포함하는 index.html 파일이 들어 있습니다. 두 가지 하위 폴더가 있습니다. img는 모든 그래픽 애셋을 저장하고 src는 게임의 소스 코드를 저장합니다.


폴더구조는 다음과 같습니다.



src 폴더에는 JavaScript 파일이 있습니다. 이것은 마술이 일어나는 곳입니다. 이 튜토리얼에서는 그 폴더에있는 모든 파일의 목적과 내용을 설명합니다.


이 튜토리얼의 GitHub 에서 각 파일의 소스를 볼 수 있습니다.


Index.html

index.html 파일부터 시작하겠습니다. 기본 HTML5 웹 사이트처럼 보이지만 텍스트와 많은 HTML 요소를 추가하는 대신, 모든 것을 Canvas 요소로 렌더링하는 Phaser 프레임 워크를 초기화합니다.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Monster Wants Candy demo</title>
    <style> body { margin: 0; background: #B4D9E7; } </style>
    <script src="src/phaser.min.js"></script>
    <script src="src/Boot.js"></script>
    <script src="src/Preloader.js"></script>
    <script src="src/MainMenu.js"></script>
    <script src="src/Game.js"></script>
</head>
<body>
<script>
(function() {
    var game = new Phaser.Game(640, 960, Phaser.AUTO, 'game');
    game.state.add('Boot', Candy.Boot);
    game.state.add('Preloader', Candy.Preloader);
    game.state.add('MainMenu', Candy.MainMenu);
    game.state.add('Game', Candy.Game);
    game.state.start('Boot');
})();
</script>
</body>
</html>


doctype을 가진 HTML 문서의 일반적인 구조와 <head>의 일부 정보, charset 인코딩, 페이지 제목 및 CSS 스타일을 정의합니다. 일반적으로 우리는 모든 스타일을 넣은 외부 CSS 파일을 참조 할 것이지만 여기서는 필요하지 않습니다. 앞에서 언급했듯이 모든 것이 Canvas 요소에 렌더링되므로 스타일을 지정할 HTML 요소가 없습니다. .


마지막으로 해야 할 일은 Phaser.min.js 파일에서 부터 Phaser 프레임 워크의 소스 코드와 함께 모든 자바 스크립트 파일을 게임의 코드가 포함 된 모든 파일에 포함시키는 것입니다. 모든 자바 스크립트 파일을 하나로 결합하여 브라우저의 요청 수를 줄이는 것이 좋으므로 게임로드가 빨라지지만 이 자습서에서는 별도로 로드 할 것입니다.


<body> 태그의 내용으로 이동하여 프레임 워크를 초기화하고 게임을 시작하십시오. 이 코드는 자체 호출 함수 내에 있습니다. 첫 번째 줄은 다음과 같습니다.

var game = new Phaser.Game(640, 960, Phaser.AUTO, 'game');


이 코드는 몇 가지 기본값으로 Phaser를 초기화합니다 :

640은 게임의 캔버스 너비 (픽셀)이고 960은 게임의 높이입니다.


Phaser.AUTO는 Canvas에 게임을 렌더링하는 방법을 프레임 워크에 알려줍니다. 세 가지 옵션이 있습니다 : CANVAS, WEBGL 및 AUTO. 첫 번째는 캔버스의 2D 컨텍스트에서 게임을 실행합니다. 두 번째는 가능한 경우 WebGL을 사용하여 렌더링합니다 (주로 현재 데스크톱이지만 모바일 지원은 개선되고 있습니다). 세 번째 팀은 WebGL이 지원되는지 여부를 확인하여 컨텍스트에서 게임을 렌더링 할 수 있는지 여부를 결정하는 프레임 워크에이 결정을 남깁니다. 그렇지 않으면 2D 캔버스 렌더링이 사용됩니다.


프레임 워크 초기화는 game이라는 단일 객체에 지정되며, Phaser 인스턴스를 참조 할 때 사용하게됩니다.


다음 코드를 추가합니다.

game.state.add('Boot', Candy.Boot);



'Boot'는 상태 이름이고 Candy.Boot는 그 상태를 시작할 때 실행될 객체입니다 (다음 단계에서 정의 됨). 

Boot (구성), Preloader (Assets 로드), MainMenu (우리 게임의 메인 메뉴) 및 Game (게임의 기본 루프)에 대한 상태를 추가합니다. 마지막 줄인 game.state.start ( 'Boot')는 Boot 상태를 시작하여 Candy.Boot 객체의 적절한 함수가 실행되도록합니다.


보시다시피, 하나의 주요 자바 스크립트 게임 객체가 만들어졌으며 많은 다른 객체가 특수 목적으로 할당되었습니다. 우리 게임에서는 Boot, Preloader, MainMenu 및 Game 객체가 게임 상태가되며 프로토 타입을 사용하여 정의합니다. 프레임 워크 자체 (preload (), create (), update () 및 render ())를 위해 예약 된 객체에는 몇 가지 특수 함수 이름이 있지만 자체 startGame (), spawnCandy managePause ()). 이 모든 내용을 잘 이해하지 못한다면 걱정하지 마십시오. 나중에 코드 예제를 사용하여 모든 내용을 설명 할 것입니다.



Posted by 마스터킹
|