DES157B Capstone Case Study

Joanna Hu

Project Overview

My project can be described as “‘Poptropica’, but not really”. It is a simple RPG game where players move throughout the world to complete mini quests and achieve the ultimate goal of finding the missing seal piece. This game is made for Davis 4th graders learning about Californian history. This particuluar project focuses on Patwin history, and it aims to educate players about the history of Davis and the Patwin tribe through and interactive and fun experience.

Project Research

I knew I wanted to create a game for my capstone project, because based on personal experience, education is always more fun and memorable when things are gamefied. I drew inspiration from relatively simple games I’ve played before: Poptropica and The Past Within. Both were point-and-click games centered around solving puzzles with story elements interwoven into the game. The story and visuals were what mesmerized me when I first played these games, so I decided to emphasize on that in my own project by creating distinct graphics linked together by an interesting story. Since both Poptropica and The Past Within used point-and-click mechanisms, I decided to try to focus on that as the main interactive element in my project.

Visual Design

To emphasize the gameification of my project, I decided to use pixel art and fun/bright colors. Both of these elements adds visual interest to my project, thus intriguing my 4th grade audience and inviting them to further interact with my project. Initially, I thought I would go with a black and white palette and highlight interactable items with different colors. But, after asking some of my peers for their thoughts on this, they suggested adding color to the entirety of the game since 4th graders tend to gravitate towards colorful objects, and it would make my game more dynamic. I didn’t have a set color palette for my graphics, but I did use photo and pixel art references of each item to make sure the graphics were relatively accurate in color and shape.

I also added animations to various sprites to make the game feel more alive rather than a static, scrollable picture. Many of my peers agreed that the animations were a great touch and added more visual interest to the game.

User Interface

I drew inspiration from Poptropica and other flash games when I created my user interface. I wanted users to focus on the game once the game loads. So, I made the game canvas front and center on the screen with the title of the game below it as those elements aren’t as important. I included all the instructions and backstory of the game inside the game canvas to ensure the user stays focused on the game and on learning more about the Patwin tribe. Additinolly, I made sure the space around the game canvas was left blank to avoid distracting the user from the main task of gameplay.

In terms of game layout, I first designed it so that the map was split into distinct areas, which made individual level creation easier to manage and made the game feel more flash-game like. But, after running into problems with loading off-screen sprites and realizing that this method would result in a cluttered JS code file, I decided to have the entire game set on level, much like Mario. This ultimately led to a smoother gameplay experience since players are no longer teleporting between screens like cutscenes. It also made the code a lot easier to manage as there are less lines to worry about, and I no longer had to wrestle with level indexes to ensure players are moving to the right screen at different points of the game.

I was also considering how to design character dialog interactions, whether to have interactions appear as speech bubbles or to have a designated section at the bottom of the game canvas for all dialog options to appear. While the designated section did seem easier to code, I felt like it removed a bit of the immersion of game. I decided to stick with textboxes as they allowed the player to stay immersed in the narrative world of the game.

Usability Testing & Revisions

As I continued developing my project, I conducted several user tests and got numerous feedback from my peers. In these tests, I had players explore the game by walking around the map and interacting with sprites to test the intutiveness and overall educational value of my project. I found that users had difficulties telling interactive and non-interactive sprites apart as there was very little user feedback during player interactions. I also learned that, while the graphical elements I had were deemed as important, their significance to the Patwin tribe is still very much unclear, espeically to 4th graders.

In addition to peer feedback, we also met with community partners Rachel Hartsough and Larissa Saco and the seal’s artist Susan Shelton. They suggested to check with specific people to make sure my depictions of the Patwin peoplre were respectful. They also suggested adding an inventory system to keep track of all the facts collected and learned.

Based on this feedback, I decided to make interactions more clear by adding collision interactions to all interactable sprites and lowering the opacity of elements that aren’t interactive.

Many of the peer feedback I recieved was due to my project being incomplete and didn’t include edge cases. In future user tests, I would make sure all interactions, even non-interactive elements, are made clear to the user so more feedback would be directed to other aspects of my project rather than the confusion of whether an object should do something. I would also bring examples of any supplemental materials mentioned so users have an idea of my vision, and thus can give more detailed feedback.

Summary

This project was a lot more than I expected. I had thought the most challenging part would be the illustrations, but as I contined developing my ideas, it was clear that that was the least of my worries. The most difficult part of the capstone project would be working with the Kaboom JS library and figuring out JSON files. This project was one of the first times I’ve used either tools, so I took quite a dive into the deep end without really knowing what I was getting myself into. It was hard trying to build a full-fledged game with a set of developed code that I didn’t know before. My game also had a lot more moving parts than I expected, so I struggled a bit to wrap my head around how to connect each sprite to the appropriate property or variable to execute the functions and link to the JSON files I needed. But, figuring both things out is definitely the most rewarding part of the experience. I’m most proud how far I got into building what I had in mind from the start; whiel I did have high expectations for myself, I did not antitipate the road I had to take to get to where I am now., and it was quite the learning journey! I’m also proud of the illustrations I made. This is the first time I’ve properly done pixel art, and I’m proud of how well the graphics and animations turned out!

In future iterations, I hope to polish up the interactions to be more smooth, add more animations to make the game more lively, and to fix any remaining bugs in the game. In the far future, I hope I can create something similar for all parts of the Davis Centinial Seal, ultimately creating an interactive adventure map game across space and time.