next »

[muku]

I have been thinking about the use of 2D vector graphics in games lately, and the current discussion about 8bit killer on the frontpage has rekindled that. Basically, there's an interesting disagreement between the phrases "vector graphics in games", usually referring to low-fidelity, monochrome line-only drawings (Asteroids, Tempest etc), and the general use of "vector graphics", referring to graphics formats like SVG or VML. That dissonance most probably has historical reasons (those line drawings were the only way to get fast, crisp graphics in arcade games back in the day), but it seems that it has stuck to a certain degree. After all, almost every 3D game in existence uses "vector" graphics in some sense of the word as well (that's what our hardware accelerates), but no one refers to it that way.

See:
http://en.wikipedia.org/wiki/Vector_game
http://en.wikipedia.org/wiki/Vector_graphics

Certainly many flash games use vector graphics because of the inherent capabilities of the platform, but to me it seems that they are often only used as a drop-in replacement for the usual bitmapped sprites. Advantages of vector graphics that I can think of off the top of my head:

• trivial to create rotated versions (I guess this one is most often taken advantage of in practice)
• infinite scalability without artefacts
• possibility of animation via keyframes (as in 3D graphics)
• easier to dynamically transform at runtime (think about plants swaying in the wind etc)
• potentially smaller datasize
• perhaps easier to generate/modify procedurally? Not sure about that one.
• ... (any others?)

So my question is: what are 2D games which use vector graphics in the modern sense of the word, and truly take advantage of the format? Has anyone worked on a game that would fall into this category? Or is my assessment here way off the mark anyway?

[Ciardhubh]

Advantages of vector graphics that I can think of off the top of my head:

• trivial to create rotated versions (I guess this one is most often taken advantage of in practice)
• infinite scalability without artefacts
• possibility of animation via keyframes (as in 3D graphics)
• easier to dynamically transform at runtime (think about plants swaying in the wind etc)
• potentially smaller datasize
• perhaps easier to generate/modify procedurally? Not sure about that one.
• ... (any others?)

Rotation should be managed by whatever library/engine you use. It's not easier to rotate a vector construct than a bitmap in for example OpenGL.

I think scalability is the main advantage in games. You can choose whichever resolution you want and graphics will scale accordingly. As far as near and far objects are concerned, you get the same problems you have with textures to some extent, i.e. loss of quality. Either you use very high detail vector graphics at the cost of performance, or you use less detailed graphics that look empty when zoomed in on.

Many transformations can easily done with bitmaps by putting them on polygons and move those. Of course more complex transformation are easier using vectors.

Vector graphics also have disadvantages you have to consider. Off the top of my head, I can think of:

• Less wide-spread, i.e. fewer tools, engines, tutorials, resources, etc.
• Performance is possibly worse for high detail graphics compared to a precalculated bitmap.
• How do special effects like parallax mapping, alpha mapping, etc. translate to vector graphics?
• Less colourful, i.e. colours are usually defined on a per vertex basis and not per pixel.

[dmoonfire]

When I was working on Ponies Among Us, I decided to use the SVG graphics from my web comic as the graphic engine. I didn't mind the lack of per-pixel graphics since it was good enough for the game.

There were some really nice things about what I did, mostly a bones-based animation system and I could change colors and shapes on the fly (I was doing a Fable-like display of your powers).

Right now, the methods for getting SVG to OpenGL in a cross-platform manner are... slim. I managed to cobble together something using Rsvg+Gdk+Tao (C# of course) and I was pretty happy with it. Another nice bit is that I created a layer for the intersections (physics) and just parsed that as part of the loading process. That way, I could use the same program (Inkscape) to edit the character graphics and the shape for the physics engine in the same thing. I also encoded some of the avatar settings into the XML of SVG, which I then parsed as part of the loading process. One editor to handle just about everything was nice.

Ditto with the area loading. I created a foreground, background, and active layer (well, stealth too), then had a "action" layer which had the trigger points for the plot, and also a physics layer to handle the intersections. Once everything was there, it was pretty easy to scale it and still retain the looks.

It would be nice if OpenVG (a vector graphic standard on top of OpenGL as far as I can tell) would get a bit more stable and a more streamline SVG -> OpenVG implementation existed, ideally open-sourced and/or free. But, you have to start somewhere.

[muku]

Rotation should be managed by whatever library/engine you use. It's not easier to rotate a vector construct than a bitmap in for example OpenGL.

Sure, in practice you just slap your bitmaps onto quads and transform them using regular OpenGL calls. This is however still worse in quality than doing true vector graphics rotation.

I think scalability is the main advantage in games. You can choose whichever resolution you want and graphics will scale accordingly. As far as near and far objects are concerned, you get the same problems you have with textures to some extent, i.e. loss of quality. Either you use very high detail vector graphics at the cost of performance, or you use less detailed graphics that look empty when zoomed in on.

True.

Vector graphics also have disadvantages you have to consider.

Certainly; it's not without reason that bitmap graphics are so prevalent in 2D, they are easier to grasp and to work with, have better tool support etc.

One point though:

Less colourful, i.e. colours are usually defined on a per vertex basis and not per pixel.

I'm not sure that's a disadvantage per se. When I think about vector graphics, I think about a certain kind of aesthetics: gradient-based or even just single colors, outlined, smooth-looking (antialiased), all in all more sleek than bitmap graphics. It has a certain pop art feel to it. So my point here are not only the technical issues, I also want to know whether it's possible to transfer this kind of aesthetics into a video game.

On the other hand, you could just as well texture-map your vector graphics. In order to avoid all those ugly problems with scaling etc we wanted to get away from in the first place, you could use procedurally generated textures from a pixel shader which scale indefinitely just like the vector graphics themselves; this way one could even circumvent the lack of detail problem when scaling you mentioned above. Of course I guess here we're really getting into uncharted terrain...

[muku]

When I was working on Ponies Among Us, I decided to use the SVG graphics from my web comic as the graphic engine. I didn't mind the lack of per-pixel graphics since it was good enough for the game.

There were some really nice things about what I did, mostly a bones-based animation system and I could change colors and shapes on the fly (I was doing a Fable-like display of your powers).

That sounds pretty cool. Any screenshots? From what you say, I'm guessing the project was abandoned?

Right now, the methods for getting SVG to OpenGL in a cross-platform manner are... slim. I managed to cobble together something using Rsvg+Gdk+Tao (C# of course) and I was pretty happy with it.

Yeah. There seem to be all sorts of vector graphics libraries (Cairo, AGG...), but none of them geared towards real-time OpenGL display. I'm not even hell-bent on using SVG (though the Inkscape-as-game-editor thing you mention does sound very juicy), any library that gives me high-quality, antialiased 2D vector primitives with high framerate and integrates with a given OpenGL context would be great, but I don't know if such a thing even exists.

Speaking of it, what was the framerate like with the approach you mentioned?

It would be nice if OpenVG (a vector graphic standard on top of OpenGL as far as I can tell) would get a bit more stable and a more streamline SVG -> OpenVG implementation existed, ideally open-sourced and/or free. But, you have to start somewhere.

Yes, OpenVG sounds interesting in theory, though I only just learned about it. Do you have any idea what the reference implementation does at all? The front page doesn't really tell me much. There seems to be a commercial implementation, AmanithVG, but that's out of the question for me.

[Mitchard]

I think scalability is the main advantage in games. You can choose whichever resolution you want and graphics will scale accordingly. As far as near and far objects are concerned, you get the same problems you have with textures to some extent, i.e. loss of quality. Either you use very high detail vector graphics at the cost of performance, or you use less detailed graphics that look empty when zoomed in on.

Mipmaps pretty make the difference in scaling vectors and bitmaps negligible.

[dmoonfire]

When I was working on Ponies Among Us, I decided to use the SVG graphics from my web comic as the graphic engine. I didn't mind the lack of per-pixel graphics since it was good enough for the game.

There were some really nice things about what I did, mostly a bones-based animation system and I could change colors and shapes on the fly (I was doing a Fable-like display of your powers).

That sounds pretty cool. Any screenshots? From what you say, I'm guessing the project was abandoned?

Yeah, I tried to do too much and it was slightly beyond my skill. Okay, a lot beyond my skill, but I still want to work on it. It was for 4E6, but I ended up blowing a month on National Novel Writing Month, a month on CuteGod, then I ended up looking for a job, so the project just got shuffled away.

http://moonfire.us/blog/category/games/ponies-among-us/ (this is my blog category for it)
http://mfgames.com/comics/glorious-saber/001 (my web comic, also on hold, its short)

This is from the web comic:



This is how I was going to do the ponies...



Those are the graphics for the pony and a base figure. The following is a SVG loaded into memory and thrown on an OpenGL texture with the ability to change color of various parts (the hair in this case) dynamically. Framerate is pretty high, mainly because it is just a texture, but Rsvg+Cairo+Glitz isn't *quite* stable to go directly from SVG to OpenGl at this point.



This is just a link to the character editor I wrote for the "bones" of the figures. I got it into the OpenGL quite nicely, but I stumbled on integrating the physics into the bones part of things.

http://moonfire.us/blog/2007/12/17/some-days-i-think-i-do-too-much/

I did put it on hold, but I'm hoping to get back to it some day. Mainly because it looks like so much fun to do and I like the style. I just need a bit more skills and a slightly more streamline toolchain (which I'm still working on).

Right now, the methods for getting SVG to OpenGL in a cross-platform manner are... slim. I managed to cobble together something using Rsvg+Gdk+Tao (C# of course) and I was pretty happy with it.

Yeah. There seem to be all sorts of vector graphics libraries (Cairo, AGG...), but none of them geared towards real-time OpenGL display. I'm not even hell-bent on using SVG (though the Inkscape-as-game-editor thing you mention does sound very juicy), any library that gives me high-quality, antialiased 2D vector primitives with high framerate and integrates with a given OpenGL context would be great, but I don't know if such a thing even exists.

Speaking of it, what was the framerate like with the approach you mentioned?

I almost always frame-limit my games, but I was comfortablly getting 300+ fps on my crappy machine, even when I had a ton of things. But, given the time, I ended up doing a render to texture approach for Ponies (Rsvg+Cairo+Gdk) for a given scale and color keys. So, it wasn't much different than normal pixmap, other than I had a lot more flexibility to change color gradients or scale.

It would be nice if OpenVG (a vector graphic standard on top of OpenGL as far as I can tell) would get a bit more stable and a more streamline SVG -> OpenVG implementation existed, ideally open-sourced and/or free. But, you have to start somewhere.

Yes, OpenVG sounds interesting in theory, though I only just learned about it. Do you have any idea what the reference implementation does at all? The front page doesn't really tell me much. There seems to be a commercial implementation, AmanithVG, but that's out of the question for me.

AmanithVG is okay, I haven't had much with it and I don't like their model. There really isn't any good direct to OpenGL at this point; unless someone writes a proper OpenVG version in ANSI C.

Cairo+Glitz (OpenGL backend) looks like a really great way of doing it, but I haven't checked back on that recently. Rsvg+Cairo has a direct SVG to Cairo stuff, and when chained to Glitz would give you a direct SVG to OpenGL drawing.

You can also use the render to texture approach. Rsvg is a pretty good renderer which can put it into a Pixbuf which is very easily converted into an OpenGL texture. AGG probably could also be used, but it wasn't really C#-friendly, so I didn't really look into it.

I'm also limiting myself by the cross-platform and C#-usable, which REALLY hampers me. Actually, the code in Running Bomb (my PGC entry) is using code that I started with Ponies. I managed to find a good polygon clipping library (GPC) and ported it to C#. That is going to be rolled back into Ponies (when I go back) for the physics layer.

Yeah, the artwork is based off of Thing Thing. :D

[Gnarf]

I like vectors. They're nice to me and not mean.

AmanithVG is okay, I haven't had much with it and I don't like their model. There really isn't any good direct to OpenGL at this point; unless someone writes a proper OpenVG version in ANSI C.

So I've linked to it before, twice, and I haven't tried it, so I don't know how proper it is, but ANSI C OpenVG seems to be quite excactly what ShivaVG is going for. Every once in a while I start wanting to get some vectory gamey stuff together and look into things. I suppose ShivaVG is first on the list of things to properly check out next time I start behaving like that...

[dmoonfire]

I like vectors. They're nice to me and not mean.

AmanithVG is okay, I haven't had much with it and I don't like their model. There really isn't any good direct to OpenGL at this point; unless someone writes a proper OpenVG version in ANSI C.

So I've linked to it before, twice, and I haven't tried it, so I don't know how proper it is, but ANSI C OpenVG seems to be quite excactly what ShivaVG is going for. Every once in a while I start wanting to get some vectory gamey stuff together and look into things. I suppose ShivaVG is first on the list of things to properly check out next time I start behaving like that...

Oh, that went on my bookmark list. As much as I really don't care for p/invoke stuff, I really want OpenVG to get popular enough it gets hardware accelerated and we have good libraries for moving into it (SVG renderer, for example). And ANSI C is always appreciated over C++ for C# since you can't really p/invoke C++.

I think SVG (as a standard vector format more than anything else) is a good thing to do graphics in. Some of the work in the Qt/Gtk icons really blows me away with the quality. Also what danc of Lost Garden was playing with. Maybe tigsource should have a "Show us your vector artwork" right next to the pixel one?

Thanks!

[Zaphos]

Of course I guess here we're really getting into uncharted terrain...

It is slightly charted ... see Multiscale Texture Synthesis

[muku]

So I've linked to it before, twice, and I haven't tried it, so I don't know how proper it is, but ANSI C OpenVG seems to be quite excactly what ShivaVG is going for. Every once in a while I start wanting to get some vectory gamey stuff together and look into things. I suppose ShivaVG is first on the list of things to properly check out next time I start behaving like that...

Man, this looks very cool. I'll have to try that sometime. Thanks for the link.

Of course I guess here we're really getting into uncharted terrain...

It is slightly charted ... see Multiscale Texture Synthesis

Wow. Amazing stuff. And thanks for clueing me in about texture synthesis in the first place, I had no idea that's as viable as it seems to be. There's a great survey paper at http://www.cs.unc.edu/~kwatra/SIG07_TextureSynthesis/coursenotes.htm, and I spent a few hours last night reading into that plus some other stuff. I'm stoked. I'm knee deep in some procedural generation project (actually started that way before the PGC, but it's far from finished), and this has given me some new ideas. Might come in very handy.


So, this is cool. I started some random thread and already learned about at least two new and cool things I didn't know before. Thanks guys.

[dmoonfire]

Slightly dated topic, but browsing the web this weekend, I found another SVG renderer (in C#). It has a decent license and seems to work pretty well (gradients aren't working though, neither is clipping).

http://www.codeplex.com/svg

Still messing with it for my CPB competition entry, but seems to work nicely.

[Core Xii]

Vector graphics also have disadvantages you have to consider. Off the top of my head, I can think of:

• How do special effects like parallax mapping, alpha mapping, etc. translate to vector graphics?
• Less colourful, i.e. colours are usually defined on a per vertex basis and not per pixel.

Nothing prevents you from having vector-based normal maps and alpha channels just like you have base colors. It's slightly more complicated, granted, than bitmaps since you know exactly how each pixel on each channel affects the other - But this translates to vectors as well, you just have to find which normal vectors affect which base color vectors. I have two implementations in mind, one using cached bitmaps rendered from the vectors (have to be redrawn when translated), and one with a sort of a ready-in-memory instruction list which the renderer skims trough; It's more restrictive though.

Also they're not any less colorful at all. You can recreate an identical image with vectors than you can with pixels. If you want a pixel somewhere, put a rectangle of 1x1 units there. Depending on the image, it may be more or less efficient in terms of file size. However with a special format specifically designed for pixel artsy vector graphics, one can include shortcuts for stuff like dithering.

Probably the biggest advantage is flexible animation with skeletal systems, and procedural objects. (try making a fractal tree with bitmap graphics...)

I'm in the process of creating a tool chain for retro vector graphics (i.e. vector graphics that resemble pixel art) for my games.

[dmoonfire]

Probably the biggest advantage is flexible animation with skeletal systems, and procedural objects. (try making a fractal tree with bitmap graphics...)

I'm doing that for my competition entry, but the graphic style which I'm using is pretty good for it.

I'm in the process of creating a tool chain for retro vector graphics (i.e. vector graphics that resemble pixel art) for my games.

That would be cool to see.

[agj]

I'm in the process of creating a tool chain for retro vector graphics (i.e. vector graphics that resemble pixel art) for my games.

That would be cool to see.

Indeed, I'm intrigued.