Up till now I’ve been using the file extension XZ for compressed XAML vectors (Xap, Zipped - chosen uncarefully). But someone was Googling on “XZ”, not finding what they expected because XZ stands for compressed archives under Unix. So from now on, I’ll be using the file extension “CVF”: Compressed Vector Format.
A few days further, I’ve been very busy testing my CVF technique with different images. As expected, these tests had different results. In some cases, it pays to use the vector compression technique over PNG-24 or PNG-8. In some cases, the result of the compression can be larger than a PNG-24 original. It all depends on how much detail the picture has, whether the subject of the image has hard or smooth edges, and which optimization choices you make. So sometimes it works fine, and other times it is the worst option.
But CVF can be an option. I had the most amazing result with the graphic for the vertical bar in the game Slengo. The playing field is bordered by thick blue lines. If the player pushes these thick borders, they will paralyze all enemies which are next to the border. An animation is played, making the border more elastic for a while. This animation is making the graphic for the vertical borders very large in size: 117Kb (PNG-24). Converting this image to a PNG-8 format results in 61Kb. Lastly; I have scanned the PNG-24 vertical bar graphic with Inkscape, saved XAML and converted it to CVF. The result file is 47Kb, which can be Winzipped to 24Kb, in the XAP file. Compared to the original 117Kb, this is a reduction of 79%. The vertical bar is one of the largest images in the game, so it sure counts for download time.
Now for clouds. I wanted a cloudy background for a new game I’ve been creating, and I wanted this the easy way.
So I took clouds from Brazil:
I removed the scene and cropped the image to get clouds in the sky and forming clouds at the horizon. I filtered the result to give it a little more atmosphere. The result:
The PNG-24 version is 59.2Kb. The PNG-8 version is 17Kb. I have traced the PNG-24 with Inkscape, saved XAML and converted to CVF, not paying much attention to optimization. The result CVF file is 82Kb, which may be Winzipped to 38Kb. So the CVF version is smaller than the PNG-24 version and larger than the PNG-8 version.
I decided to test both in my game. Opacity is set to 0.5, to let the sky-background influence the cloud’s appearance.
Image above: The CVF-clouds are quite fluent, not much detailed, so a real part of the background which does not draw too much attention, while still pleasing.
Image above: The PNG-8 version of the clouds is much more detailed, making them a little more realistic. It’s nice, but the style does not match the rest of the game, which is more surrealistic.
Ofcourse we can do more image processing to smooth the PNG-8’s edges, making it look more like the CVF version. And we can do more optimizations on the CVF version, to decrease quality and filesize. That’s a decision to make later. Still it’s nice how the two compare.
The little blob in the centre of both images is an enemy helicopter. This helicopter uses CVF images only. PNG-8 was unsuitable to use for the helicopter, because they had a weird white border around the helicopter, which I was unable to remove. I have encountered this problem more often with PNG-8's, which is why I've been using PNG-24 all the time. The first versions of the CVF also had a strange white border round the helicopter, but I removed them by adjusting the trace options in Inkscape. The result is quite satisfying.
Subscribe