Text box as a sprite costume

Situation: I want to display a nice text box on a Snap! stage. It should be moveable, so I can drag it or place it programatically. It should scale up and down nicely when the stage changes size.

Solution: use a vector text box as a costume for a sprite. Snap! does not offer a drawing tool for this purpose; fortunately, it is possible to import a text box created in another application. I use Inkscape 1.1, a respected, open-source vector graphic application.

The following steps describe my current work flow.

Launch Inkscape and start a new page. Plan to set the page size in the next step.

In the File > Document properties... dialog, make the following settings:

  • Display units: px
  • Orientation: Landscape
  • Custom size
    • Width: 480
    • Height: 360
    • Units: px

Close the Document properties dialog. Then the settings will take effect.

Use the View > Zoom > Zoom in menu two or three times to expand the document up to a workable dimension. Reposition the document as needed.

Now the Inkscape working surface is about the same size as a Snap! stage. A text box made here will look the same in Snap!

Click the big A icon in Inkscape to select the text tool. Choose any available font. I find that 10- to 11-point affords a useful size for familiar fonts such as Cambria. Draw the text box to the desired size. Type the text. It pays to learn how to use Inkscape's text tools.

I like to put a border around my text boxes. Draw a rectangle that covers the text. Set the fill to none, and the stroke to a nice color for the Snap! project.

Select both the text and the border. Use the Object > Group menu to combine them into a single object.

Open the File > Document Properties... dialog again. Click the Resize page to content... control to expand the Custom size dialog. Click "Resize page to drawing or selection". Close the Document Properties dialog.

At this point the Inkscape document consists only of the text box and the border. Choose the File > Save as... menu and save the document in the Snap! project folder as an "Inkscape SVG (*.svg)" type of file.

In Snap!, select a sprite and drag that Inkscape file into the sprite's Costumes area. Now the sprite can display the text box that was created in Inkscape.

After working through these steps a few times, it goes fast.

Yes, it might be nice to have a vector text editing tool directly available in Snap! Someday, maybe... Meanwhile, we may use powerful programs like Inkscape to create text boxes for our sprites to wear on the stage.


Snap! DOES have a vector editor.

True. Where is the text tool in it?

There is no text tool, unfortunately, they have other stuff to worry about.

They also are overdue on Snap! 7, soooo, yeah.

I agree, what they are working on for 7.0 and later should take priority. That's why I thought it might be nice to suggest another way. It really does go fast once you get the hang of it.

Along much the same lines, I have used the GIMP to prepare photographs as "costumes" for the stage. But that's another tutorial...

Wait, didn't you add vector font importation to your font project?


Well, you should tell @codegeezer to use it, then! :~)

@codegeezer, I made some like yours but automatic.
Snap! 6.9.2 Build Your Own Blocks It's not perfect, though.

It's a bit taller than the text.

What do you mean?

Screenshot (65)
But it's fixed by changing the definition of TEXT BOX from ending with this:
Text Box Maker script pic
to ending with this:
Text Box Maker script pic (1)
and making the height (in the call to TEXT BOX) 18 instead of 24.
Then you get this:
Screenshot (66)

Does it also work if you put a really big size? Like 200?

I'll test it.

Edit: Then I get this: (whole stage)

Fun stuff! I see places to play with the custom text box block. Perhaps an explicit parameter for the amount of spacing between the text and the border?

Delighted to see newlines in the block's declaratory "hat". Didn't know we could do that. Yet another unscheduled learning opportunity for the Geezer!

Just a note: If your replying to someone, use the reply button:

This way, they get a notification that you replied to their post.

Sorry, that was disrespectful of me. Thanks for pointing it out.

I see two reply buttons. One is just under the previous post, the other is down at the bottom of the thread. This old brain of mine must remember which one to click.

This is pretty basic Inkscape stuff. I don't think you need a tutorial for it.

The reason this topic was created.