Game Development Reference
In-Depth Information
this.Container_initialize();
this.addTitle();
this.addButton();
}
p.addTitle = function () {
var titleYPos = 200;
var title = new createjs.Sprite(spritesheet, 'title');
title.regX = title.getBounds().width / 2;
title.x = screen_width / 2;
title.y = -50;
createjs.Tween.get(title).to({y:titleYPos}, 5000)
.call(this.bringTitle, null, this);
this.addChild(title);
}
p.addButton = function () {
this.playBtn = new ui.SimpleButton('Play Game');
this.playBtn.on('click', this.playGame, this);
this.playBtn.regX = this.playBtn.width / 2;
this.playBtn.x = canvas.width / 2;
this.playBtn.y = 400;
this.playBtn.alpha = 0;
this.playBtn.setButton({upColor:'#d2354c', color:'#FFF',
borderColor:'#FFF', overColor:'#900'});
this.addChild(this.playBtn);
}
p.bringTitle = function (e) {
createjs.Tween.get(this.playBtn).to({alpha:1}, 1000);
}
p.playGame = function (e) {
createjs.Sound.play(game.assets.EXPLOSION);
this.dispatchEvent(game.GameStateEvents.GAME);
}
window.game.GameMenu = GameMenu;
}(window));
The title is a sprite and uses TweenJS to crawl down the screen. The play button, which uses the
SimpleButton
component is styled, added to the container, and then faded up with the
bringTitle
function. The button will call
playGame
to play an explosion sound and dispatch the appropriate game event to start the game. The menu screen is
shown in Figure
11-10
.
