Emperor Moloch

Mobile game art refactor

Intro

If there’s one thing that I like more than making a game look good, it’s challenging myself to see if I can make an existing game look better (Well…in most cases that means “more like I like it”, so obviously when I like it better everyone else will too! (that’s a bit sarcastic, just in case)).

Every once in a while I’ll grab a project that randomly catches my eye and wonder - what would I do with it? What’s important? What would I do differently? Why was X artistic choice made. Etc. etc. It’s a blast! =)

Here’s a work in progress refactor of a screen from Rope and Demolish from Voodoo:

Final Render

Starting Point

For reference, below is the starting point, screen grabbed form the iOS store. To be honest, looks pretty awesome, there’s some good variety, striking color choices, clear foreground-midground-background composition. Not too shabby at all! Some strong visual appeal, high contrast. Definitely eye-catching.

Final Render

First Steps

My first gripe is just how noisy the screen is. If you reduce it to just values, you can see that the contrast is way too strong in all foreground and midground areas regardless of their importance to gameplay.

Value Comparison Value Comparison 2

Maybe that’s a good thing? Captures attention? Still, my bet would be that it tires out the player quicker, and a just slightly milder contrast could help players enjoy longer play sessions (Well, that’s my little theory, yet to have any sort of proof. Art theorycrafting is great, until you hit the real world :))

So my first step (aside from cutting out the UI for now) was to ignore color entirely for the time being, and calm down and sort the values.

Color Adjustments

Now, next thing on my list are the saturated colors. But wait, aren’t saturated colors good?? I mean, yes and no. The thing is that color is relative, so you can safely tone down the surrounding colors to make the central one pop, instead of cranking saturation across the board (which would be the intuitive thing to do!).

I feel like there’s a case of ‘panic saturation’ here. I lifted this term from Istebrak I’m pretty sure. It’s when you’re not sure if what you’re doing with colors/values is working, and have no clear idea of what the rules are, so you crank the brightness/contrast/saturation sliders and hope for the best. Certainly was my favorite way of solving problems for a loooong while =)

An that’s what I feel here, these colors are suuUuuUuuper saturated. Tasty! But maybe too much.

Color Picker Experiment

It really doesn’t require much to pull them back a bit. I’ve also unified the white structure elements by toning down their value just a pinch. Now all elements have a better relation to each other, while remaining nicely saturated. Gives everything that mellow mobile game feel. Note: depends on the mood the project is going for. If this was more like a post-apocalyptic desert wasteland gritty destruction sim, the same value rules apply, but colors would be muddier, a more brown-reddish-orange kind of affair.

Colors Updated

I also took the liberty of draining saturation from the sky, trees, and even some of the foreground grass. So even though the contrast is decreased and toned down across the board, the contrast between play area and background is actually increased. Neat!

Details

Value, color composition - the good thing about those is that they can be adjusted with textures only, without touching any possible technical limitations in Unity, or changing device specs required to run the game.

With adding details it’s a little bit different. You need to add sprites or 3D objects to the game, potentially affecting performance. So there’s a kind of slider here, increasing detail complexity adds a lot to the charm of a game, with a certain potential cost of increased requirements (meaning smaller maximum audience size, so quite the drawback).

Personally, huge fan of higher frequency but very low contrast detail.

Detail Example

It’s a pretty bold assumption that these could be achieved with flat sprites. But worth a shot?! I ran into my time limit for this project, but I would definitely try to add more. Flowers, butterflies, leaves falling from the trees, dust motes.

I tried to preserve details in the brick texture, it’s a nice touch! But toned them down in terms of value to keep the feeling consistent.

Technical Considerations / Other Ideas

Beveeeel! An instant “looks great!” button in Blender if you ask me, at the low low cost of trippling your vertex count. Ouch. But yeah. The option is there, and I tend to use it a lot in 3D for a quick visual boost. Detail Example

Gradient Maps! Another great example of quickly adding appeal, this time with much less performance impact. One ~256px texture can contain enough gradients to map out an entire scene. These are great to simulate ambient occlusion, objects getting darker as they get closer to the ground. Slightly better for static objects or objects that maintain constant relationships to one another (eg. a character who has arms and legs always relating to the torso).

Detail Example

Color vibrance! And generally vibrant textures. Probably some memory constraints here as these textures are pretty hard to compress since there are so many different hues. I don’t see this solution often but it’s interesting to try. I love that color vibrance is less about saturation and more literally how much your color picker “vibrates” as you move around the plane.

Detail Example

Parting thoughts

Ultimately what counts is consistency and performance. There’s a toolbox of solutions for improving visuals of a level, it’s just a matter of picking the right set for the task at hand and project specifications given.

Designing game visuals is the best =)