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:

XLQSI File Header
| Field | Size (Bytes) |
| Signature | 4 |
| Version | 1 |
| Image Width | 2 |
| Image Height | 2 |
| Color Count | 1 |
| Palette Entries | ? |
| Animated Segment Count | 1 |
| 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):

XLQSI Animated Segments
Each animated segment is represented in with the following format.
| Field | Size (Bytes) |
| Left | 2 |
| Top | 2 |
| Segment Width | 2 |
| Segment Height | 2 |
| Frame Count | 1 |
| Frame Time | 2 |
| 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.
Japanese culture and the unique characteristics it exhibits have never been anything
less than fascinating to me. The unwritten rules of Bushidō among Samurai warriors,
the highly elaborated kimono of a Geisha, the multifaceted chanoyu tradition, and
many other things just go to show the cultural richness of the Japanese.