How?

This project was built by hand, with me doing 100% of the creative and engineering work (as you can probably tell by playing it). It’s a very simple game, yet even the simplest artwork can be time consuming. It’s even more time intensive when the illustrations need to be animated and layered on top of each other, with touch events and collision detection.

Framework

I used react-native for this project, due to my high level of comfort and familiarity. I use it everyday at Tiled and also built tychus with it as well. In general, react-native is fairly limited. That being said, the barrier to entry is so incredibly low that it makes the idea of spinning up a quick game for a birthday party actually plausible. For this app, I used expo and create-react-native-app (both parts of the react-native ecosystem) to get this project knocked out as quickly as possible. For more information about building a react-native app, feel free to read my other post about the technical challenges and learnings from my previous pet project.

SVGs

This will, no doubt, make my designer friends cringe: I did all of the SVG work from my trackpad and using a random SVG editing tool from GitHub instead of illustrator or another well established SVG creation tool.

Here’s a link to the working demo (where I spent many, many hours):

And here’s the link for the git repo, if you’re into that sort of thing:

Lessons learned (for react-native folks)

Despite this being a rather simple concept, I learned some rough lessons this time. One big lesson was that of responsive approaches to SVG positioning on mobile devices.

I’ve worked with SVGs in the web for a while now and they’re a well-known entity. When trying to use SVGs in react-native land, it’s been a bit tricky. Which, was actually another reason I really decided to challenge myself with this project. While I did find a library that supports SVGs in react-native, it actually has some very serious limitations (only polygons objects supported, no transforms, etc). Along with these limitations, I also made a number of “rookie mistakes” regarding the layout and positioning.

Without getting deep into the details on this one, I’ll just say that the scenes you experience in the game were not the first ones I designed, illustrated or animated entirely. Initially, I was trying very hard at a “purist” approach that leveraged uniform SVG viewboxes and positioned items (and animations) in the application’s code. After banging my head against the wall for long enough, I realized that it was just going to be way more difficult to get this approach working on all of my supported devices. Eventually, I gave up on all the hard work I did previously, tore it up and started again from scratch. The next time, though, I had every single object absolutely positioned precisely where it needed to be within a larger scene, prior to exporting the SVG to code.

Once I wised up and positioned items exactly where they needed to be in a the scene and THEN exported

tl;dr: I tried to export and position SVGs the hard way, thinking it was better, when in reality the easier way was much cleaner and resulted in a better product.