initial process
The final outcome was a completely different vision than what we originally planned. However, we knew that we wanted to create a game, so it was a debate between “A Stroll With Totoro” and “Flying With Kiki.” Our initial idea was “A Stroll With Totoro” similar to the Chrome dinosaur game. While this plan was a lot simpler than Flying With Kiki, we didn’t want to clash with another group who was also inspired by the character Totoro. So, in the end we went for Flying With Kiki.
We had a pretty clear vision for how we wanted the final product to look like. The 8-bit theme was actually not what we were going for in the beginning, but the only good image of Kiki we could use was the 8-bit version, so we ended up sticking to that theme. We were pretty lucky to find the 8-bit version of the original soundtrack and other images that tied the theme together.
Coding Process
While Kevin worked on the interaction aspect (i.e. Kiki flying and collisions) and polishing the speed of the sequenced images, I worked on the design of the game and sequencing.
Background
Initially, the background was drawn using a vertical gradient code and a cloud gif was added for more dimension. I was able to scale the clouds to fit the windowWidth, but then they were too large. Another cloud idea was to sequence individual cloud images randomly across the screen. I decided to not go forth with that idea and opted for a still background image, though later, I brought back the cloud idea.
Lesson learned: clouds are just an extra that I can go back to later if there’s time.
Buildings
The buildings were definitely my biggest struggle. Firstly, the buildings were all stock images (except for the school). In order to not have the watermark affect the aesthetic of our game I spent time photoshopping it out. Secondly, the images were loaded into one array to make the code less messy. I initially loaded each building individually and named them separately, but decided after watching The Coding Train that an array was more efficient. This actually became a problem for when I wanted to scale each building, since they were all different sizes. I tried assigning random width and heights to all the buildings and hoped for the best, but obviously that didn’t work out.
It was not until a few days prior to the due date that I decided to scale each building individually. It was lots of trial and error, and definitely not the best way to code it because it was hard code, but it did the job. However, when we were trying to figure out the Kiki and building collision I decided to crop out all the empty space in the images, which meant I had to go back and rescale everything again. Kevin and I also realized that our screen sizes were different, so that’s why we kept changing the numbers in our code. But with the empty space eliminated, Kevin coded the height to be the same no matter what the computer screen size was.
Lesson learned: don’t be so ambitious with so many building images. Although I am quite proud that they were scaled properly in the end.
Seagulls
Since there was one seagull it was a lot easier to scale. There was a little problem with the gif when it was sequenced, but thanks to Professor Steele we figured out the issue.
Lesson learned: load seagull gif every time so the speed of its flapping doesn’t increase.
Sequencing
At first I tried using the references from the CookBook, but I got a bit confused. Then I found a very helpful code made by The Coding Train on the p5 web editor. This helped me figure out how to sequence both the buildings and the seagulls, and later the clouds as well.
Since the buildings were all scaled differently, the speed ended up being different so that was a problem we encountered. Kevin was able to fix it with math.
Lesson learned: Don’t understand how to code something? First Google, then ask for help. Also, The Coding Train is the best resource.
Clouds
So while I was waiting for Kevin to do the collisions, I tried to add clouds to the background so it looked like Kiki was moving and not the buildings. At first I did want to draw lines in the ocean and make them look like waves, but it was pretty last minute so I opted for clouds. Although it was 4 individual cloud images, it actually was all from one image but I cropped it again.
The code was pretty much the same the buildings and seagull. However, instead of sliding into the frame they just appeared so that was a problem I encountered, but Kevin also fixed this.
Lesson learned: although the code is pretty similar to the buildings and seagull, don’t subclass it with them because the clouds move the opposite direction (very silly).
Sound
Going into this, I knew we had to use the main theme from Kiki’s Delivery Service. I was super lucky to find an 8-bit version of the song to tie the whole game theme together.
I actually called the background music in setup, which professor specifically said not to do, but it worked. It actually didn’t work when I placed it in a keyPressed function. For some reason that made the background music really slow and broke the program. Additionally, when I tried to dispose the live browser and closed the tab, the laggy music kept going and it was kind of scary. Other than that, the other sound effects didn’t have that problem.
There was actually a lot of feedback saying the music was very loud. I always had my volume at 6, so I didn’t think much of it. However, to save everyone’s eardrums I changed the volume in the code. Also some people said the jump sound still overlaps, but I changed the mode to “restart”.
Lesson learned: my volume is not the same as someone else’s volume level.
Instructions Page
The final aspect added was the instruction page before the game starts. This was added pretty last minute. At first I was going to just put some text at the top left corner saying “press space to fly,” but people suggested more specific instructions. I was going to use an image from the movie, but it was too busy. I may have cheated a little by using photoshop again for the text. I did try coding in the text, but since it was pretty last minute I was limited with a few font styles. Furthermore, positioning the text to always be centered on different screen sizes was difficult.
A huge shout out to Kathryn and Madi though because their code helped me figure out how to go from the instruction page to the game.
Lesson learned: Looking at other people’s code helps a lot! And next time I will try using code to write the text.
reflection
This project was very different compared to the last project I created and definitely a fun challenge. It tested my skills of loading images and sounds, using Object Oriented Programming, collaboration, and most of all how to name variables without being confused (I don’t think I did very well with that).
Visually speaking, I think it turned out pretty good. I’m happy that the buildings are scaled properly and everything is sequenced (for the most part). The images are stretched or anything and it has a central theme. Interaction speaking, it could be better. If we knew how hard building collision was going to be, we probably would’ve changed the whole premise of the game. After hearing more feedback yesterday, it would’ve been nice to base the game off the movie a little more. For example, we were going to add a feature where Kiki delivers and picks up packages. So if we were to do things differently, that would be our idea.
It’s unfortunate that we couldn’t get the building collision part, but I think having the buildings as a background component also works. I actually wanted Kiki to spiral off screen if she hits a bird and lose health, but we were running out of time so it ended up being a game over screen. We also didn’t intend to move the birds up and down, but since we couldn’t get building collision we added that in.
This project is far from perfect, but it was really fun to create. I do hope to go back to this in the future.