

We just want to make sure to have squared tiles, so we enable a rectangular grid: Using vector graphics, we don’t care about tile size (until we export it as bitmap). In my Photoshop-Tileset article I started with the point “Consider tile size”. Now with that little introduction in the greatness of vector graphics, let’s get back to our actual topic: building a tileset. Here’s a little overview on when to use what: Vector However, there are areas where SVG should not be your primary selection. Depending on your use case you may be right and vector graphics are really the better choice. “If vector graphics are so great, why should I use those pixel graphics anymore?”, you may now think.

This is more relevant for web applications (the browser can render SVG directly) as it is for games (most game engines require rasterized graphics). Unless it contains a gigantic number of objects, the information doesn’t take up a lot of space compared to high-res raster graphics.

This is perfect for creating graphics for different screen resolutions.Īs long as you keep your SVG you can comfortably edit every single part of your objects. You can zoom in and out as you like without any loss of quality. Vector graphics have three huge advantages over normal raster graphics:

By combining the different techniques it’s possible to model almost any object you can imagine. Besides common shapes you can also create paths and complex objects with an arbitrary number of edges and curves. In case you don’t know, vector graphics and its standard format SVG are a way of representing graphics by storing mathematical descriptions (like position, size, color etc.) of geometrical objects. In the last months, I started to mainly use vector graphics for my game art. In addition to my advice on drawing tilesets with Photoshop, I decided to do the same for vector graphics tilesets with Inkscape.
