Skip to content

Sprite Sheet Animations

Animate a tiled sprite from a sprite sheet.

Authors and contributors to this experimental extension: arthuro555.


Animate images from a sprite sheet by using a tiled sprite.

How to use

  1. Create a tiled sprite object.
  2. Set the tiled sprite image to the sprite sheet image.
  3. Add the behavior (horizontal, vertical, or JSON animator) to the tiled sprite.
  4. Set up the behaviors:
    • For directional animators: Edit the object "Default width" and "Default height" to match the size of a frame.
    • For the JSON animator: Set the sprite sheet JSON data in the behavior properties.
  5. Use the behaviors action to start the animation (only needs to be run once, like sprite animations).

Vertical and horizontal spritesheet animators

These behaviors will animate a spritesheet with the images distributed from left to right or from top to bottom. Offsets, row/column, animation speed and frame ranges can be specified to target the desired images.

JSON spritesheet displayer

This behavior allows displaying frames or animations from a more intelligent spritesheet. You can generate a compatible JSON and sprite sheet via TexturePacker using the pixi.js preset. The JSON is formatted like this:

{
  "frames": {
    "frame1": {
      "frame": {
        "x": 0,
        "y": 0,
        "h": 10,
        "w": 10,
      }
    },
    "frame1": {
      "frame": {
        "x": 10,
        "y": 0,
        "h": 10,
        "w": 10,
      }
    },
    "frame2": {
      "frame": {
        "x": 0,
        "y": 10,
        "h": 20,
        "w": 20,
      }
    }
  },
  "animations": {
    "animationName1": ["frame1", "frame2"],
    "animationName2": ["frame2", "frame3"]
  }
}
frames define each image inside the spritesheet and animations are the set of frames that form an animation. For compatibility with the TexturePacker pixi.js preset, the JSON doesn't contain the animation speed, so it has to be specified in the behavior properties.

Tip

Learn how to install new extensions by following a step-by-step guide.

Horizontal sprite sheet animator

Animates a horizontal (left to right) sprite sheet.

Behavior actions

Pause animation
Pause the animation of a sprite sheet.

See parameters
  • Parameter 0: 👾 Object
  • Parameter 1: 🧩 Behavior

Technical note: parameter 2 are internal parameters handled by GDevelop.

Play animation
Play an animation from the sprite sheet.

See parameters
  • Parameter 0: 👾 Object
  • Parameter 1: 🧩 Behavior
  • Parameter 2 (🔢 Number): First Frame of the animation
  • Parameter 3 (🔢 Number): Last Frame of animation
  • Parameter 4 (🔢 Number): Duration for each frame (seconds)
  • Parameter 5 (🔢 Number): What row is the animation in

Technical note: parameter 6 are internal parameters handled by GDevelop.

Resume animation
Resume a paused animation of a sprite sheet.

See parameters
  • Parameter 0: 👾 Object
  • Parameter 1: 🧩 Behavior

Technical note: parameter 2 are internal parameters handled by GDevelop.

Behavior expressions

Expression Description
Object.HorizontalSpriteSheetAnimator::CurrentFrame() The current frame of the current animation.

JSON sprite sheet animator

Animates a sprite sheet using JSON (see extension description).

Behavior actions

Display a frame
Display one frame without animating the object.

See parameters
  • Parameter 0: 👾 Object
  • Parameter 1: 🧩 Behavior
  • Parameter 2 (string): The frame to display

Technical note: parameter 3 are internal parameters handled by GDevelop.

Load data from a JSON resource
Loads a new JSON spritesheet data into the behavior.

See parameters
  • Parameter 0: 👾 Object
  • Parameter 1: 🧩 Behavior
  • Parameter 2 (string): The JSON to load

Technical note: parameter 3 are internal parameters handled by GDevelop.

Pause animation
Pause the animation of a sprite sheet.

See parameters
  • Parameter 0: 👾 Object
  • Parameter 1: 🧩 Behavior

Technical note: parameter 2 are internal parameters handled by GDevelop.

Play Animation
Play an animation from the sprite sheet.

See parameters
  • Parameter 0: 👾 Object
  • Parameter 1: 🧩 Behavior
  • Parameter 2 (string): The name of the animation

Technical note: parameter 3 are internal parameters handled by GDevelop.

Resume animation
Resume a paused animation of a sprite sheet.

See parameters
  • Parameter 0: 👾 Object
  • Parameter 1: 🧩 Behavior

Technical note: parameter 2 are internal parameters handled by GDevelop.

Behavior expressions

Expression Description
Object.JSONSpriteSheetAnimator::CurrentAnimation() The name of the current animation. __null if no animation is playing.
Object.JSONSpriteSheetAnimator::CurrentFrame() The name of the currently displayed frame.

Vertical sprite sheet animator

Animates a vertical (top to bottom) sprite sheet.

Behavior actions

Pause animation
Pause the animation of a sprite sheet.

See parameters
  • Parameter 0: 👾 Object
  • Parameter 1: 🧩 Behavior

Technical note: parameter 2 are internal parameters handled by GDevelop.

Play animation
Play an animation from the sprite sheet.

See parameters
  • Parameter 0: 👾 Object
  • Parameter 1: 🧩 Behavior
  • Parameter 2 (🔢 Number): First frame of the animation
  • Parameter 3 (🔢 Number): Last frame of the animation
  • Parameter 4 (🔢 Number): Duration for each frame (seconds)
  • Parameter 5 (🔢 Number): The column containing the animation

Technical note: parameter 6 are internal parameters handled by GDevelop.

Resume animation
Resume a paused animation of a sprite sheet.

See parameters
  • Parameter 0: 👾 Object
  • Parameter 1: 🧩 Behavior

Technical note: parameter 2 are internal parameters handled by GDevelop.

Behavior expressions

Expression Description
Object.VerticalSpriteSheetAnimator::CurrentFrame() The current frame of the current animation.

This page is an auto-generated reference page about the Sprite Sheet Animations extension, made by the community of GDevelop, the open-source, cross-platform game engine designed for everyone. Learn more about all GDevelop community-made extensions here.