Phaser Js 를 사용하여 HTML5 게임 타이틀 화면만들기

Phaser는 tweens와 파티클 덕택에 타이틀 스크린에 생명을 불어 넣을 수있게 해줍니다. 그리고 몇 줄의 코드로 우리는 약 1 분 안에 간단하고 심플한 타이틀 화면을 다이나믹한 화면으로 만들수 있습니다.

왼쪽에는 정적인 타이틀 화면이며, 오른쪽은 트윈과 파티클을 이용한 다이나믹한 화면입니다.

 

어느 것이 더 전문적인 것 같습니까? 게임 타이틀을 왼쪽에서 오른쪽으로 바꾸는데 걸리는 시간은 오래 걸리지 않습니다.

다음 코드는 왼쪽 화면을 생성하는 코드 입니다.

var GlobezGame = GlobezGame || {};

GlobezGame.GameTitle = function(){

startGame = false;

};

GlobezGame.GameTitle.prototype = {

   create: function(){

   console.log("%cStarting game title", "color:white; background:red");

this.add.image(0,0,"background");

          //

var gameTitleSeaLife = this.add.image(160,70,"gametitle_sealife");

          gameTitleSeaLife.anchor.setTo(0.5,0.5);

//

var gameTitleVs = this.add.image(190,120,"gametitle_vs");

          gameTitleVs.anchor.setTo(0.5,0.5);

//

var gameTitleMines = this.add.image(160,160,"gametitle_mines");

          gameTitleMines.anchor.setTo(0.5,0.5);

//

   var playButton = this.add.button(160,320,"playbutton",this.playTheGame,this)

playButton.anchor.setTo(0.5,0.5);

},

playTheGame: function(){

if(!startGame){

startGame = true

alert("Start the game!!");

}

}

}

다음 코드는 오른쪽 화면을 생성하는 코드 입니다.

var GlobezGame = GlobezGame || {};

GlobezGame.GameTitle = function(){

startGame = false;

};

GlobezGame.GameTitle.prototype = {

   create: function(){

   console.log("%cStarting game title", "color:white; background:red");

this.add.image(0,0,"background");

          //

          var bubblesEmitter = this.add.emitter(160, 500, 50);

          bubblesEmitter.makeParticles("bubble");

          bubblesEmitter.maxParticleScale = 0.6;

          bubblesEmitter.minParticleScale = 0.2;

          bubblesEmitter.setYSpeed(-30, -40);

          bubblesEmitter.setXSpeed(-3, 3);

          bubblesEmitter.gravity = 0;

          bubblesEmitter.width = 320;

          bubblesEmitter.minRotation = 0;

          bubblesEmitter.maxRotation = 40;

          bubblesEmitter.flow(15000, 2000)

//

var gameTitleSeaLife = this.add.image(160,70,"gametitle_sealife");

          gameTitleSeaLife.anchor.setTo(0.5,0.5);

          gameTitleSeaLife.angle = (2+Math.random()*5)*(Math.random()>0.5?1:-1);

          var seaLifeTween = this.add.tween(gameTitleSeaLife);

seaLifeTween.to({

angle: -gameTitleSeaLife.angle

},5000+Math.random()*5000,Phaser.Easing.Linear.None,true,0,1000,true);

//

var gameTitleVs = this.add.image(190,120,"gametitle_vs");

          gameTitleVs.anchor.setTo(0.5,0.5);

          gameTitleVs.angle = (2+Math.random()*5)*(Math.random()>0.5?1:-1);

          var vsTween = this.add.tween(gameTitleVs);

vsTween.to({

angle: -gameTitleVs.angle

},5000+Math.random()*5000,Phaser.Easing.Linear.None,true,0,1000,true);

//

var gameTitleMines = this.add.image(160,160,"gametitle_mines");

          gameTitleMines.anchor.setTo(0.5,0.5);

          gameTitleMines.angle = (2+Math.random()*5)*(Math.random()>0.5?1:-1);

          var minesTween = this.add.tween(gameTitleMines);

minesTween.to({

angle: -gameTitleMines.angle

},5000+Math.random()*5000,Phaser.Easing.Linear.None,true,0,1000,true);

//

   var playButton = this.add.button(160,320,"playbutton",this.playTheGame,this)

playButton.anchor.setTo(0.5,0.5);

          playButton.angle = (2+Math.random()*5)*(Math.random()>0.5?1:-1);

          var playTween = this.add.tween(playButton);

playTween.to({

angle: -playButton.angle

},5000+Math.random()*5000,Phaser.Easing.Linear.None,true,0,1000,true);

          //

          var blackFade = this.add.sprite(0,0,"blackfade");

          var fadeTween = this.add.tween(blackFade);

fadeTween.to({

alpha:0

},2000,Phaser.Easing.Cubic.Out,true);

},

playTheGame: function(){

if(!startGame){

startGame = true

alert("Start the game!!");

}

}

}

오른쪽 화면 생성 코드에서 볼 수 있듯이 입자 방아쇠와 일부 컷 / 과거 트윈을 추가 했으므로 코드를 원하는대로 변경할 수 있습니다. 일부 좌표 만 변경하면됩니다.

그 결과가 더 좋고, 노력이 최소한이며, 정적 타이틀 화면이 더 이상 보이지 않기를 바랍니다. 두 프로젝트의 소스 코드를 다운로드 할 수 있습니다.