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.