Sprites

Sprites are the basic graphics elements used by WME. A "sprite" can be either a normal static image or an animation. While a normal image can be created by any graphics editor program, the animated sprites are more complicated to create. Basically, the animated sprite is a set of one or more images. Those images change in specified interval thus forming an animation.

WME Development Kit includes a tool for creating animated sprites; this tool is called SpriteEdit. The SpriteEdit tool allows you to assemble a bunch of single images (animation frames) into one animation and setting several additional properties. You can also assign sounds to individual frames of the animation.

One animation frame is not limited to a single image. You can compose one frame of multiple images (they are then called the "subframes"). You don't usually need to use subframes, but they can be useful sometimes. For example let's assume you have an animation of a walking man. Now you want the man to wear a hat. Instead of redrawing all the animation frames, you can draw just the hat and add it as a subframe to all the animation frames. Of course this is not a good example, but you may find a more creative use for the subframes.

The easiest way of creating a new sprite is to use the template facility of the ProjectMan (read more), but you can as well build a new sprite from scratch by creating a new file in SpriteEdit.

SpriteEdit can be invoked either by double-clicking a sprite file in ProjectMan or by clicking the SpriteEdit icon in the WME Development Kit program group in the Windows Start menu.

SpriteEdit interface

The user interface of the SpriteEdit tool is very straightforward. The "sprite bar" on the left side displays information about your animation and allows you to change its properties.

This toolbar allows you to change position within a sprite, or test your animation (the "Play" button). You can reorder the animation frames or subframes using the green arrows. The Looping check-box specifies whether the animation loops, i.e. after displaying the last frame the animation won't stop, but rather skip back to the beginning.

The last set of buttons allows you to add frames and subframes or remove them respectively.

Below the toolbar you can see a list of all frames your animation consists of.

The "Frame properties" toolbar allows you to change settings for each animation frame (or subframe).

• Delay - specifies a time duration of the selected frame (in milliseconds)
• Move by - the sprite can move its owner (actor or entity); if you fill in the "move by" values, every time this frame is displayed, the owning object will move by a specified amount of pixels. For example actors' walking sprites use this function.
• Sound - you can assign sound files to animation frames
• Event - individual animation frames can trigger a script event in their owning object; it's useful when you need to synchronize certain script action with an animation (for example playing footstep sounds)
• Keyframe - not used yet
• Kill sounds - whenever this frame is displayed, all the sounds played by previous frames are stopped
• 3D only / 2D only - specifies whether this subframe should only be displayed when the game runs in accelerated mode or non-accelerated mode respectively. This way you can optimize your sprites for both the accelerated and non-accelerated mode if you need to. For example you can add a shadow subframe, which will be half-transparent. But it would look bad in non-accelerated mode. Therefore by checking the "3D Only" check-box you can disable the shadows for non-accelerated mode.
• Image - the image to be displayed in this subframe.
• Hot spot - the "hot spot" specifies the base point of the subframe, i.e. the point from which the image will be drawn. For example in case of walking character animation you will want to place the hot spot at the character's feet so that you can set its position conveniently. You can change the hot spot easily by dragging the image in the right  window.
• Transparent - specifies a color which will be treated as "transparent" by the engine. It defaults to the pink color (RGB(255, 0, 255)) because that color is rarely used in the graphics itself.
• Alpha color / Opacity - specifies the color shade and opacity of the current subframe. This setting only applies in accelerated mode.
• Decoration subframe - A subframe marked as "decoration" will appear as non-interactive when the player moves the mouse pointer over it. It is useful for example for shadows; you want them to be displayed on screen but you don't want the player to be able to click on them.

By selecting the "Properties" tab on the sprite bar, you can change properties of the entire animation.

• Name - specifies the internal name of this animation
• Looping - specifies whether this is a looping animation (same setting as on the first page, it's duplicated for better conveninece)
• Continuous - the "continuous" animation cannot be interrupted in the middle (not used in WME)
• Pixel precise - specifies whether this animation uses "pixel-prefect" mouse-over detection when it's used to display an interactive object. If not set,  the entire rectangle appears as interactive.
• Streaming animation - the animation isn't stored in memory, rather the frames are loaded from disk when needed. Useful for long slow animations.
• Mute sounds - design only setting; it allows you to disable sounds in the SpriteEdit while editing this animation.
• Scripts - you can assign one or more script to a sprite; that way you can programmatically control sprite properties, frames and the animation flow

Another feature of SpriteEdit you may find useful is the ability to set a background image for the animation. This is a design-only setting and it can be used for example for tweaking an animation to correctly fit a certain game background. You can set the background image by opening the "View" menu and then selecting the "Background image..." command. A dialog window will appear allowing you to specify an image file, an offset of the image (so that you can position your sprite within the image) and a transparency for easier designing.