|
Menu consists of background and buttons. Buttons have two states (normal and pressed).
Image: game menu
The next code shows init function of menu scene. In this scene, we load all images and create all buttons.
Example: init function - load resources and create buttons
function init()
{
super.init(); this._computeScale(); //compute scale
this._loadBg(); //load background
this._createContinueBttn(); //create continue button
this._createTouchGameBttn(); //create new touch game button
this._createQuitGameBttn(); //create quit button
}
We create new class (in this case) MenuScene, which is extended from Scene class. Firstly, we have to call parent init function within init function as it was overlayed. Therefore, we need to explicitly call this function via super pointer. Then we load png file through static function Bitmap.fromFile(file) into this._background variable. This is written in function this._loadBg().
Example: load and resize background
function _loadBg()
{
//load background from file
this._background = Bitmap.fromFile(M_MENU);
//resize background to actual system resolution
this._background = this._background.resize(System.width, System.height);
}
Then we create buttons, which we add to the scene. For example, this function creates instance of GameButton and we set parameters, position and onClick function as you see it in code.
Example: create continue button
function _createContinueBttn()
{
//create new button
this._bContinue = new GameButton({image:M_CONTINUE, frameWidth:276, frameHeight:66, scale : this._scale});
this._bContinue.visible = false;
//set position on scene
this._bContinue.x = System.width/2;
this._bContinue.y = System.height / 5 * 3;
//set function called at click on button
this._bContinue.onClick = function() {
if(game.tmpScene instanceof Scene)
game.push(game.tmpScene);
};
//add button to the scene
this.add(this._bContinue);
}
You can learn about parameters frameWidth and frameHeight in the article describing Score object. We add a button to our scene by method this.add(Object).
When you try to run this scene, you’ll see buttons and black background. We loaded background image to the memory only, but we have to draw it as well. We can do it when we overlay draw event with our own.
Example: draw scene
function draw(canvas)
{
//draw background scene
canvas.drawBitmap(this._background, 0, 0);
//call draw function on other objects in scene
super.draw(canvas);
}
|