MainScene.js 파일 생성하기
이전 포스팅에서 survival-game.js 파일을 작성했습니다.
이번 포스팅은 survival-game.js 파일에서 분리시킨 scene을 담당하는 MainScene.js를 작성해 보겠습니다.
먼저 survival-game.js 파일과 위치가 같은 곳에 MainScene.js 파일을 생성합니다.
MainScene.js 코드 작성하기
먼저 MainScene.js 파일에서 MainScene의 클래스가 Phaser.Game 클래스를 확장할 수 있도록 합니다.
이후 슈퍼 클래스의 생성자를 호출합니다.
이 작업을 잊어버리면 런타임 예외 또는 이상한 동작이 발생할 수 있습니다.
scene 추가하기
이제 생성된 게임에 scene을 추가하도록 하겠습니다.
scene은 preload(), create(), update() 3개의 메서드로 구성된 클래스입니다.
일단 3개의 메서드를 작성합니다.
이후 메서드들이 콘솔창에 잘 찍히는지 알아보기 위해 다음처럼 코드를 추가합니다.
survival-game.js 파일로 가서 scene에 MainScene을 추가합니다.
scene에 MainScene을 추가하면, 자동적으로 import MainScene from "./MainScene"이라고 추가되는데, 여기서 해줘야 할 작업이 있습니다.
바로 파일명 뒤에 .js 확장자를 붙이는 것입니다.
이제 index.html 파일에서 우클릭하고, Open with Live Server를 클릭합니다.
그럼 아래와 같은 화면이 보입니다.
그리고 F12를 눌러 console 창도 확인합니다.
저처럼 업데이트가 미친 듯이 되고 있다면 잘 된 것입니다.
지금까지의 코드 모아 보기
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Survival Game Review</title>
<script src="//cdn.jsdelivr.net/npm/phaser@3.55.2/dist/phaser.js"></script>
<script src="//cdn.jsdelivr.net/npm/phaser-matter-collision-plugin"></script>
</head>
<body>
<div id="survival-game"></div>
<script type="module" src="js/survival-game.js"></script>
</body>
</html>survival-game.js
import MainScene from "./MainScene.js";
const config = {
width: 512,
height: 512,
backgroundColor: "#333333",
type: Phaser.AUTO,
parent: "survival-game",
scene: [MainScene],
scale: {
zoom: 2,
},
physics: {
default: "matter",
matter: {
debug: false,
gravity: { y: 0 },
},
},
plugins: {
scene: [
{
plugin: PhaserMatterCollisionPlugin,
key: "matterCollision",
mapping: "matterCollision",
},
],
},
};
new Phaser.Game(config, Phaser.CANVAS);MainScene.js
export default class MainScene extends Phaser.Scene {
constructor() {
super("MainScene");
}
preload() {
console.log("preload");
}
create() {
console.log("create");
}
update() {
console.log("update");
}
}
'🐣 일하면서 공부하기' 카테고리의 다른 글
| [Phaser3] Survival Game(8) - 16 x 16 RPG Characters 생성 (0) | 2023.02.12 |
|---|---|
| [Phaser3] Survival Game(7) - create()에 player 추가 및 키보드 이벤트 (0) | 2023.02.11 |
| [Phaser3] Survival Game(5) - survival-game.js 코드 짜기 (0) | 2023.02.09 |
| [Phaser3] Survival Game(4) - Visual Studio Code에서 초기 설정 (0) | 2023.02.08 |
| [Phaser3] Survival Game(3) - Tileset에 물리 객체 선언하기 (0) | 2023.02.07 |
