Uzebox Pixel-Art with Gimp

From Uzebox Wiki
Jump to navigation Jump to search

Uzebox pixel-art basics

Alt text
Typical Uzebox graphics - Megatris

Probably the most important peculiarity of Uzebox is that it does not have a definite video mode, that is, what is displayed depends on how the particular video mode is programmed. The common feature of most video modes is creating tiles (usually 8x8 pixels in size), usually at 6 AVR cycles per pixel, resulting in a 240x224 maximal resolution or 30x28 tiles. The palette is fixed 8 bits per pixel, in BBGGGRRR order.

Depending on the video mode chosen or implemented, you may see different figures. The 6 AVR cycles per pixel is the minimum with which 8 bit color from Flash is accessible, more limited 2 bits per pixel or 1 bit per pixel modes may be accessible with fever cycles (such as 288x224 with 5 AVR cycles per pixel). Some modes may use more, offering lower horizontal resolution in exchange for added features.

Before jumping in doing any pixelling, you so have to consider the features and limitations of the chosen graphics mode.

The palette

Alt text
The 256 colors of Uzebox

No matter which video mode you use or what you implement, the 256 colors of Uzebox will remain the same, coming from the construction of the hardware (simple resistor DAC on the 8 bit output port). So you have to keep in mind that you can only select colors from the Uzebox set, which should be done before going any further since adjusting colors later won't look nice. You can not get very smooth gradients with it for example, so even if the video mode you used offered enough colors, you will need to use different techniques (such as dithering) to create a smooth looking gradient.

(TODO: Someone should create a nicely organized Gimp palette from it, it would help)

Pixel aspect ratio

Next thing is when dealing with Uzebox pixels is to notice that they aren't square.

The most common Uzebox video modes with 6 cycles per pixel have roughly 5:4 pixel aspect ratio, so the pixels are slightly wider than tall. Perfect circles drawn on a computer monitor so would look like vertically flattened ovals when rendered by Uzebox.

For serious pixel work, you should consider this, and design accordingly. Thankfully Gimp offers a way to set up the aspect ratio proper.

This feature is linked with the capability of Gimp to display images at their physical size knowing the monitor's resolution, which is an useful feature for printing, however it also offers setting different resolutions horizontally and vertically which can be exploited for the purpose.

To get it working, you can follow the steps below.

First check your monitor's resolution (DPI), that is whether Gimp detected it proper, and maybe tweak it if you feel like. You can reach it at Edit / Properties.

Gimp monitor res.png

Once done, you can go on altering the image's settings to achieve the desired result. First turn off the "Dot for dot" setting, which asks Gimp to map the image's pixels to the pixels of the display at 100% zoom, which is usually desirable, but enforces square pixel aspect ratio (since modern displays have square pixel aspect ratio).

Gimp dot for dot.png

You may notice that the image's size changed, and maybe even that it became somewhat blurry (will be explained below). To get to the right aspect ratio (in this example 3:2, useful for 7 AVR cycles per pixel Uzebox modes), visit the Print size setting in the Image menu, set it up to match your display's settings, then modify the horizontal and vertical values according to your requirements (in the example the horizontal was divided by 1,5 to get the desired result).

Gimp print resolution.png
Gimp print resolution set.png

From this point the image's apparent dimensions should match that of what you would experience on the real hardware.

Alt text
Pixel aspect ratios of Uzebox and various old systems

Things however got more or less blurry, or you might see uneven pixel sizes. This is because of how scaling works: If Gimp has to scale the image to some dimensions below doubling the image's size (relative to the 100% setting with Dot for Dot on), it uses linear interpolation (blurry), otherwise nearest (probably uneven pixel sizes). To avoid this, try to use the cleanest divisions possible. For example to get a clean 3:2, make sure that the monitor's horizontal resolution is dividable by 3 (change it if necessary). If you get for example 5:4 by dividing the horizontal resolution by 5/4, you should also keep in mind that the image's width should be a multiple of 4 to get the cleanest result.

For more on this matter, you may read Jubatian's article on his site on nonsquare aspect ratios with Gimp.

The grid

Remember that Gimp has a quite useful Grid feature: use it! You can set it up in Image / Configure Grid, including not only its layout, but also the colors used when displaying it over the image. It can help when pixelling for any mode where tiles have some constraint, such as a limitation of colors possible, or if you want to create a logo using some fancy font where you could probably re-use tiles to save flash space.

Some notes on sizes

Uzebox normally isn't quite friendly for large pieces of pixel art with its tight limits, 64K Flash and 4K of RAM. However there are some video modes which one or another way can pull off more from the same size, for example Mode 13 (4 bits per pixel palettized) can fit twice the number of tiles on the same space like "normal" video modes.

When planning for loading off graphics from an SD card, you will bump in the 4K RAM limit. This is very limiting if you can only have 8 bits per pixel images, however there are other options. 1 bit per pixel (monochrome images) while can't fill an entire screen can be reasonably large, but using specific video modes or morphs, you can get anything between. Development is ongoing in these regions.