THAÍS ALVARENGA


THAÍS ALVARENGA 

Creative Technologist  |  Narrative Designer  |  Environmental Designer  |  
8/02/2022

ASTEROID GAME


So I took a whole weekend to make this game…


DESCRIPTION


In this simple game, the player controls a spacecraft whose mission is to collect StarBits, however, they must avoid colliding with meteors or they will risk loosing all the progress they have made. Score is displayed on the upper left corner. When the player collides with a meteor, the spaceship becomes red for a while and the score keeps decreasing until they get out of the way of the meteor.

Idea


I got inspiration from one of Daniel Shiffman’s Coding Challenges titled Starfield and from Super Mario Galaxy in which Mario collects this star shaped things called Starbits.

Process


After watching the video and playing a little of Mario Galaxy with a friend, I decided to write down the classes and functions that I thought I would need for this assignment. I did this mainly because last assignment was very chaotic for me in terms of knowing what I needed to do, so I decided to write how I was thinking of making the code rather than just go at it.

This is what I ended up with:



I decided to star with the background and do the star object first because I thought that after watching the video, I could do it in a breeze, after all Shiffman’s video is 13 minutes.

I took a whole day to figure out how to do just the background. Also, the field that I was making only appeared on the lower right hand corner. Like this:



So I texted on the Discord chat and Professor Shiloh and Professor Aaron came up with a solution, thank God.

Anyways, moving on.

After doing the Stars, I proceeded to make the spaceship. I did two versions of it: one controlled with the keyboard and one with the mouse. I wasn’t sure which one to leave because I felt like they had a different range of motion and deciding would rely on how the meteors and starbits.

Once the controls for the spaceship were done and the image of it was resized, I decided to make the meteors.

(Just a side note: I know that I am actually doing meteroids and not meteors, but meteors is just easier on my poor brain).

I think this was the hardest part of the process. The meteors were just not cooperating with me. When they were immobile and I just placed them at random positions, they looked beautiful, but then, when I started to make the functions to move them, it was just horrible. My idea was to do a similar mechanic to the stars and increase the meteor’s sizes as it moved through the screen. Nonetheless, when I tried to resize it, the more time I left it moving, the blurrier the image got.

Like this:



After spending almost a day in useless attempts to better this,  I decided to text on the Discord group and professor Aaron recommended using the scale() function along with changing the values I used to map the size of the meteor.

It worked, but I still had problems with the fact that the resizing was not stopping but getting way past the size that I wanted it to be. The problem was that I wasn’t aware that the map function did not restrain the value from continuing to increase, so I had to learn how to use constrain(). Furthermore, I also had to learn how to use the push/popMatrix() and the push/popStyle().

For the Starbits, I decided to use the star() function from the Processing reference. I had issues figuring out how to change the position of the star itself (every time I tried, what changes was the rotation or the size, but not the position). I don’t know if it is just me, but I found that some of the explanations given on the Processing reference could use a little more information about what the values passed down in the function represent.

After figuring out how to change the position of the Starbit, it was time to do the collisions. Professor Aaron taught me how to do it in an easier way than how I was doing it. There was a problem however with the values that the keyboard was giving. I printed them out and they were way too big in comparison with the location of the canvas. I later found out it was because the function was multiplying the value of the keyboard by two. I reused the same logic for detecting collisions to collect the Starbits. I then used the collision to change the tint of the spaceship to red when it got hit and to generate a new starbit in a random location when the player collected it.

When I put it all together, I didn’t really like the movement of the spaceship with the keyboard. It was too linear for the player to be able to avoid colliding with the meteors, so I opted for the mouse controls instead.

Finally, it was time to do the score. I had to watch a tutorial for the score and learn how to use the text() and its style functions. I placed conditions to increase the score when collecting the Starbit and decrease it when colliding with a meteor. I forgot to call the functions in the main which is why when I placed the code within the assignment, it wasn’t working.

I cried of happiness when I started to see the score change in the screen.

As a final touch, I decided to make the color of the score become red when the score dropped below 0.

RESULT





FINAL THOUGHTS


I really like how this assignment turned out, but I must admit it was very difficult. I feel like most of this project was me doing something, seen it work when tested, then seen it failed once I implemented it in the actual code and asking for help. To be honest, I feel like most of the time I was asking for help because I had no idea of what I was doing wrong or how to start debugging.

I think one of my biggest problem was keeping track of whether I was calling the functions or not. I made a lot of classes and a lot of versions of the project because I was scared of messing up what I had, yet that also made it hard because I had one place in which I was testing the score, one in which I was testing the collisions, etc, and when I placed them together, it was very easy to forget to add stuff to the main tab. I guess this is something that I will fix with practice.

Another thing that was difficult was centering the images and keeping track of the points of reference used. At some point it became very confusing to know which point of reference was been used by which object. Another thing was that I didn’t really understood the difference between push/popMatrix and push/popStyle. Now I know, thank to Prof. Aaron. This made me realize that a lot of my problems could be fixed more easily if only I knew the correct syntax.

What I think was what made me very slow in my process, however, was coming up with the logic of the code. It was very extremely difficult to visualize what I was doing and think of other ways to accomplish something when my initial idea failed. I also think that this is something that will become easier the more I practice, but man it was hard (and at times discouraging), but still, after taking a break I feel like I was able to solve many issues by myself.

I am extremely happy with this mini game and after completing it I had a lot of fun playing (I even sent it to my parents so they could play).

This is the link to the GitHub with the code. If you decide to play it, I hope you enjoy it!

Feel free to reach out to me for more work inquiries or to chat!


Thank you for visiting!

©2023 Thaís Alvarenga. All Rights Reserved.