Fluxscopic Ltd.http://fluxscopic.com
Life is Made of PixelsMon, 07 May 2018 00:15:37 +0000en-CAhourly1https://wordpress.org/?v=4.9.8FluxscopicLtdDevBloghttps://feedburner.google.comCreating You Are Not A Banana: Better Editionhttp://fluxscopic.com/dev-blog/creating-you-are-not-a-banana-better-edition/
http://fluxscopic.com/dev-blog/creating-you-are-not-a-banana-better-edition/#respondWed, 05 Jul 2017 18:25:48 +0000http://fluxscopic.com/?p=1399

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

]]>http://fluxscopic.com/dev-blog/creating-you-are-not-a-banana-better-edition/feed/0The Darkside and the Light – The Anatomy of a Room in Mayhem In Single Valleyhttp://fluxscopic.com/dev-blog/the-darkside-and-the-light-the-anatomy-of-a-room-in-mayhem-in-single-valley/
http://fluxscopic.com/dev-blog/the-darkside-and-the-light-the-anatomy-of-a-room-in-mayhem-in-single-valley/#respondThu, 12 May 2016 17:13:36 +0000http://fluxscopic.com/?p=1171

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.

Backstory

Before I discuss where I'm at today, I'd like to talk about You Are Not A Banana and how Fluxscopic Ltd. came into being. Like Tale of Tales developers Auriea Harvey and Michaël Samyn I also have an interest in art, well at least the idea of creating meaningful socially challenging videogames. I also have a love for movies like Verhoveen's Robocop, Star Wars, and videogames such as the Last of Us and Journey. I've been playing videogames since I was about four and I have vivid memories of playing Yar's Revenge feeling that I was lost in some kind of alternative universe. I hung out in videogames arcades in the 80s and 90s and enjoyed the kinetic energy of games like Splatter House and Mortal Kombat, and the thrill of knowing that I was too young to be playing them. I also enjoyed silly/absurd games like ToeJam and Earl, and Bubble Bobble, and TV shows of the time such as Vic Reeves Big Night Out and Twin Peaks. These forms of entertainment quickly became part of how my friends and I connected.

When I made You Are Not a Banana I wanted to combine what excited me about my videogames past with a more modern take on life. The infinite graveyard puzzle and the randomly placed bag bomb in You Are Not a Banana can be seen as examples of this approach. Because it was my first game and more of an experiment than anything else, I never intended to publish it or submit the game for review. In fact, with You Are Not A Banana I was trying to be cheeky and to caricature the insatiable appetite of gamers/consumers today (including myself, I play COD too). For example, instead of saving a princess, you buy milk. Instead of high drama, the main character remains unmoved/unsatisfied by the increasingly sensational situations he finds himself in.

After I discovered short indie games like The Stanley Parable and Thirty Flights of Loving I decided to put my game on Desura. I later put the game on Steam Greenlight. Although the game received mixed reactions, the YouTube playthroughs, comments, and player feedback it received was beyond what I expected. Even some indie games journalists gave the game kind and constructive reviews. What stood out was how much the gaming community was willing to engage with the game. I had created experimental animation projects in the past but they never received the same attention by as varied a community. The ability to watch players' reactions on YouTube was an entirely new way to receive feedback. Seeing what worked and what didn't as somebody played was the equivalent of being able to step inside someone's head as they contemplate a painting. There is a 'playing games with my big bother back in the day vibe' to the let's play video scene.

Funding And Development

You Are Not A Banana was on Steam Greenlight for about a year, not great in terms of momentum, but it eventually got enough votes (or Steam felt sorry for me). Again I was surprised by the support the game received by YouTubers such as Nilsey (The Yogcast) who promoted the game on their channels. During this time I was exploring work opportunities. I wasn't sure if it was possible to pursue making videogames any further but looked into funding possibilities regardless. I applied to Canada Media Fund's experimental stream as it seemed like a good fit. While the paperwork was involved the possibility of creating something more substantial was enticing. In order to receive the development fund it was necessary to incorporate as a business. Again the thought of making a game that could give as much joy to gamers today as I got growing up was all the motivation I needed.

My CMF application was successful. I partly developed my new game based on feedback from You Are Not A Banana. During development I asked myself if I were to create You Are Not A Banana with the benefit of hindsight, time, and a budget, what would I make? The answer was to build a highly dynamic game world with a strong narrative. While Mayhem In Single Valley retains the humorous philosophical elements of YNB it is a completely new game built from the ground up and has many new features and improvements. Nothing from You Are Not A Banana has been reused for Mayhem In Single Valley. The CMF fund allowed me to hire local programmers to create a more robust framework by building the game from the ground up. Their work has given the game a fully functional save option, an inventory system, options menus, and allowed for a more modular approach to adding levels, interactions, and cut scenes. To whet your appetite I have added an animation below... or above? Who knows with responsive media!