Sprites

Sprites are the graphics used by playable or interactive characters in your scenes. Add sprites to your game by including .png files in your project's assets/sprites folder.

Because there are limits to how many sprites tiles can be loaded into a single scene, be sure to check your the frame limits across your scenes when adding new sprites. See Scene Limits for more information.

Simple Sprites

A simple sprite has one or more 16px x 16px frames laid out horizontally in an image file. A sprite with a single frame will be 16px x 16px while a sprite with three frames will be 48px x 16px.

Static sprites

For sprites that only need a single frame (e.g. static items such as signposts) create your .png as a 16px x 16px image containing just the one frame required.

Animated sprites

If you want to have sprites that play short animations, you can make a .png with between 2 frames at 32px x 16px and 25 frames at 400px x 16px. Using these sprites on an actor will let you select which frame you want to display by default, on top of playing the full animation at a specified speed.

Actor

To make a static sprite that changes based on the actor's direction, create a 48px x 16px .png containing the three frames: One forward facing, one upwards facing and one right facing. The left facing sprite is automatically generated by flipping the right facing frame horizontally.

Animated Actor

To make sprites that have animated movement, or that can be used as a player character, create a 96px x 16px .png containing six frames: Two forward facing, two upwards facing and two right facing.

Sprite Editor

When you want to progress to making more complex sprites you can use the Sprite Editor by clicking the Project View Button and selecting Sprites.

Composition of a Sprite

A sprite consists of:

• Multiple Animation States, by default only a single animation state is created for a sprite, you can make a new one by clicking the + button in the Animation Navigator.
  • Each animation state consists of multiple animation frames, viewable in the Frames Navigator, click the + button to create a new frame, and click a frame to view it in the Frame Canvas for editing.
• A Tile Palette, this is the .png file from your assets folder. Click into the tiles palette to select a tile, you can then draw it by clicking into the Frame Canvas.
• A Canvas Size this is the width and height of your Frame Canvas, set this from the Editor Sidebar to the size you want your sprite to be.
• A Collision Bounding Box this is the width, height and position of an invisible box used for collision detection within the game engine, set this to fit as closely as possible around the collidable area of your sprite.

Animation Settings

In the Editor Sidebar you can choose from a list of sprite types, setting this will determine the number of animations available for your sprite and what names they have in the Animation Navigator. For example while you can use any sprite type for a Platformer scene player, it's recommended to set the type to be Platformer Player as this will allow you to configure the Jump and Climbing animations.

Some sprite types also allow you to "Flip 'Right' to Create 'Left' Facing Frames", this lets you create both the left and right sprite animations from a single animation that gets flipped automatically saving you from creating these animations manually.

Animation States

Using the + button in the Animation Navigator you can create new Animation States. These let you create custom animations that can be triggered from scripts.

Once you've created a new Animation State you can name it by typing in the State Name input in the Editor Sidebar, or by selecting an existing sprite name.

The list of sprite names is global for your project and it's recommended to keep the number of unique names low. Each one you add increases the amount of memory required for all sprites in your game. For example, rather than having two unique sprites with states Explode and Squash, consider making a single state used by both called Destroy.

To switch which animation state an actor should use in your game, you can use a Set Actor Animation State event. This allows you to choose an actor and which animation state you should switch to. Make sure that the spritesheet you're using has animations defined for the state you've chosen in the event!

Frame Canvas

Once you have selected an Animation and Frame to edit you can use the Tile Palette and Frame Canvas to create an animation frame.

Start by clicking on the tile you wish to use in the Tile Palette.

• You can select multiple tiles by clicking and dragging in the Tile Palette
• By default the Tile Palette snaps to an 8px grid, this is to increase the chance of tile reuse as each unique tile you use in your sprite takes away from limits when used in scenes. If you know what you're doing and want to disable this grid you can turn on Precision Mode by clicking the button in the top right of the Tile Palette or by holding Alt while making your selection.

Once you have a tile selection click into the Frame Canvas to draw the tiles into your frame. You can then move tiles around in the Frame Canvas by dragging them and if you have tile selection you can move frames to the front or back and flip them horizontally or vertically by using the Editor Sidebar.

Onion Skin

Using the Onion Skin button you can toggle the Onion Skin feature. This displays a semi-transparent version of the previous frame behind the Frame Canvas allowing you to more easily make decisions about the flow of the animation.

Deleting Tiles and Frames

To delete a tile or frame, select it in either the Frame Canvas or Frames Navigator and press Backspace on your keyboard. Alternatively to can make your selection then click the dropdown button arrow in the top right of the Editor Sidebar to access a menu where deleting is available.

Image Requirements

Sprite .pngs must only contain the following four colors:

#071821

#86c06c

#e0f8cf

#65ff00

Download the GB Studio Palette Swatches for:
Adobe Photoshop
Aseprite
Piskel

The color #65ff00 is used to represent a transparent background in game and will be invisible in-game and in the World Editor.

Colors that are not one of the above hex codes will be matched to the nearest color. Unlike backgrounds, the color #306850 can not be used in sprites.