locked
Vector Graphics RRS feed

  • Question

  • I am looking to use Silverlight in my game project (My first post here) 

    Vector graphics and WPF/Silverlight seem to be a good match at least on paper and I am very much in favor of it over bitmaps (Scalable graphics seems much more appealing than bitmaps and WPF/Silverlight API seems so suited for it)

    While there is some information on the web regarding bitmap rendering/frame based animation for silverlight games I really couldn't find much information on using Vector graphics in Silverlight games in terms of rendering/animation techniques or even the tools to use (I looked at Expression Blend Trial but I don't think I am ready to make that kind of an investment).

    I wanted to know if there are people using Vector graphics for their games and whether you have some pointers on techniques and tools.

     

    Thank You,

    Vikram 

     

    Thursday, July 9, 2009 1:04 AM

Answers

  • I plan to use both property-based animations and CompositionTarget.Rendering based effects.  When I move an object I create DoubleAnimations targeting the Canvas.Left and Top properties.  I've read that using Transforms can be a tad more efficient but I'll see if the performance is good enough with this method.  I also need to make game piece "shake" or "wobble" if they are damaged, and for this I intend to use Transforms that are randomized in the CompositionTarget.Rendering.  So I'll be able to move a piece and have it "wobble" at the same time.

    Thursday, July 9, 2009 7:26 AM

All replies

  • This dude DDtMM made this game Vector Space Armada, heavy uses of vector graphics. If you ask him nicely, maybe he'll show you some codes.

    http://silverlight.net/forums/t/106111.aspx

    Thursday, July 9, 2009 2:22 AM
  • I'm working on converting my game Solar Vengeance from WinForms to Silverlight, and am changing the StarShip graphics from bitmaps to vector graphics.  So far I am using Expression Blend to design the graphics, but am also looking for a less expensive alternative design tool.  When a graphic is finished, I have been manually re-factoring the XAML to combine as many like elements as possible into GeometryGroups.  For example, if a graphic uses several Path objects that are drawn with the same brush, I combine them into a single PathGeometry in the XAML.  This makes the graphic more lightweight for the Silverlight rendering engine, instead of having to process several UIElements it has to process only one.

     Here's some sample code from one of my StarShips.  Note the base class is local:StarShipVisual, but you can change this to Canvas.  My base class has a method that automatically changes the Stroke and Fill colors of the elements based on the color of the player that owns the StarShip, by examining the Tag properties of the elements.  Here I needed 2 Paths (1 contains several Geometries in a GeometryGroup) because they use 2 different visual rendering styles.

    <local:StarShipVisual x:Class="SCG.SolarVengeance.StarShipVisuals.SpyShipVisual"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="clr-namespace:SCG.SolarVengeance"
        Width="30" Height="30">
        <Path Tag="F" Width="15.5" Height="8" Fill="#FFFF0000" Stretch="Fill" Stroke="#7F000000" Data="M5.4995816,9.500351 L5.4995815,16.500643 7.9994226,16.500643 7.9994225,16.000622 9.9992954,15.00058 9.9992954,16.500643 19.998659,16.500643 19.873668,9.5003508 9.8743036,9.5003508 9.9992956,11.000413 7.9994225,10.000372 7.7494384,9.5003508 z" Canvas.Left="-12.5" Canvas.Top="-4"/>
        <Path Tag="S" Stroke="Red" StrokeThickness="1">
            <Path.Data>
                <GeometryGroup>
                    <LineGeometry StartPoint="0,-0.5" EndPoint="11,-0.5"/>
                    <LineGeometry StartPoint="0,0.5" EndPoint="11,0.5"/>
                    <PathGeometry>
                        <PathFigure IsClosed="False" StartPoint="7,-4">
                            <ArcSegment Point="7,4" Size="2,2"/>
                        </PathFigure>
                        <PathFigure IsClosed="False" StartPoint="10,-4">
                            <ArcSegment Point="10,4" Size="2,2"/>
                        </PathFigure>
                        <PathFigure IsClosed="False" StartPoint="13,-4">
                            <ArcSegment Point="13,4" Size="2,2"/>
                        </PathFigure>

                    </PathGeometry>
                </GeometryGroup>
            </Path.Data>
        </Path>
    </local:StarShipVisual>

    Thursday, July 9, 2009 3:29 AM
  • Hey,

    Thanks for the tip.  I will probably continue using the Blend trial till I figure out a better solution.

    I was wondering how you are  planning on doing the animations. Is it just going to be Transformations applied through Animations? For me it looks like Frame by Frame animation goes well with bitmap graphics while transformation based animation goes well with vector graphics.

     

    Thank You,

    Vikram

    Thursday, July 9, 2009 4:33 AM
  • I plan to use both property-based animations and CompositionTarget.Rendering based effects.  When I move an object I create DoubleAnimations targeting the Canvas.Left and Top properties.  I've read that using Transforms can be a tad more efficient but I'll see if the performance is good enough with this method.  I also need to make game piece "shake" or "wobble" if they are damaged, and for this I intend to use Transforms that are randomized in the CompositionTarget.Rendering.  So I'll be able to move a piece and have it "wobble" at the same time.

    Thursday, July 9, 2009 7:26 AM
  • Whenever possible use the Data property of the Path element when using Paths. Instead of parsng a lot of XAML in managed code the Data string is passed to a faster native code parser and will load faster.
    Thursday, July 9, 2009 8:48 AM
  • It's too bad the mini-language (Data property) is not available to PathGeometries in Silverlight.  We can't use it when we want to combine many Paths into a single GeometryGroup.  I'll take the tiny performance hit parsing the XAML in exchange for the more efficient management of objects as Geometries rather than creating multiple Paths.

    Thursday, July 9, 2009 8:59 AM
  • I am quite excited with my initial findings on the tools side for vector graphics. I discovered Inkscape and for the short time I tried using it, it has been  a really good experience.

    I was able to create a vector graphic SVG with Inkscape and convert it to XAML using XamlTune and load it in my WPF application(Now that I found about Inkscape I saw few more posts in other silverlight forum sections about it). I found about it from http://www.oak-tree.us/blog/index.php/2008/12/16/wpf-svg-xaml-part3

     I am yet to see whether the same XAML file will load in Silverlight but I'm hoping it will.

    XamlTune - Some elements in SVG weren't correctly coverted but it works really well when I stick to Paths. It handles fill, Strroke, color, trransparency, Linear and Radial gradient of the SVG very nicely - which is probably all the features I want. It has a command line tool which can be easily integrated into the build process so that I can work with SVG and the app can work on the converted XAML.

    What I tried and didn't work as well

    1) The Inkscape XAML plugin - Conversion wasn't complete and it kept crashing on me

    2) ViewerSVG - Conversion wasn't complete and it had high fee

    3) Weird path through XPS. I didn't try it. Just wanted to mention it for completeness - http://benpittoors.wordpress.com/2009/03/17/convert-svg-to-xaml/

    I haven't figured out my strategy for animation using Inkscape but I'm very happy with it for doing my game graphics. I would probably make a proper post on  using Inkscape with Silverlight once I have a proper sample working.

    Friday, July 10, 2009 1:36 AM
  • I just wanted to update this thread with my latest findings.

     http://silverlight.net/forums/t/112810.aspx has my new findings on loading SVG files in to a silverlight application.

     

    Thank You,

    Vikram

    Tuesday, July 21, 2009 5:28 AM