Get vetorial graphics for your game

I’ve been working in mobile game for about 3 years now, and as a developer, it’s always a pain to deal with graphics size. Back in 2013 when I was working OutOfTheBit, we had to deal with iphone / iphone retina / ipad / ipad retina resolution, Apple had this suffix system where you had to add @2x or -ipad at the end of your file name so that iOS could pick the right file for each device. The app had to contain 4 versions of each image and there was often export problems causing quite a lot of frustration. We all wanted to get support for vectorial graphics, but there was no solution at the time.

In 2014, when I was working at Good Game Productions, the problem was pretty much the same, with all the the Android screen size to support as well. We had a editor that was doing the export in multiple sizes to avoid too much pixelisation when scaling. Once again, the app had to include multiple version of the same file.

Today, as I had some free time, I looked for a way to use SVG files in my game. And it turns out that Mikko Mononen wrote a library that does just the job (NanoSVG on github). It’s not actually displaying SVG files on screen, but it let you convert your SVG file to a png. Now you can include svg file in you bundle (which also makes the app lighter) and render them at just the right size for your user screen size. Of course you need to pre-render, which take a bit of time, but for a game like Laser Maze, it’s totally worth it 🙂

I included a code sample here :

I had to do a small change in the loading of the file to get it to load on Android with cocos2d-x, but nothing major. This was tested on iOS & Android without problems.

Just keep in mind that the assets for Laser Maze are super simple, so I can’t guarantee everything will work as well with more complex SVGs, but so far so good.

Big thanks to Mikko Mononen! Hope this makes your development easier 🙂




Cet article, publié dans Uncategorized, est tagué , , , . Ajoutez ce permalien à vos favoris.

Laisser un commentaire

Entrez vos coordonnées ci-dessous ou cliquez sur une icône pour vous connecter:


Vous commentez à l'aide de votre compte Déconnexion / Changer )

Image Twitter

Vous commentez à l'aide de votre compte Twitter. Déconnexion / Changer )

Photo Facebook

Vous commentez à l'aide de votre compte Facebook. Déconnexion / Changer )

Photo Google+

Vous commentez à l'aide de votre compte Google+. Déconnexion / Changer )

Connexion à %s