Xleeque Design

This article represents the official documentation for Xleeque Designer. The Xleeque Designer is an editor used to convert popular image file formats (PNG, BMP, etc.) to Xleeque Shaded Image files (*.xlqsi). For more details on Xleeque Shaded Image file format, please refer to itsspecifications here.

Main Window of Xleeque Designer

This is how Xleeque Designer window looks like. It consists of a toolbar, a preview window and a message pane.

• Toolbar - New: Creates a fresh session. As an image is dropped into the editor, the editor is considered as "dirty". When that happens, no further image files can be dropped into the editor unless "New" button is clicked to create a new session. Due to this reason, image frames belonging to the same animation sequence should be dropped at the same time. Do note that all image frames that get dropped at the same time should have exactly the same dimension and color-depth information.
• Toolbar - Export: Saves the edited image as an Xleeque Shaded Image file (*.xlqsi).
• Toolbar - Edit: Goes into editing mode and starts editing animated segments. If more than one file are dropped into the editor, regions that have different pixel values across frames are marked as "animated segments". These segments are marked as red rectangles on a white background (see below). See "Optimizing Animated Image" section below for more details on how these segments can be optimized.
• Toolbar - Rescan Frames: At times animated can be unintentionally combined into one. When that happens, the only way to restore the original animated segments is by rescanning image frames.
• Preview Window: Preview of the image will be displayed here. If more than one image frames are dropped into the editor, then the first frame is displayed.
• Message Pane: Informational and error messages will be shown here. If something does not work as intended, error information will be reported here.

Working with Xleeque Designer

Animated image sequence can be broken down to individual frames, and import into Xleeque Designer. Simply drag the image frames (each in a separate file), and drop them within the editor window. Since these image frames belong to the same animated sequence, they should have exactly the same dimension and color bit depth.

Sample image used in this article belongs to Kenneth Fejer.

Clicking on the "Edit" button reveals all "animated segments" on the imported image sequence. "Animated segments" represent regions on the image that have different colors across different frames.

Optimizing Animated Image

For scalability, each animated segment will result in a smaller instance of Image object (System.Windows.Controls.Image) overlaying on top of the bigger image. This way memory consumption does not drastically go up when the number of animated image in the system increases.

As illustrated below, holding down the mouse cursor in editing mode creates a green color bounding box. When the mouse button is released, animated segments within the green bounding box will be merged into one. Doing so multiple times significantly reduces the number of animated segments, reducing the number of Image object instances that are required during runtime.

The sample image above was initially loaded with 30 animated segments, with optimization it was then brought down to just six. It is a rule of thumb to have not more than 5 or 6 animated segments for a given image.

Article Revisions

September 9, 2009
Sneak preview of Xleeque Designer tool.