Friday, January 13, 2017

Red-green complementary palettes in scenery

When I'm not sure what colour scheme to paint a scene in one of the nicest palettes to try is a "complementary" palette. This is what artists use to describe a colour scheme where the two main hues are directly opposite each other on the colour wheel:

Red green is one of the palettes I enjoy playing around with when I want to show a dramatic, fantastical scene. Both red and green are quite eerie to use as bold highlights, but both can also be used to show more natural things. Nature has plenty of examples of colours in this configuration that catch our eye - think of red flowers on a green bush.

These exceptional levels of contrast afforded by using directly opposite hues can be very powerful, but it can also be more subtle as well. Not all of the scenes I'll be looking at here are pure red or pure green - some of the greens verge into bluish, some reds are purplish or orangeish. Mainly, I wanted to look at a wide range of examples, to see how different uses of this idea vary in atmosphere, power and contrast.

One of the first examples that sprang into my mind was this section in Kyrandia 2. Red and green aren't the only hues present here, but they work extremely well at highlighting two different features simultaneously. The deep reds and orange highlights of the stream of lava mixed with the vivid green of the crystal features really gives an impression of having stumbled upon some forgotten place. It's a great moment in Zanthia's journey through this magical world, and stands out quite distinctly from the more naturally coloured parts of the game that came before.

Here's an example of a similar situation with a very different approach. Instead of the deep reds of the lava we saw before, here they're a blazing, fiery orange, with scorching yellow and white highlights, and the greenish bridge over it is a much more muted, desaturated grey-green, which stands out perfectly, but not as a feature. In the last scene, our green bridge was the highlight, here it's the lava that's the star of the piece.

Desaturating both colours gives an oppressive, musty feeling like this shot from Beneath a Steel Sky. The red gurney looks uninviting, and the drab green surrounds feel cold and creepy. Everything here looks old and dirty. It's repulsive, even before we get to the figures in the lockers.

The same game uses red and green to indicate new things, too. Here both highlight colours glow, the reds with rich saturation and the greens with harsh white highlights. The reds of the floor and greens of the walls are much more muted, and jump out much less at us than the highlight colours.

Similar glowing green highlights can be seen in this scene from Monkey Island 2, a powerful, harsh green that lights the trees and central structure in a very eerie way, helping to establish the feel of a mystic's dwelling. The reddish-brown building jumps out wonderfully from this green and grabs our attention, not only with hue, but being much deeper in value and saturation than the pale green. It's a great way of developing focus and leading the eye. A few small reddish brown features separate from the main structure in the form of torches on the left side of the image help to balance out the main focal point, too.

This scene from Gabriel Knight shows the roles reversed - here the red is the surrounding colour, feeling rich and aged, and also giving a great impression of somewhere dark and mystical. The green is the highlight feature, drawing our eyes to the crystal ball and firmly establishing what kind of area we're in. Similar to the torches in the last scene, a separate, less important green feature on the right side of the image helps to balance this strong green sitting in a sea of red. It's fascinating that two very similar locations can be given similar treatments with the colours completely reversed for quite similar effect.

Yet another scene with a similar treatment in The Lost Files of Sherlock Holmes: The Case of the Serrated Scalpel. Here the table takes a back seat, and the crystal ball itself is given a direct green treatment that catches the eye instantly, again with a green lamp off to the right that helps to balance such a strong hue in a sea of opposite hues. The reds here are quite purple in the shadowy areas, giving a rich, luxurious feel. This combination of red and green is excellent for establishing the feeling of a mystic's abode.

Another great example of a mysterious feel with just a few greenish highlights is this shot from Waxworks. Here the highlight colours are a rich teal, with greenish shadows that make them richer, and the reds vary between deep browns and oranges to pure red curtains that frame the shot. The use of the greenish blue highlights here really draw our attention to the points of interest. It's a great way of directing the player's eye to important elements very quickly, establishing a clear narrative in a very short space of time.

More greenish blues can be seen in this scene from Conquests of the Longbow - here the teal takes a back seat while the read becomes a rich highlight. Again we see red curtains, but here the teal is much less saturated next to the super-saturated reds. They help give the feeling of rich decoration, and the focus is mostly directed to the bed and the book with the use of value, rather than hue. It's a wonderfully rich scene.

Finally, this shot from Discworld shows red and blue together in a much more natural setting. The greens here are much more yellow than in our previous two examples, giving the impression of a warm, sunny day. The reds, despite being incredibly saturated, are quite low in value, helping them not feel like too much of a feature, while still highlighting what would, otherwise, be a rather drab, brown door.

I love these colour combinations, and I love seeing how different artists use complementary red-green palettes in different ways, and how it affects their work. It's fascinating to make direct comparisons like this and realize that even with a very specific colour idea, the results can be incredibly different. Complementary palettes are wonderfully bold in their contrast, and this is just one example of the results that can be achieved by using two opposite hues to render a scene.

Friday, January 6, 2017

The visual power of pure form

An exercise I've been doing for the last week, once per day, is to take a piece of background art from the classic LucasArts adventure game Full Throttle and to analyze it in some detail to try and figure out why it looks good. It's the game with my most favourite aesthetic, and the process of attempting to decode the visual language used in it has proven both very satisfactory, and very revelatory. I plan to compile them into a PDF once I've completed the exercise, and I'll post it here for your perusal.

For now, though, I want to focus on a single revelation it has provided me. In preparation for examining one of my favourite scenes, I took a quick look at the background before I started work for the day, just to give myself some time to think about it before I started trying to decipher it in further detail. What I noticed is that the silhouette of the structures in the image was incredibly complex and interesting, considering that what they represented was a fairly simple building, in terms of function. That brief study affected me so much that I spent the entire workday looking forward to tracing that silhouette in the evening, but even so, I wasn't prepared for how incredibly detailed and ornate the result would be. Here's what I ended up with:

It's a wonderfully coherent, yet intensely intricate series of shapes that combine to present a unique and memorable silhouette. As I sat studying the result, a thought emerged: "I'd probably recognize the game and scene that this building was from just by looking at the pure, flat silhouette." The building is, in a word, memorable.

Small thoughts led to another small thought: What other scenes in other adventure games are like this? From this thought developed a hypothesis: It is possible that one of the biggest factors in making a scene or location memorable is the pure form of the shapes within it, and the uniqueness, boldness, and distinctiveness of the silhouette they present, regardless of how they're coloured, textured and lit.

A tough hypothesis to prove, but a simple enough one to examine. I'll look at some scenes from other old games in an attempt to begin exploring the idea.

An easy starting point is the stone monkey head idol from The Secret of Monkey island. It's quite possible that much of the memorable nature of this scene lies in the expression, the rivulets of blood, and the fact that the colour scheme is very dark in an otherwise colourful section of the game. I think, though, that the main factor here is that we're presented with such a recognizable shape.

In terms of complexity, it doesn't compare to the previous scene, however it's probably even more striking because it represents something very easy for us to recognize. The fact that it's so easily identifiable, even without any details, makes this a much easier to remember structure than most of the other locations in the game.

In terms of presenting a single, identifiable silhouette this is probably a step in the other direction. There's no one standout shape here to make the scene easy to call to mind, however the combination of the various structures in this scene is so unique - from the ledge we start the game on, and that imposing structure across the gap, to the twisted, smoking stacks in the distance - that it still feels representative of the power of pure forms.

I feel that some of the power of this scene may stem from the angle of the camera, too, but I'd also suggest that the angle of the camera is a method of dictating how the forms we're represented are translated to the viewer, making this a deciding aspect in the end appearance. If the angle from our Full Throttle scene had been changed to one point perspective, we'd be looking at a very different combination of shapes.

To step into a different genre entirely, here's a look at a screenshot from Blade Warrior. The intensity of detail in these pure silhouettes is breathtakingly powerful - trying to suggest this much detail while also having them lit and coloured would result it a much messier image, with many of the finer details being less noticeable. Because of the high contrast of the pure black over the bright sky, we are able to discern every intricate part of the form.

Because of this, the game is strikingly memorable in appearance. Our mind is very willing to jump in and fill the gaps that a lack of texture and colour leave, telling us very quickly what it is we're looking at.

When it comes to iconic shapes, this tree from the beginning of Loom is a great example. This shape could be drawn in any colour, detailed with any texture and lit in any way and I'm quite positive people would recognize where it's from.

To me, this is one of the most powerful examples of the evocative power of a single, unique design - mention Loom to anybody, and it's a safe bet to suggest they'll think back to this scene and this tree.

Similarly, mention Another World (or Out of This World) to anybody who is familiar with it, and it's highly likely that their mind will think back to this scene. Though the forms aren't quite as distinct as in the previous example, they're still iconic enough to be instantly emblematic of the game.

This is a special case, too, because here we see an example in which the form of a creature is almost as memorable as the location. That shadowy beast, watching ominously from atop a rock, doesn't need any details to be an intimidating presence - its power and its menace are communicated wonderfully via a flat silhouette. The stance speaks volumes about the creature's nature, and its intent, and is another great example of a powerful, memorable shape.

The incredibly simple image shown here in Mindfighter is another great example of effective silhouettes in both scenery and figure. We don't need any colours or textures to see that this is a ruined city, to feel the crumbling walls and ruined homes. A few quite simple, thoughtfully arranged shapes convey all the detail we need to form the full picture in our minds.

The figure atop his mound also conveys a story to us. His stance suggests his character, his frame of mind. We need little more than these few tiny pixels, arranged in this very specific way, to begin forming opinions on his character. Further detail is not really necessary.

It should remain important to remember, though, that details don't discount the strength of a silhouette. This wrecked alien ship from The Dig may be rendered in much more detail, but that doesn't change the fact that it's the pure silhouette of the form that conveys the most interest. The texture and lighting here is mostly just slight enhancement.

What makes this scene truly memorable and recognizable are the unique forms, those elevated structures jutting up on columns above a fairly ordinary spaceship hull. They suggest advanced technology, bring to mind classic works of science fiction, and make us wonder about the sort of people that would construct such a vehicle, just by presenting us with a distinctive form.

It's not just alien shapes that can be made evocative, though, as this shot from Gateway suggests. Here we see a very ordinary group of aquatic plants, but combined in a way that makes them interesting and memorable. Sometimes it's more about how ordinary structures are arranged and placed together that makes a silhouette recognizable and interesting, rather than the structures themselves being particularly unique.

Here, too, we see the angle of the camera playing a large part in how the shapes read, much like the earlier shot from Beneath a Steel Sky. Taken from above the surface, the forms we see here would be much more everyday, less unique, but taken from this angle, we have a wonderfully unforgettable set of forms.

A decent example of how unique form can stand out is this scene from King's Quest V - here we see many trees, but our eyes go instantly to that gnarled, twisted tree that's central to the scene. With this interesting, dynamic shape in the shot, the other trees become little more than window dressing - their absence would be felt, but their presence is hardly noticeable.

By juxtaposing fairly standard shapes with a very unique one, the artist leads our eye to where they want us to look. Some of this is also due to placement, framing, and lighting, but the strongest element here is still that odd, interesting silhouette.

But even when it's not a central placement, interesting forms have their place. The great combination of rocks and odd plant here are great, and quite memorable, even with the most interesting part of the plant being cut off. We don't need to see it all to understand the form of the rest of it, there's just enough of the shape left in the shot that we can understand what makes it interesting.

Combining the various small structures of rocks in such an interesting, curving composition creates a superstructure greater than the sum of its parts, that catches and interests our eye. It's not necessarily the presence of a unique structure that does it, but the combination of smaller structures in an interesting way.

And that brings me back to our Full Throttle scene. There's no one shape in here that's particularly unique or distinctive, it's more the combination of various assorted structures into a single superstructure that - with the camera placed just so, and the elements arranged just like this - is bold, memorable and dynamic.

The colours and textures here certainly help to make the scene evocative and memorable, suggesting various small details such as a wall patched up with spare scrap and a hole in the roof where the light hits a water tank, but for me the real star of the show here is the form, the overall shape. And it makes sense, we're use to dealing with symbols and icons, simplified representations that convey important information to us. Recognizing things just from their shape alone is important to us in daily life.

I think there's a lot of power in these shapes. After thinking about this one building, I've been working harder to ensure the silhouettes present in my own artistic work are more interesting, more dynamic, and the results already have me confident that paying attention to these will improve my work. It's easy to focus heavily on lighting, on textures, on trying to balance colours, but we shouldn't lose sight of the foundation upon which all of these things sit: the pure forms we're working from. That's an incredibly important step, and one that will help take an image to the next level.

Monday, August 22, 2016

How my approach to perspective has changed

It's interesting to me to think of how my approach to perspective when painting scenery has changed so much over the past few years. When I first started making background art for games I largely ignored the use of consistent, fixed vanishing points; instead, I relied on simple atmospheric perspective (the act of painting things off in the distance closer to the colour of the atmosphere to show that there was more atmosphere between those objects and our eyes than things closer to us) to show distance, and loosely approximated architecture with what seemed about right to my eye.

The result was often quite wonky - mostly something I embraced quite happily. You can see below that the foreground objects and the background objects go off to very different vanishing points - something that doesn't matter too much here, as things in the world aren't always aligned neatly to perfect grids, but it also doesn't have a great deal of depth beyond atmospheric perspective, and therefore mostly exists on 4 layers - sky, buildings, fence and playable area.

This worked fine in Blackwell Epiphany; the perspective is pretty loose, but most of the scenes are simple and flat enough that it doesn't matter too much. It gave the added bonus of allowing me to do doors and furniture at any height and angle that I felt like, more or less, meaning I rarely had to worry about scaling. I could mostly just eyeball the angles and get it pretty close.

When I started working on Technobabylon after that project, though, things got changed up quite a bit. No longer was I able to freehand my lines and architecture; James would provide me with simple blank 3D models of the scenes he wanted, rather than rough sketches, and I painted over these to give him the exact shot he was after. Because these 3D models had perfectly rigid perspective, my wonky perspective stood out quite a lot, and I had to quickly adapt my methods to pay more attention to vanishing points.

This was the first scene I did over a 3D backdrop and you can see some of the issues - most notably the seam in the left hand pillar shoots up too high as it recedes from the viewer's eye, and the foreshortening on the black line I painted on the trunk of the car is terribly off. Foreshortening still gives me trouble, unless I measure it very carefully, and I only know how to measure it for very specific circumstances. Getting better at it is something I'm aiming for. The cityscape in the distance was also eyeballed, and the perspective is all over the place there. I wasn't worried about it being consistent at this point, just concerned with making it look good, and you can see that it doesn't match - I didn't even really think to try making it match the foreground perspective, let alone making it internally consistent.

Here's an example of how a scene looked in the original 3D model James gave me and how it ended up after I painted over it. The strong perspective and foreshortening really allowed us to show depth in the scenes in a way I'd never been able to get with my loose approach. It taught me that here was a tool for adding distance, beyond the easily implied, this gave a much more solid, definite feeling of depth.

We still had to cheat perspective a little bit, though, to make some interesting ideas happen. James wanted to have a tall, vertically scrolling room with racks of mechanical, humanoid skeletons in the background, and two flights of stairs to descend. In order to allow the character to walk on the walkways, we had to duplicate the same architecture without altering the angle - that is, one is copied and pasted above the other without any alteration in perspective. When viewed as a complete image, it's quite clear that the two don't go to the same vanishing point, and the stairs stand out quite a lot, as they change and suddenly meet a walkway that doesn't match them. however the scene is given an additional sense of depth by means of having several layers of objects that all scroll in parallax. I think this helped to sell the illusion a decent amount.

I found painting over 3D models like this quite challenging, but I also found it taught me new things.

Shardlight was a very different project - unlike the closed interiors that make up a lot of Epiphany and Technobabylon, this was a project in which we wanted to show vast areas. Not only did I have quite a few scrolling scenes to paint, but I also had to try and show a lot of scenery in one shot.

For these reasons, I largely chose 2 point perspective. Two point perspective helped me a lot with scrolling scenes; because the angles at which objects recede into the distance are less harsh, it allowed me to show angles and distances on these wide shots without having to keep everything on a foreground plane. The scene can wander off into the distance in multiple parts, which helps show a lot of the world in a single shot, too.

The bazaar scene is one example of a location where we wanted to make it feel like a big world, and where 2 point perspective helped. Rather than the very tight, confined street corners I'd painted in the past, such as the very first scene in Blackwell Epiphany, here I could show the perpendicular streets both going off into the distance and the various stalls that lined them without relying on having a flat area for one of the streets as I'd normally do in 1 point perspective. I like playing with how much perceived depth this can add to a scene, more than the more flat, convenient appearance of a street whose horizontal plane aligns with ours.

This alley scene is a nice example of how I learned to use this type of view to add depth. The overhanging section of the structure helped me to take a flat side of a building and bring it not only out, but over part of the scene, showing another plane that I normally wouldn't show in this sort of view. Doing this also works in 1 point perspective, but not quite as well, here you get the full illusion of a 3D image.

One fun part of Shardlight was this vision sequence, for which I ignored perspective grids completely. One thing that I find with using perspective that goes off to a point is that it feels very rigid, and it was fun to abandon that completely for these scenes and paint by eye once more. This is closer to my approach from before working on Blackwell Epiphany than most things I've painted for Wadjet Eye, and felt like a chance to allow my imagination to run free.

Using two points of perspective helped in this cathedral shot, too, one that was designed to begin at the top and scroll down, establishing the height of the structure. Francisco originally asked me to do this in 3 point perspective, but I felt it'd be stronger with just two; one at the top and one at the bottom, and I thought that doing 3 point perspective in such a large scene with such a complex structure would be a lot of work for me. I stuck to just 2 points, focusing on a fairly symmetrical look, broken up by the chaos of the destruction and repair of it. It was cool to try this sort of shot, and a bit intimidating - which means it was also educational.

Interestingly, the first few scenes I painted for Shardlight were done before I worked on Technobabylon, and you can see that they're painted in the looser, eyeballed style of my older work:

Things have changed once again now that I've been working on Unavowed. The change to 640x360 resolution meant that I was nervous - I was out of my comfort zone again, trying to learn how to paint things at twice the resolution that I'm accustomed to. I decided that trying to manage the more complex forms that two vanishing points require would be an extra burden that I didn't want, and so decided to stick with 1 point perspective once more - something aided by the fact that I'd mostly be drawing interiors and city streets.

One of the tricks that I tried to give more illusion of depth to this scene was to focus on very 3 dimensional forms in the structure of the ceiling supports, solid, thick shapes that help to establish an impression of distance and width. The fact that this area in my scenes is usually not where players will be wanting to examine things or be able to move means I can be more liberal with experiments like this, and I like the effect it gives here. I'd like to try this sort of thing more, and I'd like to learn to get foreshortening measured out more accurately so I don't try to eyeball it and get it wrong as I did here.

Something I've noticed in Unavowed - whether it's because we have more characters that can move around than ever before, or because of the higher resolution, or because I think about perspective more, or because I'm using so much 1 point perspective, or some combination of these things - is that characters go out of scale and proportion a lot. Doors end up looking enormous, characters end up looking tiny when they're placed closer to the foreground, and the sizes of things look inconsistent as a result.

The only way I can think to fix this offhand is to have either very, very careful character scaling, or to lift my horizon lines much higher, meaning the characters walking into the foreground can never get quite so close to the player's "eye" into the world. This worked well in Beneath a Steel Sky, for example, but my instincts and the various things I've read lead me to believe that painting with the horizon line closer to eye level, as I mostly do, is more immersive; providing that characters don't break scaling so much. It's another problem to solve and think about, and it's something that we've done for years, but now it looks worse to me that it did in the past.

One last thing to mention for now is that while most of my scenes with 1 point perspective have the point very close to the horizontal centre, sometimes I like to change it up by pushing it over to one side. I really like the effect that it gives, especially on a street corner like the scene shown about, where it's quite evocative to have the far distance implied just beyond the edge of the building there. I'd like to do this sort of thing more.

When I look back at how my approach to perspective has changed over the past few years (the screenshot above was painted about 4 years ago, and has no sense of consistent perspective at all) it's quite fun to see how tight perspective has grounded my scenery more in reality. I still have a lot to learn, and I've started to step back from the rather rigid perspective I use now a little and see what results I get after a couple of years of painting quite stiffly along grids. There are some avenues I want to investigate further, and no doubt plenty of things I have yet to learn.

Perspective is one of the fundamental elements to consider when creating 2D backdrops, and it's something I now like to pay close attention to after ignoring it for years. Perhaps in another year's time I'll have more thoughts and knowledge about it.

This post has the word 'perspective' in it 32 times, including the title and this footnote. I'm aware that's far too many. My apologies.

Saturday, August 20, 2016


I haven't written a post on here for a long time.

The comments were full of spam, the links were dead or dying and there were malware warnings everywhere. I thought about starting a whole new blog, but I like this old thing, so I've sent the old posts back into draft format to hide the dead links and spam, and am writing an update here for the first time in over 3 years.

This blog was started as a place to put my ideas about game design and game art, and updates on my projects. Things have changed a lot since I started this blog; they've changed a lot since I last posted here, even. I quit my day job after Dave and Janet of Wadjet Eye Games asked me to join them as a full time artist and animator, after several years of working part time with them, and I've been making games with them in this capacity since.

It's been fun, challenging, educational and rewarding. These are some of the projects we've done together:

We finished Blackwell Epiphany; the first Wadjet Eye game I did both background and character art for, and the final entry in the Blackwell series. Easily the game I had made the most art for at that point. I began the project uncertain of how well I'd be able to manage working on a game of that scope, I emerged from the project confident that I could easily handle doing that much art for a game.

We worked with James Dearden to turn his Technobabylon games into a fully fleshed out story. I'd loved the freeware games he'd put out, and was keen to help him turn them into something bigger. The project saw me having to learn a number of things, including how to paint scenery using 3D models as a basis.

We worked with Francisco Gonzalez to realize Shardlight - a game he and I had been piecing together slowly in bits for several years. It has the distinction of being, most likely, the last game I'll ever make at 320x200 resolution, and is therefore probably the pinnacle of what I could achieve in this many pixels.

We started Unavowed - Dave's next project after finishing the Blackwell series. After discussing it for some time, we agreed to try working at 640x360 resolution; still sticking to the pixelly graphics that Wadjet Eye is known for, and that I cut my teeth on, but now with a bit more clarity. This project is my main focus at the moment, among other things such as helping with ports and various miscellaneous art assets for things, and it's shaping up to be the biggest project we've ever tackled.

I used to focus on short games, refining my skills and working for a few months at a time on each thing, before releasing it and moving on. It's nice to now be working on more expansive projects; they take longer, but they feel like what I've been working myself up to for years. I want to discuss making them some more, and share some of the things I've learned, am learning, and hope to learn, and that's why I've refreshed this site.

I hope you'll enjoy reading along.