• Hey, guest user. Hope you're enjoying NeoGAF! Have you considered registering for an account? Come join us and add your take to the daily discourse.

Why don't 2D games use vector art?

The idea that vector results in less detail or grain, is also no longer explicitely true. Just look at https://www.madewithmischief.com/

Uses "skeletal vector strokes" for infinite zoom and canvas. A vector edge doesn't *have* to be a hard edge, you can apply a stroke to it, which can add softness, texture, weights, etc.

https://www.youtube.com/watch?v=Yen31td9Mq4

Examples:

upoDdJ6.png


l7zeaIt.png


More at: https://www.madewithmischief.com/explore

Sure, the more complex the vector rendering engine, the more detail you want to add to how it does things, the more computational power is required (though you can get around some of that thanks to programmable shaders).

That's why Guacamelee hits its smooth framerate: by sticking to a vibrant and simple (but not simplistic) style.

 

Palculator

Unconfirmed Member
I think you're forgetting that everything needs to be mapped to pixels. Polygons are perfect representations inside the computer but need to be mapped to your screen. Same with all other vectors. Same with all other art.

And you're forgetting that the hardware used to do the rasterization is built for rendering polygonal shapes and bitmaps, not arbitrary shapes of infinite precision. These have to be approximated first to accomodate that hardware which adds a computational overhead, meaning vector art is more taxing than just having raster images or polygonal meshes in the first place.
 
My game that I'm currently making our artist creates everything into vector then convert it into pixel to same some space since its on the mobile platform. Game isnt ugly, I think a lot of 2D games might do it just they convert it for the smaller footprint.

UyhlGBN.png


LDQ9fXV.gif
 
And you're forgetting that the hardware used to do the rasterization is built for rendering polygonal shapes and bitmaps, not arbitrary shapes of infinite precision. These have to be approximated first to accomodate that hardware which adds a computational overhead, meaning vector art is more taxing than just having raster images or polygonal meshes in the first place.

I'm not forgetting anything.

You might want to actually read what I've written. I never said 2D vector art was less taxing then 2D bitmaps or 3D vector art was less taxing then 3D polygonal art. There is also a level of expectations which is assumed (I can not account for unreasonableness). Reproducing say the Mona Lisa as vector art for a game is probably a bit unreasonable.

BTW, polygonal shapes are arbitrary shapes of infinite precision.
 
The idea that vector results in less detail or grain, is also no longer explicitely true. Just look at https://www.madewithmischief.com/

Uses "skeletal vector strokes" for infinite zoom and canvas. A vector edge doesn't *have* to be a hard edge, you can apply a stroke to it, which can add softness, texture, weights, etc.

https://www.youtube.com/watch?v=Yen31td9Mq4

Examples:

upoDdJ6.png


l7zeaIt.png


More at: https://www.madewithmischief.com/explore

Sure, the more complex the vector rendering engine, the more detail you want to add to how it does things, the more computational power is required (though you can get around some of that thanks to programmable shaders).

That's why Guacamelee hits its smooth framerate: by sticking to a vibrant and simple (but not simplistic) style.

Mischief is pretty awesome.
 
I'm not sure of the technical reason why it's not used in videogames, but in web development vector graphics don't always make sense because graphics can scale infinitely but they aren't adequate for all sizes and in the case of small graphics like icons, you will often lose more detail than you would otherwise if you were using a bitmap type image. This article exemplifies it: http://www.pushing-pixels.org/2011/11/04/about-those-vector-icons.html
I've read similar articles and I can see their point that vector graphics are not a "write once, use everywhere" solution, but I don't see how that negates the other advantages of vector graphics. Sure, you may have to create multiple versions to look as good as multiple versions of raster graphics, but it still frees you from a rigid resolution (i.e. if you have a 16x16 px and a 32x32 px graphic, a vector resized to 28x28 px is going to look much better than a 28x28px resized raster.) Plus you can up-rez your highest "res" vector to infinity and it'll still take advantage of the resolution of the output. It may be a bit off, but it wouldn't be a blocky horror show as if you projected a fixed raster to the same output.

Also, while I'm not at all qualified to comment on the draw performance of vectors for gaming, I remember reading somewhere about upscaling of the raster images of fighting games for HD. The filesizes and throughput required for even 1080 were off the charts huge (on the scale of 4x as much.) Vectors, if they could have been used, could've just added some more vertices for additional detail/hinting and kept filesize at least down to non-bleeding edge requirements.

My guess from reading all this and what I know of computer graphics (which, as I've said, isn't much) is that 2D games tend not to use vector art because it's less familiar to the developers, there's no compelling business case to futureproof games in a way that make vector images the better solution, there are fewer tools for them to use, those tools are probably harder to learn (I picked up raster image editors pretty quickly but have been struggling for years to learn vector editors
in my defense, I only do graphics as a very minor hobby so there isn't much impetus for me to learn
), and potentially due to the performance bottlenecks.
 
In a better world, the tools and hardware that help to catalyze Vector-doings would've kept roughly apace of the pixel/bitmap side of things if only for the sake of creative progress better found by progressing along wildly different technological paths as opposed to the sad trend towards homogeny, that while surely has afforded great progress on a number of fields, surely can't be fully tapping the potential---The Vectrex wouldn't have been a one-off technical marvel of the times! It is good that there are crazy outfits like the N++ folks, and the likes Inkscape trying to move things beyond the overall choking grasp of Adobe's not-quite-Touch of Midas as it turns out. The world needs more, the entire lot of it more investment, more attacks from different angles...

Hell, where's a Kickstarter for a modern/improved crack at a Vectrex, even in a much smaller form factor? We live in an age of incredibly unlikely stuff like the Raspberry Pi that would've been laughed out of the room merely a decade back. Hell, I think nigh unto all of the tech went Open Source/Public Domain years ago well before that even became the "in" thing in such circles...

Sigh, file it in the great list of If Only with FM Synth, Trackballs, and various other cultural artifacts of the 70's/80's/bit of the 90's being left on the table in shameful repose.
 

beril

Member
The idea that vector results in less detail or grain, is also no longer explicitely true. Just look at https://www.madewithmischief.com/

Uses "skeletal vector strokes" for infinite zoom and canvas. A vector edge doesn't *have* to be a hard edge, you can apply a stroke to it, which can add softness, texture, weights, etc.

https://www.youtube.com/watch?v=Yen31td9Mq4

Examples:

upoDdJ6.png


l7zeaIt.png


More at: https://www.madewithmischief.com/explore

Sure, the more complex the vector rendering engine, the more detail you want to add to how it does things, the more computational power is required (though you can get around some of that thanks to programmable shaders).

That's why Guacamelee hits its smooth framerate: by sticking to a vibrant and simple (but not simplistic) style.

That does look awesome, but honestly I'm not sure you can even really call it vector graphics at that level. If I were to guess I'd imagine it saves the images more like a macro, saving each brush stroke. And yea it would be way too demanding to have a bunch of images like that moving around at 60 fps
 
Works great for TxK but it uses quite simple shapes.

That's mostly because it has to work on handheld devices which have limited processing, graphics capabilities, and battery life issues.

If you just restricted it to something like say the PS4 or Xbox One, then you could do some amazing stuff.
 
That does look awesome, but honestly I'm not sure you can even really call it vector graphics at that level. If I were to guess I'd imagine it saves the images more like a macro, saving each brush stroke. And yea it would be way too demanding to have a bunch of images like that moving around at 60 fps

It would still be considered vector since it's mathematically stored and rendered and not reliant on pixels.

I'm not sure how Mischief handles the compositing, but I know each stroke is a vector (or sets of vectors if you have one long squiggly line). It's effectively a raster tool but uses vectors instead.

Those huge complex drawings still render fairly smoothly when you move the canvas around.
 

Dryk

Member
Using rasters is fine as long as you render the game for every conceivable resolution (current and future). I'd love to see games that come with the source files + an application to render the sprites at a custom resolution in the future though.

Also anyone that doesn't use an infinitely scalable HUD is going to a special level of hell.
 

Sojourner

Neo Member
Speaking from an artistic standpoint, I think some people here don't quite understand how detailed vector images are created. People see an image and think its drawn the same way, whether it be vector or bitmap. However, there is a lot more "trickery" involved when creating vector images because its very difficult to actually draw an image in a vector program such as Illustrator. Its not as simple as connecting a Wacom and drawing everything out. You don't take a pen and draw a line that eventually turns into a painting. Creating an image in a vector program is much more akin to creating a 3D model in something like 3D Studios Max. The difference being it is 2D instead of 3D. That isn't to suggest that there aren't tools within those programs that closely resemble traditional drawing techniques, but it does require an entirely different way of thinking to go about making those images.
 
Speaking from an artistic standpoint, I think some people here don't quite understand how detailed vector images are created. People see an image and think its drawn the same way, whether it be vector or bitmap. However, there is a lot more "trickery" involved when creating vector images because its very difficult to actually draw an image in a vector program such as Illustrator. Its not as simple as connecting a Wacom and drawing everything out. You don't take a pen and draw a line that eventually turns into a painting. Creating an image in a vector program is much more akin to creating a 3D model in something like 3D Studios Max. The difference being it is 2D instead of 3D. That isn't to suggest that there aren't tools within those programs that closely resemble traditional drawing techniques, but it does require an entirely different way of thinking to go about making those images.

Speaking from an artist's standpoint, it really depends on your own personal method and tools. You can drop into Manga Studio with a Wacom and draw with vectors all day long, adjusting the control points to fix lines or curves. Or you can go point-to-point and build up your linework manually. Same goes for a lot of stuff done in flash - most artists rough out the shapes using a stylus, then go in and adjust/tweak/simplify.

I don't think there is *that* much difference between standard illustration and working with vectors - vectors just give you a lot more control once the lines are down, adjusting widths, angles, strokes, etc. Having done a lot of production work in MAX and Maya, I think 2D vector illustration is more like just raster painting, than working in 3D - but again, it depends on personal methods and workflow.

That does look awesome, but honestly I'm not sure you can even really call it vector graphics at that level. If I were to guess I'd imagine it saves the images more like a macro, saving each brush stroke. And yea it would be way too demanding to have a bunch of images like that moving around at 60 fps

It's vector. You can go in, adjust splines via control points, change strokes, etc. Flash on steroids, really, but with skeletal strokes.

But more on point:

Something interesting from the Guacamelee! post-mortem: http://www.gamasutra.com/view/feature/200658/postmortem_drinkbox_studios_.php

For character visuals we doubled down on the animation technology we'd built for our first game. The artists made animations in Flash and imported them it into the game as animated geometry. Avoiding traditional sprite sheets meant we had 60 fps animated characters that could be scaled up and down without resolution issues, while using significantly less memory. Of course, any animation system only looks good if the animation itself is done well, and to the credit of the animators that worked on the project the animation was excellent.

I'm reminded of Skullgirls having memory issues on consoles due to how much RAM highly animated high-res 2D characters eat up.
 

Blizzard

Banned
You guys realize a lot of 2D games/TV animation out right now uses vectors right?
Guacamelee2.jpg
[/IMG]
None of those games use vectors in real time. It's all high resolution 2D images generated from vectors. Castle Crashers does not look much sharper at 1080p, for example.
Eh no, some of those may use vector graphics in production, (I really don't think Castle Crashers does though), but in the final product it's all simple textured quads. Some of them use 2D skeletal animation rather than predrawn animation frames, but that doesn't qualify as vector graphics
Is this 100% certain for Guacamelee?

http://steamcommunity.com/sharedfiles/filedetails/?id=166995993

At the very least, if you make a custom character, you use a .SWF to do it so the game directly pulls the vector format. Behind the scenes, maybe the game prerenders your custom vector image to an appropriate resolution texture quad, but it's still a pretty direct use of a vector format rather than artists manually exporting art as raster images.
 
Is this 100% certain for Guacamelee?

http://steamcommunity.com/sharedfiles/filedetails/?id=166995993

At the very least, if you make a custom character, you use a .SWF to do it so the game directly pulls the vector format. Behind the scenes, maybe the game prerenders your custom vector image to an appropriate resolution texture quad, but it's still a pretty direct use of a vector format rather than artists manually exporting art as raster images.

I'm not sure how Guacamelee! works, but generally things like Flash render straight vector output (though Flash has added tons of stuff like textures, 3D, etc over the years).

A lot of this will depend on the game and the final platform. Some platforms (Vita, PSP, mobile phones, older PCs) still have somewhat limited graphics and processing power so you need to hack things.

Though to be certain, it is possible to do a lot of tricks to use vector art and have the game, or some sort of preprocessor, do all sorts of conversion and optimization to get whatever performance someone is targeting for.

After all, the monitor does not render vectors, just pixels, and no matter what you do, it all ends up as a rasterized image in the end.
 
On modern hardware, if we can render millions of polygons per frame at 1080p 60fps, I think we can render 10s of thousands of multi-point bezier curves.
 

Blizzard

Banned
On modern hardware, if we can render millions of polygons per frame at 1080p 60fps, I think we can render 10s of thousands of multi-point bezier curves.
Aren't graphics cards specifically DESIGNED to handle the polygons, though? If they're optimized for one case, it may not be as simple as "There's a lot of power so it should be feasible".
 
Is this 100% certain for Guacamelee?

http://steamcommunity.com/sharedfiles/filedetails/?id=166995993

At the very least, if you make a custom character, you use a .SWF to do it so the game directly pulls the vector format. Behind the scenes, maybe the game prerenders your custom vector image to an appropriate resolution texture quad, but it's still a pretty direct use of a vector format rather than artists manually exporting art as raster images.

The characters in Guacamelee are 100% realtime vectors. Or "geometry" if you want to be specific. Same diff though. There's no need to render it to texture, since it's better to just, well, keep it polygons.

Only the backdrops are raster. If you play the game, you'll instantly see it. 60fps characters, the camera is constantly zooming in and out, there is a lot of detail on the monsters, etc.

They even said so in the postmortem:

Avoiding traditional sprite sheets meant we had 60 fps animated characters that could be scaled up and down without resolution issues, while using significantly less memory.

So silky smooth:

WZKcQ73.gif


786YXYb.gif
 
Aren't graphics cards specifically DESIGNED to handle the polygons, though? If they're optimized for one case, it may not be as simple as "There's a lot of power so it should be feasible".

As discussed in this thread before, the math used for polygons is mostly the same for vector art since a polygon is just a form of vector.

You can, and should, use the graphics cards to render vector art. It will give you a huge boost in performance.
 

Hahs

Member
It amazes me - the people replying; that vectors are a pain in the ass. It's labor intensive yes, but ragging on it because of the fact doesn't necessarily justify why there isn't a 'huge' library of vector art games.

It's all art, it's all about preference. That may not be the case if your on a production team with time constraints, but even then - if you're a bad-ass that can pull off vectors - nice! If you're not - well I guess that would explain the naysayers.

Me personally, if I have the aptitude and patience, the shits gonna get done - especially if that's what I want, and what I want is possible.

I chock it up to laziness, time constraints, and overall aesthetics.
 

Haly

One day I realized that sadness is just another word for not enough coffee.
I can't imagine how they did that cape effect holy shit.

It must be so time consuming since they'd have to animate it first (likely with cels?) then create vectors for every frame.
 
I can't imagine how they did that cape effect holy shit.

It must be so time consuming since they'd have to animate it first (likely with cels?) then create vectors for every frame.

The keyframes are sketched out, but a lot of the animation is tweened, which is why it's so smooth. That's nearly 150 frames for that animation - they didn't draw every single frame, just a lot of in-betweens. The vector tweening interpolates between the positions, and voila: higher quality animation at less effort. It's a lot like how 3D animator doesn't move a character for every frame, just frame 1, and a new position in frame 10, and the software does the in-betweening from 2 to 9.

AdiBry5.jpg

b4fB3dp.jpg
 

Haly

One day I realized that sadness is just another word for not enough coffee.
Yeah after staring at it a bit more I realize they're using masks for the "melting" effect, which is what threw me for a loop.
 

Blizzard

Banned
As discussed in this thread before, the math used for polygons is mostly the same for vector art since a polygon is just a form of vector.

You can, and should, use the graphics cards to render vector art. It will give you a huge boost in performance.
How does one go about this?

With quads or tris, one can feed vertices into a shader to do triangle strips or whatnot. Are there OpenGL / DirectX modes that would take the sort of curves and gradients found in SWF files, directly?
 
How does one go about this?

With quads or tris, one can feed vertices into a shader to do triangle strips or whatnot. Are there OpenGL / DirectX modes that would take the sort of curves and gradients found in SWF files, directly?

You could use polygons, but really, if you have a context to OpenGL or DirectX (or other graphics API), you just shuffle the math you need to the GPU such as vector and floating point which is what a GPU is designed for.

As far as libraries and modes, I'm not familiar enough with the APIs off the top of my head to know specifically, but that should be a simple search.
 

Haly

One day I realized that sadness is just another word for not enough coffee.
Yeah I'm curious too. My instinct says rendering vector art would be like rendering splines, not polygons.
 

Blizzard

Banned
You could use polygons, but really, if you have a context to OpenGL or DirectX (or other graphics API), you just shuffle the math you need to the GPU such as vector and floating point which is what a GPU is designed for.

As far as libraries and modes, I'm not familiar enough with the APIs off the top of my head to know specifically, but that should be a simple search.
I do not mean to be disrespectful, but if you are unfamiliar with both DirectX and OpenGL, how are you so certain that a search would be simple, and it is feasible to "just shuffle the math" if your input is (for example) an SWF file filled with curves, colors, and potentially gradients?

I am marginally aware of OpenGL, and Vertex Buffer Objects are the main modern method I know of to store data (e.g. vertices). Shader code (with OpenGL, GLSL) can then be used to process the data.

*edit* Google turned up this though I am not sure how recent it is: http://http.developer.nvidia.com/GPUGems3/gpugems3_ch25.html
 

Haly

One day I realized that sadness is just another word for not enough coffee.
I do not mean to be disrespectful, but if you are unfamiliar with both DirectX and OpenGL, how are you so certain that a search would be simple, and it is feasible to "just shuffle the math" if your input is (for example) an SWF file filled with curves, colors, and potentially gradients?

I am marginally aware of OpenGL, and Vertex Buffer Objects are the main modern method I know of to store data (e.g. vertices). Shader code (with OpenGL, GLSL) can then be used to process the data.

I found this. I don't know of Goblin's background but his estimation seems to be right.
 
Yeah I'm curious too. My instinct says rendering vector art would be like rendering splines, not polygons.

One approach would be to interpolate points along the spline (a smoothness factor would be used to determine how many points). One you have generated a closed polyline it could then be tesselated into triangles, fed into a vertex buffer and drawn like any other 3d mesh. This would work best if precomputed (say when the level is loading) as there is a performance hit in transferring data across the GPU bus.
 
Scribblenauts Unlimited and Unmasked (for WiiU and PC) used vector graphics on characters and objects so it can scale everything when you write size adjectives.

I worked on it so i know it first hand. We drew all the characters and objects normaly and then passed them to vectors. It was not difficult because of the kind of artsyle it used, but more complex things can give you headaches.
 

bomblord1

Banned
Scribblenauts Unlimited and Unmasked (for WiiU and PC) used vector graphics on characters and objects so it can scale everything when you write size adjectives.

I worked on it so i know it first hand. We drew all the characters and objects normaly and then passed them to vectors. It was not difficult because of the kind of artsyle it used, but more complex things can give you headaches.

Thank you for this insight! Also that's a fun game cool you worked on it.
 

inner-G

Banned
As a graphic designer, this thread makes my brain hurt.

Vectors can't have as much color? Not as good for anything but simple designs? Geez.
 
I do not mean to be disrespectful, but if you are unfamiliar with both DirectX and OpenGL, how are you so certain that a search would be simple, and it is feasible to "just shuffle the math" if your input is (for example) an SWF file filled with curves, colors, and potentially gradients?

I am marginally aware of OpenGL, and Vertex Buffer Objects are the main modern method I know of to store data (e.g. vertices). Shader code (with OpenGL, GLSL) can then be used to process the data.

*edit* Google turned up this though I am not sure how recent it is: http://http.developer.nvidia.com/GPUGems3/gpugems3_ch25.html

No worries, it's a fair question.

I know a bit of the tech and some of the math. I've also been programming a lot of different languages for over 20 years. I'm not as up to date on these specifics as I would like to be but after so many years you pick up a lot of tidbits.

When you open up a context to a graphics API, most of them allow you to run a lot of the math you would need on the GPU instead of the CPU which is what I'm referring to.

Also, vector art, paths, splines, NURBS, subdivision surfaces, etc. are fairly researched and used in different contexts. I've seen a lot of use in multiple applications that I'm confident a little research and reading will get you what you need.

For example, here are some references I found after digging for a short bit (quality and performance is not presumed):
Cairo - http://www.cairographics.org/
GPU-accelerated Path Rendering - http://developer.download.nvidia.com/devzone/devcenter/gamegraphics/files/opengl/gpupathrender.pdf
Texel Programs for Random-Access Antialiased Vector Graphics - http://research.microsoft.com/en-us/um/people/hoppe/ravg_tr.pdf
Blossoming - http://www.hpl.hp.com/techreports/Compaq-DEC/SRC-RR-19.pdf

As to the file format, such as an SWF, you would just need to write a reader and convert it into data that you will use.
 

Durante

Member
And you're forgetting that the hardware used to do the rasterization is built for rendering polygonal shapes and bitmaps, not arbitrary shapes of infinite precision. These have to be approximated first to accomodate that hardware which adds a computational overhead, meaning vector art is more taxing than just having raster images or polygonal meshes in the first place.
Vector art is more taxing, but unless you are working on a mobile game I can't imagine it ever being an issue for a modern platform.

Personally, I find it a bit sad when games use art styles which are obviously very well-suited to vector graphics (and likely created that way initially), and then break everything down to pixels.
 

Ballthyrm

Member
I think the problem is more about the pipeline than anything.

There is no great Vector base engine like there is for pixels based ones like Unity/Unreal.
The tools are not really adapted for day to day games making.

If the whole idea of Vector is to gain Smoothness and performance the engine has to support it natively.
AFAIK if you want your game to be vector based , you will have to write the plugin to import Vector animations and art or make the tools for the artist to make the game which is very labour intensive.

Then when you decide to go vector base you also let go of much of the legacy other game engine can offer.

PS: i think guacamelee have their own engine, so a lot of the cost of the game went into developing that engine.
Not a lot of developer will go that way when there is plenty to go around.

What game development tools are you using?

GS: We primarily use our own internally developed editor and engine for our games. The editor gives the ability to rig characters and audio, create levels, and test the levels on the fly. In addition to this, we use Adobe Flash for Animations, 3DS Max and Photoshop to create visuals for the game environments, FMOD for Audio, and Box2D for Physics.
( source )
 

Viper3

Member
As a graphic designer, this thread makes my brain hurt.

Vectors can't have as much color? Not as good for anything but simple designs? Geez.

I'm a graphic designer turned indie developer and I use vectors 99% of the time for all my projects. And vectors literally have no issues with colors.

As far as vectors being used for 2D games, it depends on what the OP means. A lot of art for 2D games is made as vector graphics, exported as bitmaps, so one could say that dozens of games use vector graphics.

I have no idea why would anyone use pure vectors for game art though. It's resource intensive, and doesn't have any benefits since there are a lot of simple workarounds around it. You simple export your resources as oversized .PNG files and resize them to your liking through code.
 
I'm pretty sure you could easily use vector art for color gradients and such, by just mapping them to two dimensional polygons and specifying a color value for each vertex.

I imagine the only tricky part would be curves and such, but it's probably not all that hard to implement.
 
Top Bottom