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 () {
}
}
'PROGRAMMING > Phaser Js' 카테고리의 다른 글
| Phaser Js 코드 템플레이트 (Physics) (0) | 2018.01.26 |
|---|---|
| Phaser Js 코드 템플레이트 (Sprite) (0) | 2018.01.26 |
| Phaser Js 에서 이미지를 추가하는 방법 (0) | 2018.01.26 |
| Phaser Js 기본 타이머 사용 설명서 (0) | 2018.01.26 |
| Phaser Js 로 HTML5에서 2D 플랫폼을 만드는 방법 (0) | 2018.01.26 |