PlayBits and Vector Games for the Web

 Most games for the Web today are typically based on static or animated sprite images. They look great, but are pretty inneficient as images usually large and contain a lot of wasted data. Silverlight, however, has natively built-in support for vector-based shapes, such as rectangles, circles, lines, curves, polygons, etc. You can combine these shapes together and color them with Silverlight’s rich set of Brush options, such as gradient fills, stroke, translucency, etc., and you can make some pretty amazing game artwork.

Best of all, a few bytes of markup for a vector based game object can download a lot faster to the client’s Web browser than the hundreds or thousands of bytes that make-up an image. In the thumbnail image above, the two player ships and the asteroid are composed of polygons with a gradient fill. Here’s the XAML code for a player’s ship.

<Path Height="41" Width="25" Stretch="Fill" Stroke="#FFE62305" Data="M80,320 L96,280 L112,320 L96,312 z" x:Name="pathPlayer2" StrokeThickness="2" Canvas.Left="38" Canvas.Top="169">
 <Path.Fill>
  <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
   <GradientStop Color="#FF350D04" Offset="0.582"/>
   <GradientStop Color="#FF000000" Offset="0"/>
  </LinearGradientBrush>
 </Path.Fill>
</Path>

The markup text comes to about 409 bytes and it could have been cleaned up a bit further. Below are three representations of the same player, but as images instead. On the left is a JPG file at high quality that comes to about 16,287 bytes. In the middle is a JPG set to low quality and it comes to 14,271 bytes – better, but looks terrible. On the right is our best option, a PNG file that comes to 3,888 bytes. At 4 KB, the PNG file looks the best and is the smallest – plus it comes with an alpha channer, gotta Love that format. But the bottom line is that even a 4,000 byte PNG file can’t match 400 bytes of markup.

  

 Another advantage that vector images have is scalability. Since Silverlight games can potentially run in full screen mode, vector-based art will look great at any level of scale. Images (even great looking PNG images) don’t scale up well, they just get blurry and fuzzy. But vector shapes will look sharp and crisp at any scale, just as a big 72-pt TrueType Font looks as great as its 12-pt counterpart. The scaling is mathematical.

Although there are a lot of benefits to vector-based graphics in Web games, I’m not suggesting that every Web game must be completely vector-based. However, you should consider how you can leverage vector art alongside images within a game. Here’s a great example from the PlayBits BlackJack demo as shown on the right. The playing card faces and backs are PNG images, but everthing else is markup. That includes the green background and the rounded buttons. As result, the game looks clean, it scales, and it loads fast.

The PlayBits Silverlight game engine offers built-in support for working with vector-shapes within your game. Just add a VectorShape scene object to the scene and point it to the Shape you want to use. You can then add any of the standard component you like, such as a MovementComponent to control it with the mouse or keyboard and the FarseerPhysicsComponent to add some rigid physics and collision ability or even the ConnectorComponent to attach a Shape to another scene object within the game. The video below demonstrates the VectorShape scene object in action to create a simple retro-arcade space game using Microsoft’s Expression Blend.

In any case, take a closer look at your Silverlight games to figure out how you can work-in vector-based graphics to either speed-up the load time or add presentation scalability.