Nuxt.js puzzle game development – WIP#4

The end of the year is here and the puzzle game development is still ongoing. I worked for about 7 month now on the game. I guess the completion is around 75%.

This post is a part of a miniserie where I explain my journey and what I learned through building an Android application with Nuxt.js, and wrapped with Cordova.

  1. Second vue.js project startup
  2. Nuxt.js puzzle game development – WIP#2
  3. Nuxt.js puzzle game development – WIP#3
  4. Nuxt.js puzzle game development – WIP#4 (this post)
  5. Nuxt.js puzzle game development – WIP#5

Follow-up

All the game content has been created, except a few video transitions missing.

Now the focus is on developing the connections between user datas and database. I set a new Firebase project for this, with a Firestore database, which is the new Firebase standard (instead of real-time database). Still easy to implement with the Firebase CLI and the clear documentation regarding the setup process.

Getting data back and forth is a piece of cake!

Performance concerns

As discussed previously (WIP#1  WIP#2, WIP#3), the app is a VueJS + Nuxt based, packed as a webview with Cordova.

One of the biggest drawback of having chosen this stack is about the bad performance: it feels a bit laggy whatever optimisation I can do.

At the beginning I thought the Cordova setup was involved in this, but I realized this isn’t related because I tried to partially migrate the project on the Quasar Framework.

VueJS Quasar Framework

Quasar is a VueJS framework that can acts both like a UI toolkit and development framework like Nuxt.
It encompasses hooks that ease the deployment on targeted platforms, among those are Apache Cordova, so nearly no setup needed, all deployments run with a simple command line. Everything is well documented.
My experience with Quasar is too short to make an in-depth review but I appreciated the way it’s organized (tree structure, helpers, pre-built components..). I’ll certainly go back to it for a future project. But having migrated the first puzzle, I realized the performance issue remains the same. So, I decided to keep up with Nuxt.

Tools to improve performance

I read a lot about what I could change to increase FPS as the game get laggy as time goes by.

Here is a list of improvment/check I dug into:

  • Monitoring the number of components created from the memory tabs in chrome devtools with heap snapshots (complicated to debug)
  • Record a performance check from the performance tab in chrome devtools (can see the garbage collector acts sometimes but I feel overwhelmed by the visualisation so far, need to follow a course on this)
  • Use a plugin called nuxt-memwatch to have a clearer memory monitoring through live graphs. Doesn’t help because all seems to behave correctly
  • Check the Vue bundle size with webpack-bundle-analyzer. Very convenient to check how the app is chunked. No problem so far, Nuxt does a really great job with code-splitting, with all the routes having it’s own chunk.
  • Reverse-engineering to observe what cause the laggy behavior. It appeared it’s a combination of too much concurrent css animations, the draggableJS lib which doesn’t offer an optimal experience, + all the events listeners that keep elements in memory. The solution is to unbind all the event listeners in beforeDestroy() hooks (huge pain in the ass) + lighten the css effects.
My conclusion is that I made a mistake choosing a Nuxt + Cordova stack for an Android game, even if we’re on the light side.
I should have go with a tool that package as a real native app such as vue-native or nativescript-vue. I should have learned the specific syntax of the markup but I would have an optimal performance at least.
But too late, I won’t go with a huge refactoring process, involving dozen of components written so far. The app will be released with the current stack and optimized as best as I can.

Next

Here are the remaining tasks which I’ll be working on for the next weeks:

  • Google monetizing feature implementation
  • Google account API implementation
  • finish rendering the last video transitions
  • implement unit tests with Jest and end to end test with Cypress

We still hope to release the game for early spring of 2020.

Home