Shape Collector
August 17, 2025
I developed a new game called “Shape Collector”, and I want to share how and why I created it.
As someone who regularly uses web application, I have a heightened awareness of good and bad software design choices (including my own). Whenever I experience issues with apps or games, I will think to myself, “Surely there must be a more simple way to develop this” or “I could easily make this better to use if I wrote it”.
As a hobby game developer, I try my best to simplify everything I work on, but I always end up overwhelmed with new problems by the end of a project. My efforts for wanting to make simple solutions was insufficient; I needed to find industry-tested solutions to help me approach these types of problems.
My squad leader recently asked our team if we liked using the “Vue Composable API”. To be honest, I had no idea what he was talking about. To clear the confusion, he showed us how we are already using composables in our current application, and he wanted to know if we should continue structuring our codebase in this fashion. His excitement was contagious because I could tell he had unlocked a new way of simplifying complex UI problems. We all agreed to continue down this path and give it a shot.
Within 2-3 months, we successfully launched a new tool that heavily uses composables, and I was finally able to see why my squad lead was excited. Composables allowed us to separate functionality and UI states outside of our templates without losing our reactivity. With composables, we could effortlessly create UI components like “modals” or “buttons” with an extra layer of control over their functionality.
This excitement is what inspired me to work on Shape Collector. I thought to myself, what if I used these new UI concepts within my own games? Before working on the code, I sketched a few game ideas to draw inspiration. I wanted to make a game that was easy to play while I traveled, so that heavily influenced how large the buttons were on a mobile devices.
After sketching ideas, I wanted to see if I could give the game some color. I opened Figma and started making a bunch of designs to match my vision.
With the designs in place, I began writing my codebase from scratch using the Vue Composable API structure. To my surprise, the game logic snapped together like Lego pieces. I was able to rapidly add buttons with various functionality. If I needed to format text (ex: decimals to percentages), I would create a new composable library that would take input values and render the output values effortlessly.
Within about 1 month, my game was nearly complete, but was lacking a “soul”. I love playing games that have memorable characters, so I decided to create my own. I am not very good at drawing people, so I doodled a bunch of “robots” to see if any of them stood out.
These sketches helped lay the foundation of my characters, so I continued polishing them within Sketch. I think hamsters are really cute, which inspired me to make a more rounded robot with tiny legs and arms.
I added these robot characters to the game and “box artwork” and finally tied the bow on this project. I learned so much about software and design throughout this entire project, and wanted to share my excitement with the world.
Shape Collector is free to play on Google Play and Google Chrome Webstore. Thank you for reading and I hope you enjoy playing my new game!
