Upcoming HTML5 Christmas Game: Christmas Quest
Talking about Game development, HTML5, Javascript, Monetize and Phaser.
While my latest HTML5 game, Sea Life Vs Mines has been approved by FGL for distribution – and I already got my cash advance – I am developing a new game for this upcoming Christmas called Christmas Quest, and wanted to share with you the title screen:
It uses the snow taken from this Phaser example – yes it’s a Phaser game – because there’s no need to reinvent the wheel, and the music taken from the other two Christmas game I made: Christmas Couples and Hurry it’s Christmas.
Obviously a simple iframe with some content in it wouldn’t be that interesting, so here is the source code of the title screen, uncommented because it’s a commercial project.
This is the HTML file, index.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<title>Christmas Quest</title>
<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" />
<link rel="apple-touch-icon" sizes="256x256" href="icon-256.png" />
<meta name="HandheldFriendly" content="true" />
<meta name="mobile-web-app-capable" content="yes" />
<link rel="shortcut icon" sizes="256x256" href="icon-256.png" />
<style type="text/css">
* {
padding: 0;
margin: 0;
}
body {
background: #000;
color: #fff;
overflow: hidden;
-ms-touch-action: none;
}
canvas {
touch-action-delay: none;
touch-action: none;
-ms-touch-action: none;
}
</style>
<script src="phaser.min.js"></script>
<script src="src/boot.js"></script>
<script src="src/preload.js"></script>
<script src="src/gametitle.js"></script>
<script src="src/main.js"></script>
</head>
<body>
</body>
</html>
Then main.js initializes the game:
var game = new Phaser.Game(640, 960, Phaser.CANVAS, "");
game.log = function(){
console.log("%c Running "+game.state.getCurrentState().state.current+" state ","color:white;background:red");
}
game.state.add("Boot", boot);
game.state.add("Loading", loading);
game.state.add("GameTitle", gameTitle);
game.state.start("Boot");
As you can see we have three states: Boot, Loading and Gametitle. To know more about Phaser states, check the post Phaser Tutorial: understanding Phaser states.
This is Boot, located in boot.js, it just preloads game logo and loading bar, and opens the game in full screen:
boot = {
init: function() {
game.log();
},
preload: function() {
game.load.image("loading", "assets/sprites/loading.png");
game.load.image("logo", "assets/sprites/logo.png");
},
create: function() {
game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL;
game.scale.pageAlignHorizontally = true;
game.scale.pageAlignVertically = true;
game.scale.setScreenSize(true);
game.physics.startSystem(Phaser.Physics.ARCADE);
game.state.start("Loading");
}
};
Then Preload, located in preload.js, loads all game assets while displaying logo and loading bar:
loading = {
init: function() {
game.log();
},
preload: function(){
var loadingBar = game.add.sprite(320, 560, "loading");
loadingBar.anchor.setTo(0.5);
game.load.setPreloadSprite(loadingBar);
var logo = game.add.sprite(320, 480, "logo").anchor.setTo(0.5);
game.load.image("background","assets/sprites/background.png");
game.load.image("snow_mask","assets/sprites/snow_mask.png");
game.load.image("gametitle","assets/sprites/gametitle.png");
game.load.image("gamesubtitle","assets/sprites/gamesubtitle.png");
game.load.image("blackfade","assets/sprites/blackfade.png");
game.load.spritesheet("snowflakes", "assets/sprites/snowflakes.png", 17, 17);
game.load.spritesheet("snowflakes_large", "assets/sprites/snowflakes_large.png", 64, 64);
this.load.audio("music","assets/sounds/music.mp3");
},
create: function(){
game.state.start("GameTitle");
}
}
Finally GameTitle – gametitle.js – handles the title screen itself, along with its fade-in transition:
var title;
var subtitle;
gameTitle = {
init: function() {
game.log();
},
create: function(){
game.add.image(0, 0, "background");
//
backSnow = game.add.emitter(320, -32, 600);
backSnow.makeParticles("snowflakes", [0, 1, 2, 3, 4, 5]);
backSnow.maxParticleScale = 0.6;
backSnow.minParticleScale = 0.2;
backSnow.setYSpeed(20, 100);
backSnow.setXSpeed(-15, 15);
backSnow.gravity = 0;
backSnow.width = 960;
backSnow.minRotation = 0;
backSnow.maxRotation = 40;
backSnow.start(false, 14000, 20);
//
game.add.image(0, 415, "snow_mask");
title = game.add.sprite(-320,170,"gametitle");
title.anchor.setTo(0.5);
subtitle = game.add.image(960,270,"gamesubtitle");
subtitle.anchor.setTo(0.5);
game.time.events.add(Phaser.Timer.SECOND * 4, this.showTitle, this);
//
music = game.add.audio("music",1,true);
music.play("",0,1,true);
//
frontSnow = game.add.emitter(320, -32, 50);
frontSnow.makeParticles("snowflakes_large", [0, 1, 2, 3, 4, 5]);
frontSnow.maxParticleScale = 0.75;
frontSnow.minParticleScale = 0.5;
frontSnow.setYSpeed(50, 150);
frontSnow.setXSpeed(-20, 20);
frontSnow.gravity = 0;
frontSnow.width = 960;
frontSnow.minRotation = 0;
frontSnow.maxRotation = 40;
frontSnow.start(false, 14000, 1000);
//
var blackFade = game.add.sprite(0 ,0, "blackfade");
var fadeTween = this.add.tween(blackFade);
fadeTween.to({
alpha: 0
}, 4000, Phaser.Easing.Linear.Out, true);
},
showTitle: function(){
var titleTween = game.add.tween(title);
titleTween.to({
x: 320
}, 2000, Phaser.Easing.Cubic.Out, true);
titleTween.onComplete.add(function(){
var subtitleTween = game.add.tween(subtitle);
subtitleTween.to({
x: 390
}, 2000, Phaser.Easing.Cubic.Out, true);
});
}
}
And that’s how I made a stunning title screen in a short time with Phaser.
You can also download the source code and have a look at it.
Never miss an update! Subscribe, and I will bother you by email only when a new game or full source code comes out.