Replace "key expression" with sprite in Phaser.Text and Phaser.BitmapText

Phaser 2 / CE
1

I know that Phaser texts are made up of sprites.
I also know that emojis are images that are shown when certain combination of characters come together.

Now my question: Is it possible to replace a combination of characters such as “[UP]” with a sprite that symbolizes the corresponding key?

If it were possible then you could type something like “Press [UP] to jump” and it would display with the key corresponding to the jump.

2

With Phaser.Text, you can just type the emojis.

this.add.text(0, 0, 'Press ⬆️ to jump');
3

android emojis where just an example. i need to type [UP] or [W] to replace the characters by a pixel art sprite.

like this
K

what i want is to look at the text then replace the keys by a blank space using a regular expression and then add a Phaser.Sprite in each hole.

replacing by an img tag didn’t work

function replaceKeyExpresion(text) {
	const regex = /\[(.*?)\]/g;
	var match = regex.exec(text);
	var newText = text;
	while ((match = regex.exec(newText)) !== null) {
		console.log(match[1]); // Output: text, square
		newText = newText.replace(match[1], "<img src='assets/keys/"+match[1]+".png'/>");
	}
	return newText;
}
4

I think it would be pretty difficult with Phaser.Text, but with Phaser.BitmapText you could add your own characters in an image editor.

5

thanks