🔒 Locked

2D Vector Graphics in XNA

Started by Wardyahh May 18, 2008 at 1:41 PM 15 replies 12.9k views

Original Post

May 18, 2008 at 1:41 PM

Hey, in my general perusings of cool things to learn i started looking into Vector Graphics in 2D, i'm now at the point where i want to start playing with techniques. i'm looking at the Xbox 360 as the platform for messing around on and so i'm using xna. i'm just wondering what my options are for 2d vector graphics in XNA from what i've seen so far its pretty limited. options i can think of are: 1. Hard code vector values for objects 2. Find an SVG implemenatation for XNA(if there is one) 3. Create a Full SVG implementation myself(not likley) 4. Create a very basic implementation of one of the smaller standards(1.2 tiny etc. ....still not likely) 5. Create a very simple proprietary filetype(probably in XML) that will suits my needs (similar to the way asplode does it) 6. find aother techniques for implementing 2d vector graphics that can be ported to XNA any advice or suggestions on potential solutions would be greatly appreciated. as always ..Thank You in advance. Wardyahh

Wardyahh

May 18, 2008 at 6:37 PM

*kerbump*

OrangyTang

May 18, 2008 at 7:10 PM

While a full SVG implementation would be a lot of work, I believe it's reasonably straightforward to support a simple subset of it which is suitable for most game needs. Might be worth looking into.

Ravyne

May 20, 2008 at 9:19 PM

Depends on what features you need, and how much detail you really want to be able to have. Sufficiently detailed 3D models/graphics with one element simply set to 0 will do a fine job creating the vector look and feel.

Wardyahh

May 21, 2008 at 3:12 AM

Thank you for your replies,

i have decided i'm goig to try and implement a small subset of the official SVG (Path,Basic Shapes and prerequisites) we'll see how it goes.

once i have something workable i'll post it open source in case anybody wants to use it(read: its not crap and can be used by other people).

in case anybody was wondering,the paricle system i was collecting ideas for is still being developed, i've ported it over to XNA and am currently setting up the ability to allocate different systems to CPU/GPU as required.

Thank You

Wardyahh

dave

May 21, 2008 at 3:18 AM

A challenging place to start is the tesselation of outline fonts, such as TTFs.

Jason Z

May 21, 2008 at 5:51 AM

I'm not really sure how much GPU programming you can do with XNA Framework, but in GPU Gems 3, Jim Blinn discusses implementing scalable vector graphics on the GPU. It would at least be worth checking out in the bookstore, even if you just see how he implemented it on the GPU and then convert that to C# or whatever.

Remember to post some screenshots once you've finished it up!

Wardyahh

May 21, 2008 at 5:56 AM

with the particle system i outsourced all the calculations to the gpu using a shader plugin system, that allowed me to control the particles inside the shader(and use multiple layers of controls all at once.
although shaders do lend themselves to particles manipulation, i'm sure that the conversion from svg to vectors could be partially if not fully outsourced to shaders.
as far as direct access to the gpu ...i have no idea :)

i'll look into it

Thank You

NickGravelyn

May 21, 2008 at 11:58 AM

If you need a decent starting ground for paths, I have some pretty basic starting code for bezier curves found here: http://xnawiki.com/index.php?title=Simple_Bezier_Curve_System. Hopefully that's a good kick in the right direction :).

Definitely keep us posted. I'm working on an SWF reader in C# right now so it would be cool to someday combine my work reading that data with your work in rendering it.

UltimaX

May 21, 2008 at 12:43 PM

Here is a curve editor created in XNA that could be helpful: http://creators.xna.com/en-us/utilities/curveeditor

Wardyahh

Jun 10, 2008 at 3:03 AM

Just a quick update in case anybody is interested.

Started work on SVG parser (after reading the official specs) i'm using the official BNF to convert paths into structures.

Initial Roadmap:

Path Parser
Basic Shapes
Conversion of structures into renderable objects(i'm probably going to use the standard XNA/DirectX structures (Line,Polyline etc))
Basic Line Rendering

I have an Assembla page for the project but there isnt much there yet i'll put it up once there is something to show (probably friday) :)

Any suggestions or comments are welcome

(also thank you Nick and Ultima both are very helpful in the curve department)

Wardyahh

Jun 10, 2008 at 3:14 AM

http://www.w3.org/Graphics/SVG/

there are a few different iterations 1.0, 1.1 etc and also Tiny and Basic are intended for smaller platforms handhelds/phones.

they are all quite similar though :)

dave

Jun 10, 2008 at 3:35 AM

Thanks.

Have you worked out how to tessellate the shapes described, etc? I did my vector font tessellation with the ear clip method.

Wardyahh

Jun 10, 2008 at 3:42 AM

havent even come close to that yet, still on the parser :)

but it is actually on my list of things to do today , any suggestions ?

dave

Jun 10, 2008 at 4:01 AM

I followed this guide. It's quite concise and it took me a few iterations to get working.

Wardyahh

Jun 10, 2008 at 4:22 AM

if you're going to be reading the svg specs its really helpful to learn
Backus Naur Form

its how most of the technical implementations are explained for paths and polylines

its quite simple to learn and immensely helpful in implementing the specs

also wsp stands for Whitespace, took me like 3 hours to find that out

dave

Jun 10, 2008 at 4:38 AM

Ok thanks. I eventually intend to provide support for loading SVG images. However at the moment i am finding that my implementation of ear clipping is slow. It needs optimisation before i can consider any real-time vector graphics.

Topic Locked

This topic has been locked by a moderator. New replies are not allowed.