Art From Code: Jumping Johnny

When the conference project was first assigned, I knew I wanted to create some form of a side scrolling game. As I began to work on this project, I was fortunate enough to find a drawing program that I could use (called Piskel), and from this program I was able to create a number of characters in the form of animated gifs. As I started to draw, though, I found it quite difficult creating characters in motion. Not only did they have to look aesthetically pleasing, but they also had to be cohesive in movement. As I continued to spend multiple hours on the program, I was able to come up with a couple of characters I would end up using for the game. Although it was a long and difficult process, in the end it was extremely rewarding to see how it turned out.

In the process of creating each gif, it was extremely important that I created 4 or more animations for each character. Usually the more animations I had, the smoother it looked in the actual game. The reason for this was because of the frameRate, and how the frameRate was too fast for the gifs. Though the more animations I included for each gif, the more I was able to give a much slower perception of it in terms of motion. Some characters I found to be much easier to create, while others not so much.

For the main character, I had difficulty in creating motion in the upper body. Therefore, I chose to not edit the arms, while I edited the legs for each sequence. Even with multiple attempts, I could not figure out the placement I needed to create the movement in the arms. In general, I have a hard time when it comes to drawing people, and usually for animals it comes more naturally to me. Therefore, you can see that the eagle and the bunny look a lot more developed than the person does.

As you begin playing the game, you are given a couple of obstacles to avoid as best as possible (the eagle, the little fire, and the bunny). Once the main character makes contact with one of the obstacles, an if statement is triggered and instantly ends the game. For this part, I used collision as well as a couple of if statements, and from this the program was able to determine the end result of the game. From the start it can seem easy, but as you continue through each level the difficulty level rises as the game gets increasingly faster. For the scenery, I created triangles in processing to mimic the desert dunes, an ellipse to resemble the sun, and cactus’s to represent the plants in the desert (which I created in Piskel).

Each time you do level up the background will change from broad daylight to nighttime. As this is done, the eagle will replace the bunny as well. For the background to change correctly, I had to use less than and greater than statements. As the rgb values decreased to the specified numbers it would change to broad daylight, while when the rgb values increased it would change to nighttime. For the background, I wanted to create a transition rather than an instant switch, and therefore I used the greater than and less than statements.

For the title and end screen screen, I incorporated a number of boolean and if statements, and this made it possible to go from one screen to the next. As I started to work on this project, I was intentionally not going to utilize boolean statements and classes because of my lack of confidence in my ability to use them. However, towards the end of the project I found myself utilizing them to the full extent. I eventually realized the perks of using both, especially in a video game setting, and this made things a whole lot easier. In the end, I enjoyed this project a lot because I was able to learn a lot of new things, while also creating my first game.

Author: Ben Park