DELIVER: collision.pde

Check out Aziza’s deliver blog post here!

 

I am extremely proud of this game that Aziza and I worked on. We took our time and both had the chance to input both of our ideas in this game. The programming was kind of hard but at the same time, it was easy enough for the both of us. 

My partner Aziza and I had worked on the code together equally. We would suggest, plan out, and then put our thoughts and ideas into actions. Most of the time in class when we were working on the project, we exchanged ideas and often changed them because of the sake of time. I am grateful that I was able to have a partner who is determined and willing spend days trying to understand something. It was honestly a great experience to work with someone who had a clear idea and how to go about it. 

What was most challenging for us was trying to code a star into processing by using the star() function on their website. (click here).

The star function was very complicated because we didn’t understand half of the things that were in the function. We tried to figure it out honestly but we resulted in starting our game all over and using our buttonFly programs as a outline for final collision program. We also decided to just use an image of a star because it was something we both knew how to do and it only took a day for it to work. Whereas we were still trying to figure out the star function for almost a week. 

For the future of this game, we would love to have sound effects, a portal leading to the winning screen of the game, an actual start and ending game screen, and adding a health bar for the star to make it a more enjoyable game. 

DEVELOP: collision.pde

For the design post for collision.pde go to Aziza’s blog

User feedback from 2 students in our video game programming class: 

Since our last version of the program before was 7, we were working on fixing the cloaking for the second flower (pink flower) in our program. We used the feedback to change the speed up the rose (red flower) in our game.

P.S. We didn’t have enough time to finish off the game completely and add all of our other ideas such as a health bar, which was suggested, and also more restrictions and levels in the game. 

In version 7, we added the following effects to our game. If the white flower collided with the star (flower 2) then the background color would change. During this version we had it set to red and kept it the same. 

By also having the individual effects for the flowers we also included the orbiting affect for both flowers 1 and 2 so that it is more challenging for the star to escape the circle. We did this in version 7 by creating new variables. 

In version 7 we had the speed of the third flower  (red rose) at .5 which was slower than 1. We did this only for testing purposes but in version 7.5 we changed it to 1. 

In version 7 we had a problem where our cloaking was not working for only the pink flower. We noticed our mistake easily when our teacher pointed it out to us. 

We had the tint at the bottom of our draw. This meaning that it went through everything (our sprites) and tinted everything instead of just doing flower one (the pink one). We fixed this in version 7.5 by simply adding a noTint(); for everything else that is not flower 1. 

 

DESIGN: collision.pde

Link to Aziza’s design blog post 

DEFINE: collision.pde

*For the discover post for this project go to Aziza’s blog * 

Aziza and I will be using different objects and resources for our game which will include the following

• User star
  • 
  • User star name (uStar)
  • X and Y position variables (starX, starY)
  • Rotation (sine and cosine needed to do this) ( starRot)
  • Motion variables (mvSX, mvSY)
  • Speed of star (spdStar)
  • Color of star (starCol)
• Flower 1
  • 
    

     *PLEASE BE AWARE THAT THE IMAGES WILL NOT BE GIFS IN THE GAME*

  • Image name (F1)
  • X and Y position of image (f1X, f1Y)
  • Rotation of image (f1Rot)
  • Motion variables (mvF1X, mvF1Y)
  • Angle of image (f1Ang)
  • Speed of image (spdF1)
•  Flower 2

  • 

     *PLEASE BE AWARE THAT THE IMAGES WILL NOT BE GIFS IN THE GAME*

  • Image name (F2)
  • X and Y position of image (f2X, f2Y)
  • Rotation of image (f2Rot)
  • Motion variables (mvF2X, mvF2Y)
  • Angle of image (f2Ang)
  • Speed of image (spdF2)
• Flower 3
  • 
  • Image name (F3)
  • X and Y position of image (f3X, f3Y)
  • Rotation of image (f3Rot)
  • Motion variables (mvF3X, mvF3Y)
  • Angle of image (f3Ang)
  • Speed of image (spdF3)

 

Additional Variable(s) that will be needed in our program: 

• We will be using the arrow keys to control the user star
  • UP, DOWN, LEFT, RIGHT
• colorBump
  • This will be changing the color by increasing the RGB value.
• bG
  • Background color for game

 

For the design post for the project check out Aziza’s blog

DISCOVER: collision.pde

Link to Aziza’s discover blog post 

The Unit Circle

The Unit Circle is a circle with a radius of 1. The unit circle identifies coordinates by using the angles of sine, cosine, and tangent. The image below is an example of the unit circle:

source

The sine of an angle in a video game tells us that the motion is changing for y axis. So this means that an object when in motion is changing by the y axis.

The cosine of an angle in a video game tells us that the motion is changing for the x axis.

 

The sine and cosine of an angle helps give the coordinates of an image because they give where the x and y coordinates are.

DELIVER: buttonFly.pde

To finish off my game I need to swap the images when the key “b” is pressed.

In order to do that I need to add another image to my program and another variable.

 

DEVELOP: buttonFly.pde

a typed out explanation (or guess) of why the movement code needs to be so complicated

In version 4 of my program I added the image movement code by pressing the key “b” – (the movement code is highlighted in yellow):

The reason why the movement code is so complicated because the x and y movement are different. The cosine is how the x motion changed and the sine of y is how the y motion is changed. The spiral now accelerates and moves across the window where it does not come back on the screen.

In version 5 the spiral teleports to the other edge of the screen when it disappears of the screen.

The code highlighted shows how the spiral is able to transport to different edges of the screen when it goes off the screen.

DESIGN: buttonFly.pde

Rotation for an image needs the following code that is highlighted in yellow:

Since there is no keyReleased code the rotation on the spirals is going to continue until the game is not running anymore. In the next version (03) I added the keyReleased which stops the rotation if the key is no longer being pressed.

 

DEFINE: buttonfly.pde

In Processing there is a number of steps you have to take to place an image in a window as shown below.

The code is the following:

Moving forward with buttonFly, I have to add the following behaviors to my image

1. Rotation
2. Motion + Acceleration
3. Swapping the image