나는 Phaser CE 2.8.0을 사용하여 만들었으므로 지금은 약간 뉘앙스입니다. 그래서 새로운 Phaser 3.6.0 버전과 호환되도록 코드를 다시 작성한 것입니다.
이 프로토 타입은 슈퍼 마리오를 놓치지 않습니다. 토끼가 자동으로 달리고, 장애물에 부딪 칠 때마다 방향이 바뀌고, 점프, 더블 점프 및 벽 점프를 수행 할 수 있을뿐만 아니라 벽을 미끄러지 듯 움직일 수 있습니다.
어, 그리고 예스 버니의 레벨이 화면보다 커지면 카메라가 자동으로 토끼를 따릅니다 - 예, 토끼를 조종합니다.
점프하거나 더블 점프 또는 벽으로 점프하려면 클릭하거나 살짝 누르십시오.
Phaser 3에 대한 코드를 다시 작성하는 것은 매우 쉬웠습니다. 이전의 follow 메소드 보다 옵션이 적은 카메라 startFollow 메소드 만 발견했습니다.
소스 코드를 살펴보면이 Phaser 3 프로토 타입과 이전 Phaser 2 프로토 타입 간의 차이점을 확인할 수있을뿐만 아니라 다음을 배울 수 있습니다.
* 타일 기반 레벨 가져 오기
* ARCADE 물리학 구성
* 플레이어 입력 대기
* 스프라이트와 환경 사이의 충돌을 검사한다.
* 플레이어의 움직임을 따라가는 카메라 이동
소스 코드를 살펴보십시오.
var game;
var gameOptions = {
// player gravity
playerGravity: 900,
// player friction when on wall
playerGrip: 100,
// player horizontal speed
playerSpeed: 200,
// player jump force
playerJump: 400,
// player double jump force
playerDoubleJump: 300
}
window.onload = function() {
var gameConfig = {
type: Phaser.CANVAS,
width: 640,
height: 480,
backgroundColor: 0x444444,
physics: {
default: "arcade",
arcade: {
gravity: {
y: 0
}
}
},
scene: [preloadGame, playGame]
}
game = new Phaser.Game(gameConfig);
}
class preloadGame extends Phaser.Scene{
constructor(){
super("PreloadGame");
}
preload(){
this.load.tilemapTiledJSON("level", "level.json");
this.load.image("tile", "tile.png");
this.load.image("hero", "hero.png");
}
create(){
this.scene.start("PlayGame");
}
}
class playGame extends Phaser.Scene{
constructor(){
super("PlayGame");
}
create(){
// creation of "level" tilemap
this.map = this.make.tilemap({
key: "level"
});
// adding tiles (actually one tile) to tilemap
var tile = this.map.addTilesetImage("tileset01", "tile");
// tile 1 (the black tile) has the collision enabled
this.map.setCollision(1);
// which layer should we render? That's right, "layer01"
this.layer = this.map.createStaticLayer("layer01", tile);
// adding the hero sprite and enabling ARCADE physics for the hero
this.hero = this.physics.add.sprite(300, 376, "hero");
// setting hero horizontal speed
this.hero.body.velocity.x = gameOptions.playerSpeed;
// the hero can jump
this.canJump = true;
// the hern cannot double jump
this.canDoubleJump = false;
// the hero is not on the wall
this.onWall = false;
// waiting for player input
this.input.on("pointerdown", this.handleJump, this);
// set workd bounds to allow camera to follow the player
this.cameras.main.setBounds(0, 0, 1920, 1440);
// making the camera follow the player
this.cameras.main.startFollow(this.hero);
}
handleJump(){
// the hero can jump when:
// canJump is true AND the hero is on the ground (blocked.down)
// OR
// the hero is on the wall
if((this.canJump && this.hero.body.blocked.down) || this.onWall){
// applying jump force
this.hero.body.velocity.y = -gameOptions.playerJump;
// is the hero on a wall?
if(this.onWall){
// change the horizontal velocity too. This way the hero will jump off the wall
this.setPlayerXVelocity(true);
}
// hero can't jump anymore
this.canJump = false;
// hero is not on the wall anymore
this.onWall = false;
// the hero can now double jump
this.canDoubleJump = true;
}
else{
// cam the hero make the doubple jump?
if(this.canDoubleJump){
// the hero can't double jump anymore
this.canDoubleJump = false;
// applying double jump force
this.hero.body.velocity.y = -gameOptions.playerDoubleJump;
}
}
}
update(){
// set some default gravity values. Look at the function for more information
this.setDefaultValues();
// handling collision between the hero and the tiles
this.physics.world.collide(this.hero, this.layer, function(hero, layer){
// some temporary variables to determine if the player is blocked only once
var blockedDown = hero.body.blocked.down;
var blockedLeft = hero.body.blocked.left
var blockedRight = hero.body.blocked.right;
// if the hero hits something, no double jump is allowed
this.canDoubleJump = false;
// hero on the ground
if(blockedDown){
// hero can jump
this.canJump = true;
}
// hero on the ground and touching a wall on the right
if(blockedRight){
// horizontal flipping hero sprite
hero.flipX = true;
}
// hero on the ground and touching a wall on the right
if(blockedLeft){
// default orientation of hero sprite
hero.flipX = false;
}
// hero NOT on the ground and touching a wall
if((blockedRight || blockedLeft) && !blockedDown){
// hero on a wall
hero.scene.onWall = true;
// remove gravity
hero.body.gravity.y = 0;
// setting new y velocity
hero.body.velocity.y = gameOptions.playerGrip;
}
// adjusting hero speed according to the direction it's moving
this.setPlayerXVelocity(!this.onWall || blockedDown);
}, null, this)
}
// default values to be set at the beginning of each update cycle,
// which may be changed according to what happens into "collide" callback function
// (if called)
setDefaultValues(){
this.hero.body.gravity.y = gameOptions.playerGravity;
this.onWall = false;
this.setPlayerXVelocity(true);
}
// sets player velocity according to the direction it's facing, unless "defaultDirection"
// is false, in this case multiplies the velocity by -1
setPlayerXVelocity(defaultDirection){
this.hero.body.velocity.x = gameOptions.playerSpeed * (this.hero.flipX ? -1 : 1) * (defaultDirection ? 1 : -1);
}
}
Phaser 3을 사용하여 단지 몇 줄만으로 많은 것을 할 수 있습니다. 다음 번에 동전과 적을 추가하는 방법을 살펴보고 소스 코드를 다운로드하십시오.
"YEH BUNNY"게임에 대한 모든 글보기
댓글 없음:
댓글 쓰기