phaser는 js기반의 2d게임엔진으로 canvas에다가 결과물이 나온다
따로 전용 에디터까지 있어 편리해 보인다

1.Phaser.Game()로 기본구조 잡기
const config = {
type: Phaser.AUTO,
width: 800, //캔바스 가로사이즈
height: 600, //캔바스 세로사이즈
physics: {
default: "arcade", //게임엔진에 물리법칙 지정
arcade: {
gravity: { y: 500 }, //중력
debug: true, //디버그 모드
},
},
scene: { //장면
preload,
create,
update,
},
};
const game = new Phaser.Game(config); //phaser세팅 넣기
physics를 통해물리엔진, 중력, 디버그를 선택할 수 있다
개발단계에서는 debug를 true로 해두는 게 좋다. 게임에 들어가 있는 sprite(요소)들을 자세하게 볼 수 있다(예를 들어 충돌 판정되는 영역 같은 거)
-default 종류
| arcade(기본 내장) | 점프, 충돌, 중력 같은 캐주얼 게임용 |
| matter | 실제 물리에 가까운 엔진 |
2. preload(), create() , update()
preload(), create() , update()는 게임의 생명주기(lifecycle)를 담당한다.
-preload
게임이 시작되기 전에, 필요한 자원(이미지,스프라이트 시트,사운드,폰트, 타일맵 등 )을 미리 불러오는 단계
-create
preload를 통해 로드된 자원을 이용해서 실제 게임 화면을 만드는 단계
-update
게임이 실행되는 동안 계속 반복되는 루프로 캐릭터이동,충돌 체크,키보드 입력에 따른 반응을 역할 하는 단계
3. 전체적인 사용법
preload, create, update순으로 코드를 작성해야 된다
const config = {
type: Phaser.AUTO,
width: 800,
height: 600,
physics: {
default: "arcade",
arcade: {
gravity: { y: 500 },
debug: true,
},
},
scene: {
preload,
create,
update,
},
};
const game = new Phaser.Game(config);
function preload() {
this.load.image("player", "player.png");
this.load.image("sky", "sky.png");
}
function create() {
this.player = this.physics.add.sprite(200, 300, "player");
this.sky = this.add.image(400, 300, "sky");
this.player.setScale(0.5);
this.sky.setScale(0.5);
}
function update() {}
- this.load.image('에셋 키 이름','이미지경로')
이미지를 phaser에 등록하는 코드로 첫 번째 인자 에셋 키를 가지고 이미지를 식별함
- this.physics.add.sprite(x축위치,y축위치,'에셋 키')
sprite는 이미지에 중력, 충돌판정등을 받게 한다.
물리엔진의 계산대상의 포함된다.
-this.add.image(x축위치,y축위치,'에셋 키')
sprite랑은 다르게 중력, 충돌판정을 안 받는다.
게임진행과 상관없는 단순히 배경에 떠있는 구름, 태양 그런 거라고 보면 된다
-setScale(0.5)
preload에서 등록된 원본이미지를 얼마큼 확대축소할지를 정하는 거다
(0.5배 줄여진다 생각하면 됨)
-코드 예제
https://github.com/bsanjun0417/phaser-study/tree/master/basic1
'js라이브러리 > phaser' 카테고리의 다른 글
| phaser 게임)스프라이트 애니메이션 넣는 법(spritesheet) (0) | 2025.12.17 |
|---|