Before graduating from my university course I had been in contact with a start-up company called Zapcoder. After an initial interview I began attending work experience with the group at Entrepreneurial Spark Scotland. The company specialises in Web and App development with past collaborations with RBS and Irn-Bru. My work experience would be to assist with and learn from the development of game apps.

 

Before getting to the games let's also overview other projects I was invoved with. Firstly there was the new version of the company logo to be used on the formal website and buisiness cards.

Working with Zapcoder I was also able to revisit website design as the company was creating it's own proffessional folio site. For this I made some assets to be used on the site and worked with the head programmer there to put together some drafts on Photoshop of how we wanted the site to look.

These were a set of simple vectors of the sorts of screen devices people use to access the web. This would symbolise how Zapcoder application could work across platforms.

Initial webpage design with earlier icon as well. More on the characters later.

The initial idea for this webpage would be to have an app playing live on the webpage that showed the same game being plays across all the screens, constantly updating.

Based on feedback from my boss (Roger) I changed the layout to have a more streamlined look to the range of screens and thus changed the page to only show Apple screens. 

It was an idea from my collegues that we could have caricatures of the company members to represent us on the site and potential future apps. I first took the idea to paper before. Creating vector iterations on illustrator based on photographs

Moving on to game making experience. My experience at Zapcoder allowed me to spend time observing and assisting wherever possible with the creative process of game-making from the groups lead game programmer, Cameron. Amongst their proffessionally hired projects I was fortunate enough to be involved with the making of the Cashflow game for Money Advice Scotland.

 

The game would be a sliding puzzle and while tryin to learn what I could from Cameron in terms of the programming my main tasks where in asset creation. I made the background to be shown during gameplay as well as well as some UI elements and tiles to be used in the puzzles.

This was a game that had been requested and in development before I joined the company. The initial game had much of its core sliding mechanic already in place and had a pretty complete look to it. Still as this game was shown in demos to the client, constant changes to the aesthetic were requested.

The first request for changes was to drop the thick outlines. Which Cameron did.

So after this, the client asked for a water factory feel with a cold aesthetic. So in order to use that setting I first needed to change the assets that were currently used to a new colour. There were also some UI elements that were created at this point to match the industrial motif.

So this is the intial background I put together on adobe Illustrator

This darker alteration was after we view the background in combination with the other assets. It was important that the background complemented the tones of the new pipes and panels, so I darkened the elements in order to help it stand out better.

This is another version with a little more colorful as requested by the client.

The layout had also been shifted quite a bit since the beginning to help complement the game screen better. This last version is the one used in the game.

Most recently I was given the freedom to design a fresh new game that could be recycled mechanically into another Zap game for the site. This would be an opportunity to work more than I had prior with the Phaser game engine. It was through this project that I hoped to learn the ins and outs with creating an interactive app in this fashion.

 

Purpose is very important when going about the base design of a game for me, especially when it comes to the core mechanic of the experience. Knowing that I intended this game to be played across platforms including smart phones, I wanted to control as simply as possible. It was then while thinking of simple ways to move around I came up with a 4 directional means of controlling a character around a 2D space with teleportation.

Possible character designs for main character. I knew that the game was going to look simple but I like to start with detailed doodles as these sorts of images can still work as cover art.

Going off from my sketches and game concepts I felt that a vector styled main character in a space suit could contextualise the teleporting mechanic. There are initially 3 frames of animation for each teleport

In order to create a more believable disappearing effect, I added distorted frames frames with Photoshop. This animation would be combined with script that would give him a constant hovering effect. This is also the color scheme of the character used in the game. The second player thus far has a pink and red colour scheme. (See video of gameplay below.)