A sprite allows you to draw 2D images. To do that, add a Sprite to the scene and then set the texture property accordingly. Change Rotation, Position, Scale, Size and Anchor properties to adjust the placement of the sprite. Change Color and Alpha properties to adjust the appearance of the sprite.


<Scene xmlns="http://schemas.microsoft.com/nine/2011/xaml">
    <Camera2D />
    <Sprite Texture="{ContentReference Assets/butterfly}" />
    <Sprite Texture="{ContentReference Assets/butterfly}" Anchor="0,0" Color="255,255,0,255" />
    <Sprite Texture="{ContentReference Assets/butterfly}" Position="100, 100" Rotation="{Degrees 10}" Scale="0.5,0.5" Alpha="0.5" />
    <Sprite Texture="{ContentReference Assets/butterfly}" Position="-20, 0" FlipY="True" Color="0,255,255,255" ZOrder="-1" />

Sprite Tiling

To tile a sprite, the SamplerState property must be set to LinearWrap. Set the SourceRectangle property to the size of the screen to create a tiling background. Change the ZOrder property to a negative value to bring the sprite to the background.


<Sprite Texture="{ContentReference Assets/pattern}" SamplerState="LinearWrap" SourceRectangle="0,0,800,480" ZOrder="-9999" />


Text Sprite

TextSprite is used to draw text onto the screen. A SpriteFont is required to draw text. To create a sprite font, right click on the content project, choose “Add New Item” – “Sprite Font Description”.


<TextSprite Font="{ContentReference Assets/SpriteFont1}" Text="Press any key to continue" Position="0, -160" Color="0,0,0,255" />


Sprite Animation

Engine Nine supports two types of sprite animation textures. The first type of animation uses grid to split a single texture into multiple frames. Import the source asset and set the processor to “Texture Atlas – Engine Nine”. Set the ColumnCount and RowCount properties according to the texture.

grossini_dance_atlas-hd image

The second type of animation uses sequential file names to specify animation frames. Import the first texture of the sequence, then process that texture with “Texture Atlas – Engine Nine”. The rest of the textures has to reside in the same folder, but they don’t need to be imported and processed.

image image

The content produced by “Texture Atlas – Engine Nine” is a TextureAtlas. A texture atlas packs multiple small textures into a single large texture, and keeps track of the rectangle region that corresponds to each original texture.

SpriteAnimation class can be used to animate the sprites. To create an animated sprite, create a new SpriteAnimation instance and added to a Sprite:


<Sprite Position="-200,0">
        <SpriteAnimation FramesPerSecond="12" Source="{ContentReference Dance/grossini_dance_01}" />


A sprite can contain multiple animations. Select and play an different animation using AnimationPlayer.Play method. Sometimes it is desirable to pack multiple animations into a single texture atlas. The BeginFrame and EndFrame property can be used to split an animation into multiple tracks:

<Sprite Name="Man" Position="-200,0" Material="{BlurMaterial}">
        <SpriteAnimation Name="Back" BeginFrame="0" EndFrame="4" FramesPerSecond="12" Source="{ContentReference Dance/grossini_dance_01}" />
        <SpriteAnimation Name="Front" BeginFrame="4" EndFrame="9" FramesPerSecond="12" Source="{ContentReference Dance/grossini_dance_01}" />

The above example plays the first 4 frames of the whole animation. To play the last 5 frames, find the sprite and call the AnimationPlayer.Play method with the animation name:



Sprite Materials

Most of the time, tweaking the color, alpha and blend state of a sprite is sufficient enough to create different kinds of effects. But some special effects requires the use of shaders. Sprite contains a Material property that allows you to apply arbitrary shader effects to the given sprite. More details of material system is covered in the 3D graphics section. This example shows some basic usage of materials.


<Sprite Position="-200,0" Material="{BlurMaterial}">


Sprite Batching

They say batching makes things run fast. When using Sprite, the render system will always try to batch items as best as it can. However, some properties may affect batching:

  • Explicitly set a material will completely prevent that sprite from been batched. All sprites with a material will be rendered one by one.
  • Different BlendState, SamplerState and Texture will likely to stop the current running batch and start a new batch.

The ZOrder property can also hurt performance. When a non-zero z order is set, that sprite has to be sorted each frame. The default z order is zero so these sprites are drawing in the order they are added.


Download the source code here

Last edited Sep 23, 2012 at 9:58 AM by yufeih, version 15


No comments yet.