|
Scene class maps all game event directly to its memer function. F.e.: the onPointerPressed event is mapped to pointerPressed method, onDraw event to draw method etc. Also this class do not uses directly class contructor but methods beforeInit, init and afterInit.
In this article menu is created as a separate MenuScene class extended from Scene class. The menu contains three buttons to start new game, continue game or quit game. Because of Apple's applications policy do not allows to create quit button in the applications, the quit button is not in iOS verion.
Example: init function create all buttons
function init()
{
// call parents init function
super.init(); // allow tabs on the buttons. the tabs are denied when exit animation starts
this.clickable = true; // load unnecesarry sources
this._bg = res.img.menuBg;
this._logo = res.img.logo; // calculate gap between two bodies
var gap = 2*res.img.playButton.height/3;
// calculate position of the top button
var top = System.height - 2*res.img.playButton.height; // create and add play button to the scene
this._btnPlay = this._createPlayButton(top);
this.add(this._btnPlay);
// apply pulse animation onto the button
this._pulseAnimation(this._btnPlay); // create and add continue button to the scene
this._btnContinue = this._createContinueButton(top + gap);
this.add(this._btnContinue);
// apply pulse animation onto the button
this._pulseAnimation(this._btnContinue); // check if game do not runs on Apple devices
if (System.OS_NAME != #iOS) {
// create and add quit button to the scene
this._btnQuit = this._createQuitButton(top + 2*gap);
this.add(this._btnQuit);
// apply pulse animation onto the button
this._pulseAnimation(this._btnQuit);
} else {
// replace the play and continue button if there is not quit button
this._btnPlay.y = this._btnContinue.y;
this._btnContinue.y = top + 2*gap
}
}
Moscrif supports two types of buttons GameButton and ImageButton (also called GameButton). All three buttons used in the menu displays image. The both frames (normal and pressed) are in one image file. By default the button shows first frame. When user tap on the button it shows the second frame. When user tap on the button it calls onClick event. Here is show how to create a button.
Example: create continue button
// create continue button
function _createContinueButton(top)
{
// create new instanco of GameButton with images from the resources
var button = new ImageButton ({
image : res.img.continueButton,
x : System.width/2,
y : top,
frameWidth : res.img.continueButton.width,
frameHeight : res.img.continueButton.height / 2,
});
button.onClick = function(s)
{
if(game.game instanceof PhysicsScene) {
game.game.visible = true;
game.push(game.game, new SlideToBottom());
game.game.paused = false;
}
}
return button;
}
When a button is created it may be added to the scene by add function
Example: add button to the scene
this.add(this._btnContinue);
Showing of the button is connected with nice pulse animation. Animations in Moscrif are created using Animator class. Animator class makes all compilaceted mathematical background f animations and allows to create amzing animations. To create pulse effect is needed to create more Animator objects with different effects. To combne more animator effects is used AnimatorChain.
Example: combine more animator objects
function _pulseAnimation(obj) // fade in then pulse
{
obj.alpha = 1; // start form invisible state
var fade = Transition.to(obj, {
transition : Animator.Transition.easeIn,
duration : 400,
alpha : 255, // transparency - custom attribute
}, false); // false = don't play autimatically
var scale1 = Transition.to(obj, {
transition : Animator.Transition.easeInOut,
duration : 150,
scale : 0.8, // smothly resize the object
}, false);
var scale2 = Transition.to(obj, {
transition : Animator.Transition.easeInOut,
duration : 200,
scale : 1.3, // smothly resize the object
}, false);
var scale3 = Transition.to(obj, {
transition : Animator.Transition.easeInOut,
duration : 100,
scale : 1.0 // smothly resize the object
}, false);
// play all animations gradually
new AnimatorChain([fade, scale1, scale2, scale3]).play();
}
This chapter shows how to create menu for out game.
|