Assets url when use HTML overlay UI

Help & Support
1

Hi,

When using project asset as HTML resource such as image, fonts, etc, I have to use the API interface to access the file (<img src="https://playcanvas.com/api/asset/xxxxxx/file/myfile.ext" />) and it’s work fine, but once le project built and downloaded for self-hosting, the link still the same (and doesn’t work), I need the source file url to point to the local asset file I have download.

Is there a way to use a local url like /assets/xxxx/… that can be accessible in development phase on the editor AND in production once the project downloaded and hosted?

Thanks

2

Hi @hadrienestela ,

You can get the asset file url using the getFileUrl() method:

https://developer.playcanvas.com/en/api/pc.Asset.html#getFileUrl

2 Likes
3

Hi @Leonidas,

Thanks, but it can’t be integrated directly in my .html resource file and require additional coding such replace in file.

I directly insert HTML resources content in new element. Any solution that can make the integration more simple?

Thanks

4

You could write a generic function code that would replace instances of asset ids with the URL in the HTML using regex.

eg

<img src="{342433}" />

Where 342433 is the asset id and then use https://developer.playcanvas.com/en/api/pc.AssetRegistry.html#get to the asset and URL

2 Likes
5

It seams a good solution.

Thanks a lot.

6

The downside to this method is that asset ids change when projects are forked so you may want to consider using asset names as long as asset names are unique instead if that’s a factor.

7

I used something similar but instead of asset id used asset name. It has the downside that asset names should be unique (the developer should take care of that), but they can be more permanent usually that asset ids.

2 Likes
8

it is working fine in my case as longer as assets ID are permanent if the project is not forked.

Thanks.

2 Likes
9

I have an issue with font assets, I can’t access font source file using the Asset.get() function. It always returns undefined.

Screenshot 2021-08-03 at 11.34.59
Screenshot 2021-08-03 at 11.34.592308×106 13.9 KB

10

Hi @hadrienestela,

Yes source files aren’t added to the asset registry, so you can’t access them on run time. They are mainly kept in storage for editor use (e.g. to reference derived assets on reupload).

1 Like
11

So there is no way to use imported fonts in html UI?

12

Right, good question, the easiest solution would be to host them in your own server.

Another option is to convert them to base64, there are many online services that can convert a TTF or OTF font to a web font. They can export a CSS file with the base65 version of the font.

I think you can load that in PlayCanvas in the same way you load CSS styles.

1 Like
13

Ok I imported it as .txt and I can access its reference now.

1 Like
14

Sure, but I want this kind of resource to stay in the project assets when I will download the build and maybe run it offline :slight_smile: .

1 Like