Facebook

If you have a Facebook account, then you are already a member on this site. So log-on now and create a more personalized experience on Xleeque.com!


Xleeque Shaded Image File Specifications

Posted by Ben Goh | September 1, 2009.

This article represents the format specification for Xleeque Shaded Image files (*.xlqsi). The tool to work with XLQSI files is Xleeque Designer, please refer to the official documentation of Xleeque Designer for more information on the editor.


The Motivation of XLQSI

With more elaborated website contents becoming a commonplace, image transfer is making up more web traffic. On an average webpage, images usually take up data sizes that are significantly larger than text contents. Data transfer translates to cost for the host company, especially when amount multiplies with number of clients. More often than never, to reduce cost can be achieved by reduce size of images used. Display of images on an HTML page relies on the image decoding capability on web-browsers: if we were to optimize image files for HTML web page, we then have to work within set rules. For an example, using less than 256 colors, simpler color shades and opt for GIF format for better lossless compression.

Unlike HTML web pages, Silverlight presents an opportunity for handling custom file formats on client machines. Seizing this opportunity, “Xleeque Shaded Image File Format” is proposed – a format that is developed with one goal in mind: to reduce image file size as much as possible while retaining the complete original image data. Of course this format is not meant to replace existing file formats, it simply cannot. But this file format works within a set of known, predefined requirements, to achieve better compression.

For the isometric engine under development, individual tiles and objects on map are known to be made up of very simple and repetitive color shades. That also means the images used are each having very narrow color space. The following screenshot (taken from Final Fantasy Tactic game) illustrates how these simple shaded maps may look like:

Screenshot of Final Fantasy Tactics Advanced

XLQSI File Header

FieldSize (Bytes)
Signature4
Version1
Image Width2
Image Height2
Color Count1
Palette Entries?
Animated Segment Count1
Animated Segments?
Image Data?

Signature

Signature of all versions of XLQSI file format. The character values are 'X', 'L', 'Q' and 'S'(with 'X' being the least-significant byte), or as an unsigned integer value of 0x53514C58.

Version

XLQSI file format version. 4-higher bits major version; 4-lower bits minor version. The latest version is now 0x10 (major version #1, minor version #0).

Image Width

Image width in pixels.

Image Height

Image height in pixels.

Color Count

Total number of colors in the local palette table, this determines the number of entries in the "Palette Entries" below. This number determines how image data is stored in "Image Data" section below. For an example, if there are a total of 57 colors in the image, each pixel can be represented by just 6 bits (6-bit is capable of holding up to 64 different values).

Palette Entries

Array of color-triplet, number of entry depends on "Color Count" value above. Each entry is 3 bytes in size.

Animated Segment Count

Number of animated segments on the image. Each animated segment is a rectangular region on the image. Only image data within these rectangular regions changes across different frames of the image. Image data lying outside of these regions are static, going from one image frame to the next.

Animated Segments

Array of animated segments. Each of these segments is having the format that is outlined in "XLQSI Animated Segments" table below.

Image Data

Raw image data (byte stream). This data chunk consists of Width x Height pixels. Each pixel is not made up of a complete byte, but rather by the minimum number of bits required to represent "Color Count" above (e.g. 4 bits are required to represent 11 colors; 6 bits are required for 57 colors, etc).

More pixels can be compacted into lesser number of bytes. For an example, if we know an image with only 57 colors, each pixel can be represented with just 6-bit. As illustrated below, we can squeeze 4 pixels (6-bit each) into 3 bytes (instead of 4 bytes):

Image Color Space Compression

XLQSI Animated Segments

Each animated segment is represented in with the following format.

FieldSize (Bytes)
Left2
Top2
Segment Width2
Segment Height2
Frame Count1
Frame Time2
Frame Data?

Left, Top

The distance (in pixels) between left (top) edge of the animated segment, and the left (top) edge of the image.

Segment Width, Height

The dimension in pixels, of the animated segment.

Frame Count

The number of frames in this animated segment.

NOTE: To work best under a texture-mapped environment (where texture coordinates are generally in the rangeof [0, 1]), "1" should be completely divisible by the given "Frame Count". For an example, "1" is completely divisible by "4" (1/4 = 0.25); but "1" cannot be completely divisible by "6" (1/6 = 0.166666...).

Here are valid "Frame Count" values: 2, 4, 5, 8, 10, 16 and 20. Higher frame count that can completely divide "1" are acceptable but rare. Xleeque Designer currently limits this number to be less than or equal to 20.

Frame Time

The amount of time in milliseconds for each frame.

Frame Data

The frame data that is compacted the same way as "Image Data" above.

Article Revisions

September 9, 2009
Initial specification draft.