Building Progressive Web Games Part 1

All app-stores(Google play/iTunes/Windows app store) are filled with tons of games ranging from really simple ones to super complex ones. These games are downloaded millions of times. With the power of PWAs, a lot of these are perfect candidates to be brought to the web instead.

Game attack on PWAs

This is a series where I’ll take up a game called Hop from Google play and try converting it into a Progressive web game, while keeping it at a slick 60 FPS. I’ll also try to cover the following topics while maintaining a perfect 💯 score on lighthouse.

1. Animated routing using liquid-route.
2. Code splitting & Tree shaking to avoid the game framework size from hitting our “Time To Interactivity” metric.
3. Lazy loading of extra libs to perform additional steps(firebase, BabylonJS).
4. Progressive offline User experience without burning a hole in User’s network usage.
5. Also, try to load ads without hurting any performance metric(but I’ll keep optional unless this thread works out)

Disclaimer: I build web apps for living and might make noob mistakes as a game dev, feel free to point them and I’ll fix them for you

Step 0: What is the game?

It’s a pretty simple game, you tap on the screen and the ball will start bouncing from platform to platform and you would need to swipe to change it’s position on the x-axis to keep it from falling.

a sample screenshot from original game

Step 1: Choosing our guns

I will be majorly developing/testing this web app with smartphones in mind(whats the fun if you can’t play on an airplane without n/w). Hence I’ll be choosing Preact for all of my DOM related jazz and BabylonJS for my WebGL related shenanigans.

Now I can either make this series from a total of ‘n’ to ‘n+2’ parts and configure/explain webpack configurations, plugins and rest of the serving strategy or use the 🔥 ⭐️ preact-cli. Preact-cli will setup a working end to end environment for us to just go and code the application logic. This setup gives us a 3-second headspace for our application code before we hit a bad 5-second mark of interactivity.

Also, I’ll be using components from preact-material-components to achieve simple UI elements like progress-bar, buttons and more.

Note: A huge challenge here is to load the gigantic game engine and still not hurt our ‘Time to Interactivity’.

Step 2: Getting started

Lets do this in super simple steps:

// install preact cli
npm install -g preact-cli
// create app
preact create myGame --dest . --type empty
// add material components
npm i -D preact-material-components
// add liquid route
npm i -D liquid-route
// add babylonjs
npm i -D babylonjs

👆this will setup the working directory for you, all you have to do is start building the home screen.

initial code for dummy homescreen

after the above code is in place, it’s just one command to get you started

preact serve

Step 3: Next Steps

So far we have one dummy screen rendered at home URL, which has our logo and two buttons to get us started with either a “Google login” or a “Guest login”. Next, we will add firebase library & data stores to complete the login step and have the user info before we get started with the main stage construction.

dummy login screen to begin with

Code: https://github.com/prateekbh/hopon/tree/part1

See you soon 😃

Part 2: https://medium.com/@prateekbh/building-progressive-web-games-part-2-44a0355d6ab8

Part 3: https://medium.com/@prateekbh/building-progressive-web-games-part-3-31398018580d