물리엔진 추가하기
우리는 Phaser Js 로 Runner 게임 만들기 Part - 1 에서 주인공의 파워메터 컨트롤 부분만 제작하였습니다. 직접 주인공을 제어하고 움직이는 부분은 제작하지 않았습니다.
그래서 주인공을 제어하고 움직이게 하기 위해서, 가장 먼저 할 일은 물리 엔진을 시작하는 것입니다. Phaser 에는 여러 개의 엔진이 있습니다. 우리는 아케이드 엔진을 사용할 것입니다.
create 함수의 끝에서 (그러나 mouseListeners 바로 위에)이 코드 라인을 배치하여 물리 엔진을 시작하십시오
//start the physics engine
game.physics.startSystem(Phaser.Physics.ARCADE);
이것은 우리가 스프라이트에 물리엔진을 추가하고 싶다는 것을 Phaser 가 알 수있게 해줍니다. 그러나 모든 단일 스프라이트에 물리를 자동으로 추가하지는 않습니다. 각 스프라이트를 활성화해야합니다. 이 코드를 다음 행에 배치하십시오.
//enable the hero for physics
game.physics.enable(this.hero, Phaser.Physics.ARCADE);
이제 우리의 스프라이트는 물리 속성을 설정할 준비가되었습니다. 영웅의 속도를 설정하는 점프 기능을 만들어 봅시다.
doJump: function() {
this.hero.body.velocity.y = -this.power * 12;
}
우리는 단지 y 속도를 원합니다. 그리고 그것을 위로 향하게 하기 위해서 그것을 음수로 설정하고 싶습니다. 나는 그것을 힘 (또는 PowerBar의 폭) 12 번으로 설정했습니다. 이것은 적당한 속도를 위쪽으로 내는 것처럼 보일것입니다.
다음은 stateMain.js 코드 입니다.
var StateMain = {
preload: function() {
game.load.image("ground", "images/ground.png");
game.load.image("hero", "images/hero.png");
game.load.image("bar", "images/powerbar.png");
game.load.image("block", "images/block.png");
},
create: function() {
this.power = 0;
//turn the background sky blue
game.stage.backgroundColor = "#00ffff";
//add the ground
var ground = game.add.sprite(0, game.height * .9, "ground");
//add the hero in
this.hero = game.add.sprite(game.width * .2, ground.y - 25, "hero");
//add the power bar just above the head of the hero
this.powerBar = game.add.sprite(this.hero.x + 25, this.hero.y - 25, "bar");
this.powerBar.width = 0;
//start the physics engine
game.physics.startSystem(Phaser.Physics.ARCADE);
//enable the hero for physics
game.physics.enable(this.hero, Phaser.Physics.ARCADE);
//set listeners
game.input.onUp.add(this.mouseUp, this);
game.input.onDown.add(this.mouseDown, this);
},
mouseDown: function() {
this.timer = game.time.events.loop(Phaser.Timer.SECOND / 1000, this.increasePower, this);
},
mouseUp: function() {
this.doJump();
game.time.events.remove(this.timer);
this.power = 0;
this.powerBar.width = 0;
},
increasePower: function() {
this.power++;
this.powerBar.width = this.power;
if (this.power > 50) {
this.power = 50;
}
},
doJump: function() {
this.hero.body.velocity.y = -this.power * 12;
},
update: function() {}
}
마우스를 놓을 때 볼 수 있듯이 영웅은 올라가서 거기 머물러 있습니다.
올라가는 것은 내려와야합니다.
영웅이 지구로 내려 오도록 우리는 그의 몸에 중력을 더해야합니다. 우리는 지구상의 중력을 설정할 수 있지만, 그것은 땅에도 영향을 미치고, 땅이 화면에서 떨어지게 만듭니다. 지면의 중력을 0으로 설정하여 무시할 수 있고, 영웅의 중력을 설정하는 것이 쉽습니다.
this.hero.body.gravity.y = 200;
지금 게임을 실행하면 주인공이 게임의 맨 아래를 빠져 나가는 것을 볼 수 있습니다. 위의 예에서도 영웅이 게임의 맨 위로 날아갈 수 있습니다.
다음 한 줄의 코드로 두 가지를 모두 멈출 수 있습니다.
this.hero.body.collideWorldBounds = true;
이제 영웅은 게임에 머물러 있지만 여전히 땅을 빠져 나옵니다. 그것을 수정합시다.
첫째, 우리는 지상 스프라이트가 나머지 주들에게 접근 가능하도록해야합니다.
코드를 수정합시다.
var ground = game.add.sprite(0, game.height * .9, "ground");
을
this.ground = game.add.sprite(0, game.height * .9, "ground");
으로 수정합니다.
그러면 로컬 스프라이트가 주 전체 스프라이트로 변경됩니다.
중요 : 또한 ground 변수를 this.ground로 변경해야합니다.
지면의 물리엔진을 활성화 합니다.
game.physics.enable(this.ground, Phaser.Physics.ARCADE);
다음으로 update 함수에서 collision 관계를 설정하십시오. 두 물체가 충돌 할 때 물리엔진이 서로 작용하게됩니다.
update: function() {
game.physics.arcade.collide(this.hero, this.ground);
}
지금 게임을 실행하면 주인공이 화면에서 벗어나게됩니다.
Phaser 에게 그 지면은 움직이지 않는다고 설정합니다.
this.ground.body.immovable = true;
정리된 stateMain.js 코드 입니다.
var StateMain = {
preload: function() {
game.load.image("ground", "images/ground.png");
game.load.image("hero", "images/hero.png");
game.load.image("bar", "images/powerbar.png");
game.load.image("block", "images/block.png");
},
create: function() {
this.power = 0;
//turn the background sky blue
game.stage.backgroundColor = "#00ffff";
//add the ground
this.ground = game.add.sprite(0, game.height * .9, "ground");
//add the hero in
this.hero = game.add.sprite(game.width * .2, this.ground.y - 25, "hero");
//add the power bar just above the head of the hero
this.powerBar = game.add.sprite(this.hero.x + 25, this.hero.y - 25, "bar");
this.powerBar.width = 0;
//start the physics engine
game.physics.startSystem(Phaser.Physics.ARCADE);
//enable the hero for physics
game.physics.enable(this.hero, Phaser.Physics.ARCADE);
game.physics.enable(this.ground, Phaser.Physics.ARCADE);
this.hero.body.gravity.y = 200;
this.hero.body.collideWorldBounds = true;
this.ground.body.immovable = true;
//set listeners
game.input.onUp.add(this.mouseUp, this);
game.input.onDown.add(this.mouseDown, this);
},
mouseDown: function() {
this.timer = game.time.events.loop(Phaser.Timer.SECOND / 1000, this.increasePower, this);
},
mouseUp: function() {
this.doJump();
game.time.events.remove(this.timer);
this.power = 0;
this.powerBar.width = 0;
},
increasePower: function() {
this.power++;
this.powerBar.width = this.power;
if (this.power > 50) {
this.power = 50;
}
},
doJump: function() {
this.hero.body.velocity.y = -this.power * 12;
},
update: function() {
game.physics.arcade.collide(this.hero, this.ground);
}
}
결과입니다.
'PROGRAMMING > Phaser Js' 카테고리의 다른 글
| Phaser Js 로 Roguelike 만드는 법 (0) | 2018.01.29 |
|---|---|
| Phaser Js 로 Runner 게임 만들기 Part - 3 (0) | 2018.01.29 |
| Phaser Js 로 Runner 게임 만들기 Part - 1 (0) | 2018.01.29 |
| Phaser Js 로 사이몬 게임 만들기 (0) | 2018.01.29 |
| Phaser Js 에서 Toast 메시지 추가하기 (0) | 2018.01.29 |
