Phaser로 웹 게임 만들기

Phaser로 웹 게임 만들기

 

 

1. Phaser란?

 

게임 프레임워크로 MIT에서 제공하는 라이센스이며,

 

HTML5로 게임을 만들 수 있도록 지원하는 오픈소스(자바스크립트 모듈)다.

 

특히 모바일 게임 제작에 강하며, HTML5 게임 엔진에서 순위를 살펴보면

 

Phaser(페이저)가 얼마나 많이 사용되고, 유지보수가 잘 되고 있는 지 알 수 있다.

 

 

 

2. Editor 선택

 

제작자가 추천하는 Editor로 Sublime, Basic Studio, IDE 가 있지만,

 

그 외 이클립스나 아톰 등의 에디터를 사용해도 무방하다.

 

본인은 Editor를 Atom으로 사용할 것이며, 웹 코딩 외에 별도의 특별한 Editor기능을

 

사용하지 않기 때문에 어느 Editor든 상관 없다.

 

3. Phaser 다운로드

 

Phaser 사이트에서 Phaser.min.js 파일 다운로드한다.

 

사이트에는 Phaser.js와 Phaser.min.js 두 가지 형태의 파일이 있는데

 

Phaser.js는 풀버전의 개발자용 버전이며, Phaser.min.js는 압축버전의 일반 사용자 버전으로

 

사용에 맞게 맞춰 사용하면 된다. 풀버전의 경우 용량이 크기 때문에 웹페이지의 로딩 속도가 증가하고

 

방문자가 불러와야 하는 파일의 용량이 크기 때문에 웹사이트를 로드하는 속도가 느려질 수 있다.

 

또한 지금 만들려는 게임은 모든 기능을 전부 사용하지 않기 때문에 가벼운 min.js 사용한다.

 

 

4. 게임 제작환경 만들기

 

작업은 아주 기본적인 자바스크립트 지식을 가졌다는 가정하에 진행하겠다.

 

간단한 웹 게임 제작환경을 구성하고, 다음 단계부터 ‘포켓볼 피하기 게임’을 만들어 볼 것이다.

 

먼저 ./js에 phaser.min.js 파일을 옮겨두었고,

 

images 폴더도 하나 생성했다.

 

 

4-1. game.html를 만들고 다음과 같은 코드를 작성한다.

- phaser.min.js를 include한다.

 

현재 커서가 위치한 부분에 자바스크립트 코드로 게임을 작성할 것이다.

 

4-2. script 태그 안에 Phaser.Game()의 파라미터를 사용해서 매개변수로 사이즈와 그 외 매개변수를 입력한다.

800*600 사이즈이며, 캔버스의 유형으로 Phaser.CANVAS를 입력한다.

Phaser.AUTO / WEBGL은 백그라운드위에 이미지가 띄워지지 않는다.

 

4-3. 기본적으로 생성해야하는 함수 preload(), create(), update()를 작성한다.

- preload() 함수는 데이터를 불러 올 때 사용하는 함수이다.

- create()는 처음 게임을 실행할 때 수행되는 함수이다.

- update()는 주기적으로 수행하는 함수이다.

 

4-4. 코딩이 완료되었다면 html파일을 실행시켜 확인해본다,

 위와 같이 검은창이 생성되었다면 성공한 것이다.

 

4-5. 기본적인 게임 배경 작성

4-5-1. 게임의 속성 설정. (아케이드)

4-5-2. 게임의 기본배경 설정.

4-5-3. 위쪽에 현재 점수를 보여주기위해 개별적인 창을 하나 더 생성한다.

 

다음과 같이 뒷 배경이 완성되었고, 간단한 게임 제작환경이 구성됐다.

 

 

 

5. 테두리 감싸기

* 이제 게임을 만들기 위해 투명한 박스를 score부분을 제외한 나머지 배경의 테두리를 감싼다.

- 투명한 박스에서 공격이 생성되도록 하고, 플레이어가 창 밖으로 못 나가도록 하기 위함이다.

- 투명한 박스에 플레이어가 접근하여 충돌하면 이를 박스가 감지해 플레이어의 동작을 멈추게 하도록 한다.

 

5-1. 먼저 preload()에서 읽어온다.

- 4-3에서 말했듯이 preload()는 단순히 데이터를 읽어오는 용도로 사용한다.

- 먼저 데이터를 저장할 images 폴더를 하나 만들고 그 폴더에 투명한 이미지를 넣어뒀다.

5-2. script 태그에 전역변수로 box를 하나 선언하고, create()함수에서 그룹으로 묶어준다.

5-3. 각 테두리 면마다 box를 생성하고 box가 충돌을 감지하되, 플레이어가 박스를 밀어내 움직이지 않도록 설정한다.

 

테두리에 이렇게 배치되었을 것이다. (예시로 주황색 표시를 해둔 것이다. 이미지는 투명한 걸 사용한다.)

 

 

6. 플레이어 생성 및 방향키 이벤트 생성

* 먼저 player의 이미지를 images폴더에 담아둔다.

* 플레이어를 생성해 키보드의 방향키 입력에 반응하도록 설정한다.

 

6-1. player라는 전역변수를 선언하고, player 이미지도 preload() 함수로 불러온다.

 

6-2. create()함수에 player의 좌표 위치와 이미지를 설정하고, 게임 상에 띄운다.

 

다음과 같이 중앙에 player가 배치되었다.

 

6-3. 아직 방향키 설정을 하지 않아 방향키를 눌러도 반응하지 않을 것이다. 방향키 설정을 한다.

* 전역변수 inputKey를 선언해 방향키 이벤트 객체를 생성한다.

 

 

* 변수 velocity를 선언해 속도를 담아두고, 나중에 쉽게 수정할 수 있도록 한다.

 

* create() 함수에 방향키 이벤트를 생성하고, update()에서 주기적으로 수행하도록 방향키를 설정한다.

  

7. box와 player 충돌 설정

* 5-3에서 미리 박스에 충돌감지만 시켜두고 충돌을 하도록 update()에 정의하지 않았다.

* 현재 방향키로 player를 움직이면 창 밖으로 나갈 것이다. update() 함수에서 주기적으로 확인할 수 있도록 설정하도록 한다.

 

8. 공격하기

* 먼저 images에 포켓볼 이미지를 담아둔다.

- ball이라는 전역변수를 선언하고, ball 이미지도 preload() 함수로 불러온다.

 

* 게임 창에서 공격을 하게 되면 공이 밖으로 나가는 것과 존재여부를 잡아야 한다.

- ball : 공격하는 공이다.

- ballAlive : ball이 창 밖으로 나가게 될 경우, ball이 존재하는지의 여부이다.

- ballArray : 창 밖으로 나간 ball들을 담을 곳이다. (다시 뿌려주기 위해)

일단 이미지를 불러오고, 전역변수를 생성한다.

8-1. create() 함수에서 키보드 이벤트 위에 ball의 속성을 입력한다.

* ball.createMultiple(30, "ball")부분에서 '30'은 공격하는 공의 개수이다.

* ball.setAll("outOfBoundsKill", true)와 ball.setAll("checkWorldBounds", true)는 balldl 창 밖으로 나갈 시 kill하는 역할이다.

 

8-2. update() 함수에 ball을 생성하고, 존재 여부를 보고 재생성되도록 설정한다.

8-3. score 부분으로 ball이 넘어가는 현상 제거

* 이전 score 속성 부분으로 돌아가 마찬가지로 충돌속성을 준다.

 

* 이제 score부분을 넘어갈 경우(overlap), update() 함수에서 ball을 kill하도록 설정한다.

 

 

8-4. ball과 player가 충돌할 경우 ball을 kill하도록 설정하기

* 8-3과 마찬가지로 score에서 ball과의 충돌이벤트를 score와 ball로 하나 더 추가하면 된다.

 

 

8-5. player가 ball의 공격에도 무한히 살아있으므로, 생명력을 줘서 생명이 없을 시 player동작을 멈출 수 있도록 한다.

 

- player 생명을 전역변수 playerLife에 담는다.

 

- player가 ball과 충돌할 때 생명을 깎고, 생명이 없을 경우 멈추도록 한다.

 

9. 점수 주기와 player 멈출 시 'GAME OVBR'메시지 띄우기

 

9-1. 텍스트로 상단에 score 점수 보여주기

- 전역변수로 score_Event를 선언한다.

 

- create() 함수에 텍스트 설정과 score 점수가 오르도록 이벤트를 걸고, 생명이 없을 시 score도 오르지 않도록 설정한다.

 

 

9-2. player 생명 없을 시 'GAME OVER' 텍스트 띄우기

- 앞에서 했던 것과 동일하다. 전역변수로 gameover_Text를 선언한다.

 

 

- 텍스트를 띄워주되, 생명이 없을 때 띄워주는 걸로 설정한다.

 

  - GAME OVER 표시

 

 

< 완성 >