Help with animating vector graphics

Hi guys! I am planning to create a kids game and starting of with vector graphics. What is the easiest way of then animating in unity? I see svg importer so you more or less use vectors in unity instead of converting to png. What is pros and cons?

The style is like this:

https://cms-assets.tutsplus.com/uploads/users/117/posts/25705/image/00a.jpg

And most often it will be eyes blinking and perhaps simple hands and feet.

Is it easier to just import them as different png and work with animator?

Really don't know what is easier aproach

Thanks

 

Cute. Well, first of all graphics hardware is generally not designed to render curves. Not real ones. Instead it requires you to 'approximate' a curve by breaking everything up into triangles. If these triangles are small enough they will visually be hard to tell apart from a real curve.

So a piece of geometry can be created made from a number of triangles that looks like a circle for example. If this were then rendered with a pretty basic shader it would look like a flat polygon. It would also mean that you can scale the geometry and it will effectively re-render the pixels on the fly, in hardware, which is fast, and allow you to show the object at different sizes.

However, since it's based on triangles, at some point if you zoom in too far you're going to start to notice the flat edges of individual triangles. You could overcome that with a highly detailed piece of geometry (mesh) with a lot of triangles, up to a point. Or if you don't need to zoom, no problem.

Also consider that mesh-based graphics like this allow your game to be pretty much resolution independent. If a higher resolution is available the shapes will be drawn more accurately in realtime.

Also triangle-based graphics don't take up near as much memory storage space as it would to store the object as a bitmap/pixel texture. Pixel textures also can't be scaled without showing pretty obvious artifacts quickly.

But if you go the mesh-only route, you do need to convert all of your 'pieces' of your graphics into individual sets of triangles, and depending on the material that can bump up your 'draw calls' (ie you need to set vertex colors in order to set the color of individual parts). If you use an SVG importer tool it will likely just convert to triangle meshes like this and set vertex colors to represent the colors of each sub-object, and should set up a drawing order (z coords?) so that the appropriate pieces show in front of others. Likely therefore it could have a fair amount of overdraw, because the mesh likely isn't going to be 'flattened' to only need to draw where there are visible pixels, although that might be an option provided depending on the tool or maybe is possible in your vectorgraphics software.

Another option is something like RageSpline which lets you draw and modify these kind of objects fairly simple using WYSIWYG editing inside Unity's editor. There are other tools like this also, see the asset store. They are nowhere near as full-featured as a vectorgraphics app like Inkscape though.

Antialiasing may be a bit expensive in some of these tools given it requires at least a doubling of the number of triangles in order to make a smooth outline. But it's doable. Also it can have issues when the resolution changes or the object scales or camera zooms because the outline thickness is supposed to cover 1 pixel regardless, so that can require some realtime updates which are expensive. Otherwise using FSAA etc may actually be better. Plus on iOs the resolution pixel density is such that you probably can't tell anyway.

It should be a good fit for the kind of graphics you're making. Otherwise if you commit to PNG's then you're looking at more memory storage for texture data, it can't be easily resized (although if you make the images BIGGER than needed) then it gives you some leeway to scale them down to support zooming). Zooming 'up' is the main issue. You can use bilinear filter to scale down fairly well, the results are pretty good and it will antialiase pretty well. Sometimes dealing with PNG's is easier than dealing with geometry-based graphics. The workflow is different.

Another potential advantage of vectorgraphics is if the tools you use allow the mesh data to be regenerated at RUNTIME, once, based on some kind of spline definitions... this can hugely reduce the size of the download/app, but often this isn't supported in the tools that are out there. Storing triangle mesh data does take up some disk space.

 

Oh you asked about animating lol ... well, keeping the eyes/feet etc as separate objects/meshes/game objects allows you to animate them independently. You can do that either with triangle meshes or with png's, it's up to you.

 

Thanks for the long explanation. I get it with conversation of triangles etc now and will think about png direction too. If I only made a game for a certain screen size it would be easier I guess but most often even when designing for "ipad" it comes in a range of sizes nowadays. Thanks for tips about ragespline too

 

well ipad is easier than most, 1024x768 and double that. .. not sure on the pro.