What are vector graphics and why we use them in game development

Eli StergiouliEli Stergiouli
5 min read

In the game development world vector graphics play a big role; from UI design to characters, backgrounds and animations, in mobile and desktop games. There are two types of images:

  • Raster images are made out of pixels which means that if you zoom in very close you will eventually see thousands of little colored squares that together make up an image.

  • Vector images are made in a completely different way. Instead of having a grid of pixels, they have a list of instructions in the form of geometrical shapes, lines and points. These describe to the computer what it should draw. Whenever we view a vector image the computer draws on the spot for us. If we zoom in the computer draws the image again and again so that what we see is always crisp. The image can be as small as a coin and as big as a building.

Advantages and disadvantages of vector graphics

vector graphic of a bunny running

  • They tend to be faster to create and a lot easier to alter in order to make multiple versions.

  • They are future proof to changes in scope and advancements in technology. Updating a game to support 8K resolution would be a piece of cake if vector graphics were used instead of raster.

  • They make collaborating with multiple artists very smooth, quick and with minimal back and forth because vector files contain easily digestible information. If the collaborating artist has the source files they can easily see all the steps that were taken and often in what order. This makes mimicking the original art style straightforward and quick.

  • They have powerful tools that make creating some types of art very easy, fast and clean. Art styles that need clean outlines and edges, blocks of colors, perfect alignment and symbols have a lot to benefit from vector design programs.

But vector graphics also have a flaw. They aren’t best suited for very detailed and/or photorealistic art styles. You can only push the technology up to a point, but you will never achieve the detail of a photo. It simply isn’t its job to do that. Some art styles are perfect for vector graphics while others aren’t.

From introductory enemy to mini-boss

A few months ago a client hired me to work on their game after their previous artist left the team. All the graphics were raster even though the art style was a great fit for vector. A small enemy was designed, about 200 pixels tall, that the player would encounter in the introductory scene of the game. Much later in development my client decided it would be really interesting if that same enemy came back as a mini-boss, but this time green, 5 times larger and holding a more advanced weapon. But there was an obvious problem. Just scaling them wasn’t possible, the graphic became too blurry. Furthermore, the art style had outlines; scaling the image would enlarge them as well. This would break the consistency of the scene when everything had an outline 1 pixel thick and then the boss 5. So I had to redraw the enemy from scratch.

If the team had decided to use vector graphics instead this would be a matter of minutes. Scaling the image up wouldn’t blur it and reducing the width of the outlines would be only a matter of a few clicks. Furthermore, because of the nature of vector files, all the aspects of the enemy would already be separated into their own layer. I would have just selected the correct layers and using a filter I would have changed them to green. Then by playing a little with the nodes and lines, I would have upgraded the old weapon in a few minutes. To sum up, vector graphics would mean a quicker turnaround time for changes deep in the development cycle.

How vector graphics are used in games

UI: Character selection screen made entirely with vector graphics

Vector images are used a lot on the web for all kinds of graphics, static and animated, but in video games it is a different story. Video game engines typically render raster images faster than vector ones, so they are preferred in most cases. This means vector images need to get exported to .PNG before they get imported into the project. Exporting the assets is very easy and you can automatically do it for all the sizes you would need; 2K, 4K and beyond.

Conclusion

UI: HUD screen with vector graphics

Raster images can only be used up to their original dimensions, unlike vectors that can be scaled up infinitely. Some AI programs do exist that can upscale raster paintings, but they typically do it with varying quality of results, meaning that the artist will still need to do a lot of retouching.

Vector graphics also help with turnaround time because they are not only easier to alter in order to make different versions of the same item, but they also make the collaboration of multiple artists smoother and faster.

To sum up, it is not about which type of image is best. In game development we use both raster and vector graphics so we get to enjoy the advantages of both at the same time.

If you need a professional 2D game artist to create art assets for your video game project head on over to my portfolio website astroneli.com to see examples of my work.

0
Subscribe to my newsletter

Read articles from Eli Stergiouli directly inside your inbox. Subscribe to the newsletter, and don't miss out.

Written by

Eli Stergiouli
Eli Stergiouli

I am a 2D game artist, animator and UI designer, specialising in vector design with 4 years experience. You can see more about my work on my portfolio website.