SVG to Animated Sprite Experiment

This is more of a record for myself rather than a usual blog post, but I've been working hard to develop an art pipeline where I can avoid having to draw a gazillion sprite frames without going full shadow-puppet like Spriter.

Today's result is rubbish:

...but y'know, it's more of a proof-of-concept than an actual art attempt.

The idea is simple:  

  1. Draw a simple SVG image with multiple components
  2. Import into Blender, assemble components and animate
  3. Render animation from Blender into sprite page ready for 2D game.

Of course, the implementation is far from simple.

First off, Blender imports the SVG outlines as curves, not meshes.  So in object mode, you have to select the curve, press Alt-C, then select Mesh from Curve/Meta/Surf/Text.

That makes the outline into a bunch of lines.  In edit mode, select all the vertices and press F to make it a face.  Then, optionally Triangulate Mesh.

Position, scale, rotate the components as required (although I forgot to duplicate the faces and flip the normals, so I encountered lighting problems later).

Create an armature.  In object mode, add a single bone armature.  Then in edit mode, extrude the bone.  Create all the bones this way.  Then rename them all.

Bind the mesh to the armature.  Select mesh first, then shift-select the bones.  Then parent the mesh to the armature with empty vertex groups.

Assign vertices to groups.  Select the vertices, then under the Mesh->vertices menu you can assign to the group of the correct bone.

Paint weights.  Select bone in armature, then shift-select the mesh.  Then switch to weight painting mode.  Paint the appropriate section with weight 1.

Animate.  Select armature in pose mode.  Select frame from timeline.  Move/Rotate bone.  Create location/rotation key frame (I key).

Set up camera properties and render animation.

Then use spritify plugin (under render properties) to create sprite page / animated GIF.

Comments

Post a Comment

Popular posts from this blog

Micro:Bit and SPI display

I want to explore the full potential of the BBC Micro:bits my school has. Making rock-paper-scissors games and the like is all well and good, and the students love it (for the most part), but it always feels a little bit gimmicky.  But when students really get engaged and suggest ideas for them (e.g. games, compass display), it all gets a little bit cramped and feels like it could  kinda  work, but not really . Then I found out that all the tiny strips on the edge are actually GPIO pins, not just the fat 0, 1 and 2 ones.  Since then, I've wanted to explore what I can do with it. Hence, over the last few days I have been trying to get the microbit to control a TFT display. I first went for this 2.4" display with a touchscreen.  The SPI interface is just for the microSD, not for the screen but I didn't think that would be a problem because the micro:bit has so many pins.  After much frustration, I discovered that there are many of the pins you can't reliabl...
Read more

DCS World with TrackIR under Ubuntu

This is a record of my experience of setting this up.  It's meant more as a record for my future self than a tutorial, but maybe somebody will find it useful. 1 - Install DCS First step, install DCS World via the Steam client as normal.  2 - Install LinuxTrack Linuxtrack Download here: https://github.com/uglyDwarf/linuxtrack/wiki/Downloads   Instructions here: https://github.com/uglyDwarf/linuxtrack/wiki/universal-Linuxtrack-package   Using the gui (ltr_gui) requires qt4 libraries, which I could not find in my standard Ubuntu repositories, so I had to use the ppa instructions here: https://ubuntuhandbook.org/index.php/2020/07/install-qt4-ubuntu-20-04 Run ltr_gui from linuxtrack's bin directory to check everything works so far before moving on to get it running under Proton.  3 - Install LinuxTrack into the DCS World prefix NOTE: Attempting to install for Wine games WON'T WORK e.g. here https://github-wiki-see.page/m/uglyDwarf/linuxtrack/wiki/Wine-Games   Th...
Read more

Polygon Triangulator!!

For my 3D games, I've been playing around with ideas around semi-procedural geometry, by which I mean geometry which is generated from a small amount of authored data.  For example, I could draw out the shape of an island in a dozen or so 3D points, and the actual terrain geometry could be generated from that. A big step along the way to that is splitting up a non-convex polygon into triangles.  The triangles mustn't overlap, nor must they cover any space which the polygon itself doesn't cover.  For example, this diagram . Today, I managed to get a python program* running which took a list of 2D points defining a polygon, split it into sub-triangles and displayed them in a tkinter canvas**. I am certain this has been solved by clever people in much better ways, but I still feel proud to have figured this one out (and I haven't managed to break it yet!). The basic algorithm is: Create a temporary copy of the polygon points list start with the three points fro...
Read more