menu
Close
GET IN TOUCH
Check what other game developers say about working with RocketBrush Studio:
BLOG
Difference between Vector vs Raster images is a long dispute as both graphics (or formats) have their benefits depending on the goal of an artist. Compared to AAA games, titles that use just 2D Vector images or Raster art are sometimes quicker to create and less demanding on the hardware. Therefore, various game jam and indie developers create novel stories consisting of point-and-click actions utilize Vector and Raster graphics for the time and cost-effectiveness.
Although pretty similar, they carry fundamental differences. For instance, Raster graphics examples use pixels to determine drawings and shapes. On the other hand, Vector graphics use geometrical information to describe and define the location of lines and curves, creating an image. As a result, the most observed impact between both graphic forms is that Raster images inevitably lose resolution when you zoom them in. On the contrary, Vector images will never lose quality; they’ll constantly show meticulously defined shapes. Let’s use an example to illustrate this even further. Assume a photo, a JPG file, represents Raster graphics, and some text font is Vector graphics. In this case, zooming in on the photo will cause it to lose quality and become blurry, whereas doing the same on the text font won’t create any distortion. The word inside the blue box on the left above is Vector, whereas the “j” on the right is a jpg image. Both are equally zoomed in.
Nowadays, you’ll find that most games use Raster digital graphics instead of Vector. Keep in mind that Vectors assist game developers when they want simple solid color sprites. On the other hand, Raster is more favorable to developers seeking to provide more detail in the game’s art style. Since modern stylized games often feature detailed shading and illustration, using Vector would present a few obstacles.
Fortunately, there are ways of vectorizing a PSD image. For instance, in Photoshop, you can open a PSD file and enable the “Image Trace” command, which converts the image into a Vector. Moreover, you can access Inkscape, a complimentary open-source freeware with solid vectorize options.
Alternatively, you can use the popular Vector Magic software, a tool you can use directly through the browser that focuses on turning PNG, JPG, and GIF files into Vector.
In Adobe Illustrator, you’ll benefit from using the Live Trace feature, which automatically does a bitmap tracing. In addition, Adobe Capture is a free phone application that traces bitmap to vector swiftly and effectively.
Photoshop has a pretty exciting tool called Vector Mask, which assists the process of vectorizing PSD art. So, using the standard raster mask and paintbrush, you might struggle to get soft, natural lines. By changing to Vector Mask, you’ll be able to achieve geometrical shapes. Vector Masks are excellent editing tools and can isolate product-on-white and trim/shape its outline. Finally, you’ll be able to see the “trim pixels in half” effect that Vector clipping masks use; various artists enjoy the smooth result they bring.
When debating Vector (.ai) and Raster (.psd), it’s fair to consider which one works more favorably for game artists. In this case, precision and smoothness play a massive role. For instance, Adobe Illustrator (.ai) will provide straighter lines, clean curves, and geometrically-pleasing edges and points. Therefore, creating something naturally-looking will be challenging. On the other hand, Photoshop (.psd) is quite the contrary. So, for example, lines will appear rougher, more open, and unorganized, rarely showing perfect angulation on a figure's edge. Therefore, this software performs better at creating traditional drawings that appear more organic. It’ll hugely depend on what the game is about for game artists. Nevertheless, these two main differences often define what they’ll prioritize. So, next time when you ponder upon vector vs raster images; consider art style, gameplay, lore, and targeted devices.
Vector is present both in old and modern games; the graphic holds specific advantages, making them useful even with the current technology in game development. Moreover, various game developers use certain assets made of Vectors while applying different graphic technologies to the game's main content. Let’s see some games with Vector graphics.
In a more traditional category, we’ll have classics from the 80s, mostly arcade, such as:
Now, we can also find Vector graphics in more modern games, such as:
Furthermore, it’s essential to understand that, although not many modern games feature Vector graphics, nearly all use Vector techniques to render. In many cases, developers Rasterize images from sets of instructions established on geometric primitives.
If you’re wondering to choose between Raster and Vector, you’ll find it valuable to study both graphics’ pros and cons.
Although seemingly superior, Vector graphics hold significant limitations when compared to Raster. The fact that this type of representation does not distort when zooming in might overshadow the counter-effects of this trait. Nevertheless, Vector graphics stand as a practical option regardless. Let’s dive further. As aforementioned, representing a drawing with Vectors will lead to ridiculously defined lines, curves, and geometrical forms. In this sense, one can argue that Vector has a massive advantage concerning mobile devices. For instance, since mobile devices have various screen adjustments and resizing, a Vector game will continue to appear ordinarily without any distortion. In games, you might see that 3D skeletons are typically Vectors.
Hence, Vectors are valuable as fonts, advertisements, and company logos for their endurance at resizing. Furthermore, this type of graphic has a perfect geometry, with polygons, triangles, and circles featuring a ridiculously exact form.
In the 80s, games used to feature simple polygonal graphics, and the crispy clean form of Vectors contributed to the golden age of the Arcade. Since Vector shapes follow a geometrical logic based on coordinates, they can be conventionally easier to adjust. In addition, this graphic can also be cheaper to feature a consistent polished figure. Vector can make 2D animations play pretty smoothly. So, using transformers or keyframe-based interpolation often dismisses the need to draw shapes frame by frame. Consequently, you can do simple animations quickly and geometrically pleasing. Since Vectors do not contain pixel-by-pixel information, they tend to be lighter towards the device’s memory storage.
Vector graphics have considerable limitations depending on how complex your game is. For instance, since the style uses constant calculations to define specific coordinates, the computer might lose performance when processing complex scenes. There are few differences between a plain door and a human face in other standard graphic technologies from a CPU perspective. However, in Vectors, a tad extra complexity can weigh massively; a vector human face can take a thousand times more processing power. Vector can also take quite some time to render, depending on how complex the art will be. Finally, realistic images that use this graphic tend to lack an organic complexion, appearing somewhat unnatural. As a side note, to fasten the rendering of Vector graphics a bit, you can try using the slug library.
Raster might have superficial disadvantages compared to Vector graphics. However, by analyzing this art technology, you’ll notice that it holds critical values; Raster graphics tend to be more artistic and complex, with noticeable doses of creative freedom. This type of graphic has a limited number of pixels; the only catch is that each pixel holds a designated color. Therefore, representing a plain box with a Raster graphic is the same as representing an expressive human face from a CPU standpoint. Consequently, using Raster for complex gameplays and long animations is typically safer concerning processing power. Hence, rendering is pretty quick.
Although Raster graphics do not have the same contrast level as Vector, it generally allows for content-rich art. In this sense, Raster has a much greater potential detail, allowing for better expressive drawings and animations.
Raster images are conventionally simple to edit with popular software like Photoshop and Microsoft Paint. Since Raster images use tiny pixels assigned to a specific color to build an idea, it creates a more favorable color and shading transition.
Raster does not scale up well. Therefore, you’ll need to consider manually scaling things down for each target device, like mobile and pc, whenever working on a game. Consequently, the file sizes can become quite hefty in Raster art. Since this graphic has a limited number of pixels, large-display images can appear somewhat grainy and distorted.
Animating in Raster might be more arduous since you’ll need to tend each frame carefully.
Many modern developers argue that Vector has considerable unconventional tooling. One of the best tools for Vector games was Flash; this tool made Vector games highly popular. However, since Flash is no longer supported, making games with Vector graphics became even messier. Nevertheless, it depends on the style; if you want to go for a 2D retro-looking, simplistic game, then Vector graphics might be a great fit. But, since more modern tools are available to assist in creating games with stylish visuals, using Vector might be a less recommended choice.
You can easily compare Vector art style more to sculpting than drawing. In this sense, for artists struggling to develop a specific skill at drawing, it might be easier to work with Vectors. Undoubtedly, Vector art can achieve pretty cool-looking stylized figures. However, it might not be ideal for people seeking to develop drawing skills. Nevertheless, familiarizing with the Vector style is an essential skill for graphic artists in general. You can use Vector-based tools to craft specific assets with perfect geometric accuracy in games. Furthermore, building an online portfolio of stylized Vectorized creations might positively impact your social media presence since this type of art is generally well-received for its crispness. An example of thriving Vector art style in social media includes isometric rooms.
See also:
