Phaser Js 코드 템플레이트 (Starter)

Phaser Js 로 게임 개발을 할때, Start 부분에서 사용되는 기본적인 코드에 대해서 알아봅시다.

Blank State
설명 : 필수 기능이있는 빈 상태 템플릿입니다.
var StateMain={      
   preload:function()
    {      
    },  
    create:function()
    {      
    },  
    update:function()
    {              
    }      
}

Switch states
설명 : 상태를 변경합니다. 예를 들어 게임이 종료 된 경우 game.state.start ( "StateGameOver")를 호출 할 수 있습니다.
game.state.start(state_name);

Start for Desktop
설명 : Phaser Js를 시작하는 데 필요한 기본 파일입니다.
var game;
window.onload = function()
{
    game=new Phaser.Game(480,640,Phaser.AUTO,"ph_game");
    game.state.add("StateMain",StateMain);
    game.state.start("StateMain");
}

Start for Dekstop/Mobile
설명 : 모바일을 지원하는 Phaser Js를 시작하는 데 필요한 기본 파일입니다.
var game;
var useLandscape=false;
window.onload = function () {
var isMobile=navigator.userAgent.indexOf("Mobile");
if (isMobile>-1)
     {
        isMobile=true;
     }
     else
     {
        isMobile=false;
     }
    if (isMobile==false) {
        //desktop laptop
        if (useLandscape == true) {
            game = new Phaser.Game(640, 480, Phaser.AUTO, "ph_game");
        } else {
            game = new Phaser.Game(480, 640, Phaser.AUTO, "ph_game");
        }
    } else {
        //mobile device
        game = new Phaser.Game(window.innerWidth, window.innerHeight, Phaser.AUTO, "ph_game");
    }
    game.state.add("StateMain",StateMain);
    game.state.start("StateMain");
}

Basic HTML
설명: Phaser Js 용 html
<!DOCTYPE html>
<html lang="">
<head>
    <meta charset="UTF-8">
    <title>Game Title Here</title>
    <script src="js/phaser.min.js">
    </script>
    <script src="js/main.js"></script>  
</head>
<body>
</body>
</html>

Full Screen Meta Tag
설명: 모바일 용 전체 화면에 html을 삽입하는 메타 태그
<meta name="viewport" content="user-scalable=0, initial-scale=1,minimum-scale=1, maximum-scale=1, width=device-width, minimal-ui=1">

Sample Init State
설명 :이 샘플을 사용하여 init 상태를 만듭니다. 초기화 상태는 실행을위한 베어 본 코드를 설정하고 로드 상태를 준비합니다.
var StateInit = {

    preload: function () {
        game.load.image("loadingEmpty", "images/loading/progress_none.png");
        game.load.image("loadingFull", "images/loading/progress_all.png");
        game.scale.forceOrientation(true, false);
        game.scale.enterIncorrectOrientation.add(this.wrongWay, this);
        game.scale.leaveIncorrectOrientation.add(this.rightWay, this);
    }
    , create: function () {
        game.state.start("StateLoad");
    }
    , update: function () {
    }
    , rightWay: function () {
        document.getElementById("wrong").style.display = "none";
    }
    , wrongWay: function () {
        document.getElementById("wrong").style.display = "block";
    }
}

Samepl Load State
설명 :로드 상태는 게임을 시작하기 전에 모든 것을 미리로드 할 수있게합니다.
var StateLoad = {
    preload: function () {
        var empty = game.add.image(0, 0, "loadingEmpty");
        var full = game.add.image(0, 0, "loadingFull");
        empty.x = game.world.centerX;
        empty.y = game.world.centerY;
        empty.anchor.set(0.5, 0.5);
        full.anchor.set(0, 0.5);
        full.x = game.world.centerX - empty.width / 2;
        full.y = empty.y;
        game.load.setPreloadSprite(full);
        //PRELOAD EVERYTHING HERE
    },
    create: function () {
        game.state.start("StateTitle");
    },
    update: function () {
    }
}

댓글 없음:

댓글 쓰기