No matter how you draw your tileset, after all you generally want to end up with a rasterized PNG image when dealing with 2D games. You can then remove or just ignore the overlapping parts.

If you have an object overlapping the tile’s boundaries, just duplicate that object and move it to the opposite side while holding Ctrl to keep it aligned. The good news: transitions pretty much work the same and are easier to handle than with pixels. Once you have successfully aligned an object, hold Ctrl while moving other objects, in order to keep the alignment vertically or horizontally. So, the best way to align objects is to actually zoom it very close and then place the object as accurately as possible. If it’s enabled I would recommend disabling it by pressing the % key. This can be a little tricky because, unfortunately, Inkscape’s snap functionality doesn’t really work. Just create your objects and make sure to place them properly inside the grid. In the tab “Grids” create a new rectangular grid and set both Spacing X and Spacing Y to the arbitrary tile size (a factor of your width/height).In the tab “Page” set units to px and Width and Height to an even value (doesn’t have to be the actual resolution you want, just the same ratio).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.

Vector images with inkscape