Use HTML content in PlayCanvas UI

Help & Support
1

Is it possible to render html content inside PlayCanvas native image / text ui elements?

I have this problem when using native text elements, plus i need to render some icons inside the text area.
image

2

I’m afraid not, no. You can use html doms instead of the PlayCanvas UI system though.

Hmm, word wrapping should work. Can you share the project please?

Inline icons are not supported unfortunately

1 Like
3

I replicated the problem here, unfortunately i am not the project owner and cannot share the original one.
https://playcanvas.com/editor/scene/1137175

Isn’t it possible to render a div element to a picture so i could use in a image element?
I came across this: http://html2canvas.hertzen.com/

4

I can’t imagine it be fast but if you can get into canvas to a base64 image and load it as a texture in PlayCanvas, that would work.

1 Like
5

Sorry for the dumb question, but can you guide me to an API refference / tutorial if any exists?

On a side note, i found the YouTube iframe tutorial and i was wondering if i can use Pc.Css3Plane to output a texture.

Also, is there any way i can make the words wrap properly and not cut out?

6

I’ve looked at the project and it looks like the text you are using is using a non breaking space instead of a regular space between words so the text is treated to be one really long string.

I’ve replaced it with a normal space here: https://playcanvas.com/editor/scene/1138120

image
image1382×914 60 KB

pc.css3plane doesn’t render to the texture and is not suitable for what you are asking here.

The steps generally are:

Render the DOM elements to an offscreen canvas using the library (if it works) that you linked to.

Use https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toDataURL to create a base64 string.

Use https://developer.playcanvas.com/en/api/pc.AssetRegistry.html#loadFromUrl to create a texture asset from the base64 string.

this.app.assets.loadFromUrl(base64String, function(textureAsset) {
    // Do something with the texture asset
}, this);
1 Like
7

In the original project, the text is added via code. Is there any way to replace with normal space by code?

8

Yeah, don’t use non breaking spaces :slight_smile: Check whatever text you’ve added/using has non breaking line spaces and replace them with normal spaces.

You can do a string.replace for it at runtime but it’s better to correct the data.

1 Like
9

Thank you!

I consider all my issues solved as i managed to create a custom character in a font to use instead of a image and dynamically replace all non breaking spaces via code.

2 Likes