Building A Connected Game With Expo

Open Source Cross-Platform Javascript Game

After developing my last game Expo Sunset Cyberspace, the biggest thing I noticed was how competitive my friends were. At the time, we would just share screenshots of our score. This being the future and all, I figured we may as well make this the centerpiece of our gaming experience.

Stack: Expo, Three, Firebase

Game Concept

This game has an extremely simple concept: tap a circle when it lines up with a target, then another circle pivots around the first circle, and you get two chances to land it on the next target.

Scoring Points

To connect it, I used rematch (a dope Redux library) to globally register the score every time the user scored a point. When the score changes, we check to see if our new score is better than our previous best score; if so we update our Firebase firestore with the new best score.

Using rematch, I could also persist the best score so that when we restart the app, it’s saved into memory!

Procedural Games FTW!

It took me only ~15 hours to code this, in its entirety. Not having to make assets saved me a lot of time.

Lazy Tip from a Lazy Boy: I recommend using flat shading and 3D primitives to avoid having to create art for your game. Saves tons of time 🍔

Consider it a Life-Hack 😅

Non-Invasive Social Integration

The formula for making a great Expo app boils down to just how quickly you can get to the experience.

Most apps nowadays have a social aspect built in, but the problem with these are their annoying sign-in screens. No user wants to give personal information or private access to a new app that they have no clue about!

How hard could it be?

The answer is very, very… not hard at all! 😘 🔥 Firebase provides us with a good trial state: anonymous authentication!

When the app starts, we initialize our Firebase app and check if the user is logged in. In most apps this would be where a sign-up page butts in! But in Pillar Valley, we anonymously authenticate the user, and store the device’s metadata in our database.

Presentation

After this we just need a basic compound query that filters our users for slugs, then sorts them by score. Add that to a paging FlatList and you’re good to go!

Adding all the other stuff you’d find in a game

I looked at other games and noticed they all have a ton of things in common — things we should really just have components for—which I’ve now added for all Expo users to build into their next game:

Share Button : 💬 This takes a screenshot, and adds the name of the app to the app URL (from the app.json) and of course slaps my Twitter handle in it “@baconbrix”. If we haven’t yet taken a screen shot of the game, then the button won’t render; this creates a nice effect that shows how we care about you playing the game more than we care about you sharing it! ❤️

: 💬 This takes a screenshot, and adds the name of the app to the app URL (from the app.json) and of course slaps my Twitter handle in it “@baconbrix”. If we haven’t yet taken a screen shot of the game, then the button won’t render; this creates a nice effect that shows how we care about you playing the game more than we care about you sharing it! ❤️ “Rate The App” Button : ⭐️ Inspired by how I add 👏 clap emojis in my Medium articles. Now you too can manipulate, er, influence, people by putting a star on a button and having that button link to the App Store! 😄 This component pulls the app store / play store URL from the app.json: if it isn’t available, the button won’t render; if it is available, then we should link you to it!

: ⭐️ Inspired by how I add 👏 clap emojis in my Medium articles. Now you too can manipulate, er, influence, people by putting a star on a button and having that button link to the App Store! 😄 This component pulls the app store / play store URL from the app.json: if it isn’t available, the button won’t render; if it is available, then we should link you to it! Mute Button : 🗣 This was an easy one: just connect the state of our Audio singleton to our rematch redux (if it’s muted that we don’t play anything). This is also a good switch to persist in our redux as users typically don’t like having to mute every time!

: 🗣 This was an easy one: just connect the state of our Audio singleton to our rematch redux (if it’s muted that we don’t play anything). This is also a good switch to persist in our redux as users typically don’t like having to mute every time! Leaderboard button: This pushes a screen over our game using React Navigation.

Deployment

Usually I would just deploy to the experience to Expo and be done with it. But recently, I read about Julia Qiu’s experience with releasing Slope Ninja, so I had to try deploying to the App Store myself. It was so much more enjoyable than I could’ve ever imagined (maybe 27x easier than native deployment).

Sharing it around the web

Finally when I pushed the app to all three providers, I uploaded the source code to Github, and tweeted it out! The response was great, and it was fun seeing the leader board fill up with all my favorite programmers from around the Twitter-verse, competing to be number one!! (As I write this, Catalin MIRON is leading the pack with 240 points 🔥)

The best part about working with Expo is the incredible community — I’m so motivated by all the support everyone gives one another.

If you haven’t yet, I strongly recommend joining our community Slack.

Finally

Creating games in Expo is super fast and really rewarding, the deployment is easy, and the codebase is simple! I have a lot of fun doing it, and it reminds me of why I learned to code!! 🙌

Links

For all my little coders out there who scrolled to the very bottom instantly, I’ve got what you need! 🔥 😇 ⭐️ ❤️ 👏 😄