In effort to vamp up my portfolio I decided to try and utilize my illustrations in a way Ive never experience before, and to start I began with game design. This was an entirely new territory for me, as Ive never coded anything or thought in this kind of manner before. I decided to approach this by making a "hyper chill" style mobile game for my first wack at the medium, thinking it would be simple enough I could actually do it as well as still be aesthetically appealing! You can play the game by clicking HERE!!

Colour Concepts

I began this project the same way I would approach doing an illustration. Taking a simple idea of things I enjoy drawing and doing a variety of colour concepts. Usually I do far more concepts than four but something about the second already felt like it was right. 

Pages

From the colour concepts I had to consider the different "pages" I wanted. Again since this was my first time coding anything in my entire life, I decided to keep it as simple as possible for  my own sake. The game would have three different pages: A home page with a title, the actual game page, and a game over page. 

Characters

Next up came the characters. I knew I wanted my characters to have movement and personality in the actual game, but again I wanted to keep it relatively simple for myself. I gave the main character a slight bounce, and every few animations he blinks. In addition to this the mushroom character also has a separate animation for when he dies, which will be featured later on. For our "enemy" of the game, I wanted to animate it as well to show the difference between it and the stars that you're supposed to collect. I decided on also doing a very slight bounce to the animation as well as adding a flame. Each of these was drawn frame by frame and then looped.

The Assets

From here I had to consider every asset I wanted my game to have, aside from the characters. I would need frames to animate the buttons I used, (one of which was not used in the actual game due to my inexperience), a title, a game over, objects to collect to increase the score, a life tracker, and of course a background. I hope as I become more experienced I will be able to add animated backgrounds to my games and more complex button navigation . Finally came the hard part of actually making the interface.

Home Page 

As mentioned previously I decided to have three different screens for my game. The first being the animated home page. This section houses  the game background and the "play" button. When hovered over the button shows a cover animation, and can be activated by either left clicking with the mouse or tapped when using mobile. It was important to me that this game be both mobile and desktop compatible, but this also made the coding more difficult as I had to optimize the code for both methods of control. Initially I had wanted to have music playing through the game, but  whenever I added it, the music got progressively more and more distorted as the game play lasted. While this was an interesting bug, it didn't fit the overall vibe for the game I was going for.

Game Play

Although very simple in it's idea, the gameplay aspect actually ended up being so much more work than I could have ever anticipated and was a huge learning curve. I wanted to have a point collection system that increased with each star that was collected, the enemy skull that took away life when collect, which also triggers an animation of flashing. In addition I wanted both interactions to have a collection sound (bell ding for the stars and a crashing for the skull), and it had to be controllable by both mouse, left and right keys, and touch screen. There were a lot of hidden coding things I never thought that would be so impactful (such as keeping the mushroom locked to screen visibility) 

Game Over

The final game play aspect was the game over sequence. When you collect three skulls and run out of life, the score counter stops, the mushroom animation changes to one of his demise, and a game over title appears. Initially I had wanted to include a play again and a home screen button here, but ultimately the multiple redirection codes was too detailed for my first attempt at game making. Despite this I am still happy with the outcome and the redirection to the home screen where you can then decide to play again. 

Using Format