4. Sprite Collections and Animation - Tutorial

This tutorial will cover basic operations with sprite collections of Vortex2D and animation. Result - running man animation.


Before creating some sprite collections or animations we need to load texture with animation frames.

_SpritesheetTexture = new Texture("graphics\\runsheet.png");

Sprite Collections

Sprite collections - series of managed classes which expose Vorex.Drawing.ISpriteCollection interface. ISpriteCollection allows get collection size, indexed access and sprite enumeration.

Vortex.Drawing.SpriteGrid is kind of sprite collection which contains cells of texture region split vertically and horizontally. It can be created directly from:
  • entire texture
  • rectangular texture region
  • sprite
Also number of horizontal and verticals splits should be specified. Following code creates sprite map of size 7x1 from whole texture.

_RunSpriteGrid = new SpriteGrid(_SpritesheetTexture, 7, 1);

Vortex.Drawing.SpriteList is wrapper of .NET List class. It can be created from another sprite list, array of sprites or empty. It allows free adding/removing sprites without any restrictions.

_CustomCollection = new SpriteList(_RunSpriteGrid[0], _RunSpriteGrid[3], _RunSpriteGrid[6]);
//equivalent to
_CustomCollection = new SpriteList();


Vortex.Drawing.SpriteAnimation is animation controller which uses ISpriteCollection as sprite source. To create SpriteAnimation object you need specify source collection and desired frame rate.

_RunAnimation = new SpriteAnimation(_RunSpriteGrid, 20.0f);
SpriteAnimation can be repeatable or not. Also it has event AnimationComplete of Vortex.Drawing.AnimationCompleteEventHandler type. It is invoked each time when last frame is finished (disregarding on animation repeating status). SpriteAnimation object should be update each frame to process frame changing.



Lets draw all prepared content to show what we have. There are should be 10 sprites of 33% size. 7 from grid and 3 with red color overlay from sprite list.

//Drawing all sprites from grid
for (int n = 0; n < _RunSpriteGrid.Count; ++n ) {
    canvas.DrawSprite(new Vector(32 + n * 64, 64), _RunSpriteGrid[n].Size * 0.33f, _RunSpriteGrid[n], ColorU.White);

//Drawing all sprites from custom composed sprite collection
for (int n = 0; n < _CustomCollection.Count; ++n) {
    canvas.DrawSprite(new Vector(480 + n * 64, 64), _CustomCollection[n].Size * 0.33f, _CustomCollection[n], ColorU.Red);

Drawing of animation is pretty easy. SpriteAnimation object has property CurrentSprite which reference sprite of current animated frame. Alternative way to get current sprite is ToSprite() method exposed from ISpriteProvider interface.

//Draw animated sprite, ToSprite() method returns sprite of current frame
canvas.DrawSprite(320, 220, _RunAnimation.ToSprite(), ColorU.White);

//Drawing of running man with poor motion blur effect
canvas.DrawSprite(_ManPosition + new Vector(15, 0), _RunAnimation.CurrentSprite, ColorU.White.SemiTransparent(0.10f));
canvas.DrawSprite(_ManPosition + new Vector(10, 0), _RunAnimation.CurrentSprite, ColorU.White.SemiTransparent(0.30f));
canvas.DrawSprite(_ManPosition + new Vector(5, 0), _RunAnimation.CurrentSprite, ColorU.White.SemiTransparent(0.50f));
canvas.DrawSprite(_ManPosition, _RunAnimation.CurrentSprite, ColorU.White);


Vortex2D has simple but powerful tools for create and manage simple sprite based animation. Key classes to learn: SpriteGrid, SpriteList and SpriteAnimation.

Last edited Aug 18, 2010 at 9:08 PM by AlexKhomich, version 16


No comments yet.