GameButton class is an instance of the GameControl class. This class simplifies usage of game controls. Difference between game Sprite and game Control is in handling the input events.
Sprite does not includes input event handling. They need to be implemented manually.
Difference is in game Control objects where we want to handle input events like onPointerPressed, onPointerDragged or onPointerRelesed.
GameButton implements special event onClick. Within this event is defined what suppose to be happened when user click on the button.
GameButton defines its own GameButton.intersectsBounds method that compares coordinates of the game object passed as parameter with current Sprite’s coordinates. If coordinates intersects it returns true, otherwise false.
To compare absolute X-coordinate and Y-coordinate with current Sprite coordinates, we use method Sprite.intersectsPoint.
Let’s have a example of Menu Scene that implements two game buttons and buttons are animated on the enter of the scene. See full sample on : Sample Animation
include "lib://core/animation/transition.ms"
include "lib://game2d/scene.ms"
include "lib://game2d/gameButton.ms" /**
Menu scene contains two buttons, play and quit. At the start of the game,
buttons are animated into centre bottom of the screen
*/
class MenuScene : Scene
{
function init()
{
super.init(); //define play button, after click it show game scene
this._playButton = new GameButton({name:"playButton", image:"app://gfx/play_btn.png", y:System.height/10*8});
this._playButton.onClick = function(sender) { game.push(new GameScene()); }
this.add(this._playButton); //define quit button, after quit sample ends
this._quitButton = new GameButton({name:"quitButton", image: "app://gfx/quit_btn.png", y: System.height/10*9});
this._quitButton.onClick = function(sender) { game.quit(); }
this.add(this._quitButton);
} // enter to the scene, defines animated effect
function enter()
{
//set button start x co-ordinate
this._playButton.x = this._quitButton.x = 0;
//define play button easeIn animation transition
Transition.to(this._playButton, {transition: Animator.Transition.easeIn, duration: 300, x:System.width/2});
//define quit button easeIn animation transition, time is set to greater value as to menu what cause delay of button movement
Transition.to(this._quitButton, {transition: Animator.Transition.easeIn, duration: 400, x:System.width/2}); super.enter();
} // Clear Scene canvas
function draw(canvas)
{
canvas.clear(0xffff0000);
//execute default Scene draw
super.draw(canvas);
} }