Mezzanine Stairs

I have ideas for improvements to World’s End’s new graphics engine to try, but they’re further down my to-do list than reproducing the previous version’s functionality. One issue I couldn’t resist addressing, however, and one that is worsened by running full screen is color banding.

Color Banding

In the GameBoy Advance era games that were my inspiration for World’s End, the background would typically be a heavily banded vertical gradient. This was the best that could be done with a limited color palette and a technique that altered the background color as the screen was drawn from top to bottom. The red line at the top of this screenshot is a glitch in my attempt to reproduce the effect.

Now we have no such hardware limitations and 24bit color, but whenever a color gradient transition is gradual enough some banding will occur, and this remains true of the background gradients we use. An approach to give the appearance of a smoother transition, and the improvement I decided not to put off is called dithering.

Dithering

At first, I thought I’d need to implement a dithering algorithm to evaluate colors on a per-pixel basis and produce a deliberate pattern. However, to achieve a simple dithering effect all that’s needed is to add a very subtle bit of noise. Here’s a before and after example of the Tiervan Slum background gradient next to an easier to see, high-contrast version:

So, it was actually relatively simple to add dithering to the background gradient, but color banding isn’t limited to that layer. Our maps often use subtle gradients in the shading on the floors and walls, and the banding effect is only worsened when we display translucent menus over them. The solution is something I never imagined doing: just dither everything!

Here’s a before and after example of dithering being applied to the floor gradient in Tevoran’s Hideout (contrast increased to highlight the effect):

Before and After

There’s still noticeable banding, but there are ways I can apply even more dithering if we consider it worthwhile.

The noise we’re adding creates a checkerboard pattern that slightly smooths out the artwork. This effect is visible in the Tierva Hideout screenshots included in my previous posts, and I’ll attach a new screenshot to download and zoom in on if anyone is curious to see the effect.

Thieves’ Warehouse Example

High Dynamic Range

We could also potentially use high-dynamic-range (HDR) rendering to further improve image quality. Adobe teased the idea that HDR is supported in a “blog post” (blog unpublished) but I haven’t found reference to anyone having used it other than a single example that’s no longer online. Besides, this would only apply to supported displays, so even if I knew how to implement it I would would be leaving it on my “nice to have” list for now.