Using Inkscape to generate input map sprites in Godot

I needed to auto-generate a bunch of SVGs for my keyboard input map sprites. Godot doesn't import text objects from SVGs so I had to find another way to make it work.
That's when I remembered that Inkscape has a command line interface that lets you easily convert text to paths within the SVG.
Inkscape: inkscape.org/
Join my Discord: / discord
Follow me on Mastodon: mastodon.socia...
#Godot #GameDev #IndieDev #PixelArt #VectorArt

[@tarsyth3433]

Amazing! Thank you for sharing this idea!

[@sslaxx]

Such a useful tool, Inkscape.

[@nathan_hoad]

Haha yeah. I’ve been an Inkscape user for almost 20 years now and I still love it.

[@sslaxx]

Remember Sodipodi all those years ago.

[@nathan_hoad]

Lol yep. There are still a few references in Inkscape to Sodipodi.

[@harmony_hunnie]

this is sick! im now realizing the usefulnesss of OS.execute()

[@nathan_hoad]

It can be handy for stuff like this but should still be used with caution.

[@Netaction]

I always like SVG manipulation but why didn't you simply write the text on the empty key on runtime? Like you would do with any other button?

[@nathan_hoad]

Having them as pre-rendered images means I don’t have to do anything special to use the image for whatever a mapped input is in my dialogue.

[@MrEliptik]

Too bad Godot's bbcode doesn't support dynamic textures and only path.. Otherwise you could just use a Viewport with a Label inside it to dynamically generate the letter.
Also you don't explain why you need svg? Does it need to be? Otherwise you could use the technique I mentioned and save all the letters to an image, just as you're doing here but without using inkscape

[@nathan_hoad]

It doesn’t have to be SVG. I just have a general preference for SVG for my UI assets.

[@catcactus1234]

Svgs are generally better for UI elements. They maintain their resolution at any size, which is very useful for accessibility and resizing. You could probably achieve a similar effect with using a high-res png, but using svg ensures your images will always be high res.

[@carnifexx]

​@@catcactus1234 if i'm not mistaken the problem is that godot doesn't really support svg, it just creates a .png when svg is imported.
so no, it won't always be high res, at least not natively.

[@master_sweety]

Good afternoon, and how to use pictures in dialogues? As in the timecode 0:50

[@nathan_hoad]

You can use the [img] BBCode tag.

[@master_sweety]

@@nathan_hoad [img=load(your picture)]?

[@nathan_hoad]

Something like [img]res://something.svg[/img]

[@master_sweety]

@@nathan_hoad Thanks!

[@master_sweety]

​@@nathan_hoad How to change scale img in dialogue ?

[@AgnisNeZvers]

That's a killer solution. Is it going to be available to the public?

[@nathan_hoad]

I was thinking about adding it to my Input Helper addon but it would need to be a bit more user friendly first.