SVG to Blender pipeline
Playing more with my 3d printer, trying to make a Werewolf: the Apocalypse character tray
GMs get all the love in gaming. GM Books, GM Screens, GM Merch, the whole box and dice. I've made a few attempts at player focused things like a Player Book that has character, notes, inventory, tear-off-sheets for frequently changing things. One thing I've really wanted is a standee sort of thing to show character information. Inspiration struck yesterday.
- A card holder for showing your current form + stats
- A place for showing your current Gnosis, Willpower, and Rage
- A place for showing your current health
Doing more things with SVG lately I felt more confident in just messing about and seeing what I could make.
Start SVG image
Starting simple. Drew a rectangle. Drew a circle and attached it to the end for the standee. Immediately changed my thoughts - I'd originally wanted to have a cardboard standee holder so you could easily swap in/ out form cards. But then I thought if you're playing something else, you could use the standee as a mini holder if you're not actively using a map. Also you could then have standees as minis and swap them in and out easier. Right, sticking with that.
1<path fill="green" stroke="green" stroke-width="3px" d="
2 M10 10
3 h506.925
4 a94.4875 94.4875 0 1 1 0 188.975
5 h-506.925 z
6" />
Nice learning: how to use arc to create a circle or ellipse in a path. Nicer than trying to combine a rectangle and a circle.
Draw a circle inside the main circle so I can extrude/ intrude(??)
1<circle cx="516.925" cy="104.4875" r="75.59" fill="red" stroke="red" />
I wanted to have a pattern in the SVG, so I looked up the werewolf glyph for Garou and had to figure out how to include that into an svg. Found a link about <image/> in an svg. Nice.
1<image x="470" y="55" width="100" height="100" href="GlyphHomid.webp" />
2<image x="470" y="55" width="100" height="100" href="GlyphLupus.webp" />
Now for the health tracker. I found a really good 3d modeled health tracking cube for WoD style games. It has 3 faces with blank, bashing, lethal, and aggravated damage indicators. So let's whack some squares on the svg. Since they're repeating, I'll define the square in a def, and then reference the path in the other parts.
1<defs>
2 <path id="health-inset" d="
3 M0,0h37.795v37.795h-37.795z" />
4</defs>
5<g id="health-track" transform="translate(25,30)">
6 <g id="health-0" transform="translate(0,0)">
7 <use xlink:href="#health-inset" fill="blue" />
8 </g>
9 <g id="health-1" transform="translate(60,0)">
10 <use xlink:href="#health-inset" fill="blue" />
11 </g>
12 <g id="health-2" transform="translate(120,0)">
13 <use xlink:href="#health-inset" fill="blue" />
14 </g>
15 <g id="health-3" transform="translate(180,0)">
16 <use xlink:href="#health-inset" fill="blue" />
17 </g>
18 <g id="health-4" transform="translate(240,0)">
19 <use xlink:href="#health-inset" fill="blue" />
20 </g>
21 <g id="health-5" transform="translate(300,0)">
22 <use xlink:href="#health-inset" fill="blue" />
23 </g>
24 <g id="health-6" transform="translate(360,0)">
25 <use xlink:href="#health-inset" fill="blue" />
26 </g>
27</g>
By wrapping the whole health track in a g that I can then translate makes it easy to move as a bump.
Points that you spend next - gnosis, rage, willpower. Looking at some models of 40k trackers, I wanted to get fancy so I tried to make a dial you can spinsies. Just in this model, though, I need a circle divot for the dial and a pole for the dial and cover to go on. Circle within circle. Three of these, so defs again
1<defs>
2 <g id="dial-inset">
3 <circle cx="47.2325" cy="47.2325" r="47.2324" fill="blue" stroke="blue" />
4 <circle cx="47.2325" cy="47.2324" r="18.8975" fill="black" stroke="black" />
5 </g>
6</defs>
7<g id="dials" transform="translate(20,115)">
8 <g id="rage-dial" transform="translate(0,0)">
9 <use xlink:href="#dial-inset"/>
10 </g>
11 <g id="wisdom-dial" transform="translate(120,0)">
12 <use xlink:href="#dial-inset" fill="blue" stroke="black" />
13 </g>
14 <g id="gnosis-dial" transform="translate(240,0)">
15 <use xlink:href="#dial-inset" fill="blue" stroke="black" />
16 </g>
17</g>
Again, wrap and translate and using def.
That's got the basics in a 2d SVG mode. Time to move to blender.
Blender
I'm less familiar/ comfortable with Blender than mucking around with SVGs in text. The interface is really complicated and intimidating. But the start is easy - x to delete the initial cube and then import an SVG. It's imported! Super tiny though so I had to zoom in a lot to see it.
I then got caught in a near never-ending cycle of extrude, modify, boolean failures. My previous experience with blender was making my own vonExplaino logos and was as follows:
- SVG into blender
- Convert the Path to Mesh (select all, right click, Convert, Mesh)
- Use the Extrude tool to give it thickness
- Extrude the bits I want to delete into the main object
- Use Modifier > Boolean > Difference to subtract the bit from the main
I did this a tonne of different ways, but for some reason things weren't deleting cleanly. I was getting artifacts throughout.
Doing a bunch of research, a key suggesting was to change the type of object using Solidify modifiers. In the double advantage, the solidify modifier has a much nicer dialog for manually setting sizes of thickness etc. Doing this, I could cut clean elements out of the original model.
It's now printing on my 3d printer, so we'll see what comes of it.