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

Get help using Construct 2

Post » Sat Oct 18, 2014 9:26 am

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
B
6
S
1
Posts: 43
Reputation: 1,027

Post » Sat Oct 18, 2014 9:39 am

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 told my dentist I had trouble with my teeth and asked her to fix it without looking in my mouth..
B
54
S
16
G
8
Posts: 6,160
Reputation: 19,775

Post » Sat Oct 18, 2014 10:11 am

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.
You do not have the required permissions to view the files attached to this post.
B
57
S
15
G
11
Posts: 912
Reputation: 12,606

Post » Sun Oct 19, 2014 4:00 pm

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?? :-)
B
6
S
1
Posts: 43
Reputation: 1,027

Post » Sun Oct 19, 2014 7:49 pm

Hah, yes they take some practise :P 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.
B
57
S
15
G
11
Posts: 912
Reputation: 12,606

Post » Mon Oct 20, 2014 6:20 am

Thank you very much for the great pointers..

I think I can take it from here.. :-)
B
6
S
1
Posts: 43
Reputation: 1,027

Post » Mon Oct 20, 2014 3:30 pm

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 do not have the required permissions to view the files attached to this post.
B
6
S
1
Posts: 43
Reputation: 1,027

Post » Mon Oct 20, 2014 4:17 pm

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.
You do not have the required permissions to view the files attached to this post.
ImageImageImage
B
71
S
21
G
222
Posts: 3,652
Reputation: 124,733

Post » Mon Oct 20, 2014 7:29 pm

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!
B
6
S
1
Posts: 43
Reputation: 1,027


Return to How do I....?

Who is online

Users browsing this forum: SputnikCZ and 3 guests