Difference between revisions of "Sprites"

From Open Surge Engine Wiki
Jump to: navigation, search
m (Case study: the ring sprite)
(Case study: the ring sprite)
Line 11: Line 11:
 
We'll learn by example. Consider the following ''spritesheet''. The name of the file is rings.png and it's located in the images/ folder.
 
We'll learn by example. Consider the following ''spritesheet''. The name of the file is rings.png and it's located in the images/ folder.
  
[[File:Rings.png|600px|thumb||images/rings.png]]
+
[[File:Rings.png|600px|thumb|none|images/rings.png]]
  
 
Let's see how Open Surge reads data from your images so that it can be displayed in-game. We will look at the ring sprite file included with the game (sprites/rings.spr).
 
Let's see how Open Surge reads data from your images so that it can be displayed in-game. We will look at the ring sprite file included with the game (sprites/rings.spr).

Revision as of 14:28, 15 January 2011

Sprites

Introduction

All objects with an animation are referred to as sprites. A sprite is a picture sheet with all the frames needed to be displayed in an animation. In Open Surge, a sprite is composed by two things:

  • A picture sheet (also known as spritesheet), usually in the PNG format. These files are placed in the images/ folder.
  • A SPR file, which is a textual file telling the engine how to display the sprite properly. These files are placed in the sprites/ folder and they can be opened with any simple text editor like Notepad.

All picture sheets have a transparent color. They differ between games, but Open Surge uses magenta (RGB 255,0,255) as the transparent color.

Case study: the ring sprite

We'll learn by example. Consider the following spritesheet. The name of the file is rings.png and it's located in the images/ folder.

images/rings.png

Let's see how Open Surge reads data from your images so that it can be displayed in-game. We will look at the ring sprite file included with the game (sprites/rings.spr).

...

// Ring
sprite SD_RING
{
   source_file     images/rings.png
   source_rect     0 128 176 16
   frame_size      16 16
   hot_spot        8 12
   
   // spinning
   animation 0
   {
       repeat      TRUE
       fps         16
       data        0 1 2 3 4 5 6 7
   }
   
   // disappearing
   animation 1
   {
       repeat      FALSE
       fps         8
       data        8 9 10
   }
}

...

In the above file, there are several things you will notice:

  • There are lines that begin with //. These lines are there merely for your convince and are ignored by the engine.
  • sprite "SD_RING": This is what this definition is called. You must make sure that no two sprites have the same name.
  • source_file: This is where the image you are reading from is located. The engine assumes that images are located somewhere in the game directory folder, so you do not need to specify the full file path. Instead, you just have to specify where the images are located in the game folder.
  • source_rect: The first two numbers give the X and Y coordinate, respectively, of the top left corner of the image you are defining. The second two numbers, width and height, respectively, give how big of a rectangle it would take to completely enclose every frame of the animation.
  • frame_size: Defines the size of each frame of your animation. In this example, the size of the source rectangle is 176 by 16, but each piece of the animation is only 16 by 16.
  • hot_spot: Every object in the engine has a X and a Y position in the screen, but is this spot its top-left corner? Or maybe its center? This is the place which the engine will use to determine the x and y position of your object. It also is the place where the level editor grabs your object when you select it. There are different reasons for placing hotspots in different places, however it is mostly a matter of preference. The hot spot also performs an important role in objects that are flipped or rotated in the game.
  • animation <NUMBER>: These are the animations your object can perform. Assuming that your object has N animations, <NUMBER> must vary from 0 to N-1. For example, if you're creating an object with five animations, you would need to specify animation 0, animation 1, ... and animation 4. There are three different things that animations need to be fully defined.
    • repeat: this tells the engine if you want it to keep doing the animation as long as it is the selected one. In this case, while the ring is inactive it will continuously spin because repeat is set to TRUE in animation 0. However, when the active animation changes to 1 (when a player touches it), it will play the animation only one time before disappearing.
    • fps: This defines how fast the engine will cycle through your frames. In this case it plays 16 frames every second for animation 0 and 8 frames per second for animation 1. The higher the fps, the faster the animation.
    • data: This defines which frame you want to play at any particular moment. In this case it plays frames 0-7 and then repeats under animation 0, and plays frames 8-10 and doesn't repeat under animation 1.