Vector Or Bitmap Images In Your Game, Why Choose?

Posted on July 2, 2013

When developing a game each target platform's resolution and size has to be taken into consideration when developing the original game artwork. Decisions need to be made on wether Bitmap (rasterized) images and/or Vector images are used for the artwork.

There are benefits for either image type but let me give a little background on both. A bitmap image is a pattern of tiny dots known as pixels packed with color information at a set resolution. A vector image is not made up of pixels but of lines and curves that can be re-calculated and re-sized at runtime. This results in a smaller image file size than bitmaps and offers a lot more flexibility when it comes to scaling images. However the most commonly used images are bitmaps. A very popular type of vector image is a swf. SWF images are vector based images that can only be displayed using the flash runtime. The introduction of swfs allowed for the use of vector images all across the web in many 2D games. When it comes to achieving the highest performance with images vector images tend to be slower because of the re-calculations that have to happen at runtime. A bitmap images' size and color information is defined ahead of time and baked into every pixel of the image which speeds things up.

In todays world of massive device fragmentation with varying screen sizes and resolutions, one would think the easy and immediate solution would be to use vector images so that images can just be scaled to fit whichever device the game needs to run on without any loss in quality but it is not just that simple. When working with the traditional flash display list and displaying swf vector images your game can run into performance issues especially on mobile. Rendering with bitmap images is almost always faster. Also consider the look and feel you are going for in your game. Bitmap images hold a lot more color information and can have a much more detailed / realistic look and feel, whereas vector images can only render basic colors.

Vector Images And The GPU

%STEP_TITLE%

You run into another problem dealing with vector images when wanting to render your game using a Graphics Processing Unit (GPU) rendering engine. GPUs render various types of bitmap images depending on the unit. The GPU can calculate the position of polygons and render images to the screen faster than any software (or CPU) based rendering technique. That is why there is such a need for webgl in the browser and stage3D in flash. Without going into to much detail, a GPU rendering engine defines polygons of at least 3 points each in 3D space then paints a bitmap onto the polygons to display an image onto the screen. Any rendering engine that says it is rendering vectors on the GPU is pretty much doing this process behind the scenes using the outline of a vector image.

How About A SWF Vector Bitmap

Now that we have looked at both image types, what if you could combine the benefits of vector image dynamic scaling, resolution independence, and GPU friendly bitmap images? Well that is what we call a Vector Bitmap. In GameBuilder Studio you can import swf assets into your project. Behind the scenes we take the swf asset and draw it to a bitmap image at a given scale which maintains the quality of the image. This is all handled behind the scenes for you at runtime.

The beauty of using swf vector bitmaps is the fact that it can be scaled up and down without loosing any quality and it can also be uploaded onto the GPU for high performance rendering. This helps tremendously when dealing with so many different screen sizes and resolutions. You can just scale your images up and down to fit any screen. I must note that there are a couple of downsides to this technique as well. This can impact performance if used too much or constantly changing the scale of the image. Keep in mind that each time the scale is changed the swf vector image has to be re-painted. If you define the scale ahead of time in the GameBuilder editor and run your game you should be fine. We optimized this process a bit by caching the drawn images when necessary so that the final images can be swapped on and off the GPU instead of re-uploading every time. This caching optimization is also used with multi-frame SWF sprite sheets. Take a look at how this is done by viewing our open source game engine code on github.

Vector Bitmap Demo

The demo above can be opened up inside of GameBuilder Studio from the examples menu. If you have any questions about this topic or just want to chime in, login to leave a comment below on this post or start a discussion topic on our new support forum.

Thanks for reading this blog post. Spread the word!


Comments

There are no comments yet!


Anyone can leave a comment!


You just need to signup for an account or log-in before you can comment.