Sprite

##What is a Sprite?

A sprite, in the context of 2D games, is an image or animation that represents an object in the game scene. Sprites are usually associated with things that move around the scene and collide with other objects, but at the simplest level, "sprite" only refers to the image itself. In CME, sprites can be still or animated. They can be any size, and can be made from any image type supported by the .NET framework. Currently, a single sprite can be made from only one image. You cannot compose multiple image files into a single sprite.

##Defining Sprites in the C# MegaMan Engine

Like everything else you can edit in CME, sprites are defined using XML. Sprites are used in various places, such as the tileset definitions and entity definitions, so it's very helpful to understand how to create sprites from scratch.

All sprites begin with the Sprite tag, and may look like the following.

<Sprite name="MySprite" tilesheet="images\mysprite.png" width="16" height="16">

The following attributes are possible with the Sprite tag:

Attribute	Required?	Type	Description
name	Optional	String	Identifies the sprite within the current context (for example, within the current entity.)
tilesheet	Sometimes	String	A path to the image file from which this sprite will be created. If you do not specify a tilesheet here, there must be a tilesheet previously specified with a Tilesheet tag.
width	Required	Integer	The width of the sprite, in pixels.
height	Required	Integer	The height of the sprite, in pixels.

###Hotspot Sprites must also define a Hotspot. The hotspot is the point on the sprite that is used as the point of reference for positioning and transformation. A sprite's (x, y) position in the game is the pixel where the hotspot will be drawn. An easy way to think of the hotspot is like a pushpin that you stick into a picture on a bulletin board. If you want to specify the exact position of the picture, you can give the point location of the pushpin. If you spin the image around, it will rotate around the pin.

<Hotspot x="8" y="8" />

Attribute	Required?	Type	Description
x	Required	Decimal	The x location of the hotspot, relative to the left edge of the sprite.
y	Required	Decimal	The y location of the hotspot, relative to the top edge of the sprite.

###Frames To specify the image or images for your sprite, use the Frame tag. At least one frame tag is required for every sprite. To make the sprite animated, you simply need more than one frame.

<Frame x="64" y="32" duration="5" />

Attribute	Required?	Type	Description
x	Required	Integer	The location on the tilesheet that will be the top left corner of your sprite.
y	Required	Integer
duration	Required	Integer	How many game frames this sprite frame will be shown. A value of 0 will cause the frame to be skipped in an animation, but is valid for a single-frame sprite.

It is important to remember the difference between sprite frames and game frames. A game frame (sometimes called a tick) is one iteration of the game screen being drawn, typically at a rate of 60 frames per second. A sprite frame is a single image used in the sprite animation, and can last for multiple game frames.

##The Tilesheet Tag

The Tilesheet tag is used to specify a single tilesheet for multiple sprites that follow. It is useful for defining multiple versions or palletes of the same sprite, for example Mega Man's different weapon colors.

The Tilesheet tag must precede any sprites that use it. It is only usable in some contexts, notably in entity and tileset definitions.

<Tilesheet pallete="Green">/images/mysprites.png</Tilesheet>

Attribute	Required?	Type	Description
pallete	Optional	String	A name for the pallete that this tilesheet defines. Default value is "Default". When using multiple palletes, each sprite that follows will be loaded from every tilesheet and categorized by pallete.

##Full Example

Suppose we want to define the sprite for Mega Man standing still. Because he can change colors when changing weapons, we need several palletes. Part of the definition may look like this:

<Tilesheet pallete="Default">/images/megaman_normal.png</Tilesheet>
<Tilesheet pallete="Metal">/images/megaman_metal.png</Tilesheet>
<Tilesheet pallete="Bubble">/images/megaman_bubble.png</Tilesheet>
<Sprite name="Standing" width="32" height="24">
    <Hotspot x="16" y="12" />
    <Frame x="0" y="0" duration="140" />
    <Frame x="32" y="0" duration="10" />
</Sprite>

This definition will cause our Standing sprite to be loaded from each of the three tilesheets.