How do I add an image in a textbox ?

Get help using Construct 2

Post » Thu Apr 30, 2015 12:21 pm

Hi.
I have a textbox with centered text.
I would like to detect the beginning of a sentence in order to add a sprite just before the first letter.

Is there any way to do that ?
B
12
S
7
G
7
Posts: 450
Reputation: 4,276

Post » Fri May 01, 2015 12:02 pm

No idea ? I don't want to use a sprite font.
B
12
S
7
G
7
Posts: 450
Reputation: 4,276

Post » Fri May 01, 2015 2:21 pm

Are you talking about an actual editable textbox or a simple text object ?
B
71
S
30
G
25
Posts: 984
Reputation: 19,503

Post » Fri May 01, 2015 3:04 pm

A text object. Even a hacky solution would fit.
B
12
S
7
G
7
Posts: 450
Reputation: 4,276

Post » Fri May 01, 2015 3:31 pm

You won't have the choice to NOT have a hacky solution ! ;)

You could use javascript to wrap your letter in span element, then retrieve its relative position with jQuery. However, if you insert a sprite over your text, it won't shift it at all, you'll have to do it yourself if that's a behavior you wish your text to have.

edit: Just noticed the text object is actually rendered in the canvas and isn't an html element... this will complicate things a bit...
B
71
S
30
G
25
Posts: 984
Reputation: 19,503

Post » Fri May 01, 2015 4:51 pm

I thought about this span thing but I didn't know at all how to use it in Construct 2.
But yeah if you say that it's rendered in the canvas I guess it's even more complicated.

But I'd really love to be able to do that ! :D
Maybe I could a plugin like multiline textbox but I guess that if it's not rendered in the canvas I won't be able to paste its data into the canvas plugin, which is something I need to do too.
B
12
S
7
G
7
Posts: 450
Reputation: 4,276

Post » Fri May 01, 2015 7:16 pm

It's a stretch, but maybe you could use javascript to create an offscreen div, set its size/font corresponding to your text object, and THEN use the method I described. I think I might try it... I'm curious ! :mrgreen:
B
71
S
30
G
25
Posts: 984
Reputation: 19,503

Post » Fri May 01, 2015 9:29 pm

Here's my attempt. Not perfect but I guess it's a start ! ;)
B
71
S
30
G
25
Posts: 984
Reputation: 19,503

Post » Fri May 01, 2015 9:48 pm

Oh, the kingdom of regexes.
What you did is kind of cool. What do you think is causing the red squares to be at the wrong place after a while ?
B
12
S
7
G
7
Posts: 450
Reputation: 4,276

Post » Fri May 01, 2015 10:14 pm

Mostly the lineheight. After a few quick tests it looked like setting line-height to the font size + 3pt was a correct estimation. But it might not hold true for all sizes and font-family. Also, if the wrapping in the div did not occur exactly the same as in the canvas rendering, everything's going to be off.

edit: After a few more hacking around, I noticed that upon rendering, text instances have a javascript property called "lines" that get filled with an array of objects representing the wrapped lines. I used this array to create the div instead of the text property and it seems to work better as it creates a consistent wrapping. The only drawback is that the text object has to be rendered at least once before you can use the lines array.

Try redownloading the file to see for yourself.
B
71
S
30
G
25
Posts: 984
Reputation: 19,503

Next

Return to How do I....?

Who is online

Users browsing this forum: tarek2 and 35 guests