Sprite Editor

1.Overview

Sprites are a very important aspect of game development. They are the frame-based animation attached to your game objects. Some sprites are 1-frame while others can get quite complex. Regardless at the point of writing this the Game Pencil Engine allows for easy sprite importing.  In the image pictured below you can see a player running sprite and a few of its components.

 

 

 

2.Sprite Properties

 

As pictured above you can see the main engine-related properties of a sprite.  Due to window-sizing a few properties are not visible here; but we will go over them below.

 

When uploading an image into the “Load Resource” button or selecting the “Edit Resource” button on the main page of the sprite editor you will enter the menu above.

 

Let’s go over each input field to firmly fully understand how to work with sprites within the editor.

 

Sprite Main Data

  1. Frame Count – this number between 0 and X is the amount of frames one sprite animation makes. This value was added into 1.x and when loading older projects it takes the calculated value from the next fields.
  2. Frame Width – This number in pixels is the width of each frame in an individual sprite animation.
  3. Frame Height – This number in pixels is the height of each frame in an individual sprite animation.
  4. Horizontal  Pixel Offset – This number in pixels is the horizontal margin from (0,0) to the first frame of a sprite image.
  5. Vertical Pixel Offset – This number in pixels is the vertical margin from (0,0) to the first frame of a sprite image.
  6. Horizontal  Frame Padding – This number in pixels is the horizontal padding between sprite frame cells.
  7. Vertical  Frame Padding – This number in pixels is the vertical padding between sprite frame cells.
  8. Preloaded – If checked, this makes the sprite part of the game’s opening loading screen. If false, it is loaded when needed(although its properties is defaulted to its editor value on export for coding purposes).

 

3.Sprite Meta Data

Besides sprite properties, the sprite editor also handles useful meta-data for the sprite that helps it communicate to the editor and also calculate its collision values for when being exported in the engine.  Below is a list of sprite meta data you can customize:

 

  1. Sprite name – the name of the sprite in the editor and it’s exported keyword(useful for coding).
  2. Editor Preview Frame – This is the subimage’s index you will see when your sprite is references( whether in the resource menu, object sprites, scene editor, etc).  It is defaulted to 0.
  3. Collision shape – A rectangle or a circle as of version 1.1x.
  4. Collision (X,Y) – This information is used to calculate the offsets per sprite frame when determining it’s collision values.
  5. Collision (R) – used for the radius of the sprite when handling collision if the collision shape is a circle.
  6. Collision (W, H) – used for the (width, height)of the sprite when handling collision if the collision shape is a rectangle.
  7. Preview collision shape – Leave checked to see a glimpse of the collision shape is over each sprite frame.

 

 

 

Suggest Edit