How do I Highlight each word as it's read?

Hi

I'm making a childrens book-app..

I'd like to be able to highlight each word as it is read aloud.

(Also each word must be accesable for clicking..)

I'd rather not make sprites for each word.. :-/

Can this be achieved by auto-resizing textboxes and putting them after one another in some way?

Regards

Kasper

If you would like to have each word clickable and highlighted seperately from the other words in the text, I guess they should be seperate objects..

Instead of making sprites for them you could also use instances of the spritefont-object and with tokenAt or other text expressions just set the text to the word(s) you'd like..

If you use a font with monospacing it would even be pretty simple to calculate the width of the objects needed for the word to fit..

Here's the link to the system-expressions for manipulating text among others:

https://www.scirra.com/manual/126/system-expressions

I thought this would be an interesting challenge, so I made an example for you!

The logic might seem a little tricky if you're not too familiar with loops in Construct, but essentially it works like this:

1) Create individual sprite font objects, one for each word. (I've included two options for this: automatically or one word at a time, depending on what you need).

2) Ensure that each of those objects lines up correctly after the previous object, or wraps down to the next line if necessary.

Once you've got the individual sprite fonts set up, creating highlights is easy. Just step through each one consecutively, creating a highlight object and positioning it accordingly.

Thank you Geometrix - amazing..

That was excactly, what I wanted..

I just have to admit I hate spritefonts.. are there any way to make them not look so bloddy ugly??

Hah, yes they take some practise Once you're comfortable then I'm sure you'll appreciate them. I only use spritefonts in my projects now - no text objects for anything but debugging. They're especially useful for games that require vibrant text (like games for children), because you can add all of your effects to the spritefont file before-hand, then just import the finished product with zero impact on performance, as opposed to using post-processing effects to give the text more character.

Your best bet is to make your own using BlackHornet's Sprite Font Generator. Download the example file to learn how to properly implement character spacing.

I suggest that you render your spritefont image to a size larger than what you need. That way you can scale it freely without losing quality. Just try to keep the size to 1024x1024 as a maximum, to avoid excessive memory usage.

Thank you very much for the great pointers..

I think I can take it from here..

See.. never asume anything...

I tried, exporting a SpriteFont with "your" tool, using it in the example project you created...

But something in the spacing between words is wrong..

If you have a second to look - I'd be very thankfull..

You are trying to use groups like a function, that won't work. Change the trigger to SpriteFont:On created. That then calls the code immediately after the Create call.

You don't need 0=0, use either "Every tick", or a blank sub-event would have done the same thing.

In every other situation (about 8) I've tried, the group-as-function-approatch worked out fine...

Not sure, what went wrong here...

Was that really all you changed?

• well thanks - it works now! Amazing!