Phaser
Make your first game(https://phaser.io/tutorials/making-your-first-phaser-3-game/part1)
Tutorials, Samples - Official Sample과 참고자료들
처음 게임 만드는 예제는 정말 강추한다.
Phaser 애니메이션 처리 방식
Phaser의 애니메이션은 이미지를 넣고 소스상에서 애니메이션을 만드는 방식도 가능하고, json으로 아틀라스 이미지의 offset 정보와 animation 정보(FPS, 참조 image 등)를 처리하는 형태도 가능하다.
Atlas 애니메이션 편집 툴(Frame 정보 json으로 뽑기, 애니메이션 정보 json으로 뽑기)
https://gammafp.com/tool/atlas-packer/
https://gammafp.com/tool/animator/
이미지와 json 파일 로드(animator, frame)
scene.load.atlas(
"cute_fruits",
"assets/cute_fruits.png",
"assets/cute_fruits_atlas.json"
);
scene.load.animation("fruits_anim", "assets/cute_fruits_anim.json");
애니메이션 사용 예시(matter)
update() {
const speed = 5.0; //2.5;
let playerVelocity = new Phaser.Math.Vector2();
if (this.inputKeys.left.isDown) {
playerVelocity.x = -1;
this.setFlipX(true);
} else if (this.inputKeys.right.isDown) {
playerVelocity.x = 1;
this.setFlipX(false);
}
if (this.inputKeys.up.isDown) {
playerVelocity.y = -1;
} else if (this.inputKeys.down.isDown) {
playerVelocity.y = 1;
}
playerVelocity.scale(speed);
this.setVelocity(playerVelocity.x, playerVelocity.y);
if (playerVelocity.x === 0 && playerVelocity.y === 0) {
this.anims.play("apple_idle", true);
} else {
this.anims.play("apple_walk", true);
}
}
애니메이션 반전 처리
setFlipX를 이용하면 된다.
Tilemap
Phaser 타일맵 구현 추천 강의(1강만 무료)
https://youtu.be/fdXcD9X4NrQ
타일맵을 구현할 때 Tiled 프로그램을 이용하여 뽑은 json 데이터를 사용한다.
타일맵에서 사용하는 이미지를 preload에서 등록하고, json 파일도 등록하고...
이 json 파일을 가지고 맵을 만들고, layout을 생성하면서 이미지를 추가해주고... 충돌 활성화 처리를 해준다.
(Tile에 collides(bool)을 true로 주고 소스 상에서 Layer의 충돌처리를 켜주는 식으로 구현 가능하다)
사용하는 이미지와 Tilemap json 파일을 로드한다. (preload)
this.load.image("beach_tileset", "../assets/beach_tileset_extruded.png");
this.load.image("beach_tileset2", "../assets/beach_tileset2_extruded.png");
this.load.image("house1", "../assets/house1.png");
this.load.image("house2", "../assets/house2.png");
this.load.tilemapTiledJSON(this.mapName, `../assets/${this.mapName}.json`);
로드한 데이터를 토대로 타일맵을 생성한다. (예시)
Layer는 Tiled에서 사용하는 이름, 타일의 크기, 사용하는 타일셋 이미지 등을 명시하고 있다.
createTileMap() {
// create tilemap with tilemap.json
const map = this.make.tilemap({
key: this.mapName,
tileWidth: 32,
tileHeight: 32,
});
this.mapWidth = map["widthInPixels"];
this.mapHeight = map["heightInPixels"];
// add tileset images to map
map.addTilesetImage("beach_tileset", "beach_tileset", 34, 34, 0, 0);
map.addTilesetImage("beach_tileset2", "beach_tileset2", 34, 34, 0, 0);
map.addTilesetImage("house1", "house1", 32, 32, 0, 0);
map.addTilesetImage("house2", "house2", 32, 32, 0, 0);
// create map's layer with layer name(Tiled) and used tileset
const backgroundLayer = map.createLayer(
"Background",
["beach_tileset", "beach_tileset2"],
0,
0
);
const itemsLayer = map.createLayer(
"Items",
["beach_tileset", "house1", "house2"],
0,
0
);
const bridgeLayer = map.createLayer("Bridge", ["beach_tileset"], 0, 0);
itemsLayer.setDepth(10);
backgroundLayer.setCollisionByProperty({
collides: true,
});
bridgeLayer.setCollisionByProperty({
collides: true,
});
itemsLayer.setCollisionByProperty({
collides: true,
});
this.matter.world.convertTilemapLayer(backgroundLayer);
this.matter.world.convertTilemapLayer(bridgeLayer);
this.matter.world.convertTilemapLayer(itemsLayer);
}
TIled 프로그램에서 세부적인 Collider 설정도 가능하다. (타일 property에 collides를 준다.)
Z-Index 값을 구현하기 위해서는 Layer별로 Depth를 설정할 수 있다고 한다.
Tile에 지정하는 것은 불가능하다고 한다.
https://github.com/photonstorm/phaser/issues/3906#issuecomment-412003173
댓글