Vector VS Image in your game

By using vector graphics, you reduce size and improve the graphic quality in your game

Updated: Jul 26, 2023
Published: Jul 13, 2023

Why use vector graphics instead of images in your game?

Use vector graphics in your game instead of large images.

Pros with vector graphics:

Reduce file size
Smooth rendering in any size
Better results when animating

Cons with Vector graphics:

Implementation may require more work
Does not work well for images requiring a lot of details

Using vector graphics are great if you focus on flat design, without a lot of details. I also find it a lot easier to create custom animations by "deforming" the graphics, for example moving the points, or adjusting the bezier curves. Similar techniques are possible with images as well, but it requires you to create a mesh, and deform the image through the mesh vertices. I will create a demo about that in a different post.

Depending on what you are creating, using vector graphics may be easier and better than going for regular images. Think about what you want to create, and choose your weapon accordingly. The more you have in your arsenal, the more equipped you are to make good decisions.

I have included two different functions below. One for creating an image button, and another to create a vector button. Creating a vector button requires more code, but we don't have to load the extra image, saving bandwidth and increasing loading speed for the user. This may be more important in web games than native games, because all assets are transferred through the Internet, and loading speed can vary depending on network conditions.

vector-vs-image.js

// These functions are inside a Scene class
// Meaning 'this' is the Scene
function createImageButton(x, y, scale) {
  const btn = this.add
    .image(x, y, 'ui', 'blue_button05')
    .setOrigin(0.5, 0.5)
    .setScale(scale);
  return btn;
}

function createVectorButton(x, y, scale) {
  const graphics = this.add.graphics();
  const rect = new Phaser.Geom.Rectangle(0, 0, 190 * scale, 43 * scale);
  graphics.fillStyle(0x29b0e9, 1);
  graphics.lineStyle(2 * scale, 0x4a65ae, 1);
  graphics.translateCanvas(-rect.width / 2, -rect.height / 2);
  // set origin to center
  graphics.setPosition(x, y); 
  // make up for the canvas translation
  rect.x -= rect.width / 2; 
  rect.y -= rect.height / 2;
  // make it possible to click the graphics
  graphics.setInteractive(rect, Phaser.Geom.Rectangle.Contains); 
  graphics.fillRoundedRect(0, 0, rect.width, rect.height, 4 * scale);
  graphics.stroke();
  return graphics;
}

I have also included a live example with some vector buttons and image buttons, as seen in the bottom of this post. Can you guess which ones are made with vector graphics and which is made with an image? Full example available on CodePen The difference in quality may vary a lot depending on the source file's size and level of detail.