Add images inside text? (Solved)

[iNfra]

Hello everyone,

I'm currently creating my first Phaser game, so I'm relatively new to all of this.

Basically what I'm trying to achieve is to create text with images inside.

I'm thinking of building Strings like "This is a {{test}} String", which gets parsed in a way that the "{{test}}" part will be replaced by an image that has previously been loaded into the cache, using the identifier 'test'.

I've been searching through the web in the past few days but didn't find anything that really helps me.

 

For experimental purposes, the images I want to use in my Text are the Playstation input symbols (Cross, Square, Triangle and Circle).

So, for example, if I add a text "Press {{cross}} to continue" to the game I want it to show the Cross-Symbol inside the text.

 

Hopefully this explains enough.

Does anyone have a good idea for a way of achieving this, or done this before?

I will greatly appreciate any help!

 

Kind regards and thanks for reading!

 

Edit:

Thanks for the answers!

Just like mattstyles suggested, I figured I'd have to generate the text and image parts by parsing the string and then calculate each of the parts positions.

For those who are interested in how I did it:
First I parsed the string by splitting it at spaces (" "), iterating over the resulting array and depending on the "substring", either add a text or image to a previously defined group.
Then I iterated over the groups children and set each of their x and y attributes after calculation the position, based on the all the previous children's widths, heights and a fixed anchor point.

My result is a tooltip that follows the mouse pointer when hovering over certain objects.

This is a very rough explanation. If anyone wants, I can provide some of my code with more precise information.

Edited January 23, 2017 by iNfra
Solved

[ITpaolo]

You only need to do the image as a Sprite, then you can do this.

https://phaser.io/examples/v2/text/center-text-on-sprite

[mattstyles]

I've done it for web, using svg icons, the process is exactly how you describe, parse the string for bits to turn into images (in my case svgs), the algorithm for doing so would create an array of parts, either strings or svgs so that the result of that algorithm would go something like:

//Input
This is a {{test}} string

// Output
<span>This is a </span><svg>...</svg><span> string</span>

Obviously the DOM would lay this out for me, based on CSS, but to translate into Phaser you'd basically do the same but change the render part so that it outputs Phaser structures, presumably Text and Images/Sprites, however, you have to manually position everything so you'd have to have some reliable way of calculating the length of Text images (unless Phaser has a helper for this you'd have to implement it yourself) so you can position stuff correctly.

[phreaknation]

I would suggest making the gui, including dialog HTML/CSS