Idea

First of all, I got inspired by the old game (https://kbhgames.com/game/throw-paper), where a player needed to throw a paper into a trash bin. Then, I decided to modify it, thinking about making a waste sorting game. For this idea, I decided to rely on the campus’s recycling procedure. I made some research and stumbled upon plenty of valuable resources from our university about sustainability and effective recycling. https://www.thegazelle.org/issue/148/features/recycling-rundown?fbclid=IwAR29lGNj9u9fJKsSh04SI1rM-9KAqOV92OBGTBX-ObOIKGupfIssHzaCB2A.

https://docs.google.com/presentation/d/1pbGNdAsGjuJ5EpqZOm0oOVZWK7rg-g04gpsV4Wo7e0E/edit#slide=id.p.

 

Process

Throughout the process, I had struggles with implementing the idea. I could not rely on the game I got inspired by, since there is no need of being able to “hit the bean”. Instead, the program should sort trash into different categories, which is more about a “correct placing”. Thus, this idea reminded me of the old game Tetris, where a player needs to use keys to place a figure. Similarly, in my project, using the arrow keys, a player needs to sort out the waste and put it inside the correct bin. 

I had some difficulties in making randomly appearing pictures from the array, and it, honestly, took me a lot of time. Therefore, it is kind of a slow progress :):

Plans

I have a lot of work to do. First of all, I need to figure out how to do the main “sorting” process in the code. Roughly speaking, the program should be able to separate images into three categories: general waste, paper, plastic. Then, I need to add audio, a menu with instructions, a timer and scores.

 Idea and Inspiration

The idea I had for my game for this midterm assignment was the classic breakout game. From a young age I had played this game and I really wanted to code this game out and re-create my childhood experience. As simple as this game looks, this 2D game isn’t as easy as it appears to be. I wish to create different levels for this game and plan to decrease the paddle width as the user loses its lives. The progress I have made so far is purely on the coding and logic of the game itself and not the appearance or functionality in terms of importing sprites for the paddle and having sound effects along with the menu screen.

Game Implementation 

I want to start by coding how the game would work and by coding out the main object in the game which is the ball, bricks, paddle. After any shading all my global variables I created a bricks array which would hold each brick as an instance just like the object oriented assignment. I also populated and array with the brick colors in order to create a fading effect by using colors close to one another. I then created a function for paddle which was responsible for moving its position left and right depending on the key pressed which would raise a Boolean flag that triggered the movement. 

Then I went on to create the ball which was essentially a circle but this was the most time consuming function. After carefully figuring out the math I was able to get the moving and bouncing effect. I used several if conditions to restrict the circles X and Y coordinate in between the canvas and the interaction with the paddle. The hardest part of all this was the collision detection. For this, I created a different function which checked for the collision at the bottom of the brick by looking at the coordinate range where the ball’s radius would overlap with the bricks dimension which would mean there was a collision and it will return true. In order to make the brick disappear after the collision I iterated through the bricks array and checked for collision between the ball and the particle brick and if so I used the splice() function in p5.js to remove the brick from the array. I would also increment the score at this point. For the loss of life it was fairly easy since I would just check if the circles y-coordinate was greater than the height of the canvas which meant that the player had failed you make contact with the paddle and has lost a life. 

For creating the bricks on the board are used functions in a way that allowed the bricks to be populated across the canvas using nested for loops. The growing of brick would just fill each brick with its corresponding color and simply create a rectangle with respected coordinates. I am intending to replace this rectangle with a Sprite later on but as of now I wanted to see if I was able to use this to get the game up and working.

I also created messages for the user when life is lost or restart game but I have not been able to add any buttons yet. I wish to create a whole menu screen which would be used before start of game and restart along with different levels and possibly even multiplayer option.

Plan

I plan to add the following things to my game:

• Create gradient background which would change as the user score increases
• Add sound effects when there is a collision and a brick is destroyed
• Increase the game difficulty by reducing the paddle size making it harder and harder.
• Import sprites for the battle and possibly other enemies/obstacles that the Player might have to avoid.
• Create a menu screen with instructions at the start of the game and restart.
• Add multiplayer option which would’ve allowed two players to compete against one another. However I feel like this would be time consuming and difficult to implement as it might require a complete new code.

 

 

Game Idea

My game is going to be a 2D arcade shooting game in which random enemies pop up on the screen and the user has to click them as fast as possible to score points. There will be a crosshair on screen at all times and each time a shot is fired a gun fire sound will be played and there will also be some background music. Each game will last 60 seconds and at the end the final score, high score and average time taken to hit a target will be displayed on the screen. The game will begin with a starting page in which the name of the game (which I haven’t decided yet) will be displayed and the user will have the option to start the game, change the crosshair size. When the start button is clicked, the game instructions are then displayed on the screen and the user has to click the screen again for the actual game to start. Once the game ends, the statistics will be shown and the user will have the option to play again.

Implementation

I started by creating a class for the Game in which I would store an integer variable to indicate the current state of the game (state = 0 means menu page, state = 1 means the actual game starts, and so on). This would make it easier to transition from one game state to another and would make it easier to be able to restart the game once it ends without having to re-run the code. I also added a high score variable to store the highest score in the current session. I also made a crosshair class so the user can change the size of the crosshair in game and created a draw function inside the class to draw the crosshair at all times during the game wherever the mouse pointer is.

After this I downloaded an image from this link
https://steamcommunity.com/sharedfiles/filedetails/?id=766712125
to use as a background for my menu screen. The image had a resolution of 1920×1080 so I changed my canvas to a size with the same aspect ratio to make the image not seem stretched or compressed.

I then started working on the buttons for my menu screen and used rect, text and a lot of if statements to do this. Then I worked on my mousePressed function, which would have several parts to it depending on the current state of the game. I also created separate functions to be called within the mousePressed function so that not all my if statements will be in my mousePressed function.

In mousePressed the first thing I did was store the mouseX and mouseY variables in two separate variables just to make the mouse clicks slightly more accurate, because mouseX and mouseY will be changing very fast in the game. I then pass these two variables into the relevant functions as required.

I am using an array of size 3 so that there will only be 3 enemies on the screen at any given moment. As for the enemy hitboxes, I am using a hypothetical rectangle around the png of the enemy to detect if the user clicks on the enemy successfully.

So far I’ve finished the starting screen, the instructions screen and most of the actual game.
Enemies are generated at random locations on the screen and if the mouse is clicked inside any of the enemy hitboxes and the score is adjusted accordingly. Now I have to add all the sounds and make them play on each mouse click and each time an enemy is successfully hit to add feedback and create the game over screen. I also have to add backgrounds to the different game states.

Idea

I wanted to create something that educates my audience (primarily pre-high school adolescents). Since I loved studying biology when I was that age, I decided to illustrate the defense mechanism our body employs against cancer cells. Through my game, I want to cover the basics of immune response to cancer cells i.e. the types of immune cells involved, their modes of action, the cancer’s response to it etc.

I started by exploring the free 2d models available online that could be relevant to my project. But, initially, I could not find anything that I could use. For example, I would find a cartoonish cancer cell 2d model but it would have a white background which would not fit very well with the background in-game. This is why I decided to change my project idea altogether. At this point, I decided to settle for a Spaceship-shooter-esque game. Good 2d models were very easy to found and I made good progress too. Here’s what I had been working on up until yesterday (use the arrow keys for movement):

Even though I was making good progress, I did not feel satisfied. I was passionate about implementing my initial idea and working on anything else felt like I was holding myself back. After a lot of thinking and much needed motivation from the professor, I decided to go back to my original idea.

Cancer cells can proliferate and spread to parts of the body other than where they initially appear. This process is called “Metastasis” and is the title of my game. The user plays as a cancer cell and it must fight off the immune system’s cells in order to take over the body. Through the game, the user will be prompted to learn about the immune system’s mechanisms by understanding how the enemies will attack the player. In this way, the user actually learns how the body defends itself against cancers in real life. I decided to let the user play as the cancer cell, even though playing as a cell of the immune system would make a better protagonist, because there would be more variation for the enemies (immune system’s cells) in the game. The game is set in a blood vessel (background).

Implementation

As I mentioned earlier, I started by exploring free resources for the game online.  I still ran into the problem of having images with colored backgrounds but I recently learned how to use Adobe Photoshop in another Interactive Media course – Communications Lab. Setting Alpha values to make the background transparent was easy and gave me exactly what I needed.

I wanted to code the most technical part of my game first. This is why I focused on the gameplay instead of the text-screens to guide the player. Even though not all the gameplay features have been added yet, I believe I have implemented a strong foundation to later introduce new enemies and changes to the cancer cell.

Here is what the game looks like right now:

I use object oriented programming to code the flowing red blood cells in the background, the enemies, the cancer cell the user plays as, and the projectiles fired by both the user and the enemies. The projectile fired by the user is representative of the toxic substances cancerous cells often secrete like enzymes that digest the body’s cells in its surroundings. As for the enemies, I have only encoded the white blood cells right now and they fire antibodies onto the cancer cell.

As of now, my code is not commented. But, I will explain the most technical aspects of the gameplay here:

1) Health Bar:

The health bar consists of two rectangles, one with a red fill and the other with a black fill. The red rectangle represents the percentage of the health the user still has left while the black represents the percentage that has been lost. Combined, they effectively represent a basic health bar.

2) Shooting:

The user fires a single projectile every second. Two enemies chosen randomly every two seconds fire a single projectile each that seeks the position of the user in the frame that the shoot() function is called. In this way, it is possible for the user to avoid the projectiles by maneuvering using the arrow keys. If an enemy is hit, it triggers a decrement in their health and triggers a hit animation. If the enemy’s or the user’s health equals 0 (set up to be at the second hit right now), the cell death animation is triggered.

Plan

Now, I only need to extend the gameplay to include at least one more enemy type that has a different mode of attack than white blood cells, like the T-killer cells that secrete toxic substances in close proximity to the cancer (include an enemy that utilizes melee instead of shooting projectiles). After that, I only need to encode the starting menu, instructions, and “game over”/exit screens. I will also add relevant sounds the game with perhaps background music, and different sounds for when an object is hit during the game. Overall, I feel more satisfied working on this project than the spaceship-based one.

The idea of my game originated from me and my team’s Communications Lab comic assignment, Benny the Fish. This comic  narrates the story of Benny, a little fish that got adopted. The game, named as the comic, will follow Benny as he navigates the ocean and avoids obstacles that will hurt him. I want the user to control Benny with the keyboard arrows as “villains,” as I call them on my code, come from the right side of the screen as if Benny was moving trough the ocean.

Update 1: Controls 🎮  (February 24th – February 28th)

I began my process by creating the tittle screen, instructions and the main character. I inserted the logo as an image, the instructions as a text element, and the playable character as a .png image. I then added if statements with Key_Code indications, as learned during class, to make Benny move. I played arround with the speed to make sure it works well. I also added boundaries on the screen so Benny can’t leave and a subtle bouncing effect to make it feel better. My next steps are:

1. 1. 1. Building the villains and their interactions with Benny.
      2. Recording the sounds.
      3. Building a simple sprite sheet to simulate swimming.
      4. Remove the instructions and logo when a key is pressed.

Update Villains: Experimenting (March 1st – March 2nd) 👾

When thinking about the idea of the game, I did not realize how much of a challenge it would be to design the villains. [Quick backstory: When I was a kid, I used to call Goombas in Mario Bros villains and my cousins would mock me for it endlessly. Hence, my code :)] I started experimenting a little on the above sketch (from update 1) and quickly wrote some lines that would prevent the rest of the code from running. Thus, I decided to figure out all the details on a separate file, and then, add it to another file.

My first step was to create a class called Villain. I gave it parameters of x, y, width, color, and speed. Then, I created three arrays for the three types of villains I will have.  I am unsure if this was the right choice, as I have not been able to have each array have a different number of objects. (See lines 9 and 14). Then, I made them move at different speeds and appear randomly each time they crossed the screen. I spent an embarassing amount of time playing with the speed values to make sure it looked natural and similar to other games I’ve played before.

You will also see in my code that I began adding some lines to figure out the interactivity within the circles. I, however, am struggling to create the distance statement to all the different radii and circle centers.

Next steps in my process and planned timeline are:

1. 1. 1. Fine-tune the radii math –> Wednesday
      2. Combine both sketches. –> Wednesday
      3. Design the villains. –> Wednesday
      4. Recording the sounds. –> Thursday
      5. Building a simple sprite sheet to simulate swimming. –> Thursday
      6. Remove the instructions and logo when a key is pressed. –> Thursday

Update 2: Integration (Monday March 2nd Class) 🔗

During class I worked with integrating two of the above sketches: the villains and the playable character. An immediate next step I must take is to, through conditionals, make the tittle & instructions part of the opening screen only as opposed to the whole game.

Update 3: Conditionals & Design (March 3rd – 6th) 🏞

This might be one of the, if not the biggest update for Benny the Fish. After integrating the villains & controls during Wednesday’s class I spent a lot of time with the conditionals. During the initial days of this weekend, I wrote in my code a switch statement that would create the modes of (1) intro screen, (2) gameplay, (3) losing screen, (4) winning screen. This allowed me to have a much more structured product. I also added if statements to build the killing of Benny mechanism, while adding a live count.  I also added images as backgrounds which make the experience of playing much better. Currently, the game has many elements to be fixed, bugs and improvements, but as soon as I add the designs for the villains and figure out how to restart the bottles.push() & canPlastic.push() for loops, the game will be a playable and great initial product. I still have a lot of work ahead, but believe the game looks very promising.

As always, my immediate next steps are:

1. 1. Designing the villains & adding them into the game.
   2. With the villains’ design, I can make sure that the distance interactions are as accurate as possible to give the game a better feel. (Not looking forward for this step)
   3. Add Background music, bumping, dying, & eating sounds.

Some overall steps I want to take are:

1. 1. Figure out how to win. Time? Eating Mechanism?
   2. Adding different levels. I would love for Benny to grow & change of scenery as he does in the comic.
   3. Adding the tail animation for swimming.

Helpful for Midterm:

• Intersecting Circles
• Checking a Grid

Computer Vision:

• Playing with Pixels
• Video Capture
• Frame Differencing
• Video Mirror (flipping the x)
• Trigger Sounds in Space
• Video Drum Machine
• Kyle McDonald Computer Vision Examples
• Optical Flow

I was scrolling through twitter and I found Kim Kardashian to be trending, therefore, I thought it would be interesting to search Kim Kardashian on Google Trends, and it showed me how much people searched Kim Kardashian over time. I turned it into a graph and added. a picture of Kim as the Background as we learned last class. One of the difficulties I met was that I wanted the graph to be more stretched out on the Y-axis to look better. I used circles instead of normal lines and added a color that I think represents Kim Kardashian haha.

Idea

The idea for my game is based on those old-school flash games I used to play in middle school: I wanted a simple single player game with moderate replayability. I settled on the concept of a game where the user would spam a button on the keyboard to accomplish some goal with ranging levels of difficulty, using weight lifting as a theme.

Implementation

I started by creating the game class, which involves a variable holding the current screens and methods for each screen. I needed a game start screen, an ingame screen, and a game complete screen. I also created a clickable rectangle component I used for buttons that had optional text inside, with a method that returns whether or not the button is being hovered or not.

The game also has a weight variable which controls the amount of resistance the game will enact on the user so a higher weight makes the game harder. I used buttons to dynamically change the weight value.

As of now, the user mashes space bar to increase the current level of completion, and if the user is unable to complete the game within a specific timeframe, the game results in a loss.

To control the game restart, I used another method that reinitializes the game, setting all class variables back to their original value, which also gets called in the constructor.

Play the WIP game here

TODO (in order of importance):

1. Implement background images that reflect the progression of the game
2. Implement music to play in the back
3. Implement sounds for the users button presses (can get annoying to make sure it isn’t too loud)
4. Styling for colors and text

Ideation

For my midterm, I wanted to make some form of pixel art-type monster fighting game in a 2D world. My inspiration for this comes from games like pokemon that I played on my Gameboy as well as newer Nintendo Switch games like Towerfall. I drew up a sketch of what I wanted my game to look like but I was open to making changes so that the gameplay is smooth.

I know this is going to be challenging and quite time-consuming but I want to see how far I can push myself and create a fun game that I and others can enjoy.

Assets

I was thinking of making my own pixel art assets but soon found that I do not have the skills nor the time to learn the skills to make them myself right now. I would like to explore this further in the coming weeks but for now, I used assets from Itch.io. I found some player and object sprite sheets that are free for non-commercial use.

Movement

I flipped the sprite sheet to obtain movement in the left and right directions with Preview on my laptop. Using the boilerplate code from class that Professor Aaron provided, I was able to get my player up and running.

Attack

This was a bit tricky as I wanted all the attack sprites to loop with a mouse click. I couldn’t figure it out at first because I was using a while loop which made my program freeze. With some help from discord, I implemented it using an attack boolean. Although this increased the amount of code I had, the attack was working fine now.

Stage

I was hoping to find a stage online that I could use for my game but I didn’t really find anything that I liked. I did some googling and found something called tilesets which is similar to sprite sheets but for building 2D levels. I use this dungeon tileset that was free to download along with Tiled to create my own basic level.

Controls

w – move up
s – move down
a – move left
d – move right

mouse left click – attack

Game

Note: This is a work in progress.

 

My first intention was to display simultaneously the input by users to the screen. The task could be solved by referring to the materials from the class of the example of creating a “Letter” Object and adding an extra “Letter” object in the Array of Letters. The result is the following.

function keyTyped() {
let lettercheck = key;
if (lettercheck.length == 1){
myString += lettercheck;
mycharArr = [];
let x=25;
let y=80;
for (let i=0; i<myString.length; i++){
if(x >= 560) {
x = 25;
y += 25;
}
mychar = new letter(x,y,myString[i])
mycharArr.push(mychar);
x += 15;
}
}

The next step was to make letters fall when the screen is clicked. I decided to do this by adding a boolean in letters to change to true when the screen is clicked.

function mousePressed(){
for (let i=0; i<myString.length; i++){
mycharArr[i].isfall = true;
}
}

I included BACKSPACE to delete the last input made by users, Enter to reset the position of the letters after falling, and TAB to clear the screen and reset the input by the user.

The final result is the following.