Phaser를 사용하여 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!!");
}
}

}

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


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