p5js Coding Challenge | Update 3

Process

take a peek at my latest exploration

process details

p5js Coding Challenge | Update 3

Idea: Pokemon Galaga

Inspo Links: http://www.freegalaga.com/emailform/form.php

Final Game Link: http://i6.cims.nyu.edu/~rpr288/FINALLL/index.html

Ryan
We decided to recreate the classic arcade game Galaga for our midterm project. Starting out, the challenge that were immediately apparent to me was the behaviour of enemies. In order to keep track of all of the enemies in the game, I created a multidimensional array filled with Alien objects. Now I could not simply display the array, it had to be processed by multiple other functions to ensure the behaviour of each enemy was correct. The processing that had to be done can be broken down into a few distinct categories notably: stationary movement, visibility, attacks and respawn behaviour. Stationary movement was accomplished by constantly moving the x value of the all the Aliens while they are not attacking. This value is constrained between the bounds of the canvas. The collision system in the game leverages visibility as a way to show that two objects(alien,player or bullet,alien) have collided and they should now be dead and off the screen(invisible). The way the game has the alien attack is by assigning each Alien a random value each loop that is compared to a static value. If the Alien value is below the static value than the Alien will move into attack mode. Bullet direction and timing is determined by random numbers in a certain range(between certain Alien y values a bullet will fire in a semi random direction). Respawn behaviour is handled by placing aliens closer to the player based on how many times they have flown past alive. This creates a sense of urgency to shoot the aliens instead of merely dodging bullets. Another challenge I faced was creating a bullet system that I liked. Since the Aliens begin to come down really fast a few levels in, I wanted the player to be able to spam bullets. At the same time allowing this would mean the game would be too easy with the aliens being destroyed in seconds. I was able to find a compromise in this by allowing the player to spam, in turn decreasing the range of their projectile or to shoot slowly and gain a longer range. These challenges coupled with a crunch for time due to a project pivot caused me to be unable to implement many of the advanced features I would’ve liked but I am still happy with the look and feel of our finished game. It was very fun to work on and I hope I can create something on a grander scale for my final project.

Claudia
My main role in this project was the team designer. I focused on making the game looks nice for a good user experience. After we decided to do our project based on Galaga, we thought Pokemon would be a fun way of making it unique. Because I wanted the game to be on brand, for all the Pokemon graphics I picked out 16 bits art.

However, other than collecting all the art materials, one of my tasks was to make the special aliens to fly in. At first, we want to recreate how Galaga has it — the aliens flying in in a wavy motion. However, we realized this was going to take a really long time with a lot of math equations. Thus, when I was working on this part of the game, I ended up just moving the special aliens in a linear motion. If we had more time with this project, I would love to figure that part out.

Austin
My primary role in this project was concerned primarily with front end. Overall, I tried to work with Claudia and Ryan to create a cohesive and immersive experience for the end user. In the beginning, Claudia, Ryan and I spitballed some ideas, eventually settling on mixing Pokemon and Galaga. I already had experience with making my own hacked versions of Pokemon as a kid, so I was already familiar with some asset resources. By partnering together with Claudia, I was able to share my prior knowledge and put Claudia in the driver’s seat so we could create the best theme possible. Once Claudia had selected a look and feel from a generalized search, I was then able to help her connect with the corresponding asset sources. Once we had established the look and feel for the game, Claudia took the lead in bringing it to life.

One aspect we sought to achieve but fell short of was the enemy looping sequence. I have always found motion graphics to be exhilarating, fascinating, and a world of endless possibility. I was really excited when this project presented the chance to try and do some motion graphics work, and given its relationship to front end, I jumped at the chance. However, my results weren’t too fruitful. 12 hours and one sunrise later, I decided to call it a “learning experience”, to be continued at a later date. Hopefully I’ll have another chance this semester to give something like this a stab!

My most visible contribution to this project is the start menu and area around the canvas. Our start menu was inspired by the Pokemon Emerald start screen which I reduced to the basic elements of a gradient background, animated figure, and flashing start text. I first began by gathering a moodboard of Pikachu gifs. Then, I made a mockup in Photoshop with some of Claudia’s assets (such as the Pokemon Galaga logo) and starter text to see which gif best matched the feel we had already established. Due to the fact that I opted out of Web Design 1, I had never actually learned how to edit and make gifs in Photoshop. Although I didn’t learn motion graphics, I did learn how to edit and make my own gifs! Once I had my mockup finished, it was easy to export each layer as I coded it into the DOM. Next, I centered the P5 canvas vertically and horizontally. The background and feel we had picked allowed for the P5 canvas to blend into the 100vh container fairly well. I attempted to have the score and number of lives displayed on the right and left sides of the canvas. However, I didn’t have this idea until fairly late in the game and I had issues getting jQuery to talk with P5. This would be a good possible way to expand the cohesiveness and interactivity in the future.

photos