Lulu's Treat

Tutorial

Lulu found the right place to pee pee! She deserves a treat as reward. But lulu's owner is trapped in the maze of JaveScript… Please help lulu wake up her owner and get her reward!

Click mouse to start. Use A,D,W,S to move left, right, up and down. Once moving lulu up front the furniture, click mouse anywhere to interact with the furniture in order to acquire the attention value that indicates at top right corner (you might have to click mouse multiple times for the same furniture to acquire attention value). Once the attention bar is full, lulu would get her reward.

Proposal

The game is intended to simulate how my dog asks for treat as reward after she peed on the pad. The main character is my dog, lulu, and I also will featured in the game. There are three scenes. First is that lulu tries to ask me for a treat as reward but I was struggle coding with P5.js. Then the second scene would be: In order to catch my attention to give her treat, lulu starts to interact with surroundings, such as scratch furniture. Then third scene is: after lulu scratches several furniture and finally have my attention, I then will awake from coding and give her treat. The layout of the game would be interior space with multiple rooms, such as living room, kitchen and bedroom, decorated with furniture. Lulu could switch and walk in different rooms, and interact with various furniture. The gameplay would be that the player use left, right, up and down arrow to control lulu to walk between different rooms and click mouse to interact with furniture to accumulate attention.

Gameplay

Once the storyboard completed, I started to work on the gray box to test how far I could push the game to. There are main mechanisms of the game: one is the switch of different room within the same canvas and second is the progress bar to store the accumulated attention. To achieve the room switch, I first setup class and build the layout inside class with rectangular for each individual room. Then I use switch statement to store and call each room when the case is triggered.

For the progress bar, the initial idea was to assign random furniture with random value and the interaction with the assigned furniture would trigger the random attention value and store the attention value to progress bar. Because of the lack of coding skills, I could not assign random furniture with value. Instead, I choose specific five furniture to have random attention value and also add randomness when interact with furniture. I assigned five furniture with number 0 to 4 individually within an array, and made a switch statement corresponding to the array. Every time interacting with furniture with mouse clicked, it will random generate a number from the array and pass the number to switch statement to trigger assigned attention value. For instance, one of the specific assigned furniture with number 0 is sofa. After taking lulu in front of sofa and click mouse to interact with sofa, it would not guarantee to trigger the assigned value even though sofa is pre-assigned as value-carried furniture. This is because when mouse clicked, the random number generated from the array might not be 0, and player has to click mouse for multiple times to generate 0 and acquire the assigned attention value. The randomness is actually vividly simulated that lulu always scratch the same thing for multiple times till I noticed.

Visual Elements

Designing visual elements is huge amount of work. Initially, I was trying to find UI elements from resources website but very few image met my needs due the game viewing perspective. Thus, I decided to illustrate each elements by myself. Although the visuals were not perfectly in details, I have tried my best to build that warm aura of the living space. I also intend to use visual effects to enhance interactive feedbacks, such as the dazed face vs smile face, the p5.js message box and the happy emoji.

Reflection

This is the first time I develop a game from sketch to certain level of completion. Although I am not a hardcore gamer, I do spend lots of time playing various games throughout my life. One thing I have never realized before making my own game is the pain and struggle of developing a game. The exciting gameplays and beautiful visual effects are from the dedicated works of game designers and developers. Besides design and develop, I also notice the importance of usability testing. Once the initial version is completed, I spent lots of time identifying bugs and potential improvements of the gameplay. The game iterates to a better gaming experience with the conduct of testing.

The game I did for this assignment is also a reflection of my current daily life. I used to have little time accompany with lulu before the pandemic because of schools and work. However, in past half years, I have plenty of time staying and playing with lulu, and she is always slept aside me when I am working and taking classes. She gets more treats than before because I stay at home all day long. I can feel the connection with lulu is much stronger.

The game also have many incomplete aspects. Ideally there should be sound feedback when interact with furniture, and more narratives could add during gameplay. But overall, it was a incredible experience to design and develop my own game, especially with the featuring of lulu.