Разработка игр

Sprites for animations – The Media Image

Writer: Andrey Kosyak Date of publication: 12/23/2013

Activity:

Implement character animation.

Choice:

Dan sprite:

Animation sprite

To accomplish the task, you will have to draw character movements, both in a single sprite or as a set of photographs. The quality instantly is determined by the variety of rendered frames.

The usually accepted body price for cartoons is 24 fps.

In the community, this worth is 12-18 fps. The larger the frequency, the smoother and higher the image.

Our sprite is designed for playback with a period of 0.6 seconds, which suggests its frequency is 7 frames / 0.6 s ~ 12 fps.

With a view to decide the required variety of frames, which have to be drawn for animation, you might want to:

  • determined with the body fee of the animation. Let's say we stopped at 14 fps.
  • determine on the period of the animation. Suppose stopped at zero.8 seconds.
  • on the idea of frequency and time to calculate the variety of frames: 0.eight seconds * 14 frames per second = 11 frames

When choosing the frequency of animation, you’ll want to consider that the number of frames immediately affects the time of their creation by the artist, in addition to the entire weight of the final sprite. Bearing in mind the specifics of the issue, it is very important select the optimum frequency worth.

The extra frames in the animation, the smoother and extra lifelike will probably be, however here that you must discover the optimal stability between the load of the resulting animated sprite and the standard of the animation.

Instruments:

  • ShoeBox (http://renderhjs.net/shoebox/) – the device lets you minimize, assemble, glue, reduce sprites alongside the contour, convert to totally different formats, select alpha masks, cut up into tiles, work with fonts and far more. This can be a free software for Adobe Air (have to be installed on the machine). Plus a number of fascinating options and settings.

Sprite preparation.

A drawn character can fall into our palms in two states: in the type of one sprite with all frames:

Animation sprite

or a set of image information during which every file is a separate frame:

File1:

Animation sprite

File2:

Animation sprite

and so on.

The main activity is to attach this good into a “right” sprite. The correctness of the sprite depends upon which approach, engine or framework we animate it. We’ll write our own “bicycle”, because for our case it is advisable make a sprite, every frame of which will be the similar measurement and the character in will probably be situated equally relative to the body's control point (for instance, the frame middle).

We assume that the designer drew us a personality and sent it with a set of information:

0000.png
0001.png
0002.png
0003.png
0004.png
0005.png
0006.png

Complete 7 frames.

We assemble sprite.

Open ShoeBox → Animation:

Animation sprite

Drag the required body information to the “Frame Sheet” icon:

Animation sprite

In consequence, one other window opens with an already assembled animated sprite:

Animation sprite

Press the “Save” button and get in the same listing the place we dragged the information, another file named sheet_7x1.png, the place 7 is the variety of frames per line, and 1 is the variety of strains in the file. Consequently, we now have 7×1 = 7 frames of animation.

Now you could know the frame measurement. We take a look at the property of the acquired file:

Animation sprite

Therefore the frame width is 462/7 = 66px, peak is 135. That’s, the dimensions of 1 body is 66 x 135.

For the task, I wrote a small XAnimation object, with which we’ll animate our sprite. The most important process of the thing is to return the required animation body on the proper time:

perform XAnimate (params)
var self = this;

    // default options
self.choices =
        frames: 1,
        period: 1000,
        repeat: -1,
        yoyo: false,
        sequence: [ 0 ] ;
$ .prolong (self.choices, params);

self.init (params);

return this;
;

XAnimate.prototype =
    init: perform (params)
        var self = this,
            options = self.options;

        // flags of animation state
        self.paused = false;
        self.stopped = false;
        self.enjoying = false;
        self.positiveDirection = true;

        // width of the sprite sheet sprite
        self.totalWidth = choices.width * options.frames;
        self.resetTimers ();
        self.play ();
        return this;
    ,

    // reset timers
    resetTimers: perform ()
        var self = this;
        self.timeStart = zero; // start time
        self.timePause = 0; // pause length
        self.timePauseStart = zero; // pause time
        self.timeDelta = zero; // time difference from the start
        self.progress = zero; // general progress
        self.currentFrame = zero; // current body
        self.repeated = zero; // present number of animation repetitions
        self.positiveDirection = true; // current animation course (forward / backward)
    ,

    // recalculate progress and update timers
    replace: perform ()
        var self = this,
            options = self.options;

        // if pause – think about its period
        if (self.paused)
            self.timePause = new Date (). getTime () – self.timePauseStart;
            return;
        

        // rely the time difference and process progress
        self.timeDelta = new Date (). getTime () – self.timeStart + self.timePause;
        progress = self.timeDelta / options.period;
        self.progress = self.positiveDirection? progress: 1 – progress;

        // rendering and outputting the present animation end result
        perform actions (check)
            self.currentFrame = choices.sequence[ options.sequence.length * self.progress >> 0 ] >> 0;
            options.onUpdate (
                currentFrame: self.currentFrame,
                progress: self.progress,
                positiveDirection: self.positiveDirection
            );

        ;

        // if the animation shouldn’t be stopped
        if (! self.stopped)

            // if the animation loop is completed
            if (progress> = 1)

                // progress has maximum worth (100%)
                self.progress = 1;

                // change the course of the animation if the flag is about
                if (choices.yoyo)
                    self.positiveDirection =! self.positiveDirection;
                

                // if the variety of repetitions in the choices doesn’t correspond to the present one – run the method again
                if (self.repeated! = options.repeat)
                    self.repeated ++;
                    self.timeStart = new Date (). getTime ();
                    self.reqTimer = window.requestAnimFrame (perform () self.update ());
                // otherwise, cease the process
                 else
                    self.stop ();
                

            // if the animation loop shouldn’t be finished
             else
                // replace present knowledge
                actions ();
                // continue the process
                self.reqTimer = window.requestAnimFrame (perform () self.replace ());
            

        // if the animation is stopped
         else
            // reset all timers
            self.resetTimers ();
            // set the animation to the unique
            actions (true);
        

    ,

    // start animation
    play: perform ()
        var self = this;

        if (! self.enjoying)

            // set the status flags
            self.paused = false;
            self.stopped = false;
            self.enjoying = true;

            // shift the beginning time of the animation for the period of the pause
            if (! self.paused)
                self.timeStart + = (new Date (). getTime () – self.timePauseStart);
                self.timePause = zero;
                self.update ();
            
        

    ,

    // pause animation
    pause: perform ()
        var self = this;

        if (! self.stopped)
            // pause trigger
            self.paused =! self.paused;

            // if pause – rely the period
            if (self.paused)
                self.timePauseStart = new Date (). getTime ();
                self.timePause = new Date (). getTime ();
                self.enjoying = false;
            // otherwise start the animation
             else
                self.play ();
            
        

    ,

    // cease animation
    stop: perform ()
        var self = this;

        // set the status flags
        self.enjoying = false;
        self.stopped = true;
        self.paused = false;

        // final frame
        self.update ();
        window.cancelRequestAnimFrame (self.reqTimer);
    
;

window.cancelRequestAnimFrame = (perform () ) ();

window.requestAnimFrame = (perform ()
    return window.requestAnimationFrame ||
        window.webkitRequestAnimationFrame ||
        window.mozRequestAnimationFrame ||
        window.oRequestAnimationFrame ||
        window.msRequestAnimationFrame ||
        perform (/ * perform * / callback, / * DOMElement * / component)
            return window.setTimeout (callback, 1000/60);
        ;
) ();

You possibly can download it right here:

xanimation-1.zero.js

xanimation-1.0.min.js

Begin by animating the DOM component. Create the aspect itself and the animation control buttons:

and types for him:

.entity
    width: 66px;
    peak: 135px;
    background: url (../ img / sheet_7x1.png) no-repeat;
    position: absolute;
    backside: 0;
    left: zero;
    overflow: hidden;

.entity-wrap
    width: 200px;
    peak: 200px;
    margin-bottom: 20px;
    place: relative;

.example
    margin-bottom: 30px;

Create an animation for it:

// DOM
    var animation = new XAnimate (
        width: 66,
        peak: 135,
        frames: 7,
        period: 600,
        repeat: -1,
        yoyo: true
        sequence: [ 0, 1, 2, 3, 4, 5, 6 ],
        onUpdate: perform (params)
            $ entity.css (
                backgroundPosition: -params.currentFrame * 66 + “px 0”
            );
        
    );
    $ (“# stop1”). on (
        click: perform ()
            animation.cease ();
        
    );
    $ (“# play1”). on (
        click: perform ()
            animation.play ();
        
    );
    $ (“# pause1”). on (
        click: perform ()
            animation.pause ();
        
    );

End result.

demo instance.

Now do the same for the canvas. Add to html canvas:

Create an animation for a personality on the canvas:

// DOM
    var animation = new XAnimate (
        width: 66,
        peak: 135,
        frames: 7,
        period: 600,
        repeat: -1,
        yoyo: true
        sequence: [ 0, 1, 2, 3, 4, 5, 6 ],
        onUpdate: perform (params)
            $ entity.css (
                backgroundPosition: -params.currentFrame * 66 + “px 0”
            );
        
    );
    $ (“# stop1”). on (
        click: perform ()
            animation.stop ();
        
    );
    $ (“# play1”). on (
        click on: perform ()
            animation.play ();
        
    );
    $ (“# pause1”). on (
        click on: perform ()
            animation.pause ();
        
    );

    // canvas
    var canvas = $ (“# canvas”)[ 0 ],
        ctx = canvas.getContext (“2d”),
        img = new Image ();
    $ (img) .load (perform ()
        var animationCanvas = new XAnimate (
            width: 66,
            peak: 135,
            frames: 7,
            period: 600,
            repeat: -1,
            yoyo: true
            sequence: [ 0, 1, 2, 3, 4, 5, 6 ],
            onUpdate: perform (params)
                ctx.clearRect (0, 0, canvas.width, canvas.peak);
                ctx.save ();
                ctx.translate (33, canvas.peak);
                ctx.drawImage (img, params.currentFrame * 66, 0, 66, 135, -33, -135, 66, 135);
                ctx.restore ();
            
        );

        $ (“# stop2”). on (
            click on: perform ()
                animationCanvas.stop ();
            
        );
        $ (“# play2”). on (
            click: perform ()
                animationCanvas.play ();
            
        );
        $ (“# pause2”). on (
            click on: perform ()
                animationCanvas.pause ();
            
        );

    ). attr (“src”, “../img/sheet_7x1.png”);

Outcome.

demo example.

The end result was two unbiased animations.