Climby Cat

Project Plan

Simple Addicting Game

Games that I used for inspiration are small addicting games such as Doodle Jump, piano tiles agar.io, swing copters and flappy bird. Simple goal, basic controls and it keeps you coming back for more.

Flappy Bird

Flappy Bird is a 2D game where you have to fly through pipes by tapping the screen to make the bird fly upward, each pipe gives the player 1 point, If the player hits a pipe or the ground the game is over. What I like about this game is the difficulty, getting through a pipe is not easy as you can just barely fit through but once you get a rally going it’s feels satisfying, simple yet very hard game but really fun.

j-LRPN24xwhcfU98xpDfBtCxDauLBWJLRgFEe1kf9SeqkJ9tH1ETRUwvp9sfj0zrXFTulro4FqPCS2ZOgFbCbZ0U43vlUJkvSLwtDwwDxA_bgH1hsASg8-nwveIW0qUlZMWgj6-L

Swing Copters

Swing Copters is a 2D game where the objective is to pass through the gaps without touching the sides or the obstacles, the controls are easy to learn because it’s just one tap to move your character left or right. The addicting thing about this game is its difficulty because the character moves rapidly so timing is key to master the controls, and once you do it, it’s a good feeling.

gkL6F1_qu1eAFN5wbU3I_KakLDnyQONFRSLuxLVqsNOUpe-Un4fKT-VXsWFDRHsa2MuwlsPmf5UCrI0ZGIUNukw9L24YCYShqUepIwBOb4dyho4bRFKoWmBOaxSknFU8UwsHf4YM

 

Agar.io

Agar.io is a multiplayer game where the player controls a cell and the objective is to eat the cells smaller than you, the more cells you eat the bigger you get so the goal is to be the biggest cell in the game without being eaten by other cells, once you are eaten it’s game over and go back to being a small cell. The game has a few game modes like free for all and team death match. Their are some game play elements such as being able to dividing into multiple cells by the press of the space bar to get launch themselves to other players to eat them or to escape an attack from another player, split cells can eventually merge back into one cell. The player can also release a small fraction of cells to feed other players an action used to help a teammate. There are green spiky circles that split larger cells once touched they split into as many cells as they can depending on their size which could leave the player open for another player to eat them. The addicting thing about this game is that it’s a very simple game  gives freedom to develop your own strategies along with making them work.

-Vrx3jny6lGYm1RoGPUWsR6JrLddiBPdWyj-a6MogzoFh90xDcAQmthcoHvGi4VVyROp0mLSlA_FRSCkMeO4BXuFdhJ58Bu6TxrKZ5XNxqYuVN4PscSwRSGM5OX1vEvA6P-gWM3j

 

Piano Tiles

Piano tiles has simple graphics just a black and white rectangles, the objective to tap the black tiles while avoid tapping the white tiles, if the player taps a white tile the game is over. There are many game modes such as rush mode where it starts off slow but then it gradually gets faster and faster, another game mode is zen where the player has to tap as many black tiles as they can before the time runs out. Theirs many more game modes to keep things interesting. The addicting thing about this game is the difficulty, it’s harder than it looks but keeps the player coming back with its fast paced gameplay, great difficulty and multiple game modes.

v5uuDfDmKYry3v_mlqRA17JALyhU-hnalqlGFbpxYNV6cXZzZ4GoEY1d21cj3vW61lnh_ZnaTs5UJcZXJCUwjlf219yP_uMSf0aSisewq5IO-ZW5CJBoASEL1rvfuprTayiywEBJ

 

 

Doodle Jump

Doodle Jump  is a game where you have to guide the player up a never ending series of platforms with falling, the higher the player goes the more points they get. Players can get a short boost from various objects such as springs, jet packs, trampolines to name a few. There are also monsters in the game that either have to be avoided or bounced on. Other things that cause a game over include black holes, UFO’s or jumping into a monster. The controls to the game is dragging the  mouse to control the character. Player can only move left and right. The addicting thing about this game is that it’s an easy game to get into with its simple control and adrenaline rush game play. A fun little game, simple and addicting.

U0m2zfjeIleSaZc5aqq5U87VsDo7mfr0UBPmFYbKerjwQRRCDcVem6xBet3grS7lNYS97WqmwDcrL1L-j-STm03NEpgCwdRbid684NRp4_6kkQAII06052dxWJ5JEiDB76ZOI7Fq

I would like to make a small 2D game that’s so simple yet so addicting and with the amount of games out their that accomplish this its going to challenging trying to come up with something original and that’s what drives me to achieve this.

Its going to contain:

  • Fun gameplay
  • High score
  • Simple controls
  • Quick start up
  • Great Difficulty
  • Addiction to keep the player coming back

I’m going to be using unreal engine 4 to create it since I am most familiar with it, I’m going research other game engines to see if theirs any that fully benefits me for this kind of project.

There are some articles that I plan to read to help me decide what game engine to use.

https://www.websitetooltester.com/en/blog/best-game-engine/

https://www.quora.com/What-are-the-best-2D-game-engines-for-a-hobbyist-game-developer

https://www.quora.com/What-is-the-best-game-engine-for-2D-games

https://www.reddit.com/r/gamedev/comments/639vam/suggestions_for_simple_good_2d_game_engine_thats/

https://www.reddit.com/r/gamedev/comments/538309/looking_for_a_good_2d_game_engine_please_help/

https://www.gamedev.net/forums/topic/680563-which-is-better-for-a-2d-game-game-maker-or-unity-2d/

https://www.giantbomb.com/forums/general-discussion-30/unity-or-game-maker-studio-1490907/

https://www.reddit.com/r/gamedev/comments/5eaxgv/unity_vs_game_maker_for_2d_games_discussion/

What I plan to do next is to write down some ideas on what kind of game i’m going to be making and how I can make fun and addicting. Also i’m going to do some research and decide which game engine i’m going to use for this project.

Game Ideas:

Idea 1:

Take control of two climbers at once jumping from cliff to cliff. Inspired by the mobile game icy Ropes, but you climb vertically.

Gameplay: Touch the screen to jump (or space bar)then touch the screen again to land while your in the air.You get points for every cliff you land on. You fall off then its game over.

Their are unlocks such as playing as different characters and challenges to test your skills.

https://play.google.com/store/apps/details?id=com.playsidestudios.ice&hl=en_GB

Image result for Icy Ropes

 

Idea 2:

Your a cat climbing a cliff, the goal is to get the highest score, each finger pocket or crack you climb gives you a point.

The controls similar to piano tiles where they have to touch the screen very quickly to ascend but the player has to touch the left or right side of the screen (or use arrow keys) to ascend, the player can ascend if they climb on a finger pocket or an edge, if the player climbed on something like a hole in wall or uneven surface, the cat will fall which results in a game over. The cat can also fall if the payer stops for a few seconds.

 

59db71a6b6729_climbycat.jpg.0792e4be4a6e1dfc91ea9b8ca31a9e50.jpg

This is a quick sketch I made to show the general idea., The Black shapes are the climbable, the red shapes will make you fall off and lose. The cat is at the bottom.

Idea 3:

Similar idea as the previous idea but plays a little differently, to ascend the rocks the player has touch (or click) on any of the climbable surfaces such as finger pockets or edges. The player can move in any direction if the climbable surface is close to them. Climb on the wrong surface then the cat will fall which will result in a game over. The cat can also fall if the player stops for a few seconds. The goal is to get the high score, each surface you climb gives you a point, you cant get a point climbing on the same surface.

59db73bc05ef6_climbycat2.jpg.1e5ff8a950d7b35ad927abc96bfed45a.jpg

This is a quick sketch I made to show the general idea, the black shapes are climbable, the red shapes will make you fall and blue shape is the cat.

Idea 4:
To start the game you touch a chocking elephant who’s lying down on the floor then a peanut spits out the mouth into the air at a high speed and the player has to dodge stuff for high score. To control the peanut the player uses the mouse. The gain points the player has to survive for as long as they can without being destroyed.

Idea 5:

R-type with a peanut.

Horizontal space shooter

Player controls the peanut with the mouse and uses left click to fire. The goal is to the high score. The player gains points by destroying enemies, each enemy gives out a certain amount of points, tougher enemies give out big points. Their will be upgrades such as score multipliers, shields, spread fire etc.

Image result for r-type

Idea 6:

To start the game theirs a hand that’s about to fling a peanut towards them, you click on the hand to start then the peanut is flicked towards you and the player has to dodge things like flies and bacteria. The goal is to get the high score. to get points the player has to survive for as long as they can. To control the peanut the player has to use the mouse. The player is destroyed if they touch an obstacle or enemy which results in a game over.

I’m going to choose idea 2 the cat climbing idea because I had fun coming up with this one, it’s within my skillset and it’s a simple, yet fun idea.

What I plan to do next is to prototype the game and see how it plays out.

Name: Climby Cat

Target AudienceEveryone

Genre2D Arcade

Moodboard

Moodboard for graphics as well as gameplay elements

59de08a9c7ee8_Untitleddesign.thumb.jpg.3e8520dd57bd6ec982187ec596a156e3.jpg

 

 

 

I met my supervisor and discussed what I’m up to, what I plan to do next as well as what I want to do in the future.

I want to make my own company from scratch but also wanting to get ex prince from the industry.

We discussed my strengths and weaknesses and my biggest problem is programming, I barley know the basics and I don’t really enjoy it. to make the game i’m going to have to know programming.

My Biggest strength is game design which I enjoy the most.

I’ve been given a few options for my project, I could either learn programming, make a game and make sure everything works, the downside is that i’m not confidant in programming and this could screw things up if I cant get the programming to work.

The other option is to prototype a few ideas from game designers perceptive and methodology. My supervisor has shown me examples of his prototyping methods from his small projects.

Using methods like:

  • GIF’s to show others how you want certain things to function like how do you want a character to shoot, collect ammo, re-spawn  etc.
  • Image and video references to help explain my idea
  • Getting feedback from others to see how they are liking the game and sharing with you what works, what doesn’t work, is it fun etc.
  • Documenting my ideas, how I want things to work, what I want them do, an idea on what to look like, how I want it to feel etc.
  • Hooks of the game, what makes it special
  • Gameplay Highlights, parts of the game that standout from the rest
  • Using tools like Photoshop to create how I want the graphics to look on things like UI, Characters, objects etc.

All without programming

I’ve decided to go with the prototyping idea, i’m confident that this is something I can get done, its within my skill-set. My supervisor has also informed me that its better to have a few prototyping ideas all documented and refined with images and videos making it easy to understand for others, than having a game that doesn’t work because of the lack of programming.

What I plan to do next is start prototyping with one of the ideas from a game designers standpoint.

 

This is a High Concept Documentation for one of the ideas

Name: Climby Cat

Target audience: Everyone

Platform: Mobile

 

Summary

You’re a cat climbing a cliff, the goal is to get the highest score, each finger pocket or crack you climb gives you a point.

The controls similar to piano tiles where they have to touch the screen very quickly to ascend but the player has to touch the left or right side of the screen (or use arrow keys) to ascend, the player can ascend if they climb on a finger pocket or an edge, if the player climbed on something like a hole in wall or uneven surface, the cat will fall which results in a game over. The cat can also fall if the payer stops for a few seconds.

Setting

This game takes place on multiple maps randomly selected when the game game starts or the player presses the reset button.

The cat would be climbing:

  • A tall tree

  • Cliff

  • Mountain

 

Setting Moodboard

59e4e672c9425_climbycatthememoodboard.thumb.jpg.5a99a44056db6242e8dc20347f5c5f0d.jpg

 

 

Hooks

  • Setting a record and trying to beat it.

  • Very fast paced, gives the player that adrenaline rush.

  • Addicting gameplay making the player want to come back to the game

  • Competitivity, the players can best their friends highscore

 

Key Gameplay Mechanics

  • Tap either the left or the right side of the screen to climb either the left or right side of the cliff.

  • Getting the high score and beating other players high scores.

  • Online Leaderboards to see what other players high scores are.

  • Earn coins by getting to a certain score, the higher your score the more coins you get, coins are used to buy different skins for your cat

 

Quick sketch of how cat is controlled

Tap the right side of the screen to climb the right side of the cliff

Tap the left side of the screen to climb the left side of the cliff

59e4e76c4a097_taponeside2.jpg.d6ca8ff929b8ce6b0e385b1cd4c136cf.jpg59e4e76a90c00_taponeside.jpg.2d045a7d0c6f7ad76caf0d673e25f373.jpg

Cat’s appearance

  • Pixelated
  • Possibly cute
  • Lots of skins for the player to purchase with in game coins similar to Nyan cat

Cat appearance Moodboard

59e4e7d16d866_catappearncemoodbaord.thumb.jpg.654ae711c274f757b4fc4f4e4f7bcae5.jpg

Nyan Cat skins

59e4ea96f2dbd_nyancat.thumb.jpg.468cef1e0f1fe5d67b2a166dee994286.jpg

References:

http://www.nyan.cat/original

Next thing i’m going to do is continue with the High concept documentation by adding things like

  • How the game will teach the player how to play
  • Font
  • How do the coins the work
  • How can the player lose
  • What happens when you lose
  • What can the cat climb and what can’t the cat climb

 

 

Fonts

  • Retro style

  • 8 Bit

  • Pixelated

  • Blocky

I looked at some fonts on dafont.com and chose a few fonts that would go well with the style of the game. Since the game is going to have pixelated graphics, I think the font should be the same as well.

59e8c426deeba_retro1.jpg.27eaf4b351a81fd163e6b3b39bf0c4c7.jpgpixel.jpg.c38828a4bc97f602c7265a2462e52396.jpg59e8c4257104a_flappybird.jpg.c6cc4463b3d9c2699a7d2f58430c9fd2.jpgblock.jpg.62667dae944f2e4fbc0bf365464b8012.jpg59e8c423a0af1_8bit.jpg.00cabb746a1a6211d78d1f0dae9a7201.jpg

I like this one the most, it’s the easiest to read and has that retro look which is just what I need

59e8c4257104a_flappybird.jpg.c6cc4463b3d9c2699a7d2f58430c9fd2.jpg

I used the font and edited it in Photoshop to show what I want the title of the game to look like.

I used blending options to add as stroke and a drop shadow just too make it more appealing.

3.jpg.83c8216ce85cd034aa6f01db25e8ee48.jpg2.jpg.c242476e805b78ac1cbd42fa802f30da.jpg1.jpg.f1444341834aa6c6133fd9a0d4aa8b39.jpg

I made a quick title screen to show where the title would be placed and if it would look good.

59e8c493a8db5_quicktitle.thumb.jpg.81ef485569897f308a66809c7fd347c9.jpg59e8c49155b07_quicktitle3.thumb.jpg.4f831086dc09d20fd51b8c98e5be3ca1.jpg59e8c48ee20ef_quicktitle2.thumb.jpg.a59ac231695657b8932ee7a6688741d2.jpg

They all look fine but I like this one the best, there’s only 2 capital letters (the 2 C’s) and it’s easy to read, it works.

59e8c49155b07_quicktitle3.thumb.jpg.4f831086dc09d20fd51b8c98e5be3ca1.jpg

Tutorial

When it’s the player’s first time playing there will be a box showing the player how to play the game, such as:

  • How to move

  • What happens when you move

  • How do you lose

  • What happens when you lose

  • What the goal is

All without throwing to many words at the player, I want it to be brief and easy to understand.

 

The game starts when the player taps the screen and starts climbing similar to how flappy bird starts, to start flappy bird the player has to tap the screen then you have to keep tapping so the bird doesn’t hit the floor or the pipes.

Untitled-7.thumb.jpg.53d3da1c71775ff563d1c7156facd460.jpg

Something like this, a box comes up and tells you how the controls work, then the player continues by tapping on the screen.

How to move – Tap either the left or the right side of the screen to ascend either left or right.

59e8c74c3590b_climbycatturorailbox.jpg.fb447c1224500e425fc6a5f4bc0e3f1a.jpg

Or maybe a GIF showing a short animation showing the player that you tap then cat climbs in the direction you tap without using text

What happens when you move – The cat climbs by moving its arm onto the next climbable surface depending on which side the player tapped.

How do you lose – The player loses when the player stops moving for a second, if the player doesn’t tap the screen within a second then the cat will fall off which will result in a game over. The player can also fail if they climb the wrong surface, the player has to climb the right surface to be able to ascend. The right surface could be things like a wall pocket or an edge. The wrong surface are things like cracks or a flat surface.

Things like these can be climbable

UV14hvm.jpg.2703d86183e93906a6c0c4b204d6a070.jpgpocket-hold-250x250.jpg.cb1dbe579060ba8bca1af769b31ac846.jpgHAND.jpg.b007df32f92dabe0a1e8c63aba1b9346.jpg

What happens when you lose – The game will end, perhaps their will be a sound effect indicating that you lost, then result screen will come up showing you your score, your high score, the coins you are rewarded with and the total coins the player has. The coins will be added up with the players current amount and if the player gets a new record then the high score will change to that new record.

Quick game over screen

59e8d32183a6a_climbycatgameoverbox.jpg.909401172cd1d034e4c74478c7fb87f5.jpg

What the goal is – The goal is to get the high score and be number one on the leader board or just to have fun and beat your friends scores. Each time the cat climbs a climbable surface the player gets a point which will be displayed at the top of the screen,

How do coins work – When the player gets a game over, they are rewarded with coins depending on how many points they get. Every 10 points rewards the player with 1 coin. Coins are used to purchase skins for the cat to give it more appeal.

Skins – Skins can be purchased in the skins shop which is found in the main menu or the pause menu, skins can cost from 50 coins to a 1000 coins. Certain skins can possibly make a slight change in the game like different sound effects or a secret level with a different backdrop small things like that to give the game some appeal.

References:

https://www.dafont.com/

Next thing i’m going to do is start animating and make short GIF’s to show how it looks when the cat climbs and falls

Invision

I met my supervisor and discussed what i’m up to and what i’ll be doing next.

I wanted to finish prototyping this idea and move on to another idea but my supervisor advised me to focus on this one idea. If I were to send this to a game industry it wont show them how productive I am in designing a whole prototype plan for a game. it just shows a light bit of prototyping and theirs plenty of things i’m missing. My supervisor shared a link showing a list of user experience deliverables such as sketches, flowcharts, wire frames, testing and more that I can add to my project.

There are still plenty of things that I need to add such as:

  • Sketches or whiteboards to show whats going to be on each screen, where the UI going to be placed, as well as showing what each button looks like.
  • Flow charts to show where each button takes you for example showing the leader boards, does it take you to another screen or show a box on the same screen
  • Customer journey map to expect how the customer will react to certain points of the game, how will they feel, what would they be doing, what type of players would be interested in this game, why would players want to download it and play it, how long do I expect them to play it, being in the perceptive of the customer.
  • Have people test the game and get feedback from them, this will let me know what works, what doesn’t work, it would be nice to have this or get rid of that. Criticism will help me make the game better by turning the negatives into positives.

I’ve also been advised to use a website called “invision” which has tools that will allow me to see what my game will look like on any platform in my case a smartphone, this will be useful when I have all the screens and add them in showing where each button does and where it take you, this is beneficial for me because I don’t know coding and it would save me time trying to code the UI, instead this will let me add the screens to a smartphone template and the user just has to click a button then something relevant to that button will happen like the leader board button will take them to the leader boards or the start button will take them to the game.

Here’s an example of a mobile app on “invision”

It shows what the screen would look like on a mobile as well as what can be pressed in the blue highlighted area..

59f20eed9a618_screen1.jpg.e18d213b2f1a977003bd1d6eedf144a6.jpg59f20f246cc60_screen2.jpg.6d2f14f35bf978f5b7595fd9b0db4c40.jpg

When I press on a button it shows me what that button does like take me to another screen or bring up an option.

59f2119703f99_screen3.jpg.274497b858e5f97bae9606569345c5fc.jpg59f2119d51acd_screen4.jpg.74a6cb515934594f716eaa4b75d75372.jpg59f211aa4cbc6_screen5.jpg.1dc398531319a13be698ef2ab10771fb.jpg

 

I’m going to continue prototyping the game and add the user experience deliverables mentioned above.

References:

List Of UX Deliverables – https://uxplanet.org/a-complete-list-of-ux-deliverables-d62ccf1de434

 

Animations

Climbing GIF

59f22f5474ed4_climbycatclimbinggif.gif.238fa5c171e9078292d260f71dc82c68.gif

Slower version

59f22f63208b1_climbycatclimbinggifslow.gif.782060baadcb6608e3c17a5f4069543a.gif

Fast version

I would like the game to be as fast this GIF to provide a challenge and frustration for the player

59f22f70d84cf_climbycatclimbinggiffast.gif.43ea5551b9637b06e07981f76e9f56a7.gif

 

I want to give the illusion of climbing, the cat stays at the bottom, only the arms are moving while the blocks scroll down giving it an illusion of ascending.

Similar to Flappy bird how the bird doesn’t move it stays in one spot while the pipes and ground move left towards the bird to give the illusion of movement

Flappy bird movement GIF

59f2304da0cbb_falppybirdgif.gif.d462beafcd2a72a6dc048dd39d08b870.gif

 

Stopping during game GIF

When the player stops for a second the cat falls resulting in a game over.

59f2307090a37_climbycatclimbingfalling.gif.0b51617b6bc39e170ece0434ac3208f4.gif

Climbing the wrong surface GIF

When the player climbs the wrong surface in this case the red block, the cat will grab it and fall resulting in a game over. I put a circle to show the cat climbing the red block, the circle wouldn’t be in the actual game.

59f230991236a_climbycatredblockfail.gif.a9d0297ae394ce3580701b6578084e36.gif

 

Climbing the wrong surface GIF without the circle

Here’s how it should be without the circle

59f230d737375_climbycatredblockfailwithoutcircle.gif.a6b70f28f66c151a8c53ae8f87d4592d.gif

 

Next thing i’m going to do is work on some of the user experience deliverables like sketches of each screen, where the UI should be placed and what the UI looks like.

 

Screens

I used Photoshop to create all the screens in the game as well as where the UI will be placed and how I want it to look.

Main menu 

The menu will have 3 buttons

  • Play
  • Leaderboards
  • Shop

They will all take you to a different screen

The background has

  • A blue sky,
  • The tree the cat will climb on
  • Grass
  • The cat

If the player buys a new skin from the shop, the cat will also change its appearance on the main menu screen as well as in game.

59fb7ee308194_mainmenu2.thumb.jpg.2db1c2363b3d42e8ba94599b4a7a2e94.jpg

I originally made the buttons grey to reflect the grey cat but it looks dull and unappealing so I went for a more brighter colour

59fb804c35679_mainmenu.thumb.jpg.712e3144bab82a27e164d4cc4d58960f.jpg

 

Leaderboard

The leader will show the top 10 in the world, the players score will be shown as well as their position at the bottom

Theirs also a back button which will take the player back to the main menu

Leaderboards.thumb.jpg.0153874aa17324fb4da40c98c434993e.jpg

 

Shop

In the shop the player can buy skins for the cat, this only changes the apprentice of the cat nothing more.

Theirs a box showing what the skin will look like on the cat in game. The player can use the arrows to show different skins. The player can also see how many coins they have.

At the bottom their will be a name for the skin as well as a brief description on the skin, perhaps some humour.

At the very bottoms hows the price of the skin, the grey cat is the default skin so their wouldn’t be a price for it in the actual game, if the player has already obtained a skin then it would say “skin purchased”.

I was thinking of not having a shop for skins because in game you only see the top of the cat and you don’t see the whole cat just half of it so I don’t think this feature is needed.

shop.thumb.jpg.e0fb6348ad2083f11b430edd79c542bd.jpg

 

Game screen

When the player selects play from the main menu they will be taken to the game screen.

Before the game starts the player has to tap the screen to begin so the player decided when their ready.

At the top will be the score, every the player successfully climbs one surface at a time the score will increase by one point. I was thinking of moving to the bottom left to get it out of the way for the player, it feels like when the player gets a rally going the score might get in the way or might be a little distracting. Some feedback from other people would be nice to see if the score will be an issue or not.

On the top left is the pause button which will stop the game and bring up the menu just encase the player needs to stop for something and doesn’t want to quit the game.

59fb862cad43d_gamescreen.thumb.jpg.e889b4477d44760c573055987732bce5.jpg

 

I moved the score to the bottom left so it’s out of the players way, the score can pressure the player once they reach a high score, I will decide if I want at the top or bottom.

59fb875b77dfe_gamescreen2.thumb.jpg.d00285698b80e615ff675a1a5c783fb4.jpg

 

Pause screen

Once the game is paused the background will darken and show a resume button and a menu button.

The pause button is their if the player really needs to stop for something but wants to keep going later, when the player resumes the game they have to get their bearings and get back in the rhythm really quickly especially if they got a high score going.

59fb8ac927952_pausescreen.thumb.jpg.f4967a7f7b1c9b9bea4e0ece9ed2779f.jpg

 

Quit menu

Once the player presses the menu button the game will tell them if they are sure they want to quit, this is just encase the players hit the menu button by mistake and lose the score

59fb8bb3055cb_quitscreen.thumb.jpg.1533a3b961338e486df2feddc119ceff.jpg

 

Game over screen

When the player loses the words game over will appear informing the player that they lost.

A box will appear showing

  • The players score
  • Their high score
  • How many coins they earned
  • Their total amount of coins

At the bottom will be a retry button so the player can quickly start the game again

The menu button indicated by the arrow which will take them back to the main menu.

A facebook and twitter button are included encase the player wants to share their high score on social websites.

Lastly theirs the leaderboard icon which will take you to the leaderboard screen, same as the leaderboard button on the main menu encase the player wants to view what position they are at.

I made the text embedded similar to Flappy bird to change the UI because most of the text is white with a stroke,.

59fb8c501ca85_gameoverscreen.thumb.jpg.bc0037cb7a53b5df09d17b6984814d96.jpg

 

All UI

This shows all the Ui in the game on one screen

59fb8e1eed88e_allui.thumb.jpg.a443b075b05c9e96548f0564f3ce2806.jpg

 

References

I used the flappy bird UI idea to showcase all of the UI on one screen

Cover.png.24854af7b5a9ce18a4cac7d0c086c8ef.png

 

I also got the leaderboard design off a mobile game call “IRONPANTS” which is a flappy bird inspired game.

Untitled38.png.ef1f29e311b129f8dabdcadd3ad6e37e.png

 

What I plan to do next is to make a customer journey map to expect how the customer will react to certain points of the game and what to expect from the customer.

 

Customer Journey Map

When the game starts the player should almost immediately press the start button because it’s a big button that start drawing the player’s attention to where the action is.

The game is simple so teaching the player the controls should be brief and to the point, they should learn how to play in their first run of the game. The controls are simple, tap the left or the right side of the screen, but the controls will be difficult to master, it will put their skill to the test.

At some point the player is going to lose a lot which makes them frustrated which is what I want, it’s not the games fault, it’s through genuine fair challenge. The player should going for the highscore, retrying the game many times to reach their desired score. The player could also be playing the game to kill time, not for the high score but for the high speed thrill of climbing a tree, it’s quick start and play and doesn’t have long loading screens making it a nice quick time killer. Due to the frustrating gameplay the player will get fed up of the game but there’s the possibility that the player can master the game and get better at it keeping the player coming back to challenge the game again.

One of the hooks is to beat your friends highscore, the feeling of being taunted about high scores can drive the player to beat their friends high score which is a reason why the game can be considered addicting.

I don’t expect the player to use the store to much, it only adds different looks for the cat so it won’t be used that much.

I would expect casual and heavy phone users to play this game, it’s a small simple game which doesn’t make it a chore to download and play. I would expect players to browse the store, find this game and it will either be a one time play then uninstall or be kept installed on the phone and played either lightly, frequently or heavily, everyone has different taste so I wouldn’t expect everyone to get crazy about it instantly, it takes time to grow on the player and eventually they will be playing the game more times than one.

It’s a small game so it takes up little space in a phones storage so players can keep the game installed without uninstalling it for space.

Players would play this game from a range of a few minutes to 30 min depending on how addicted the player gets.

The game wouldn’t be played every day of every minute, it’s just something to get the player hooked on while they kill time, it will be quick to download, easy to access, simple controls, brief tutorial and High intensity adrenaline pumping action.

 

To make the map itself I looked at some references from other websites to get an idea of what a customer journey map looks like.

Its my first time making a “CJM” so I didn’t want to make anything extreme just something simple and basic kind of like the game.

 

I came across this site called “webdesign.tutsplus.com” which shows a tutorial on how to make a “CJM” but not specifically for video games.

The template they shown was just what I needed, it’s simple, something that can done Excel.

ref.jpg.18c5629eeb7a93fdf8cbaa232962b578.jpg

 

I also looked at a site called “gbanga.com” which shown a customer journey map for a mobile game, I used this to help create my “CJM”

The design is more complex, it looks nicer but isn’t necessary.

5a033e092d5c8_ref2.jpg.0e4c421b8b1bf22a267801d7a2958081.jpg

 

My Customer Journey Map

I mentioned each phase on the top row:

  • Awareness
  • Reaseach
  • Playing
  • Aftermath

As well as the duration for each phase

On the left hand column I mentioned things the player will face such:

  • Goals
  • Motivation
  • Questions
  • Barriers
  • Touchpoints
  • Emoitions
  • Weaknesses

I used the mentioned websites to help me create this Customer journey map

Untitled-4.thumb.png.66db0905116e87e8acab9b7c5f23bcde.png

Link to the spreadsheet for a better look

https://docs.google.com/spreadsheets/d/16VZHntOEKOQiKSnCI1AHxdViqIvQyReKgfXLnNJv29M/edit#gid=0

References

https://gbanga.com/2013/12/30/customer-journey-maps-for-games/

https://webdesign.tutsplus.com/tutorials/how-to-run-a-customer-journey-mapping-workshop–cms-28320

Next thing i’m going to do is create a post about the core loop of the game as my supervisor suggested using the resources provided as guidance.

 

Core Loop

I used the http://adriancrook.com/designing-core-loops/ website to find out what makes a great core loop, I used the methods to help make my core loop

The main activities the player will be doing are:  

  • Climbing a tree/cliff/mountain

  • Losing

  • Getting scores and points

  • Using coins to buy skins

 

The goal of each game is to ascend up a tree and get the highest score as possible.

To achieve this goal the player will be losing a lot because the game won’t be easy, the higher the score the more challenging it would be to beat it.

When the player loses they are rewarded with coins depending on how well they did.

The player can use these coins to buy skins from the shop to customise the appearance of the cat.

Then the player starts over again and repeats the process.

Core loop diagram

Untitled-1.jpg.b98d76f1801060e3e6736469e36f1f9e.jpg

The Goal is simple, get the highest score as possible, perhaps players can make their own goal like beat their friends highscores or buy all the skins.

The controls are simple and easy to learn, just tap either the left or right to ascend in either direction, it can be learnt in seconds.

Its replay value is high, players can beat their scores or beat other people’s scores, or just to kill time with intensive gameplay. Its quick to start up so players can start the game in seconds

As players get higher scores, the more challenge it adds. If a player gets a score of 200 then they have to beat that score, if reaching 200 was difficult then going beyond that will even more difficult and will get increasingly difficult with each highscore.

Players will eventually put the game down for break due to frustration and feel like they don’t want to play it anymore but once the frustrations gone they can return to the game and try again, keeping players coming back. They would also return to the game to beat someone’s high score giving them a goal and motivation to go back and play.

The player will be able to see their progress on the Scoreboard menu showing their highest score and what position they are in, it also shows the top 10 scores in the world so other players can beat their scores.

 

The next thing i’m going to do is create an animation showing what I expect the player to do when they first start the game.

 

Expectations

When the player starts the game, the title screen will fade in, the first option is start which is most likely the first thing the player is going to select. Start implies starting the game, getting into the fun. Perhaps the player will look at the rest of the options as well as the background to see what else is going on the screen. If the player doesn’t select the start button they might press the shop button to see if theirs anything worth buying.

GIF showing what I expect the player to do at the start

5a09cf442490b_startscreen.thumb.gif.934ede1c321d2557588c45e17b0d3066.gif

 

When the player starts the game I don’t expect them to last 10 seconds

Instead of the tutorial boxes I added in a small animation showing a cat moving its arm and a tap symbol, i’m trying to inform the player that the cat will climb once the screen is tapped.

Once the player loses, the game over screen text will drop in and the box will fade in with all the other options, then their score will appear, it will also show their high score and how many coins they earned. I expect the player to almost immediately select retry to play the game again, they lost so quick they would want to start over again and see what went wrong then try to get better at the game.

(I tried something different with the text by removing the white color and leaving the stroke, it doesn’t work, it blends in with the black squares making them hard to see so i’m going to return back to the previous text)

GIF showing what I expect from the player the first time they play the game

5a09e68899487_gamescreen.thumb.gif.12ce7269bef1c1248741d3401f5ad238.gif

 

I did some experimenting and made the climbing animation different, instead of the cat climbing with one hand I made animated the cat climbing with 2 hands, the cat leaps off each black square making the screen look a lot busier with the cat leaping around , a cat climbing with one hand doesn’t look right in this context. I will get some feedback for this to see what other people think.

GIF showing different climbing animation

5a09e932cba9f_startscreen2.thumb.gif.ada8ed68982f8b2324cfbc0170718bd8.gif

 

Once the player has had enough with the game they will check out the shop to see what the game is selling.

The shop only sells skins for the cat so the player will spend a a minute or less browsing the skins for curiosity.

Shop Image

shop.thumb.jpg.84d650f954567764b1ac0f0d83636f1d.jpg

 

The player will select the leaderboard to see what the highest score is in the game. Unless the player is competitive they wont spend more than a few seconds here.

Leaderboard Image

Leaderboards.thumb.jpg.c6a9d8315205efd286472245d5d77931.jpg

 

Feedback Advice

I met my supervisor today and discussed whats been going on.

I wasn’t sure what to work on next, theirs not a lot to say since this is a small game.

My supervisor advised me to start getting some feedback for the game.

He informed me about 2 different types of feedback.

Customer feedback where I show the game to people and inform me that if the game is worth making

Designer feedback where I show the game to game designers and they inform me about what needs refining, tweaking, what works and what doesn’t work, how to turn the negatives into positives.

I will use “invisionapp.com” to put my game on a smartphone and share it with other people.

I need to make a google form and add some questions about the game

Questions like:

  • What do you like about the game?
  • What don’t you like?
  • Is the game worth making?
  • Rating the game 1 to 5
  • What needs refining?
  • What would they like to see in the game?

I read an article about questionnaires and how to get the best possible feedback. Its more for bigger games but I could use it as a guide to get the best insight from customers that I cant see from my viewpoint as a game designer.

Link

https://www.gamasutra.com/blogs/WesleyRockholz/20140418/215819/10_Insightful_Playtest_Questions.php

 

Added a “How to Play Option”

I added a “How to play option” on the main menu so players have the option to learn about the game or learn it for themselves

5a0f0f43da2c3_mainmenu3.thumb.jpg.14d67a446b0cd42ada4c18fa537c4d2f.jpg

 

I put everything the player needs to know on one screen so they don’t have to scroll through boxes and read more text than necessary.

5a0f0f3ab5dfa_howtoplay2.thumb.jpg.387a490cbbac30f98552e56f257c5bce.jpg

 

Moving screens to “invision”

I added all the screens of the game on “invision” so now I can view what each of them looks like on a smartphone.

all.png.dc5ee8b434680a1c0994a1c1efe48867.png

 

I’m happy about the way it looks, theirs plenty of space at the bottom for an animation for the cat to run around and other graphical details to make the menu look nicer.

5a0f10276eadd_startrscreen.jpg.53184b56b98e1be0ab850d5e5519d151.jpg

 

Next thing i’m going to do is build the screens so I can show what each mechanic does like the buttons taking you to different screens, game play, getting points, losing etc.

all.jpg

 

Hotspots and Feedback form

I used the hotspot tool on invision to create the mechanics, what it does is you select an area on the screen and choose where it takes the player.

Main menu 

The blue highlighted parts are the places the player can tap and they will be sent to another screen.

5a1052a3580c7_hotspotsmainmenu.png.abac9516b816889c184a6efd25977e8e.png

 

In game screen

When the player gets to 10 points the player will then die on the next tap because I wanted to show how the player loses and what happens when they lose.

5a1052f735e24_10points.png.24fb2049976fbb2da45c6d6ef8360191.png#

 

Game over screen

When the player gets 10 points they receive 1 coin. The player can also lose if they tap the wrong side during the first 9 points but they will be taken to the same game over screen showing 10 points, I just wanted to show how to lose and what happens when you do.

5a1053571b552_gamoverscreen.png.cb183ec9a9ae5033a87d9ad92a48a2fa.png

 

Pause menu

When the player pauses the game the points will be on 11 and when the player selects resume it will reset the game. I didn’t want to make more screen showing each of the points, that would take a while and isn’t needed, I just want to show what happens when the player pauses the game.

5a10541b39c99_pausemenucommentonpoints.png.c1b351abcb5e7b3c9adeaabe0092fdaa.png

 

Link showing all of the mechanics on invision

(Apologies for the water mark in the video, I was using trail version of the “Movavi video editor” which adds watermarks on exported videos”

https://www.youtube.com/watch?v=lJGAW7tVLrI&feature=youtu.be

 

I made a Google Form

Showing the feedback questions

Link to Form

https://docs.google.com/forms/d/1v9jXlfbmZUJePrtqAg5ylCQgf6YZRorSfey8u9r9pWg/edit

 

Next thing i’m going to do is send these to people along with the inivision prototype and see what they have to say.

 

Obtaining Feedback

I got some feedback from a few people

 

Likes:

What they liked about it was the simplicity and its easy to understand the general idea of the game.

 

Dislikes:

What they didn’t like about the game is some parts of the UI aren’t easily readable specifically the how to play screen and its suggested that I change my font.

During the game theirs no urgency to progress to the next step since theirs no timer or threat, I couldn’t add this in invision but I plan a mechanic when the player stops tapping the screen for a short second then they will lose.

One complaint I had was that the it wasn’t clear how many coins the player had in the shop. I did put the amount of coins the player has in the shop but its not indicated clearly to the player, perhaps I should make it more obvious like text saying “Your coins”.

During the game each climb will transition the screen, I couldn’t add animation in invision so it looked weird climbing each step, I made some GIF’s showing how I want the cat to climb the tree this is just the best I can work with on invision.

They all say the game has potential and is worth making.

 

Tweaking:

The font should be changed to something more simple and easy to read.

The player is confused which side they need to progress, perhaps similar to piano tiles where the next tile you need to press will be right at the bottom of the screen.

Make it obvious how many coins the player has.

 

What they would like to see:

Better art style, I just made simple shapes and added simple colours and effects, the graphics can look nicer to make the game more appealing.

Some animation for the cat in game and UI, the cat will have animation for climbing and falling, perhaps their will be some animation for the cat on the main menu perhaps running around chasing a butterfly. For the UI, once a button is pressed make it look obvious to the player that the button is pressed.

More customization for the cat such as hats, clothes, gloves, it would be more appealing rather than having just skins.

Basic options such as sound, I don’t plan on having music in the game, maybe some sound effects for climbing, losing and UI, so I should add a quick mute button in the pause menu and main menu.

The game is ranked in between 5 and 6 out of 10

Link to Climby cat game on invision

https://invis.io/7EEJGKMG3

 

What I plan to do next is to show some screenshots on how i plan to fix these issues

 

Fixes

I made a few changes to some of the screens based on the feedback I received.

First complaint was about the UI being unreadable on some parts, specifically the how to play screen and I can see why.

One of the problems I saw was that the letter F looks like an S making it confusing to the player. Its better to have clear readable font than a cool looking font that players wont be able to read.

Letter F

5a1853d6d2516_FllokslikeanS.png.0c9804258956fa7f0554c816ac1aed9a.png

I looked back at some of my previous choices for the fonts and decided to go with one.

“8 Bit Wonder” Font

5a18545bd4eb8_8bitwonderfont.jpg.436af0da04a88f2ae3b74722f3ffd551.jpg

To see if it would work I swapped the font on the how to play screen

Its a lot more readable than the previous font and the letter F looks like the letter F instead of an S.

How to play screen with new font

5a1854823e213_howtoplaynewfont.thumb.jpg.86d8d92a1fa6e52e6eb42298f65397cd.jpg

 

To see how it would look on a different screen I applied the font to the main menu.

Both fonts look similar with its retro look but the difference is that all the letters are the same height with the new font making it easy to read while the old font has different heights on some letters making it a little more difficult to understand.

Main menu with new font                                                             Main menu old font 

5a18551f6a902_mainmenuwithfont.thumb.jpg.3ea715078e4893ee3d1c2acbcedb0c62.jpg5a1854dbc453d_mainmenu.thumb.jpg.90824023b0134e2136c8abaff4c263fc.jpg

 

One thing a player would like to see is a sound option.

I don’t plan on having music in the game but I would like some sound in the game,

Sounds for:

Climbing

Falling

Losing (when the cat leaves the screen from falling a sound will trigger informing the player that its game over)

Earning coins

Buying something in the shop

 

In case the player wanted to turn off those sounds I added a sound button to the main menu and the pause menu.

Pause Button on the top right

5a18551f6a902_mainmenuwithfont.thumb.jpg.3ea715078e4893ee3d1c2acbcedb0c62.jpg

Pause Menu

5a18583381e9f_pausescreensoundon.thumb.jpg.7c88533e32c61bdf533f6a38d698aa62.jpg

To show the player the sound is off a red line will appear over the sound button.

5a185867bc1e9_pausescreensoundoff.thumb.jpg.443e32a6ed433c5b80a4c3c026e64685.jpg

 

Another issue a player had was that they couldn’t tell how many coins they had in the shop so I made it more obvious by adding “Your coins” telling the player that this is how many coins they have.

5a1858d7919a3_shopyourcopins.thumb.jpg.549686ec8dc733987204dff1f6cc5987.jpg

 

I wanted it to be obvious to the player but i’m not happy about the words “your coins” on the screen I want it to be obvious but I also want it to be subtle. Instead of having “your coins” on the screen I decided to put the payers coins on the top right of the screen, it doesn’t straight up tell the player that this is their coins but with other phone games this is normally where the players gold or coins show so with the players experience with other phone games it should be obvious to he player that this is the players coins.

Shop menu with players coins on the top right

5a18596da3130_shopcoinsontopright.thumb.jpg.35d9946f6a208176dbe888d3f42bdf25.jpg

 

An example of displaying the coins to the player is the game “Jet pack joyride”

On the shop screen the coins are shown on the top right and it doesn’t tell the player that this is how many coins they have, its shown in such a way that the player knows this from just looking at it.

3x1M4tr.png.9d4c20ff87590257b43fd8f3b5c9a4b1.png

 

Lastly I got feedback on the climbing segment, the player was confused on which side they need to tap to progress.

To make it more obvious I added a dark box to show they player when the blocks reach the box those are the next blocks the player should focus on.

Game screen with box

5a185b74ba4a8_gamescreendark.thumb.jpg.15750455152708441bd5a8cc530bc7e3.jpg

 

Similar to piano tiles where the player knows which tile they need to tap next because it will be the tile closest to the bottom of the screen. Also once the payer taps on a tile it will turn grey telling the player that they have tapped this tile and they don’t need to tap it again.

Piano tiles example

5a185d05115dd_Dont_Tap_the_White_Tile_screenshot.thumb.png.da3fe7d0de34b6f70fca92429f0d8af5.png

 

When the player taps the right block then it will turn grey telling the player that they don’t needs to tap it again insuring the player doesn’t tap it by mistake.

Game screen with grey block

5a185d2447ecb_gamescreengrey.thumb.jpg.72c814dbae258d9c2ae9abe15fd69a39.jpg

 

I messed around with some colours to display the box and I want it to be clear and easily seen to the player, I tried to use a lighter colour but it blends in a bit with the light brown tree. So for now I’ll stick with a darker colour.

Game screen with lighter coloured box

5a185d7a36b91_gamescreenlight.thumb.jpg.f40776390132cbee6edd876b403ad17f.jpg

 

Presentation of the final Project

Created a presentation to showcase my project to my 2nd supervisor detailing an overview of my project, plans for 1st and 2nd semester, issues, fixes, future and a final conclusion.

Presentation link:

https://docs.google.com/presentation/d/14IE40CXQ–F8n5zfVFy6al6tz0WsPkAme3ceUpJQYOs/edit#slide=id.p

I also made some notes for what I plan to say during the presentation

Notes link:

https://docs.google.com/document/d/1oEAUkyzV0gGRGmm-HUdUnQS_PHtLi2t4XINaEZ9pQVQ/edit

 

The last thing I’m going to do is a final conclusion of the whole experience.

Project Conclusion

This project turned out to be a success, I learned many methods, techniques and created many documents on these prototypes.

Methods and techniques such as:

  • Animation
  • Sketches
  • Customer journey maps
  • Game loops
  • Monetization loops
  • Variations
  • A/B splits
  • “Invision” to share and get feedback
  • Creating different screens
  • Designing UI
  • Moodboards
  • Screenshots
  • References

Design Documents such as:

  • Mechanics
  • Hooks
  • Retention
  • Progress
  • Challenge
  • Rewards
  • Statistics
  • Control schemes
  • Fonts
  • Tutorials
  • Expectations

There were times where I had some trouble but with some hardwork and determination as well as some aid from my supervisor it all turned out well. Whenever there’s a problem I talk to my supervisor about it, I could use the internet to help me out but it’s more effective for me to get help in person rather than searching it up o the web. If it’s a small problem like not knowing the definition of something then a quick google search will clear that up, but if it’s a big problem like not knowing what to do next then I would speak to my supervisor about it.

There was a time when I felt like I was repeating myself when designing the 2 prototypes during 2nd semester because I was designing it the same way I designed the first prototype, so I wanted to learn something new. I asked my supervisor if there’s some other way I can design the prototypes and he shared other methods and techniques that I can apply to my project which benefited greatly, now I know other ways to design video games.

I’m happy with the end result, I have 3 prototypes to shows off which all have great detail on all the methods I used to design them. This project has been a great experience and I wish to apply and expand my knowledge in future job opportunities.

Advertisements
%d bloggers like this:
search previous next tag category expand menu location phone mail time cart zoom edit close