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.

Simple Sprites

The easiest way to create a new sprite in GB Studio is to use simple sprites. A simple sprite consists of one or more 16px x 16px frames laid out horizontally in 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 enable you to select which frame you want to display by default and will allow an animation to be played at a specified speed.

Actor

To make sprites that can face in four directions turning towards the player, create a 48px x 16px .png containing the three frames forward facing, upwards facing and right facing. The left facing sprite is automatically generated by flipping the right facing sprite horizontally so does not need to be created.

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 animation frames.

As there are limits to how many sprites tiles can be loaded into a single scene don't use animated sprites unless you know your NPCs will need animated movement.

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 States 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 as each one you add increases the amount of memory required for all sprites in your game, e.g rather than having two 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

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.