My Social Media Pet

Play the latest version.
See the code.

– Description
My Social Media Pet is a game about the addicting nature of Instagram. A user creates a pet and keeps it alive with followers and likes. You get followers by mindlessly pressing like and follow buttons. You get likes by posting photos and covering them in stickers. At a certain point, the pet becomes tired of being online and the user must take it offline to progress the game. It’s at that point that the pet discovers it is in a matrix – a world full of other pets stuck in their phones.

– Credits
P5.js
P5 play library
Gabriel Brasil – matrix characters
Icons – Instagram + font awesome

-Intention
I was trying to convey two different messages but I think they’ve been muddled. I’m likening ones social media presence to a pet that needs to be given care and attention. You’ll end up with a love/hate relationship to your pet, doing mindless tasks to keep it alive. Then you must escape the online world to find happiness offline.

Since the narrative was what I began with, I held on to it throughout the project but I did not complete it. It may detract from the message of the tamagotchi and could exist more strongly as a separate experience. It is possible they could work together but I’d need to complete writing the narrative to see if that still made sense. Both could be developed further.

For now, I’ve left the original set of two ideas combined, but also added tamagotchi freeplay. But I view each experience as currently incomplete.

– Code Overview
The project depends on p5, p5 play, and p5 dom. The main character is taken from this p5 play example. There is no server involved with gameplay and a player’s data is never stored.

I created a simple scene manager to handle transitions within the game. Each scene has a draw function, a ‘change criteria’ function, as well as an active flag and a variable to store the frame start time. A scene can also include a mouse pressed function to utilize p5’s built in mouse pressed function (rather than rely on mouseIsPressed).

Every turn of draw calls the current scene’s draw function, and checks the change criteria function. If the change criteria function returns true, it advances to the next scene. The beginning tutorial utilizes dom elements to advance the scenes instead of the change function.

The follow game works by generating random like and follow buttons on the screen – coded as sprites. When a user presses them, a count is incremented. When the count reaches a random number, a user gets a new follower, and a new follower notification is generated (which also utilize sprites).

The like game is much more complicated than the follow game. It has its own set of scenes to manage each page of the photo posting flow. To start it, a user clicks on a photo icon that is a dom element, triggering a native file uploading dialog, and transitioning to the next ‘scene’ when a photo is uploaded. When they have added more than two stickers to the photo and confirmed they want to post it, likes for the photo are randomly generated.

Once the user has disconnected, I begin to utilize the camera to set a mood. First I give the illusion of traveling by advancing scenes and managing the sprites relative position through them. Then I begin to expand the field of view of the camera to give a sense of scale. In this final scene – what I refer to as ‘the wanderer’, the boxes of phones are made as sprites to allow for easy collision detection. In addition gravity on our main character is disabled.

– Overview of Process
I’ve documented my progress from past weeks, here’s a quick overview and a link to each week:

Week 0: I put together a proposal for the project, showing a concept for a tamagotchi like game that turns into a story about one avatar breaking free from a phone. I began with a prototype for what ended up being my final scene.

Week 1: I fleshed out a storyboard, and created a skeleton of scenes from the storyboard.

Week 2: I created the first version of the follower game and began prototyping the like game.

Week 3: I updated the design of many elements and implemented the like game.

Week 4: (this week) From playtesting, I discovered that users needed more of a hand holding through the game. I decided to add in an onboarding, which I refined with further playtesting. I squashed a number of bugs and implemented some new features.

– Future Improvements
As mentioned before, both the tamagotchi and narrative experiences are kind of incomplete and should be split. So I would drop the narrative for now and focus on the tamagotchi adding the following features:

1. Making it like a true tamagotchi that can die and get sick, with varied emotional states.
2. Minigame variation – having more feedback and ramping difficulty, making the posting experience vary by letting you do more than add stickers (i.e. filters)
3. Save progress via cookies
4. Squash rotation bug in the posting experience
5. Continuing to strengthen the message by injecting more voice throughout the game.

– Demo

Posted in ICM

Leave a Reply