Animating Spritemaps

Beyond just loading static images Otter also supports animated sprites loaded in from a sprite sheet.  The Spritemap class can load a sprite sheet using sprites that are all identical in size.  Animations can be set up and then be played back.  For the code used in this example you'll need this sprite sheet from The Spriter's Resource.

Before looking at the example code keep in mind that the Spritemap class requires a Type when being created.  This is the type that will be used to reference the animations added to the Spritemap.  In the case of this example we will create an Enum that will have the names of our animations.  We can then use that Enum as the AnimationType when creating the Spritemap class.

Now for the example code:

using Otter;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;

namespace SpritemapStuff {
  class Program {
    static void Main(string[] args) {
      // Create a game that's 160 x 120
      var game = new Game("Spritemap Animation", 160, 120);
      // Set the window scale to 3x to see the sprite better.
      // Set the background color to a bluish hue.
      game.Color = new Color(0.3f, 0.5f, 0.7f);

      // Create a scene.
      var scene = new Scene();
      // Add the animating entity to the scene.
      scene.Add(new AnimatingEntity(game.HalfWidth, game.HalfHeight));

      // Start the game with the scene that was just created.

  class AnimatingEntity : Entity {
    // Set up an enum to use for the four different animations.
    enum Animation {

    // Create the Spritemap to use. Use Sprite.png as the texture, and define the cell size as 32 x 32.
    Spritemap<Animation> spritemap = new Spritemap<Animation>("Sprite.png", 32, 32);

    public AnimatingEntity(float x, float y) : base(x, y) {
      // Add the animation data for walking upward.
      spritemap.Add(Animation.WalkUp, "0,1,2,3,4,5", 4);
      // Add the animation data for walking to the right.
      spritemap.Add(Animation.WalkRight, "6,7,8,9,10,11", 4);
      // Add the animation data for walking downward.
      spritemap.Add(Animation.WalkDown, "12,13,14,15,16,17", 4);
      // Add the animation data for walking to the left.
      spritemap.Add(Animation.WalkLeft, "18,19,20,21,22,23", 4);
      // Add the animation data for the PlayOnce test.
      spritemap.Add(Animation.PlayOnce, "5,11,17,23,5,11,17,23", 6).NoRepeat();
      // Add the animation data for the PingPong test.
      spritemap.Add(Animation.PingPong, "2,8,14,20", 8).PingPong();

      // Center the spritemap's origin.
      // Play the walking down animation immediately.

      // Add the graphic to the Entity so that it renders.

    public override void Update() {

      if (Input.KeyPressed(Key.Up)) {
        // Play the walk up animation when the up key is pressed.
      if (Input.KeyPressed(Key.Down)) {
        // Play the walk down animation when the down key is pressed.
      if (Input.KeyPressed(Key.Left)) {
        // Play the walk left animation when the left key is pressed.
      if (Input.KeyPressed(Key.Right)) {
        // Play the walk right animation when the right key is pressed.
      if (Input.KeyPressed(Key.X)) {
        // Play the PlayOnce test animation.
      if (Input.KeyPressed(Key.C)) {
        // Play the PingPong test animation.

This example uses keyboard input to control which animation is playing. This example also assumes that you covered the previous example on how to get your images properly loading with a Visual Studio project.