I remade my debut game You Are Not a Banana from the ground up and released it just in time for the Steam Summer Sale. The Better Edition features improvements and updates based on the player feedback it received. This article provides an overview of some of the new features, tips on the dev process, and links to handy tools/plugins.

I may have gone against conventional wisdom when I decided to revisit and re-release my first game You Are Not a Banana. Many articles advise devs to move on to their next project as soon as completing their first. I too followed this advice and moved on to create the Mayhem in Single Valley Demo. However, while waiting on funding decisions I decided to update You Are Not A Banana to the new "engine", which had been designed for Mayhem In Single Valley (Note to self: I got to work on shorter game titles).

Over the past few months I've been developing both games in tandem - one informing the other. Again, I think another game dev ‘best practice’ rule broken. I would create a feature or code improvement in one game, and if relevant, jump straight to the other game and add a tailored version of it there too. The You Are Not A Banana: Better Edition remake took me about four months of solid work to complete.

For the Better Edition I really tried to address all the feedback, reviews, and comments I had received and to include more of what players liked. I will add further improvements and content over time, such as a speed run and treasure hunt mode, and two fun mini games.

Below is an overview of some of the new features and improvements in the new build, with tips on the dev process, and links to handy tools/plugins.

WHAT WAS INVOLVED IN CREATING YOU ARE NOT A BANANA: BETTER EDITION FEATURES

Coding

I rebuilt the entire game from the ground up, converting all of the code from Unity script to C# with the aid of CSharpatron. Converting the code also allowed me clean up and improve upon the old code based on what I had learned making Mayhem In Single Valley.

UI & UX Improvements

I decided to add autosaving, manual saving, and instant checkpoint loading. Players were rightly frustrated by not being able to save the game at any point. Implementing this feature was one of the more tricky and time-consuming aspects to solve and required a lot of case sensitive coding and play testing.

I revamped menus and UI (e.g. separate music and sfx volume controls). In general, I aimed to give the player as many options as possible while keeping the menus simple, intuitive, and to a minimum.

Audio

I moved all the sound from the old FMOD Designer to FMOD Studio. At the time coupling FMOD to Unity was pretty tricky and documentation was poor. But how time flies in the tech world. For the Better Edition I was able to use FMOD's Unity Itegration plugin which really stabilized the sound when compared to the sometimes buggy audio of the first version of You Are Not A Banana.

Movement and Speed

Many players felt that movements in the original version were a bit slow and clunky. To avoid walking simulator syndrome I added a run feature and speeded up most of the game animations. I moved all of the movements from time based to physics/forces based movements. This gave the main character a bit of inertia (smoother stops and starts), added a sense of weight, and gave a more fluid feel to controller input.

Graphics

I incorporated a new dynamic lighting system which allowed me to change the mood of the original 2D environments dramatically. Now the weather brightens/darkens to reflect the mood of a scene.

I also colour coded scenes. For example, the scary neighbour’s apartment, with the boarded up windows, is lit in a deep and foreboding red.

On a more technical level, I made all outdoor assets widescreen (16:9) and added a customized version of a retro AA filter to remove jaggies and shimmering.

Although the new engine allows for various screen ratios, adaptive menu, and so on, this proved problematic with regards to level design, especial for mini games. For example, in the bike chase mini game a player with a wide screen would have a larger preview of oncoming traffic than a player on a narrow screen.

So I decided to fix the aspect ration to 16:9 using the Aspect Ratio Enforcer script by Eric Haines. While it uses letter boxing (black bars top and bottom of screen) it allowed me to compose the look of a scene with accuracy and to make the mini-games function the same way on any screen size. As a bonus, the black bars give the pixel art a big budget movie production feel.

Animations

Since making the original edition I discovered Aesprite. I highly recommend this pixel art drawing and animation package to anyone working with sprite sheets and Unity. In Aesprite, you can add tags to animations and by using Stephan Hövelbrinks' Aesprite to Unity plugin I was vastly able to speed up the pixel art to Unity workflow. In general, Stephan's plugin converts animation tags in Aesprite to create fully labeled sprite sheets, animation controllers, and animation nodes in Unity.

Gameplay

As the game has a bit of a random exploration vibe I decided to include lots of secrets and hidden story events. It became apparent that such events were perfectly suited to, and could run in parallel with, Steam Achievements. The most obscure achievement is the Death By Freeform Jazz achievement. A great local programmer (thanks Andrew Perrault) volunteered to help me incorporate 25 achievements using Steamworks.NET as time was running out to get the Better Edition released for the Steam Summer Sale.

I also added improved signposting. One level where you searched an infinitely large graveyard for a magic grave using sound, in an auditory version of hot and cold, cause a lot of frustration. I added clauses that would initiate a pointer if the player wandered too far off the beaten track. The point direction randomly fluctuates so as not to reveal the exact location of the grave. It also fades away once the player gets back to the edge of the auditory hot and cold game. I was aiming to remain a purist about how the audio functions, but a combination of visual and auditory clues seems to work best in subtly directing the player’s actions.

Jokes

The game also has 50% funnier jokes. Don't believe me? Why not check out You Are Not a Banana: Better Edition on Steam for yourself!

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.