Author Archives: Shiyuan He

Group Game #2: Polarity

  polarity     For group game 2, Silas and I are working on a game called Polarity. The image above shows the design concept of this game, which is switching polarities to create diverse movements. For the basic game mechanics, please check out this post. Since this game was originally conceptualized for its game mechanism, during the design process it started to tilt towards a puzzle, so creating a narrative became a challenge. In order to incorporate a bad guy, first we decided to visualize the timer. Instead of having a countdown, a wall will start moving from the left to occupy the playable space. This wall also serves as a giant magnet that attracts other particles and neutralize them so that the player will have less force to reach the target. To create diverse multiple encounters, we decided to have the wall/giant magnet act differently in each level. For example, it can adopt different shape, including ones that have a channel in the center, which will not only transform play strategy, but may also influence the goal of a specific level.  Since the behavior of the wall would change, it will give each level an endogenous meaning while creating diverse and challenging game play. Though the wall will perform the “bad thing,” it may not be expressive enough to carry a whole narrative; therefore we decided to create a real bad guy and make the wall a weapon that he uses. As Jenkins mentioned in “Game Design as Narrative Architecture”, the conflict between interactivity and narrative is often solved by incorporating spatial stories and environmental storytelling into the endogenous world. In the case of our game, the bad guy need to appear in the winning zone (on the right), where he can hold the object that the player is chasing after. Meanwhile he needs to control the movement of the wall, which starts from the left. This spatial separation inspired us to have a chain that goes across the screen, and the “bad thing” is therefore transferred to the bad guy, because he becomes the one pulling.   Bowserbp On the mechanism level, the bad guy does not have any direct encounter with the player. However, he is crucial for a thorough narrative across levels. During the design process, we have discovered similar bad guys in other games who do not have direct collisions with the player. For example, Bowser Koopa in Super Mario often only appear at the end of each level to kidnap the princess to another castle; In Angry Bird, the pig performs bad things only in the cut-scene narratives and do not actually encounters the bird. To a certain extent, those bad guys are giving meanings to the spatial environment. Similarly in the case of our game, the story will be an enacted narrative, which uses features of the environment to move through the plot trajectory.  

Group Game #1: Climb

  climb (2)   “Climb” is a single-player game that uses keyboard as the main input. The player acts as the character at the bottom of the screen, and the goal is to climb up to reach the dotted line.  The character’s arms and legs are mapped with “F” “J” “V” “N” keys, and the player is free to step up. climb (3)   In the yellow text bubble, an instruction is provided for the player to follow. If this random-generated pattern is not followed strictly, as a punishment the green bar would fall and push the player back to the initial position. climb (4)     In the “I Lose, Therefore I think” article, Lee talks about game being  defined as “an interactive structure of endogenous meaning that requires players to struggle toward a goal.” In this game, this struggle comes from the danger of falling brick (cancelling of past effort.) In the play testing session, I found that instead of following the message, players tend to randomly press keys when first starting the game. Usually after several unsuccessful trials, they realize that it is not possible to win using this method, and therefore they would start paying attention to the text bubble. In this case, the falling brick is a form of instruction that asks the player to pay attention to the interface.   climb (1)   During the play testing session, I received feedback mostly on two areas: firstly, since the instruction bubble was originally placed above the dotted line, it can be difficult to notice when the player concentrates on the bottom half of the screen. To solve this problem, I have now placed it on the bottom and have it move alongside the player. Another important feedback is on the color palette. instead of using two high-contrast colors for the dotted line and the brick, I decided to use the same green so that they form a separated domain that is different from the player’s side.   Meanwhile, I have also added the difficulty of the game by introducing the “not to do” message. Those messages randomly appear on the text bubble and if the player press the key while told not to do so, the brick will fall as a punishment. To take this game to the next level, I’m hoping to: 1, adding details to the character 2. adding time limitation and show it graphically 3. adding sounds    

Post-Mortem: A Cup of Rain

In the making of “A Cup of Rain,”  I have run into several technical challenges. The first was creating the collision effect among raindrops. Since these rain drops are called from an ArrayList, I did not know their specific coordinates to write the function. The most similar code in our class labs is the separation function in one of the Flocking exercises  (NOC_6_07_Separation).  This function, however, is put into the class file because all the objects share the same radius, In my game, it is not the case, so getting the coordinates for each rain drops become a challenge. At the end, I used several return functions in the class file to extract the x, y and radius, and this method is working. After getting the coordinates, the problem became how to compare the distance between object to create the colliding effect. Again, the problem is posed by the ArrayList because originally I thought there can only be one “for” loop and therefore the set of rain drops have nothing to compare with. I eventually found out that I can use a loop within a loop, which looks like this: for (Raindrop r1 : raindrops) { for (Raindrop r2 : raindrops) { This double loop solved my problem perfectly, and when those two problems were solved, others parts of the making process were much easier to deal with. As I mentioned in the previous post,  I imagined the game to have other playing mechanics  such as connecting and matching. For future improvement, I want to add this feature in, and perhaps also increase the diversity of the objects. Screenshot_2014-12-09-00-19-55  

Conference Post #2: A Cup of Rain

My inspiration for the game “A Cup of Rain” comes from my window in a rainy day: small rain drops were sliding slowly, and when they ran into other drops, they would form a flow . Besides seeing this beautiful process taken place naturally, you can also use your finger to connect raindrops and create a flow 1391871_10202339541240697_1260755131_n. I had this idea of simulating rain from very early on, but I did not think of turning it into a game. During the most part of this semester, I have been working on other games and prototypes. The only thing that came close to this idea is a game I wrote at the beginning of the semester called “Color Rain.” Though it is also a game about rain, the concept was very different. 20141209011712

Color Rain, version 1


Color Rain, version 2

When I started conceptualizing this game, the playing mechanics was totally different. I imagined the play drawing lines from drop to drop, and, through color matching, create some special effects. When actually coding, I became interested in other forms of interaction, so I gradually changed the mechanics. Now tapping is the major game play mechanics, and through tapping, several different effects will take place. Screenshot_2014-12-09-00-20-08

Conference Post #1 : A Cup of Rain

For my conference project, I designed a game called “A Cup of Rain.” On the screen, there is a “measuring cup” on the bottom, collecting the falling “rain drops.” Screenshot_2014-12-09-00-19-41 The rain drops are generated with different sizes and moving speeds, so they will collide into each other, and when that happens, two events will take place. Firstly, they will merge into one, larger drop, and secondly, the speed of the larger drop will be the sum of the previous two drops (so it will fall significantly faster than before.) When a rain drop falls in to the measuring cup, it will accumulate so the water level will rise according to the size of the drop.  At the same time, the water in the cup will gradually increase its darkness, turning from light blue to black. Screenshot_2014-12-09-00-19-48 The goal of the game is to prevent the water in the cup from turning completely black, and in order to do so, the player has to create blue drops to “dilute” the water. When the player taps any raindrop, it will turn into a blue drop, with increased size and speed. When the water level reaches the top of the scale, the player wins the game. There are also two additional objects. One is a ring that will turn all drops into blue. Screenshot_2014-12-09-00-20-47   Another is a triangle that will speed up all drops on the screen. A successful game play will depend on tapping speed and appropriate use of these two objects. Screenshot_2014-12-09-00-20-28

Group Game #2: Space Journey

Space Journey is a single-player game based on the hider/seeker concept. In this game, the player is controlling a yellow circle that can move anywhere in the screen. An orange triangle, the seeker, is chasing after the player. At the same time, the orange vehicle also has its own seeker—a blue triangle with a tail. Screenshot_2014-11-30-23-45-35 When the orange vehicle successfully touch the player, two things will happen: the size of the vehicle will increase, and a ripple effect is produced. The ripple effect is accompanied by a sound intended to create a space, futuristic feeling. The effect itself is built based on an array of white rings that sets off and recycles according to the screen touch. When the orange vehicle is chased down by its seeker, counter effect will take place: its size will decrease until it is almost invisible.   Screenshot_2014-11-30-23-46-07 Besides the basic chasing mechanism, there are two environmental variations: two circles are doing clockwise and counterclockwise circular motions. When the player reaches the black zone, the orange chaser will slow down significantly. With the blue vehicle’s effect, its size will diminish very quickly.If the player reaches the white zone, the orange vehicle will immediately speed up, and accordingly it will enlarge quickly.   Screenshot_2014-11-30-23-46-45 The inspiration of the game come from the idea of dynalinking (Preece, chapter3). Within a pond ecosystem, perch, beetle, stickleback, and tadpole form a food web that each has its own prey, enemy, and also some irrelevant, mutual-existing members. In this game, I want to simulate this web so that not only the player is chased by a seeker, but the seeker itself is also being chased by something else. Similarly, there is no interaction between player and the blue vehicle, just like perch and tadpole in the ecosystem. 20141201032523 Screenshot_2014-11-30-23-46-55 For future improvement, I want to add several other environmental variations that can introduce new members and actions to the system. It does not have to be triggered by the player, like the black and white regions. The orange vehicle and the blue vehicle (and its tail) can be initiators, as well as subjects of new movements.

Black & White Exercise #4: Fire Box

  Screenshot_2014-11-11-18-00-14 Fire Box is a game based on a simple particle system. The player is presented with a white box, and every tap will move the lid slightly to the right. The idea of having only one object on the screen is influenced by Krug’s “Don’t make me think.” While many other objects can fit into the screen to serve as decorations, they might also distract the player. The sliding effect is also based on the same principle. While no instruction is provided, it is important to give immediate feedback to lead the player. As Krug says”We don’t figure out how things work, we muddle through,” in this case the sliding of the lid should be especially visible for the first tap. However, because the player also need time to visually “catch up” with the action, it should take several taps before the firework starts; therefore the latter moves should be smaller. Screenshot_2014-11-11-18-00-20   When lid is open, a firework will burst out of the box, accompanied by a cracking sound. Screenshot_2014-11-11-18-00-24 When untapped, the firework is generated in light, tinge colors. When touched, it will change into more vibrant colors. Screenshot_2014-11-11-18-00-32 Screenshot_2014-11-11-18-00-38 The firework is created using a particle system that generates small circles that move away from their origin. While they are moving away, the alpha value decreases and thus makes the fading effect. In the coding process, the challenging step is not to make the firework, but actually to create the box.  Because I wanted to create a 3D feeling using two dimensional shapes, I began with three parallelograms of different shades. When the lid slides to the right, two inner sides of the box will be shown. I have tried several ways to represent those two sides, but eventually found that a short grey line worked better than others. For future improvement, I would like to find a way to close the box and stop the firework. As this program is written without a background function in draw, and the firework and the sliding effect all depends on no background, it becomes difficult to erase things already drawn on the screen. This, however, may require more advanced code.  

Black and White Exercise 3: Photo Booth

Photo Booth is a game built on the transformation code (lab 8) for the “amusement park” assignment . On the center of the screen, a simplified, abstract character is formed with a combination of geometrical shapes. This character has a hexagon face, a rotating polygon hair, two blinking ellipse eyes, a rotating triangle mouth, a swinging rectangle body and two hands. Each of these shapes is coded into its own matrix, which is rotating at its own speed. Screenshot_2014-11-30-23-40-53 When the screen is tapped, the animation will stop, and depending on the state of each shape, the character will have different facial expressions as well as body positions.Besides stopping the action, tapping also produces a shutter sound to simulate a real photo booth setting. At the same time, the program will takes a screenshot, and the goal of the game is to take photos with smiley faces. Screenshot_2014-11-30-23-41-10 During the design phase of the game, I was influenced by the idea “expressive interface.”(Preece, 143)  The main idea of building expressive interface is to use graphical elements such as icons to convey emotional states. Expressive interface is favorable because it conveys the state of the program in fun and clear ways. For example, in Chrome, when a page crashes, a folder with a sad face will appear, along with the error note: google-chrome-about-crash Like Chrome, many icon-related expressive interfaces are based on the idea of human facial expression. Our daily life is filled with this kind of simple emoticons such as :), :( , or more complex ones such as (☆▽☆) ,~( ̄▽ ̄~)(~ ̄▽ ̄)~. My goal with this exercise is therefore to try to combine simple shapes and actions, and to see how we perceive it as a human face. After play testing, I found that we do have a strong facial recognizing ability. Even many core features are not drawn, the face is still recognizable. The triangle can sometimes be perceived as the mouth, and sometimes as the nose; the blinking eyes changes the direction the face is facing; even when the polygon (intended for hair) moves below the face, it can be perceived as beard. Screenshot_2014-11-30-23-42-01 For future improvement, I want to incorporate more shapes to form a complete body, and have moving legs and joints. A reset button will also be very useful since the hair shape is depending on a random function, so each time the player can have a unique character.   Screenshot_2014-11-30-23-42-34

Black & White Exercise #2 – Monster

Monster is a single-player game based on the idea of mixing random possibilities. The basic setting is a village where five people live: a monster who can breath fire in the night to destroy the village; a hunter who can kill the monster; a wizard who brings light to indicate monster’s position, a witch who has a speed potion, and a innocent villager. The goal of the game is to find the hunter and to save the village from the monster’s potential harm. Screenshot_2014-10-26-17-56-44   The game starts as five characters doing spiral motion. If they move out of the screen, they would soon reappear in the center. The player can tap to trigger their special abilities. 1. the innocent villager that does nothing: Screenshot_2014-10-26-17-56-572. the wizard who indicate the light Screenshot_2014-10-27-00-59-35[1]   3. the witch who speeds up its motion to create visual confusion Screenshot_2014-10-26-17-58-20   4. the hunter that kill the monster Screenshot_2014-10-26-17-57-57‘ 5. and most importantly, the monster that destroy the village: Screenshot_2014-10-26-17-57-46     While the game play is made of random chances, it also involve strategy. The player can keep track of the moving characters that he or she tried previously in order to detect the monster and the hunter. In terms of design, I used text and emoticons to differentiate the characters, so the player can easily tell them apart, and also have a better visual experience. possible change list:
  • adding more villagers for more difficulty
  • characters that need to be tapped in a certain order
  • a character that will change everyone’s speed
  • a character that assist the monster

Black & White Exercise #1: Chasing 88/Reverse

Screenshot_2014-10-26-17-55-01 Chasing88 (or Reverse) is a black and white game based on the idea of clockwise/counterclockwise motion. The interface is consists of four moving circles. All of them are doing clockwise circular motion at different speeds; therefore if left alone, they would eventually run into each other, which will cause a reset of the game. In order to reach the goal (draw an “88” on the screen), the player can tap the circle to change the moving direction to counterclockwise. While the moving direction changes, the speed of the circle will also change, so the right timing is the key of successful game play.  

game begins as:


Completing the track


“88” is created:

      Screenshot_2014-10-26-17-55-56     When the track is completed, the circles will not stop moving, so the goal become to maintain the “88” for as long as possible. In term of design, the background command is placed in the “setup” function instead of the “draw” function, so circles are drawn on top of each other, and thus forming the grey tracks that look three dimensional.  Because of the same reason, these tracks also have different shades when the moving direction changes. A list of things to be added:
  • A timer on screen to count how long a player can maintain the goal
  • New levels adding difficulty(for example, instead of forming the whole track, set some area as forbidden zone, if a circle moves in, the game would reset )
  • title page/sound/ other shapes