티스토리 뷰

Computer/웹

(Phaser) phaser 로 간단한 웹게임 만들기 - 메뉴

ywlee 2017. 3. 23. 00:19



What is Phaser?


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

오픈소스 모듈이며, 

간단하게 HTML5 에서 .js 파일을 링크하는 것만으로 사용이 가능하다.







목표


phaser를 이용해서 뱀 길이 늘리기 게임을 만들어보자.

참고 사이트 : http://tutorialzine.com/2015/06/making-your-first-html5-game-with-phaser/


우선, 아래의 ZIP 파일을 다운받아 기본 뼈대를 구축하자. 

(바이러스아님..광고 설치파일아님..)


setup.zip



압축을 푼 뼈대는 다음과 같다.









STEP 1) index.html 작성


우리가 받은 index.html 을 아래와같이 편집해보자


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!doctype html>
<html>
<head>
    <meta charset="UTF-8" />
 
    <title>Snake</title>
 
    <script src="assets/js/phaser.min.js"></script>
    <script src="assets/js/menu.js"></script>
    <script src="assets/js/game.js"></script>
    <script src="assets/js/game_over.js"></script>
    <script src="assets/js/main.js"></script>
</head>
<body>
 
</body>
</html>
cs


실행해보면 당연히 아직 아무것도 없다.









STEP 2) 구성 이해하기


  • MENU : asset/js/menu.js 에 의해 핸들링 된다. 단순 이미지 디스플레이이며, 클릭시 게임으로 진입한다.
  • GAME : asset/js/game.js 에 의해 핸들링 된다. 게임을 플레이 할 수 있게 해주는 파일이며, 당신은 여기에 뱀을 움직이고, 사과를 먹는등의 행동을 정의해 놓게 될 것이다. 뱀이 충돌하거나, 벽에 부딪혀 게임이 끝나게 되면 GAME_OVER상태로 넘어간다.
  • GAME_OVER : asset/js/game_over.js 에 의해 핸들링 된다. 단순 game over 이미지를 출력해주며, 클릭시 다시 게임으로 진입한다.
  • MAIN : asset/js/main.js . 모든 js 를 컨트롤 하는 파일







STEP 3) 시작 이미지 보여주기

menu.js 와 main.js 를 아래와 같이 작성하자.


* main.js

1
2
3
4
5
6
7
8
9
var game;
 
// 게임 인스턴스를 만든다.
game = new Phaser.Game(600, 450, Phaser.AUTO, '');
 
//  게임 인스턴스를 초기화 한 후, 상태를 추가한다.
game.state.add('Menu', Menu);
 
game.state.start('Menu');
cs


* menu.js


1
2
3
4
5
6
7
8
9
10
11
var Menu = {
    preload : function() {
        // game 객체에서 menu 이미지를 로드한다.
        game.load.image('menu', './assets/images/menu.png');
    },
 
    create: function () {
        // 이미지를 표시한다.
        this.add.sprite(0, 0, 'menu');
    }
};
cs




자! 이제 index.html 을 실행해보자

아래와 같은 화면을 볼 수 있다.




뭔가 오류가 난 것이다..

이유는 로컬PC 에 웹 서버 환경이 구축되지 않아서다.


왜?? Phaser 는 웹서버를 필요로 하는가??


2017/03/22 - [Computer/Javascript] - (Phaser) phaser 는 왜 웹서버를 필요로 하는가?



어쨋든, Phaser는 node.js, AMP(Apache, Mysql, Php) 등과 같은 웹서버가 필요함..


얼마전에 우리는 노드 서버를 설치했다.

링크참조 : 

2017/02/15 - [Computer/node.js] - node.js ) 9일차 - https (ssl) 달기


노드 서버를 구축해서 작성한 파일들을 넣어 구동시켜보자.









저작자표시

'Computer > 웹' 카테고리의 다른 글

(Phaser) phaser 로 간단한 웹게임 만들기 - 뱀 움직이기  (0) 2017.03.23
(Phaser) phaser 로 간단한 웹게임 만들기 - 뱀 그리기  (2) 2017.03.23
(Phaser) phaser 는 왜 웹서버를 필요로 하는가?  (0) 2017.03.22
(WebGL) 웹지엘 둘러보기  (1) 2017.03.20
PHP 날짜 크기 비교하기 - strtotime()  (0) 2017.03.15
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG more
«   2025/02   »
일 월 화 수 목 금 토
1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28
글 보관함