Game2D Animations

This sample presents simple Animator transition easeIn on action and simple animation with changing of sprite frames. This sample is using Moscrif’s game 2D scene. Key words: Animation, Transition, Scene, Sprite, Bitmap

Show screenshots (3)

Animation is the most important technique to make your games more attractive and user friendly. Animation in Moscrif can be done by Animator’s Transition or changing of frames (pictures) in timeline.

This sample consists of two scenes - MenuScene and GameScene classes extended from Scene generic game2D class.
Menu scene (MenuScene) defines two game buttons Play and Quit. Once the game is started, buttons start to animate from left side of the screen into the centre. Play button is faster then Quit button. To make this effect, Animator.Transition.easeIn effect is used.

// 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();
    }

Menu scene consists of
- Play button on the onClick event - creates and makes GameScene active
- Quit button on the onClick event - ends the sample.

//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);

Game scene consist of a disk sprite object with electric effect and menu button that brings you back to MenuScene. Animation effect with frame changing can be done easily in Moscrif.
You need to make a bitmap picture with all frames included, set frame width and height, set sequence array. In onProcess event within system tick, disk's frames are changing, what makes animation effect.

//define disk game sprite
this._disk = new Sprite({
image: "app://gfx/disks.png", frameWidth: 180, frameHeight: 51,
            x:System.width/2, y:System.height/10*9,
            onProcess: function(sender) {
                var delta = System.tick - (sender.lastTick || 0);
                var delay = 50;
                if (sender.frame == 0)
                // long delay when the first frame is shown
                    delay += 1500 + rand(1500);
                if (delta > delay) {
                    sender.nextFrame();
                    // after delay jump to next frame, what makes electric effect
                    sender.lastTick = System.tick;
                }
            },
         sequence: [0, 1, 2, 3]
});