이번의 튜토리얼에서는 멀티 플랫폼 게임인 Monster Wants Candy의 소스를 분석하여 HTML5 게임 엔진 인 Phaser를 이용하여 만들것입니다. 이 방법으로 엔진에 대한 실질적인 사용법 얻게되며 자신 만의 HTML5 모바일 및 브라우저 게임을 제작하는 데 사용할 수 있는 개념을 배우게됩니다.
소개
HTML5 게임을 만들려면 프레임 워크 또는 엔진을 선택하는 것이 좋습니다. 물론 평범한 JavaScript로 할 수도 있지만 프레임 워크를 사용하면 개발 속도가 크게 빨라지고 쉽게 할 일을 처리 할 수 있습니다.
Phaser는 최신 HTML5 게임 개발 프레임 워크로, 아직 들어 본 적이 없다면 반드시 시도해야합니다.
Phaser 란 무엇입니까?
Phaser는 데스크톱 및 모바일 HTML5 게임을 제작하기위한 프레임 워크입니다. 그것은 Photon Storm에 의해 만들어졌습니다. 이 프레임 워크는 순수한 JavaScript로 작성되었지만, 간혹 TypeScript 정의 파일을 포함합니다.
Phaser 코드는 Flash gamedev 플랫폼 Flixel을 기반으로하므로 Flash 개발자는 바로 느낄 수 있습니다. 내부적으로 Pixi.js 엔진을 사용하여 Canvas 또는 WebGL을 사용하여 화면의 모든 부분을 렌더링합니다.
HTML5GameDevs 포럼에서 활발한 커뮤니티의 도움으로 빠르게 성장하고 있습니다. 사용할 수있는 자습서와 기사가 이미 많이 있으며, 공식 문서와 개발 중에 매우 도움이 될 수있는 수많은 예제를 확인할 수도 있습니다. 오픈 소스이며 GitHub에서 무료로 사용할 수 있으므로 소스 코드로 직접 들어가서 배울 수 있습니다.
Monster Wants Candy
게임을 제작할 때 먼저 핵심 아이디어를 생각하고 작동하는 프로토 타입을 신속하게 설정하려고합니다. 이 연구에서는 Monster Wants Candy라고 불리는 게임의 간단한 데모부터 시작합니다.
프로토 타입으로 작업하는 대신 프로젝트의 구조를 먼저 보여 주므로 전체 아이디어를 이해할 수 있습니다. 그런 다음 Assets 로드에서부터 메인 메뉴 제작 및 실제 게임 루프에 이르기까지 단계를 거치게됩니다. 지금 Monster Wants Candy 데모를 보시면 우리가 함께 만드는 것을 보실 수 있습니다.
코딩은 Enclave Games의 Andrzej Mazur가 담당했으며 모든 그래픽 Assets은 Blackmoon Design의 Robert Podgórski가 만들었습니다.
Monster Wants Candy의 이야기는 간단합니다. 사악한 왕이 당신의 사랑을 납치했고 그녀를 되찾기 위해 충분한 사탕을 모아야합니다. 게임 플레이도 간단합니다 : 과자가 떨어지고 있고 그들을 먹을 수 있습니다. 캔디를 먹으면 얻는 점수가 많을수록 좋습니다. 당신이 무엇이든 놓치고 화면에서 떨어지면 인생을 잃고 게임은 끝납니다.
보시다시피 매우 단순한 게임이지만 구조가 완벽합니다. 프레임 워크의 가장 중요한 용도는 이미지로드, 스프라이트 렌더링 및 사용자 활동 감지와 같은 작업에 해당합니다. 또한 코드를 복사하고 코드를 시작하고 자신 만의 게임을 만들 수있는 좋은 출발점이됩니다.
프로젝트 설정 및 구조
Phaser를 시작하는 방법에 대해 프레임 워크 작성자가 직접 작성한이 유용한 기사를 읽거나 GitHub 레포의 phaser.min.js 파일을 프로젝트 디렉토리에 복사하여 처음부터 작업을 시작할 수 있습니다.
브라우저에서 index.html 파일을 실행하기 만하면 소스 코드에서 변경 한 내용을 즉시 볼 수 있습니다.
우리 프로젝트 폴더에는 HTML5 구조와 필요한 모든 JavaScript 파일을 포함하는 index.html 파일이 들어 있습니다. 두 가지 하위 폴더가 있습니다. img는 모든 그래픽 애셋을 저장하고 src는 게임의 소스 코드를 저장합니다.
폴더구조는 다음과 같습니다.
src 폴더에는 JavaScript 파일이 있습니다. 이것은 마술이 일어나는 곳입니다. 이 튜토리얼에서는 그 폴더에있는 모든 파일의 목적과 내용을 설명합니다.
이 튜토리얼의 GitHub 에서 각 파일의 소스를 볼 수 있습니다.
Index.html
index.html 파일부터 시작하겠습니다. 기본 HTML5 웹 사이트처럼 보이지만 텍스트와 많은 HTML 요소를 추가하는 대신, 모든 것을 Canvas 요소로 렌더링하는 Phaser 프레임 워크를 초기화합니다.
<!DOCTYPE html><html><head> <meta charset="utf-8" /> <title>Monster Wants Candy demo</title> <style> body { margin: 0; background: #B4D9E7; } </style> <script src="src/phaser.min.js"></script> <script src="src/Boot.js"></script> <script src="src/Preloader.js"></script> <script src="src/MainMenu.js"></script> <script src="src/Game.js"></script></head><body><script>(function() { var game = new Phaser.Game(640, 960, Phaser.AUTO, 'game'); game.state.add('Boot', Candy.Boot); game.state.add('Preloader', Candy.Preloader); game.state.add('MainMenu', Candy.MainMenu); game.state.add('Game', Candy.Game); game.state.start('Boot');})();</script></body></html>doctype을 가진 HTML 문서의 일반적인 구조와 <head>의 일부 정보, charset 인코딩, 페이지 제목 및 CSS 스타일을 정의합니다. 일반적으로 우리는 모든 스타일을 넣은 외부 CSS 파일을 참조 할 것이지만 여기서는 필요하지 않습니다. 앞에서 언급했듯이 모든 것이 Canvas 요소에 렌더링되므로 스타일을 지정할 HTML 요소가 없습니다. .
마지막으로 해야 할 일은 Phaser.min.js 파일에서 부터 Phaser 프레임 워크의 소스 코드와 함께 모든 자바 스크립트 파일을 게임의 코드가 포함 된 모든 파일에 포함시키는 것입니다. 모든 자바 스크립트 파일을 하나로 결합하여 브라우저의 요청 수를 줄이는 것이 좋으므로 게임로드가 빨라지지만 이 자습서에서는 별도로 로드 할 것입니다.
<body> 태그의 내용으로 이동하여 프레임 워크를 초기화하고 게임을 시작하십시오. 이 코드는 자체 호출 함수 내에 있습니다. 첫 번째 줄은 다음과 같습니다.
var game = new Phaser.Game(640, 960, Phaser.AUTO, 'game');
이 코드는 몇 가지 기본값으로 Phaser를 초기화합니다 :
640은 게임의 캔버스 너비 (픽셀)이고 960은 게임의 높이입니다.
Phaser.AUTO는 Canvas에 게임을 렌더링하는 방법을 프레임 워크에 알려줍니다. 세 가지 옵션이 있습니다 : CANVAS, WEBGL 및 AUTO. 첫 번째는 캔버스의 2D 컨텍스트에서 게임을 실행합니다. 두 번째는 가능한 경우 WebGL을 사용하여 렌더링합니다 (주로 현재 데스크톱이지만 모바일 지원은 개선되고 있습니다). 세 번째 팀은 WebGL이 지원되는지 여부를 확인하여 컨텍스트에서 게임을 렌더링 할 수 있는지 여부를 결정하는 프레임 워크에이 결정을 남깁니다. 그렇지 않으면 2D 캔버스 렌더링이 사용됩니다.
프레임 워크 초기화는 game이라는 단일 객체에 지정되며, Phaser 인스턴스를 참조 할 때 사용하게됩니다.
다음 코드를 추가합니다.
game.state.add('Boot', Candy.Boot);
'Boot'는 상태 이름이고 Candy.Boot는 그 상태를 시작할 때 실행될 객체입니다 (다음 단계에서 정의 됨).
Boot (구성), Preloader (Assets 로드), MainMenu (우리 게임의 메인 메뉴) 및 Game (게임의 기본 루프)에 대한 상태를 추가합니다. 마지막 줄인 game.state.start ( 'Boot')는 Boot 상태를 시작하여 Candy.Boot 객체의 적절한 함수가 실행되도록합니다.
보시다시피, 하나의 주요 자바 스크립트 게임 객체가 만들어졌으며 많은 다른 객체가 특수 목적으로 할당되었습니다. 우리 게임에서는 Boot, Preloader, MainMenu 및 Game 객체가 게임 상태가되며 프로토 타입을 사용하여 정의합니다. 프레임 워크 자체 (preload (), create (), update () 및 render ())를 위해 예약 된 객체에는 몇 가지 특수 함수 이름이 있지만 자체 startGame (), spawnCandy managePause ()). 이 모든 내용을 잘 이해하지 못한다면 걱정하지 마십시오. 나중에 코드 예제를 사용하여 모든 내용을 설명 할 것입니다.
'PROGRAMMING > Phaser Js' 카테고리의 다른 글
| Phaser Js 기본 타이머 사용 설명서 (0) | 2018.01.26 |
|---|---|
| Phaser Js 로 HTML5에서 2D 플랫폼을 만드는 방법 (0) | 2018.01.26 |
| Phaser js 로 HTML5에서 브레이크 아웃 클론을 만드는 방법 (0) | 2018.01.26 |
| Phaser Js 로 Flappy Bird 만들기 - 2 (0) | 2018.01.26 |
| Phaser Js 로 Flappy Bird 만들기 - 1 (0) | 2018.01.26 |