들어가며
Phaser를 통해 웹 게임을 본격적으로 제작하게 됐다. 사실 1주일 정도, 계속해서 문서작업을 하면서 아예 코드도 뜯어보지 않은 상태라 Phaser에 대한 지식이 전무한 상태. 그래서 처음부터 같이 하나하나 알아가보자구~
세팅 및 설치
먼저 빈 프로젝트 or Phaser를 사용할 디렉토리 로 들어가자. 이후 아래 명령어를 통해 react+typeScript project를 설치한다. (사용할 프레임워크에 따라서 달라질 수도~)
npx create-react-app my-phaser-game --template typescript
// my-phaser-game은 내가 만들 프로젝트의 이름일 뿐.이후 phaser를 설치한다. 프로젝트 디렉토리로 먼저 이동한 후에 설치해야겠지~?
cd my-phaser-game
npm install phaser이제 Phaser3의 튜토리얼을 따라가보며 내 방식대로 설명할 수 있도록 하겠다.
튜토리얼 링크 : Phaser Tutorial
phaser의 기본은 아래와 같이 구성된다.
const config = {
type: Phaser.AUTO,
width: 800,
height: 600,
scene: {
preload: preload,
create: create,
update: update
}
};
const game = new Phaser.Game(config);
function preload ()
{
}
function create ()
{
}
function update ()
{
}config 객체
: Phaser 게임의 설정을 담고 있다. 이 설정에 기본적인 게임의 환경 설정이 포함되어 있다.
type: Phaser.AUTO는 Phaser가 렌더링 방식을 자동으로 선택한다. 튜토리얼에서도 웬만하면 AUTO로 하라고 함.
width: 게임의 너비를 픽셀 단위로 지정합니다.
height: 게임의 높이를 픽셀 단위로 지정합니다.
scene: 게임의 장면(Scene)을 설정합니다. Phaser에서는 게임의 다양한 상태나 단계를 장면으로 나누어 관리합니다. 여기서는 preload, create, update 세 가지 기본 함수를 포함하는 장면 객체를 정의합니다.
preload 함수
게임에서 사용할 리소스(이미지, 오디오 파일 등)를 미리 로드하는 함수입니다. 여기서는 비어 있지만, 실제 게임에서는 이 부분에 this.load.image나 this.load.audio와 같은 코드를 사용하여 필요한 리소스를 로드합니다.
create 함수
게임의 초기 화면을 구성하는 코드를 담는 함수입니다. 예를 들어, 게임 오브젝트를 생성하거나, 초기 화면 설정을 하는 코드가 이곳에 위치합니다. preload 함수에서 로드한 리소스를 화면에 배치하는 작업도 여기서 수행합니다.
update 함수
게임의 로직을 업데이트하는 함수입니다. 이 함수는 매 게임 프레임마다 호출됩니다. 즉, 게임의 상태를 실시간으로 갱신하려면 이 함수 내에 코드를 작성합니다. 플레이어의 입력 처리, 오브젝트의 움직임 업데이트, 충돌 검사 등이 이곳에서 이루어집니다.
game 객체
Phaser.Game 생성자에 config 객체를 전달하여 게임 인스턴스를 생성합니다. 이 객체를 통해 게임이 시작되고, 설정된 config에 따라 게임이 실행됩니다.
여기서 블로그 마무리하려고 했는데, 한 단계만 더 나아가서 에셋을 불러오는 부분까지 가보면 좋을 것 같다. Phaser3의 tutorial에서 제공하는 zip 파일을 다운받고 IDE에서 구동하면 아래와 같은 디렉토리 구조가 표시된다.
하지만 위 방식은 잘못되었는데 (제가 방금 30분동안 해결하고 옴) react-create-app을 사용하고 있다면 assets를 public안에 넣고 경로에 '/assets/sky.png'와 같이 적어야한다.
우리는 저 assets에서 게임에 필요한 이미지 (맵, 배경과 같은 부분을)를 저장할 수 있다. AWS 서버의 S3에서도 저장해놓고 불러올 수도 있겠지만.
이미지를 불러오는 방법은 사실 간단하다. assets들을 preload를 통해 미리 불러오고, create에서 image를 add하면 된다. 코드로 확인하는 것이 더 직관적임.
function preload ()
{
this.load.image('sky', '/assets/sky.png');
this.load.image('ground', '/assets/platform.png');
this.load.image('star', '/assets/star.png');
this.load.image('bomb', '/assets/bomb.png');
this.load.spritesheet('dude', '/assets/dude.png', { frameWidth: 32, frameHeight: 48 });
}
function create ()
{
this.add.image(400, 300, 'sky');
this.add.image(400,300, 'star');
}전체 게임 화면의 크기를 위에서 800 * 600으로 설정했고, image를 add할 때, 가운데에 위치하게 하고 싶으면, 400, 300과 같이 딱 중간으로 설정된다.
preload를 통해 사전의 이미지들을 불러오고,
create, add를 통해 image를 입력한다는 느낌으로 생각하면 될 듯하다.
합친 코드를 보여주면서 마치면 될 듯하다. 곧 2편으로 찾아옴.
