lioncares

an enchanted social virtual world game where you find events/people that need help at Columbia and get real-life rewards from the university!

Comment

People love games. League of Legends. Club Penguin. First Person "hero" games. These games are extremely exhilarating in the moment, but keep people isolated, indoors, addicted, and lonely. What if we could flip this reality on its head by putting the very things that keep people stuck to video games into a social philanthropy game? This is the recipe to get people to care about philanthropy and social good, including those that never volunteer. It's like putting veggies in ice cream to get kids that only like junk food to eat healthy. As a result of this game, students will now start volunteering and doing charitable things just because it reminds them of their favorite current virtual world game or takes them back to their elementary school years. The thing is, philanthropy and helping others makes you feel good--but people that never tried to don't understand that. Thus, when people start taking selfless actions, they will realise that it is fun to help others. In the end, the hope is that students will continue to stay on lioncares because they feel internally fulfilled through giving while feeding their inner child through a fun game. lioncares will make sure you don't let life pass while you stay behind closed doors but rather go out into the real world, with your campus community, in a way that genuinely fulfills you.

What it does

The game provides a virtual "clone" of Columbia where you can walk around and find volunteering events and people at Columbia who need help. The idea is that in real time, you can see where help is needs, who else is volunteering at a certain event and talk with them virtually (just tap them!). When you register for an event/opportunity, you get rewarded points.

How we built it

The columbia image was made with procreate and neural.love, so it was partially genAI and partially my drawing. I used some flat brushes and a pixel brush to draw on top of a generated image. I turned a flat campus map into an isometric image, which I then pixelated, and drew over to make a complete columbia landscape. I built the game using React, and featherless and elevenlabs APIs for sound and LLM generated context to make it feel like a story. The characters themselves were made with JavaScript, where each feature (head, hair, eyes, clothes), was made by specifying x,y, width, height, and color for each pixel. In order to make the character move with the scene/landscape, I included event listeners that responded to back/forward/right/left arrow key movements.

Challenges we ran into

It was initially difficult to implement the APIs, also turning a 2d map of columbia into an isometric image was hard. This is my first time making a game, made harder because the character moves with the background, so that was also hard to implement. Also, despite how great LLMs are at helping to write code, sometimes the documentation they rely on is outdated, so I had to reread documents and test of functionalities in small batches to make sure they worked.

Accomplishments that we're proud of

Being able to implement all the details I envisioned, especially the integration of the APIs and the isometric map! Also there are various moving pieces that I had to connect together (counters, sound, clicks, event listeners, arrow movements, APIs) so I am also proud that I was able to tie everything together.

What we learned

Most of the work I did here I learned for the first time. I have previous basic experience with React but am rusty on JavasScript and Effects/Hooks overall. I learned how to construct pixelated isometric images for gameplay for the first time, learned how to integrate voice and chat APIs into games, and complete more advanced work with JavaScript.

What's next for lioncares

To make everything work as intended like a real website, I would want 1) a mobile version of the interface, 2) a working donation system to donate to certain people/clubs 3) a backend encrypted database where all user information is stored, as well as authentication/login to ensure that everyone who registers is a columbia/barnard student 4) a system that sends Columbia/barnard students' rewards (XP) data directly to clubs, helping clubs keep track of active/nonactive members. Hopefully creating a partnership with them where lioncares students with high points can get benefits like Eboard consideration or special access.

Built With

Share this project:

Updates