개요
Phaser는 HTML5 Game Framework로 이를 사용하면 우리는 JavaScript를 사용하여 Game을 쉽게 개발할 수 있습니다. 하지만 하나의 Game이 APP으로써 공통적인 요소로 사용자 관리(로그인), 게임자료 관리, (필요에 따라) 실시간 통신 등이 추가로 필요합니다. Angular와 같은 Web Framework를 사용하면 이러한 공통 요소를 좀 더 손쉽게 Game에 추가할 수 있습니다.
이번 포스트에서는 우선 Angular 프로젝트에서 Phaser를 사용할 수 있도록 설정해보도록 하겠습니다.
환경설정
Angular
우선 다음 링크를 참고하여 Angular를 사용할 수 있도록 프로젝트를 생성합니다.
Phaser 3 설정
Phaser는 module을 export 해주지 않기 때문에 Angular에서 Phaser3을 사용하기 위해서는 다음과 같이 별도의 작업이 필요합니다.
※ Angular 프로젝트 폴더에서 작업합니다.
1. src/index.html에 Phaser 3 CDN경로를 추가합니다.
<head>
<script src="//cdn.jsdelivr.net/npm/phaser@3.22.0/dist/phaser.js"></script>
</head>
<body>
<my-app>loading</my-app>
</body>
2. phaser.d.ts를 Angular 프로젝트 src 폴더에 다운로드합니다.
$ wget https://raw.githubusercontent.com/photonstorm/phaser/master/types/phaser.d.ts
3. Angular Component에서 Phaser 모듈을 호출합니다. 아래의 설정값에 대한 상세한 설명은 Phaser 3 API Documentation을 참고하도록 합니다.
▼ src/app/app.component.ts
export class AppComponent implements OnInit {
name = 'Angular';
public game: Phaser.Game;
public readonly gameConfig: GameConfig = {
title: "Phaser Running Test @ Angular",
version: "0.0.1",
type: Phaser.AUTO,
width: 480,
height: 320,
backgroundColor : '#71c5cf',
physics: {
default : 'arcade',
arcade: {
debug: true,
setBounds: false
}
},
parent: null,
callbacks: {
postBoot: function(game) {
game.canvas.style.width = '100%';
game.canvas.style.height = '100%';
}
}
}
ngOnInit() {
this.game = new Phaser.Game(this.gameConfig);
}
}
APP을 실행하고 ($ ng serve), 웹브라우저로 접속하면 다음과 같이 화면이 하늘색으로 표시되는 것을 확인할 수 있습니다.
결론
지금까지 Angular와 함께 Phaser를 사용할 수 있도록 간단히 환경을 설정해보았습니다. 지금까지 작성한 전체 소스코드는 다음의 링크를 통해서 확인할 수 있습니다.
다음 포스트에서는 Phaser를 이용하여 간단히 벽돌깨기 게임을 Phaser 를 사용하여 만들어 보도록 하겠습니다.
참고
'모듈, 프레임웍 > Phaser' 카테고리의 다른 글
| Angular - Phaser 통합 (0) | 2020.04.11 |
|---|---|
| Phaser3 의 기본기능 및 퍼즐게임 예시 (3) | 2020.03.25 |
| Phaser 3 Preloading 화면 만들기 (0) | 2019.04.08 |
| Angular 와 Phaser 함께 사용하기 (2/2) - 벽돌깨기 게임 만들기 (0) | 2019.01.27 |
