pxt-common-packages

# Animation An animation is a sequence of images displayed one after another to show an action. The images could show something like a character walking or a star exploding. The effect of the animation is assigned an action value and starts when that action is set for a sprite. ## Create an animation for an action First, an animation object is [created](/reference/animation/create-animation) for an action. If the animation is going to show a character walking, the action is set to ``Walking``: ```block enum ActionKind { Walking, Idle, Jumping } let anim: animation.Animation = null anim = animation.createAnimation(ActionKind.Walking, 1000) ``` This animation has an interval of `1000` milliseconds which means that each frame will show for `1` second before the next one is shown. This is the speed of the animation or the _frame rate_. ## Add frames to the animation The animation is built by [adding frames](/reference/animation/add-animation-frame). A frame is an [image](/types/image) that is added to a list of other images set in the animation. ```block enum ActionKind { Walking, Idle, Jumping } let anim: animation.Animation = null anim = animation.createAnimation(ActionKind.Walking, 1000) anim.addAnimationFrame(img` d d d d d d f f f f d d d d d d d d d d f f f 2 2 f f f d d d d d d d f f f 2 2 2 2 f f f d d d d d f f f e e e e e e f f f d d d d f f e 2 2 2 2 2 2 e e f d d d d f e 2 f f f f f f 2 e f d d d d f f f f e e e e f f f f d d d f f e f b f 4 4 f b f e f f d d f e e 4 1 f d d f 1 4 e e f d d d f e e d d d d d d e e f d d d d d f e e 4 4 4 4 e e f d d d d d e 4 f 2 2 2 2 2 2 f 4 e d d d d 4 d f 2 2 2 2 2 2 f d 4 d d d d 4 4 f 4 4 5 5 4 4 f 4 4 d d d d d d d f f f f f f d d d d d d d d d d f f d d f f d d d d d `) ``` More frames are added to the animation until the action is complete. When the animation is started, the frames are shown in the order in which they were added. ```block let anim: animation.Animation = null anim.addAnimationFrame(img` d d d d d d d d d d d d d d d d d d d d d d f f f f d d d d d d d d d d f f f 2 2 f f f d d d d d d d f f f 2 2 2 2 f f f d d d d d f f f e e e e e e f f f d d d d f f e 2 2 2 2 2 2 e e f d d d f f e 2 f f f f f f 2 e f f d d f f f f f e e e e f f f f f d d d f e f b f 4 4 f b f e f d d d d f e 4 1 f d d f 1 4 e f d d d d d f e 4 d d d d 4 e f e d d d d f e f 2 2 2 2 e d d 4 e d d d d e 4 f 2 2 2 2 e d d e d d d d d d d f 4 4 5 5 f e e d d d d d d d d f f f f f f f d d d d d d d d d f f f d d d d d d d d d `) anim.addAnimationFrame(img` d d d d d d f f f f d d d d d d d d d d f f f 2 2 f f f d d d d d d d f f f 2 2 2 2 f f f d d d d d f f f e e e e e e f f f d d d d f f e 2 2 2 2 2 2 e e f d d d d f e 2 f f f f f f 2 e f d d d d f f f f e e e e f f f f d d d f f e f b f 4 4 f b f e f f d d f e e 4 1 f d d f 1 4 e e f d d d f e e d d d d d d e e f d d d d d f e e 4 4 4 4 e e f d d d d d e 4 f 2 2 2 2 2 2 f 4 e d d d d 4 d f 2 2 2 2 2 2 f d 4 d d d d 4 4 f 4 4 5 5 4 4 f 4 4 d d d d d d d f f f f f f d d d d d d d d d d f f d d f f d d d d d `) anim.addAnimationFrame(img` d d d d d d d d d d d d d d d d d d d d d d f f f f d d d d d d d d d d f f f 2 2 f f f d d d d d d d f f f 2 2 2 2 f f f d d d d d f f f e e e e e e f f f d d d d f e e 2 2 2 2 2 2 e f f d d d f f e 2 f f f f f f 2 e f f d d f f f f f e e e e f f f f f d d d f e f b f 4 4 f b f e f d d d d f e 4 1 f d d f 1 4 e f d d d d e f e 4 d d d d 4 e f d d d d d e 4 d d e 2 2 2 2 f e f d d d d d e d d e 2 2 2 2 f 4 e d d d d d d e e f 5 5 4 4 f d d d d d d d d d f f f f f f f d d d d d d d d d d d d d f f f d d d d `) ``` ## Attach to a sprite The animation needs a place to show at. Animations are [attached](/reference/animation/attach-animation) to a sprite and shown in the image area of the sprite. This means the animation moves with the sprite so its action is displayed wherever the sprite is at. ```block enum SpriteKind { Player, Enemy } let anim: animation.Animation = null let mySprite: Sprite = null mySprite = sprites.create(img``) animation.attachAnimation(mySprite, anim) ``` ## Start the animation Animations are started by [activating](/reference/animation/set-action) its action. To start the ``Walking`` animation, the walking action is activated for the sprite it's attached to: ```block enum ActionKind { Walking, Idle, Jumping } let mySprite: Sprite = null animation.setAction(mySprite, ActionKind.Walking) ``` ## More actions You can choose a different action or create a new one and add it to the ``ActionKind`` enumeration. Also, a new action is added by chosing ``Add a new action...`` in the action drop down list for ``||animation:create animation||``. ```typescript enum ActionKind { Walking, Running, Idle, Jumping } ``` If you wanted a the character in the examples above to run as well as walk, you could make a second animation for the ``Running`` action: ```block enum ActionKind { Walking, Running, Idle, Jumping } let walker: animation.Animation = null let runner: animation.Animation = null walker = animation.createAnimation(ActionKind.Walking, 1000) runner = animation.createAnimation(ActionKind.Running, 250) ``` The same frames can go into the ``Running`` action but the interval is shorter so the character seems to run instead of walk in the second animation. ### Walking and running To see the animation effects of both walking and running, two animations are attached to a sprite. The ``Walking`` action is started and plays for `4` seconds. Right after that, the ``Running`` action is played for `4` seconds. Each of the actions are then repeated in that order. ```blocks enum SpriteKind { Player, Enemy } enum ActionKind { Walking, Idle, Jumping, Running } let runner: animation.Animation = null let walker: animation.Animation = null let mySprite: Sprite = null let walk = false walk = true mySprite = sprites.create(img` . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . `, SpriteKind.Player) walker = animation.createAnimation(ActionKind.Walking, 1000) walker.addAnimationFrame(img` d d d d d d f f f f d d d d d d d d d d f f f 2 2 f f f d d d d d d d f f f 2 2 2 2 f f f d d d d d f f f e e e e e e f f f d d d d f f e 2 2 2 2 2 2 e e f d d d d f e 2 f f f f f f 2 e f d d d d f f f f e e e e f f f f d d d f f e f b f 4 4 f b f e f f d d f e e 4 1 f d d f 1 4 e e f d d d f e e d d d d d d e e f d d d d d f e e 4 4 4 4 e e f d d d d d e 4 f 2 2 2 2 2 2 f 4 e d d d d 4 d f 2 2 2 2 2 2 f d 4 d d d d 4 4 f 4 4 5 5 4 4 f 4 4 d d d d d d d f f f f f f d d d d d d d d d d f f d d f f d d d d d `) walker.addAnimationFrame(img` d d d d d d d d d d d d d d d d d d d d d d f f f f d d d d d d d d d d f f f 2 2 f f f d d d d d d d f f f 2 2 2 2 f f f d d d d d f f f e e e e e e f f f d d d d f f e 2 2 2 2 2 2 e e f d d d f f e 2 f f f f f f 2 e f f d d f f f f f e e e e f f f f f d d d f e f b f 4 4 f b f e f d d d d f e 4 1 f d d f 1 4 e f d d d d d f e 4 d d d d 4 e f e d d d d f e f 2 2 2 2 e d d 4 e d d d d e 4 f 2 2 2 2 e d d e d d d d d d d f 4 4 5 5 f e e d d d d d d d d f f f f f f f d d d d d d d d d f f f d d d d d d d d d `) walker.addAnimationFrame(img` d d d d d d f f f f d d d d d d d d d d f f f 2 2 f f f d d d d d d d f f f 2 2 2 2 f f f d d d d d f f f e e e e e e f f f d d d d f f e 2 2 2 2 2 2 e e f d d d d f e 2 f f f f f f 2 e f d d d d f f f f e e e e f f f f d d d f f e f b f 4 4 f b f e f f d d f e e 4 1 f d d f 1 4 e e f d d d f e e d d d d d d e e f d d d d d f e e 4 4 4 4 e e f d d d d d e 4 f 2 2 2 2 2 2 f 4 e d d d d 4 d f 2 2 2 2 2 2 f d 4 d d d d 4 4 f 4 4 5 5 4 4 f 4 4 d d d d d d d f f f f f f d d d d d d d d d d f f d d f f d d d d d `) walker.addAnimationFrame(img` d d d d d d d d d d d d d d d d d d d d d d f f f f d d d d d d d d d d f f f 2 2 f f f d d d d d d d f f f 2 2 2 2 f f f d d d d d f f f e e e e e e f f f d d d d f e e 2 2 2 2 2 2 e f f d d d f f e 2 f f f f f f 2 e f f d d f f f f f e e e e f f f f f d d d f e f b f 4 4 f b f e f d d d d f e 4 1 f d d f 1 4 e f d d d d e f e 4 d d d d 4 e f d d d d d e 4 d d e 2 2 2 2 f e f d d d d d e d d e 2 2 2 2 f 4 e d d d d d d e e f 5 5 4 4 f d d d d d d d d d f f f f f f f d d d d d d d d d d d d d f f f d d d d `) animation.attachAnimation(mySprite, walker) runner = animation.createAnimation(ActionKind.Running, 250) runner.addAnimationFrame(img` d d d d d d f f f f d d d d d d d d d d f f f 2 2 f f f d d d d d d d f f f 2 2 2 2 f f f d d d d d f f f e e e e e e f f f d d d d f f e 2 2 2 2 2 2 e e f d d d d f e 2 f f f f f f 2 e f d d d d f f f f e e e e f f f f d d d f f e f b f 4 4 f b f e f f d d f e e 4 1 f d d f 1 4 e e f d d d f e e d d d d d d e e f d d d d d f e e 4 4 4 4 e e f d d d d d e 4 f 2 2 2 2 2 2 f 4 e d d d d 4 d f 2 2 2 2 2 2 f d 4 d d d d 4 4 f 4 4 5 5 4 4 f 4 4 d d d d d d d f f f f f f d d d d d d d d d d f f d d f f d d d d d `) runner.addAnimationFrame(img` d d d d d d d d d d d d d d d d d d d d d d f f f f d d d d d d d d d d f f f 2 2 f f f d d d d d d d f f f 2 2 2 2 f f f d d d d d f f f e e e e e e f f f d d d d f f e 2 2 2 2 2 2 e e f d d d f f e 2 f f f f f f 2 e f f d d f f f f f e e e e f f f f f d d d f e f b f 4 4 f b f e f d d d d f e 4 1 f d d f 1 4 e f d d d d d f e 4 d d d d 4 e f e d d d d f e f 2 2 2 2 e d d 4 e d d d d e 4 f 2 2 2 2 e d d e d d d d d d d f 4 4 5 5 f e e d d d d d d d d f f f f f f f d d d d d d d d d f f f d d d d d d d d d `) runner.addAnimationFrame(img` d d d d d d f f f f d d d d d d d d d d f f f 2 2 f f f d d d d d d d f f f 2 2 2 2 f f f d d d d d f f f e e e e e e f f f d d d d f f e 2 2 2 2 2 2 e e f d d d d f e 2 f f f f f f 2 e f d d d d f f f f e e e e f f f f d d d f f e f b f 4 4 f b f e f f d d f e e 4 1 f d d f 1 4 e e f d d d f e e d d d d d d e e f d d d d d f e e 4 4 4 4 e e f d d d d d e 4 f 2 2 2 2 2 2 f 4 e d d d d 4 d f 2 2 2 2 2 2 f d 4 d d d d 4 4 f 4 4 5 5 4 4 f 4 4 d d d d d d d f f f f f f d d d d d d d d d d f f d d f f d d d d d `) runner.addAnimationFrame(img` d d d d d d d d d d d d d d d d d d d d d d f f f f d d d d d d d d d d f f f 2 2 f f f d d d d d d d f f f 2 2 2 2 f f f d d d d d f f f e e e e e e f f f d d d d f e e 2 2 2 2 2 2 e f f d d d f f e 2 f f f f f f 2 e f f d d f f f f f e e e e f f f f f d d d f e f b f 4 4 f b f e f d d d d f e 4 1 f d d f 1 4 e f d d d d e f e 4 d d d d 4 e f d d d d d e 4 d d e 2 2 2 2 f e f d d d d d e d d e 2 2 2 2 f 4 e d d d d d d e e f 5 5 4 4 f d d d d d d d d d f f f f f f f d d d d d d d d d d d d d f f f d d d d `) animation.attachAnimation(mySprite, runner) game.onUpdateInterval(4000, function () { if (walk) { animation.setAction(mySprite, ActionKind.Walking) } else { animation.setAction(mySprite, ActionKind.Running) } walk = !(walk) }) ``` ## See also #seealso [create animation](/reference/animation/create-animation), [add animation frame](/reference/animation/add-animation-frame), [attach animation](/reference/animation/attach-animation), [set action](/reference/animation/set-action) ```package animation ```