Devlog 86 - Backdrop Redesigns

This month I finally started drawing up new backdrops for existing levels, trying to up the visual fidelity and quality (to bring them more in line with the other ones). Here's a video of those new ones in action:

Level 5-4

The old backdrops for level 5-4 were pretty plain -- just a bunch of partially-transparent floating bordered rectangles of various sizes:

Visually the "theming" for world 5 revolves around translucent, "glassy" shapes. I took a look at some other videogames for inspiration on ideas that I could pull from, especially Crystal Man's stage from Mega Man 5, which not only has these nice "prism" shapes making up the floor, but does a good job of layering detail in the background:

Here's the same section as above, but with the new backdrops. There's some more detailed hexagonal prism shapes in the foreground, and opacity is lessened in the background layers to provide a sense of depth (along with the parallax scrolling), and to help with readability. As with some of the other levels in world 5, there's also some diagonal light beams, which adds a subtle touch.

Level 2-1

These sky-themed levels from world 2 were definitely prime candidates for reworks. Here's the old version of level 2-1 (drawn over five years ago!), with a bunch of really simple cloud shapes. At the time I hadn't experimented at all with controlling the opacity of different layers, so I only had a very limited set of colors to work with.

When I first thought about reworking these backdrops I was torn on whether to actually utilize transparency in the earlier worlds since "transparent cloud layers" was something that I had specifically first introduced in world 4, and became a defining conceit for that set of backdrops. Ultimately I decided that I would find other ways to differentiate the worlds thematically, and that "making things look pretty in general" was ultimately more important. It also didn't make sense to "save the best graphics for the latter half of the game" since first impressions are arguably more important.

Back to level 2-1 -- I kept the concept of running amidst the clouds, but I utilized more detail in the shading of each cloud layer, as well as extensive use of transparency to achieve more "in-between" shades of color. At this point, my skill in working with different colors is such that the "4/8-color palette" restriction is not necessarily needed for me, and I'm sort of "working around it" via transparency, but I think overall the restriction does still ensure some sort of conformity around colors.

I actually had to iterate on this backdrop set a lot to figure out the proper balance of colors and palette utilization, as well as to make the middle area of the screen less busy. My first draft had too many cloud highlights placed in that area, but you'll notice in the final version, the middle section is intentionally kept very "flat" in terms of colors, to make the level obstacles easier to read. The more vibrant cloud highlights and the deeper shades of sky only show at the bottom and top of the screen, which is where foreground readability isn't important. This is the kind of thing that I've really learned to pay close attention to after specifically working with Rhythm Quest for so long.

Level Graphics

Another big thing that changed above is the thickness of the floor platforms. Previously they were only 10 pixels in height, which lined up with the "smaller" beat grid markers, but they're now doubled in thickness for this world, which hopefully helps to make them look more like clouds. There's some "bumps" in the ramps as well, instead of the border simply being a straight diagonal line, which helps the effect.

The tileset/level generation system has gone through multiple significant reworks, so a lot of old decisions are the artifact of legacy tech rather than what's actually best visually. I took this opportunity to polish up all of the level tilesets a little bit in general (though world 2 sees the biggest change, as already mentioned). New is on the left, old is on the right:

The base graphics are now drawn using a 3:1 ratio rather than a 2:1 ratio. This is less flexible when it comes to scaling them horizontally to make steeper/shallower ramps, but 3:1 is the ratio used in 99% of all cases anyways and taking away this restriction allowed me to tweak the graphics a little more.

In addition to the obvious change for the cloud tiles, there's now segmentation on the ramps for world 3 (to match the flat ground tiling), and there's also some subtle antialiasing thrown in for worlds 1 and 3, to make some of the diagonal lines look a little less "jagged".

Level 2-2

The existing backdrops for level 2-2 featured a big circular sun and its reflection on the water, with some trickery going on (no transparency!) to simulate glistening effects on the horizon line. The top half of the screen has a dithered gradient (meh...) and some clouds, making the screen overall kind of resemble a flag in composition...

The new version adopts basically the same composition and idea, just... done a lot better:

There's a lot going on here, but the centerpiece is the shimmering effects on the water. This isn't generated dynamically, but instead is simply done by crossfading between ten or so different variants of the water reflections (drawn using large quantities of short horizontal line segments). This is actually the first time I've used background layers that fade in and out over time, so I had to wire up some (simple) new tech for it, which I can definitely see applications of in other levels.

As opposed to the fluffy clouds in level 2-1, the cloud layers here use more horizontal lines (which I guess fits with the rest of the composition). There's also some more pale "mist" layers near the horizon line, adding a nice touch when contrasted against the slowly-scrolling mountains. Even the circle used for the sun itself looks "brighter" than in the old version of the level, not just because it's yellow, but because there's a faint transparent glow around it -- a subtle "bloom", if you will.

To Be Continued

It's been very rewarding to rework graphics that I drew five years ago and see how far I've come with my new level of experience. (The old versions of these backdrops are still included in the game, and will be available for custom levels if people choose to use them)

There are still more backdrops that I'd like to redo (level 1-1 and/or the main menu backgrounds in particular are going to be important as they form the first visual impressions of the game), so I may end up continuing to work on these moving forward for the time being! In addition, there are some minor adjustments to be made to existing backgrounds (even the ones that don't warrant full reworks), such as vertical scrolling limits, and additional usage of the fading tech that I added for level 2-2.