🌌 Video Timestemps
✨ 0:00-0:34: Who are we and what is Global Goals?
✨ 0:34-3:36: Project Demo
✨ 3:36-4:08: What is the impact of Global Goals?
✨4:08-4:23: If we had more time..
✨4:23-4:49: Biggest challenge of Global Goals
🌌 Inspiration
We headed into Venus Hacks hoping to build our first web-based game from scratch. As community builders and Computer Science college students who love to make art in our free time, we wanted to explore intersections of activism, coding, and game design. We were inspired by platforms like GoFundMe and Buy Me a Coffee and social simulation games like Animal Crossing and SimAnimals.
🌌 What it does
Global Goals is a community-oriented app that enables players to collect cute animals as a reward for donating to non-profit organizations, sharing causes on social media, and signing petitions. Upon first entering the space, you are prompted to create an account and start with our base character pup, Georgie. To expand your family, you can navigate through a list of current opportunities to create social impact. Upon completing a task, you are prompted to send proof to our dev team with a quick and easy email template. Once verified, the animal who is tied to the opportunity will hop on over to your garden and join your other critters to roam around the oasis!
🌌 How we built it
✨ We hosted our app on repl.it since it provides really smooth integration of all of the software we wanted to use
✨ We used Python, Flask and SQLite to create an account server that prompts users to create accounts and log into their sessions. Users are unable to access the game menu until they log in.
✨ Most of our time was spent learning and coding in phaser.js, a 2D game framework used for making HTML5 games for desktop and mobile. Through YouTube tutorials by Luis Zuno and Jest Array, we learned how to import assets, create scenes, customize menus, and run animations.
✨ We used Pixel Studio and Adobe Fresco on iPad to our characters, backgrounds, buttons, logo, and all other media assets. Every single graphic in our app was made by us.
✨ We used Domain.com to get our free domain name, globalgoals.tech. We connected our repl.it to it through CNAME, however the upload takes 24-48 hours which exceeded the duration of Venus Hacks.
🌌 Challenges we ran into
✨ Holding ourselves accountable to our goal - coding a cute animal game while trying to simultaneously cover and think about really serious, disheartening, and hard topics was a big challenge. We worked through a lot of potential features to make it more than just a colorful fun time, but an app that had the potential to draw in younger gamer audiences, those deterred from the qualifications associated with social work, and those who needed to balance their engagement with mental health.
✨ The most ridiculous JavaScript errors, further exacerbated by our inexperience with phaser.js, which we were learning for the first time.
✨ Connecting our animals to completed tasks. The way our system is set up is each new player starts out with one dog, Georgie. The three opportunities we have up for our demo can be completed to get an elephant Ellie (😉), a frog Miko, and panda Pinki. Let's say the player is interested in organizations that work to stop domestic violence. Upon navigating to the screen to learn about Connections for Abused Women and Children, they can read about the organization, place a donation, and email proof to have Miko join their animal family. We had to figure out how to automatically have Miko join the crew once the user clicks the button to send in proof. It took hours to incorporate this into our final product. To do this, we created a second SQLite table that connected users to their current critters. When the user clicked the button to send in proof, the animal id would be added to their current critters, and the animal would also be appended to a hidden div element which holds a list of visible sprites. Then, the update function within the phaser.js scene would parse that hidden div element to get a list of sprites to actually display for that user, and viola, the user would immediately be able to see Miko appear on their screen along with Georgie!
✨ Creating spritesheets...holy wow it's simple in retrospect but it did not click that we had to make all of the sprites similar sizes. In general, the graphics took a long time to put together thematically, especially in brainstorming the angle we wanted to come from in presenting our final project.
🌌 Accomplishments that we're proud of
✨ After listening to Lisa Conn, we created our mission to make a game that was [0] actionable and [1] visually stimulating. This vision carried us to create a project that fulfilled our goals.
✨ Learning a whole new software! We had never used phaser.js before and we spent so much time learning the most basic things. We often felt like things were going absolutely nowhere with the most ridiculous errors, but in the end we had a fully fledged interface with interactive characters, dynamic menus, and more.
✨ Going outside...honestly we always have trouble taking mental health breaks from work. Starting to work on a completely new technology, we felt even more pressed to not leave our screens. Taking a 30 minute break to get some fresh air boosted our morale.
🌌 What we learned
✨ How to make a dynamic, multi-faceted browser game from scratch using a completely new piece of tech to us - phaser.js
✨ How to design and digitally draw sprites, spritesheets, and pixel art.
✨ How to connect our browser game to desktop apps (mail) to create an email template.
✨ How to create and manage our own web server to store user accounts and personalized info.
🌌 What's next for Global Goals
✨ Friend integration. We really wanted to complete this (but alas...time) feature so that players could check on their friend's gardens and see what kind of animals live there. We had all the backend set up for this to be possible as we stored users and their current critters in the SQLite database, so all that would've been required is pulling the user's friend's list of pets into the DOMElement and displaying in on the page.
✨ Open source the opportunities! We want to have a built in form that would allow activists and artists to submit their own social causes along with critter graphics. Upon reviewing their requests, we would add their submissions as opportunities so that other people could learn about new social causes and have more animals roam in their garden upon completing the tasks.
✨ Animal interactions and personalities. We want to build additional sprite movements and sounds so that users, by clicking around on their garden maps, or hovering over animals, would be able to engage with them and want to spend more time with them. If animals had distinct personalities they could add certain flairs to an oasis and make each user's family more distinct.
Log in or sign up for Devpost to join the conversation.