Phaser.io JavaScript 라이브러리를 사용하여 게임을 만드는 방법을 보여주는 3 포스트 시리즈 중 첫 번째 시리즈에 오신 것을 환영합니다.
이 게임은 예전의 미사일 커맨드 게임과 유사하지만 조금 변형되었습니다. 미사일을 쏘는 대신에 낙하산 낙하산들에게 화살을 쏴서 피라미드에 닿지 않게 할 것입니다.
게임이 완료되면 어떻게 보이는지 다음 이미지에서 확인할 수 있습니다.
재미있어 보이지 않습니까? 자 이제 게임을 개발하는 데 사용할 기술부터 설명하겠습니다.
Phaser
최근에 게임을 개발하는 자바 스크립트 라이브러리가 늘어났습니다. 왜 Phaser가 필요합니까?
Phaser의 기능 목록은 다음과 같습니다.
- WebGL 및 Canvas 지원
- 물리엔진
- 파티클
- 모바일 브라우저 지원
... 기타 유용한 기능
그리고 제가이 라이브러리를 선택한 이유는 GitHub 페이지에서 볼 수 있듯이 지속적인 업데이트 및 업그레이드 때문입니다.
필요한 Phaser 파일을 다운로드하고 Phaser 웹 사이트에서 설명서를 읽을 수도 있습니다.
다음 단계는 게임에 필요한 파일을 만드는 것입니다. index.html 파일을 작성하여 시작하겠습니다.
index.html
<head>
<title>Phaser Mayan Defense</title>
<script src="lib/phaser.min.js"></script>
<script src="src/boot.js"></script>
<script src="src/preloader.js"></script>
<script src="src/main_menu.js"></script>
<script src="src/game.js"></script>"
</head>
이 파일은 우리 프로젝트의 출발점입니다. 여기서 우리는 필요한 파일을 포함시킵니다. 첫 번째 스크립트 라인에는 Phaser 라이브러리가 있고, 다른 파일은 게임에서 사용할 화면이나 상태입니다.
기본적으로 상태는 게임에서 스크린이나 장면으로 볼 수 있습니다. 해당 화면에서 사용할 자원을 초기화하고, 렌더링 및 갱신 로직을 수행하며,이 화면에서 사용 된 자원을 해제 할 수 있습니다.
이 게임에서 우리가 사용할 상태는 다음과 같습니다.
- Boot
- Preloader
- MainMenu
- Game
이 파일들 각각을 자세히 검토 할 것입니다. 또한 게시물 끝에있는 소스 코드와 리소스 파일을 다운로드 할 수있는 링크를 찾을 수 있습니다.
boot.js
게임의 시작점은 boot.js 파일입니다. 이 파일에서 우리는 데스크탑 및 모바일 클라이언트 모두에 대해 몇 가지 설정을 적용했습니다. 또한 이 파일에서 우리는 다음 게임 상태 (또는 화면)에서 사용할 자원 (이미지)을 로드 할 수 있습니다.
init 함수에서 각 유형의 장치에 대해 서로 다른 옵션을 구성합니다.
init: function() {
// 멀티 터치 지원이 필요하지 않으므로 여기서 1을 지정합니다.
this.input.maxPointers = 1;
if (this.game.device.desktop) {
// 이 섹션에서는 데스크톱 별 설정에 대해 설명합니다.
this.scale.pageAlignHorizontally = true;
} else {
// 이 모바일 설정 섹션
this.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL;
this.scale.setMinMax(480, 260, 1024, 768);
this.scale.forceLandscape = true;
this.scale.pageAlignHorizontally = true;
}
},
preload 함수를 사용하여 다음 상태에 대한 모든 리소스를로드합니다.
preload: function() {
this.load.image('preloaderBackground', 'res/images/preloader_background.png');
this.load.image('preloaderBar', 'res/images/preloader_bar.png');
},
preloader.js
이 파일은 게임에 필요한 모든 리소스를 로드 할 수있는 곳입니다. 또한 리소스가 로드되는 동안 표시 할 배경 이미지와 애니메이션을 설정할 수 있습니다.
프리로드 함수에서 boot.js에 미리 로드한 배경 및 진행률 막대를 추가합니다. 우리는 또한 이 함수를 사용하여 게임에서 사용할 다른 모든 리소스를 로드합니다.
preload: function () {
this.background = this.add.sprite(0, 0, 'preloaderBackground');
this.preloadBar = this.add.sprite(300, 400, 'preloaderBar');
this.load.setPreloadSprite(this.preloadBar);
this.load.image('titlepage', 'images/title.jpg');
this.load.atlas('playButton', 'images/play_button.png', 'images/play_button.json');
this.load.image('gameBackground', 'res/images/game_background.jpg');
}
위의 코드에서 볼 수 있듯이 이미지 (jpg 및 png 파일)가 로드 되지만 json 파일도 로드됩니다. 이 json 파일에는 버턴에 대한 아틀라스 또는 스프라이트 시트에 대한 정보가 들어 있습니다. 기본적으로 아틀라스는 단일 텍스처에 포함 된 이미지 그룹입니다. 이 방법으로 자원의 로딩은 그래픽 프로세서에 의해 최적화 될 수 있습니다.
아틀라스를 만들려면 TexturePacker라는 훌륭한 소프트웨어를 사용하고 있습니다. TexturePacker의 이미지 편집 기능을 사용하여 이미지를 하나씩 만들 수 있으며, 생성된 이미지 파일들을 하나의 파일로 만들 수 있습니다. TexturePacker에서 생성 된 단일 텍스처를 아래에서 볼 수 있습니다. 재생 버튼에 이 텍스처를 사용합니다.
다음은 TexturePacker에 의해 생성 된 json 파일의 예입니다.
{"frames": [
{
"filename": "play_button_click.png",
"frame": {"x":2,"y":2,"w":252,"h":100},
"rotated": false,
"trimmed": true,
"spriteSourceSize": {"x":6,"y":6,"w":252,"h":100},
"sourceSize": {"w":270,"h":110},
"pivot": {"x":0.5,"y":0.5}
},
update 함수에서는 다음 단계만 호출하면 됩니다. 나중에 게임에 음악을 추가 할 것이므로 update 함수를 사용하여 음악이 디코딩되어 다음 상태로 돌아갈 때까지 기다릴 수 있습니다.
main_menu.js
이것은 우리 게임의 메뉴 화면입니다. 이 화면에서 버튼을 추가하여 높은 점수를보고 설정을 변경하고 소셜 네트워크를 사용하여 게임에서 업적을 공유 할 수있는 버튼을 추가 할 수 있습니다. 그러나 지금은 재생 버튼 만 있으면됩니다.
create 함수를 사용하여 주 메뉴에 대한 스프라이트와 버튼을 추가합니다.
create: function () {
this.add.sprite(0, 0, 'titlepage');
this.playButton = this.add.button(400, 600, 'playButton', this.startGame, this, 'buttonOver', 'buttonOut', 'buttonOver');
},
위의 코드에서 먼저 배경 이미지를 먼저 추가합니다. 두 번째 줄에는 버튼 객체가 추가됩니다. 버튼 객체는 기본적으로 특정 유형의 이벤트, 특히 포인터 이벤트에 응답 할 수있는 스프라이트입니다.
- 버튼 이벤트
Over : 포인터가 버튼 위로 움직일 때 트리거됩니다.
Out : 이전에 Button 위에 있던 포인터가 밖으로 나올 때.
Down : 버튼에서 포인터를 누를때.
Up : 버튼에서 눌려진 포인터를 다시 놓을 때.
다음 함수는 플레이 버튼에 대한 이벤트 핸들러입니다.
startGame: function (pointer) {
this.state.start('Game');
}
이 이벤트 핸들러에서는 현재 상태를 게임 화면으로 변경합니다.
이것이 바로 메뉴가 표시되는 방식입니다.
game.js
우리 게임의 마지막 상태는 게임 상태입니다.
아래 나열된 특성은 Phaser의 모든 상태에 존재하며 자동으로 설정됩니다. 우리는 상태 내의 모든 함수에서 사용할 수 있습니다.
MayanDefenseGame.Game = function (game) {
this.game; // 현재 실행중인 게임 (Phaser.Game)에 대한 참조
this.add; // 스프라이트, 텍스트, 그룹 등을 추가하는 데 사용됩니다 (Phaser.GameObjectFactory).
this.camera; // 게임 카메라 (Phaser.Camera)에 대한 참조
this.cache; // 게임 캐시 (Phaser.Cache)
this.input; // 전역 입력 관리자 이 input.keyboard, this.input.mouse도 액세스 할 수 있습니다. (Phaser.Input)
this.load; // for preloading assets (Phaser.Loader)
this.math; // 유용한 수학 연산 (Phaser.Math)
this.sound; // 사운드 매니저 - 사운드 추가, 하나 재생, 마커 설정 등 (Phaser.SoundManager)
this.stage; // the game stage (Phaser.Stage)
this.time; // the clock (Phaser.Time)
this.tweens; // the tween manager (Phaser.TweenManager)
this.state; // the state manager (Phaser.StateManager)
this.world; // the game world (Phaser.World)
this.particles; // the particle manager (Phaser.Particles)
this.physics; // the physics manager (Phaser.Physics)
this.rnd; // the repeatable random number generator (Phaser.RandomDataGenerator)
};
지금은 Game 상태에서 유일하게 유용한 함수는 create 함수입니다. 여기에 게임 배경 이미지를 캔버스에 추가합니다.
create: function () {
// Here we add the game background image
this.add.sprite(0, 0, 'gameBackground');
},
이제 우리는 게임을 테스트 할 준비가 되었습니다. index.html 파일을 직접 열거 나 웹 서버 (예 : Apache)를 사용하여 코드를 호스팅하고 실행할 수 있습니다. 다른 웹 브라우저에서 코드를 실행하는 것에 대한 몇 가지 참고 사항은 아래에서 확인할 수 있습니다.
게임을 실행하기위한 고려 사항
- Chrome을 사용하여 게임을 테스트하려면 Apache와 같은 웹 서버를 사용해야합니다.
- 파일을로드 할 때 Firefox의 제한이 적기 때문에 Firefox를 사용하여 웹 서버없이 게임을 테스트 할 수 있습니다.
- Glyph Designer를 사용하여 사용자 정의 글꼴의 png 및 xml 파일을 생성 할 수 있습니다.
최종 노트
자습서의 첫 번째 부분입니다. 다음 단계에서는 게임의 기본 기능을 추가 할 예정이므로 계속 지켜봐 주시기 바랍니다.
'Phaser JS' 카테고리의 다른 글
| JavaScript로 Slither.io를 만드는 법 : Part 3 - Players & Bots (0) | 2018.08.20 |
|---|---|
| Phaser로 게임을 개발하는 방법(How to develop a game with Phaser) (0) | 2017.09.12 |
| JavaScript로 Slither.io를 만드는 법 : Part 2 - Snake (0) | 2017.08.18 |
| JavaScript로 Slither.io를 만드는 법 : Part 1 - 소개 (0) | 2017.08.16 |
| 자바스크립트로 퐁(Pong) 게임 만들기 Part - 5 (0) | 2017.07.20 |