Piggy Jump Jump_A Game Project

Course: Creative Coding
Team: Independent Project
My Role: UX Researcher, UX Designer, Visual Designer, Web Developer
Method: Sketch, Wireframe, Rapid Prototype, HTML, CSS, P5 Javascript
Duration: 4 weeks

Prompt:

Creating a digital art game by incorporating with the idea of individual growth path and life difficulties.

What kind of games can I develop now?

I only had 4 weeks to develop a game and I am not a CS student with strong coding skills. It means, in 4 weeks, I need to design a game and learn how to code it. In order to complete this project successfully, I did some research on learning the genres of game. I was trying to get the answer of what kind of game I can code in 4 weeks based on my current coding skills.

According to my research, there are 2 types of games that are possible for me to complete in 4 weeks: puzzles games and arcade games.

Puzzle game

Puzzle games are logic challenge games usually designed with time-pressure and action elements. The classic puzzle games are Tetris, Minesweeper and Candy Crush Saga.

Arcade game

Arcade game actually is one of the subgenres of action games. It usually only requires simple actions to play the game with eye coordination, such as snake game, flappy bird.

Key takeaways:

This was an art project, therefore, I not only need to take consideration of development feasibility, but also need to consider which game is better for me to use to convey my ideas.

1. Puzzle games players usually need to understand the rule in advance In order to play the game, while arcade game players can master the game easily by simply playing it
2. Puzzle game can be good at delivering a deeper concept and arcade game is better at letting audience understand the metaphor easily

Arcade game picked

With above consideration, I decided to choose arcade game for this project because of following reasons:

1. Compared with puzzle games, arcade games allow audiences to start playing without reading the instruction carefully. It is good for me to pass my idea in a short time
2. Arcade game is also easy to play, this may encourage players to discover the metaphor behind the game. In the opposite, puzzle games usually have a higher complexity of the game, this may discourage players to continue the game. It does not help me to convey my artist idea behind the game
3. From the development standing point, arcade game can be easily expanded into another level in the future, like adding shooters

What games people like to play?

In this project, I not only wanted to create a meaningful project, I also wanted my audience can understand my artist intention and like playing my game. Therefore, I conducted a user interview to explore what games people will like to play. There are a total of 10 interviewees that I interviewed, 6 females and 4 males, the age range is from 17 to 35. As usual, I used Google spreadsheet to manage my interview.

Key findings from user interview

1. There are 9 participants out of 10 believe that playing game help them
   de-stress
2. There are 6 participants show they are enjoying the sense of control and achievement in the world of gaming
3. There are 7 participants indicating they appreciate narrative style games

Key takeaways

The game being liked by players commonly with following features:

1. It is easy to learn and to play which gives users the sense of control and relaxation
2. Rewards are given appropriately for letting users feel accomplishment
3. It typically designed with interesting scenario

Defining the problem & user requirements

To meet the prompt, the game should possess the metaphor of human life. In order to complete this assignment successfully that letting players enjoy playing the game, following features need to be included:

1. Relatable gaming content — players can associate the gaming setting and characters to their life easily
2. Interesting reward system —rewards can be easily associated with real life and letting them feel a sense of achievement or control by gaining rewards from the game
3. Play interaction — letting players feel they are interact with the game instead of only playing something

Brainstorming

Even though I decided to work on creating an arcade game for this project, I didn’t have any ideals of my game for this project after I completed the research part.

Use existing game as the essential framework

As I mentioned, It is not an easy assignment for me. Because I didn’t have a lot of knowledge of coding and I only had 4 weeks to create a game. In order to complete this project in time, I decided to take advantage of the existing games on market, such as flappy bird, snake game… To choose one of them as the framework and then associate it to my idea.

I picked 4 games to brainstorm how I can take advantage of the them and connect them with life difficulties. I used Google Spreadsheet to do this activity. On the spreadsheet, I basically think about the metaphor of each game that possible to generate. Then brainstorm how I can modify the game to connect it with its metaphor.

Key takeaways

Regardless the complexity of code, the following consideration should be included in the further process, in order to complete the project successfully:

1. Room for adding new challenges as the game evolves. Whether is flexible to include other gaming elements later, such as shooters, rivals
2. The quantity of game characters and objects creation. Do I need to spend a lot of time on illustration of characters or other objects?

Evaluation

Use Impact & Effort Matrix to determine selection

After brainstorming the possible modification of each game, I used Impact Effort Matrix to help me to determine which game to pick.

One pick

With careful consideration, I decided to pick chrome dinosaur game as my basic for this project because of following reasons:

1. It can create high impact with low medium effort.
2. Compared to snake game and flappy bird, it is more flexible to be iterated in the future. It is easier to implement other gaming elements, such as shooter, point collector.
3. The original concept of the game is easy to associate with growth path and life difficulties.

Low Fidelity Mockup

Sketch

Once I determined which game was the framework, I started to frame my ideas on paper.

Also, I tried to visualize the character and obstacle.

Artist statement

This game basically refers to the growth path in human life. In the path of growing, an individual has to face and overcome a lot of difficulties, such as, diseases, schools… Growing up actually is not an easy thing. In order to enter the next level and get more control of life, people also need to work hard to get “points,” like get a degree or a job…

In the first level of my designed game. I used piggy to refer to the starting point of a life. For a new life, what they need to do to grow is eat and survive. Therefore, players have to jump over obstacles (carts) to make the piggy survive and get points (bottles/energy) to help the piggy enter the next level of the game. In the next level of the game, piggy will be able to choose their gender which indicates their self consciousness.

Game Design Highlight

1. The game was designed with 3 levels which indicated different stages of human life
2. Used the baby piggy as the player’s character in the first level, which indicated the beginning of the life
3. Only assigned space bar as the control button to control the game
4. Associated metaphor of the game with the growth path and overcoming difficulties in life

Medium Fidelity Mockup

Pseudocode

After clarifying the concept and outlining the game, I started launching it in real life. I first wrote down the pseudocode to specify the details of the game level one.

// pseudocode for piggyJumpJump
// there are total three levels for this game, however, because of the time constrain, I will only stick to level one in this class
function setup() {
  createCanvas(600, 400);
}
function draw() {
  // after loading
  // display the title page
  // (execute title page function)
}
function displayTitlePage(){
  // make background light grey
  // display 'start' button
  // display text "Piggy Jump Jump"
  // if 'start' button is pressed
  // excuse the first level function
}
function firstLevelJump(){
  //if first time hit 'space' button === true
  //start the game, piggy start running, background move backward
  //if first time hit 'space' button = ! true
  //piggy jumps
  //if piggy jumps over the obstacle
  //get 10 points
  //if piggy touches the obstacle
  //lose 10 points
  //if exceed 200 points
  //excuse the second level function
  // if points drop to below 0
  // execute game over function
}
function gameOver(){
  //display 'game over'
  //display 'start' button
  //if 'start' button is press
  //excuse the first level function
}
function secondLevel(){
  //display the piggy wearing school bag and running on the same spot
}

Pixel art illustration

Next, I used pixel art to create my character and obstacle.

Key takeaways

With the completion of my medium fidelity mockup, I generated following concerns:

1. The space between bottles is too narrow, it may increase the difficulties of the game. Need to take more text of the obstacle performance
2. Currently, the game is too similar to the chrome dinosaur. How can I modify into another new game
3. The instruction and status of the game are missing. Need to think about the illustration of them

Final design

Highlighted updates

1. Implemented hand drawing a scrolling background to improve the visualization of the game

2. Updated the play rule of the game. Used baby bottles as the rewarding item instead of obstacles. Added baby carts as the obstacle. In the final version, players need to pass the obstacle to keep playing the game and touch the rewarding items to get points. This update made the game more challenging and playful

3. Use the space key only to control the game. Allowed players to play the game and restart the game easily.

Did people like it?

Even though it is an art project, as a designer, I care about how people feel about my work a lot. Therefore, I conducted a mini user testing in my class by inviting 7 classmates to play my game and share their feeling. Fortunately, all participants showed they can clearly sense the theme of the game. I also received a lot of positive feedback from the professor and other classmates.

For improving the interactive level of the game, I will consider to adjust the following objects:

1. The speed and the number of the cart
2. The distance and number of baby bottles
3. Animation of the character

Reflection

This is one of my favorite projects because it not only provided me an opportunity to practice my technical skills but also allowed me to express my personal feeling about life. As a designer, I believe design can make life better. Therefore, I intended to be more positive when I was playing the role of an artist. In this project, another message I wanted to deliver to my audience is, even though life is hard, as long as players keep playing by pressing the space key, they will be able to get enough points to enter never level. Don’t give up!

Future features

Unfortunately, thanks to the time constraint and technical limit, this version is not my ideal outcome. If I can work more, I will definitely make following improvement

1. Add sound effects
2. Add animation effect of the character
3. Adjust the visualization
4. Complete the development of next level

Do you want to play the game?

Click => here!