Text box as a sprite costume

[codegeezer]

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.

[joecooldoo]

Snap! DOES have a vector editor.

[codegeezer]

True. Where is the text tool in it?

[joecooldoo]

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

[joecooldoo]

@joecooldoo

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

@bh

So, about a week ago, we had our first serious malware attack using users' ability to write JavaScript code in the Snap*!* environment to present users with a fake version of the snap.berkeley.edu web site, with the goal both of collecting passwords and of potentially infecting users' computers.

We've known all along that the JS Function block was a security hole, but our users are generally well behaved and we're not a bank or anything, so I'm pretty sure this was the first real attack (as opposed to benign practical jokes).

I'm not 100% sure about this, but I think it's unlikely that this program was around long enough to do any significant damage, outside of the perpetrator's school. (That aspect of things is under investigation and not my department.)

But as a result, we now feel a need to close this security hole quickly. Version 6.9 of Snap*!* disables the JS Function block by default.

Certain Snap! libraries depend on JS Function. We have a plan to solve that problem, but it might be a couple of weeks before it's fully live.

Projects that use JS Function can only be run in the Snap! Editor window (not on the web site, nor in presentation mode), by first enabling JS Function in the settings menu. This setting must be enabled in every session; it can't be stored with a project.

Here's what you'll see when you run a script containing a JS Function:

And here's how to enable JSF:

Sorry for this brouhaha.

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

[codegeezer]

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...

[bh]

@joecooldoo

There is no text tool

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

[joecooldoo]

Yes.

[bh]

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

[joecooldoo]

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

[warped_wart_wars]

It's a bit taller than the text.

[joecooldoo]

What do you mean?

[warped_wart_wars]

But it's fixed by changing the definition of TEXT BOX from ending with this:

to ending with this:

and making the height (in the call to TEXT BOX) 18 instead of 24.
Then you get this:

[joecooldoo]

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

[warped_wart_wars]

I'll test it.

Edit: Then I get this: (whole stage)

[codegeezer]

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!

[joecooldoo]

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

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

[codegeezer]

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.

[sir_kitten2]

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

[sir_kitten2]

@codegeezer

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.

The reason this topic was created.