[Phaser] 1. 기본 구성

10 Jan 2020

javascript

빈 템플릿에서 파일 구성

phaser.min.js : Phaser 프레임워크
index.html : 게임이 표시됨
main.js : 모든 코드를 작성하는 파일
assets : 에셋이 저장되어 있는 디렉토리

index.html 기본 구성

<!DOCTYPE html>
<html lang="en">
<head>
    <script type="text/javascript" src="./phaser.min.js"></script>
    <script type="text/javascript" src="./main.js"></script>
    <meta name="viewport" content="width=device-width, initial-scale=1.0,
      maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, minimal-ui" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <meta name="HandheldFriendly" content="true" />
    <meta name="mobile-web-app-capable" content="yes" />
    <style type="text/css">
        body {
            padding: 0px;
            margin: 0px;
            background: #000;
        }
    </style>
</head>
<body>
</body>
</html>

main.js 기본 구성

var mainState = {
    preload: function() {
        // 이 기능은 처음에 실행됩니다.
        // 그것이 이미지와 사운드를 로드하는 곳입니다.
    },
    create: function() {
        // 이 함수는 preload 함수 후에 호출됩니다.
        // 여기에서는 게임을 설정하고 스프라이트를 표시합니다.
    },
    update: function() {
        // 이 함수는 초당 60 회 호출됩니다.
        // 여기에는 게임의 로직이 포함되어 있습니다.
    },
};

// 페이저 초기화 및 400 x 490 게임 만들기
var game = new Phaser.Game(400, 490);

// 'mainState'를 추가하고 'main' 이라고 설정합니다.
game.state.add('main', mainState);

// 실제로 게임을 시작하기 위해 'main' 을 시작합니다..
game.state.start('main');

preload
- 처음에 실행됨
- 사운드와 이미지를 로드하는 곳
create
- preload다음에 호출됨
- 게임을 설정하고 스프라이트를 표시
update
- 초당 60회 호출됨
- 게임 로직이 포함되어 있음