Last year, I had to work on a project that required me to use Magento 2, an ecommerce framework known for its complexity and performance issues. As anyone who’s worked with it can attest, it can be a frustrating experience, especially when dealing with the client-side rendered modules like the cart (think deeply nested XML files). Inspired by my “experience,” I decided to create something fun: Space Destroyers, but with a Magento twist.
How I Made It
For this project, I used ThreeJS and React, and created a simple global key listener to handle inputs. I also added gyroscope support for mobile users. The rendering loop is tied to the requestAnimationFrame call and stops when switching tabs on supported browsers. Due to time constraints, I didn’t decouple the game update cycle (think projectile position update, enemy and player movement) from the framerate. Instead, the game state is updated on every frame, which could 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), a royalty-free standard supported by the Khronos Group. Unlike the 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 looks quite promising with great support from most tools.
You can check out the full source code for the game on GitHub.
What I Learned
Creating Space Destroyers with a Magento twist was a fun side project that helped me cope with the frustrations of working with Magento. By using ThreeJS and React, I was able to create something that was both entertaining and challenging. And by designing the player and enemy models in Blender and exporting them as GLTF, I was able to take advantage of an up-and-coming file format that has a lot of potential.
Overall, this project taught me the importance of finding creative ways to deal with frustration and burnout in software development. It’s easy to get bogged down in the day-to-day challenges, but sometimes taking a step back and working on something fun and different can be just what you need to re-energize and refocus.
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.