The Vector Gamble
When I worked on my first game Mimpi at Silicon Jelly “Dread Locks, our team decided to go with a very unique art style based only on vector art. The challenge was that there were no good tools for using vector graphics inside game engines. We didn’t want to just convert vector graphics to textures because that ruined the art style. Texture compression artifacts and the blurry, jagged edges didn’t match the original visual concept.
Fighting the Tools, Not Designing the Game
We found a tool on the Unity Asset Store that converted vector art to Unity. But damn, it was terrible manual work. Each individual vector shape had to be manually inspected in the engine, manually converted, cleaned, and if there was any import error, the only solution was to redo the art in the graphics editor, re-export, and repeat the whole process again.
This whole thing shifted focus from game design to just importing vector graphics. While the game looked very unique, the gameplay suffered from lack of time and care.
Mimpi let’s play.
A Sequel, A Second Chance
When I heard we were making a sequel called Mimpi Dreams, I knew right away what I wanted to change. I spent months of my free time developing a custom library that replaced Unity’s sprite workflow with vector graphics and made the whole development cycle a breeze
Mimpi Dreams let’s play.
Drag, Drop, Done
The main idea was that artists should be able to drag and drop SVG files into the Unity project, and they should behave like 2D sprites but stay sharp at any size. Artists should also be able to set the level of detail for each asset so the game runs smoothly on all devices.
As a bonus, the whole game could stay under 100 MB, which was the limit for downloading games over cellular connection.
Demonstration of simple drag & drop workflow.
Keeping It Sharp
The first challenge was to keep the shapes sharp. There are many ways to render vector graphics, but most were too complex for the low-end Android devices we wanted to support.
I settled on generating 3D meshes made of triangles, which are easy to render on most GPUs. Since this method creates standard 3D graphics, I was able to optimize rendering a lot.
First public announcement of the library.
Beating the Overdraw
Screen overdraw is how many pixels are drawn on screen at once. Multiple transparent layers still need to be drawn even if they aren’t visible, which is expensive on mobile. I took inspiration from traditional 3D pipelines where opaque geometry is drawn first, using a depth test to skip pixels that wouldn’t be seen anyway. Then transparent geometry is drawn, but only where not hidden by opaque parts.
This technique is common in 3D but I hadn’t seen it used much in 2D.
The Gradient Hack
The second challenge was gradient rendering. The mesh gives the shape, but the gradient makes vector art look good.
The solution was surprisingly simple. I used just two textures for the whole game. One texture stored gradient shapes in separate channels — supporting linear, radial, and conical gradients.
The second texture was an atlas of small color strips, each representing gradient colors. This worked really well and was efficient since every mesh used the same material with only two textures.
When It All Broke (And How I Didn’t)
But there was a catch! On Android, the gradients were broken. I didn’t understand why at first. After many hours of debugging, I found the issue was caused by numerical precision, rounding errors, and bilinear filtering. I honestly don’t remember how I fixed it exactly. I think I made larger texture strips with repeated borders, and that helped a lot. Today, I’d probably solve it using point filtering and custom bilinear filtering.
Device only rendering artifacts.
Worth It? Mostly…
Artists were able to manage graphics without needing developers. Game designers could work on puzzles without worrying about graphics. I made an agreement with my old employer that the plugin is my product, and I gave the studio a free license to use it.
I sold the plugin on the Unity Asset Store, and it was popular. I was contacted by Google, Ubisoft, and many amazing indie devs when they needed help or features. The plugin had a big impact on a lot of developers.
Made with SVG Importer showcase.
Featured at front page of Unity Asset Store
Burnout and Letting Go
I had a burnout. I started having depressive episodes and mania, and I couldn’t keep up with work or plugin support. The plugin lost traction because of my poor support and Unity rolled out their own vector graphics library. So I decided to open source it and give it away to the community.
I’m glad I did. It helped my mental health a lot, and people still use it and sometimes even contribute fixes.
Would I do it again if I had the chance? Yes. I love making tools, but I’d focus much more on my well-being.
More technical talk at Unite Europe 2015
