The Darkside and the Light – The Anatomy of a Room in Mayhem In Single Valley

Original Blog Post

Light/shadow lands differently on Jack than on the floor

Arranging Layers

Rooms in Mayhem In Single Valley (download demo for Win, Mac, Linux) are made up of many separate images (sprites). A sorting script organizes the order in which the sprites are layered within a room, that is, whether a sprite should appear in front of or behind another sprite even as characters, items, and furniture move about in a scene. Items that sit on top of or lie beneath furniture, such as vases and lost socks, are also taken into account as the script arranges layers on screen.

While keeping sprites separate allows us to easily move them around in a room when designing a level, it also, with the use of additional scripts, allows for an increased amount of in-game interactivity. For example, the player can pull a bed around Jack's bedroom or pick up Jack's college acceptance letter from a kitchen table. Neither of these tasks would be possible if rooms, their items and furniture, were made from just a single image. Basically, keeping sprites separate allows for greater flexibility with regard to both visual design and level design.

Sprite layers in a room including shadow/lighting layers

Lighting

Mayhem In Single Valley uses specially designed stencil shaders with hand-drawn image files to apply different shadow information on top of different sprites based on a reference number. This means, for example, that different shadow information can be applied to the main character than to background imagery, or any other item in the game for that matter. This allows for a degree of handcrafted creativity when designing lighting for the game.

The shadow files alter the colour of the sprites they cover in a rich and natural way using a multiplicative blending technique. The color and opacity of the shadows (how transparent they appear) can be animated in game.

Dynamic lighting with colour and opacity changes

The shadow information applied to a sprite can also be switched in real-time simply by swapping its shadow image file. This switching technique allows the player to turn on and off specific lights within a room. For example, the player/Jack can switch lamps, night-lights, and even the family television on or off within Jack's house.

An example of all of these effects can be seen in action in Jack's garden. The cloud shadows in the garden grow and shrink in size (the switching technique), move across the environment based on wind strength and wind direction, and change color and vary in opacity based on the time of day.

All lighting/shadow effects are used in Jack's garden

In addition, upright objects, such as the tree house in the garden, receive an offset version of the cloud shadows. This mimics how shadows/light pass differently over raised objects than over flat surfaces, albeit in a 2D fashion. In fact, when Jack is lit from in front by any of the windows in the house, he receives different lighting information than the floor does. Again, this makes Jack pop out and adds a quais-3D effect to the "flat" 2D imagery.

Sprites can also cast shadows and once again a degree of artistry can be used in how, when, and where a shadow is cast. For example, Jack casts a shadow in the bedroom when backlit by the bedside lamp but does not cast a shadow when lit from in front by the bedroom window. This is only made possible through the creative use of multiple stencils and would not be achievable using a simple overlay of a shadow image on top of the entire scene.

Mayhem In Single Valley's shadow system can be exploited to create pools of light and/or luminescent sprites too. The electricity/lightning sprite in the garden appears to glow in comparison to the sprites that have shadows applied to them. At the base of the electricity is a reversed example of the shadow effect where a small oval shape cuts through all of the shadows in the garden scene and acts as a pool of torchlight or like a spotlight in the scene.

This shadow/lighting system of revealing information using stencils will also be exploited to create puzzle elements where special sprites (e.g. a table) may receive tailored shadow information that contains a hidden code or visual clue. The item or piece of furniture would need to be dragged across a room in order to read the hidden code within it's shadow layer.

One of three shadow images used for Jack's parent's bedroom

Ok, lighting a 2D scene using stencils is a bit counter intuitive and can get complex quickly, but the advantage is that you can apply different shadow information to different sprites, switch the shadow information on the fly in game, animate and/or change various parameters of the shadows such as their opacity and colour. As a bonus, you can reverse the process to create patches of light that can cut through all shadow layers making it a dynamic solution for handcrafted lighting in sprite-based 2D games. As in cinema, especially film noir, to be able to handcraft the lighting in a game allows the designer to create more expressive and functional lighting solutions for the task at hand.

Download demo for Win, Mac, Linux