Katamari Damacy Interactive Game Poster

Walkthrough (click the arrows to navigate!):

1. You can go left at the start screen and enter a room to change the color of your ball (press the button with the color you want)
2. After you have your color selected go right of the start screen, continue right to collect a cow
3. In the forest room you can click the fruits to make them fall to the floor
4. When you move to the next room, any fruits on the floor will be collected
5. After the forest you enter an open field, click anywhere to build a rocket
6. Click on the rocket to launch into space
7. The end! (you can hover over stars to make them spin!)

Design Goals and Process:

When making this interactive experience, my main goal was to create a Katamari-like experience out of the old point-and-click games of my childhood (games like Putt-Putt and Freddie Fish). This is where the idea for a color changer and the navigation arrows came from. 

To make this game, I used a variety of tools. Photoshop was my primary way to draw, and I learned Adobe Animate to make the animations that play when you move to new rooms. I had never animated before, but a few tutorials got me where I needed to be. I learned to make a few simple animations and stuck with that. Next, I went to Twine to put all the animations and images together. I had used Twine before, so I was familiar with it. However, this time I had to do a lot of transforming and positioning of images which required me to learn a bit of CSS. I also found out that I do not like using CSS. Twine has this funny thing where you cannot see local images unless you build the whole game. So every time I wanted to change the position of an image, I would need to edit it in Twine, build the game, open the game in a web browser, navigate to the room with the image, take note of where it was, and repeat. It took a lot of trial and error to get everything correctly positioned, especially the stars in the final room. Speaking of the stars, the CSS code to get those working took a long time to figure out. At first, I tried writing a time loop in Twine using (live:) and (mouseover:) but after a few hours, I gave up. I later wrote a CSS class and animation for the stars.