Magento Destroyers

Magento Destroyers

03 April 2021

webgamethreejsmagento

TL;DR

I was angry at magento but found my zen in developing a magento themed space destroyers game using ThreeJS.



What and Why

First the preliminary intro about me not meeting my blogging schedule. Well lets say last year was busy. But 2021 is going to be the year I will finally find the time. For sure, maybe hopefully, let us see how it goes.

Last year I had a project requiring me to work with Magento 2. For the happy ones that do not know what that is, the best description is an ecommerce framework framework. Offering everything you would want by paying the price of complexity, performance and strange technology choices. Probably any and all of those problems have their technical reasons yet it is still not a treat to work with, especially the client side rendered modules like the cart. I will just say deeply nested XML files.

Inspired by my "experience" I needed to create something fun. Quickly glancing at my JS framework try-out list and saw ThreeJS and knew exactly what to do. Space Destroyers but with magento.

How it works

For this tiny side project I've used ThreeJS and some React (internet please don't hate me for including a huge framework in my side project :)). I have created a simple global key listener to handle the inputs and also added gyroscope support for mobile. The rendering loop is tied to the requestAnimationFrame call and therefore will stop when switching tabs on supported browsers. Due to time limitations I have not decoupled the game update cycle (think projectile position update, enemy and player movement) from the framerate. The game state is updated on every frame, this may lead to problems on high/low refresh rate displays.

The Player and enemy models were designed in blender and exported as glTF (GL Transmission Format) which is a royalty-free standard supported by the Khronos Group which of OpenGL and Vulcan fame. In contrast to OBJ format glTF supports embedding of materials, lights and even complete scenes. The end goal for this format is to become the "JPEG of 3D" and it does look quite promising with great support from most tools.

Naturally one can render gltf models in the web, so here is an

The Result

Want to jump into some magentor inspired retro action just go here in your browser. You can also checkout the full source code on github.