The playcanvas has the preload bar so we could preload the resource which import in the editor before the game start.
It’s so good.
However,because my game’s UI Start and UI End is made by html and css.
The UI images are in the cdn files instead of importing editor which make me confused and helpless.
My UI images are not in the editor so the preload bar can’t preload my UI images,so when the preload bar is completed that it maybe have some problem such as my game ui images have not been loaded.
So,I want to know is it some method to solve my problem?
The preload function have some api about preload other resource?
There is a method to find assets by URL but I’m not sure it would be useful to you here.
One suggestion I would make is to replace tags in your HTML/CSS files with URLs at runtime. We have used this sort of thing before.
Instead of setting enter URLs in the CSS files use some other identifier for the asset (e.g. asset name or asset tag). Then you can replace all identifiers with URLs before adding the CSS to your scene.
For example, in your css file:
background-image: url("asset-tag-bkgrd");
Then in the code where you add the CSS to your html page.
// create element
var style = pc.createStyle(asset.resource || '');
document.head.appendChild(style);
// when asset resource loads/changes,
// update html of element
asset.on('load', function() {
var bkdgrdAsset = assets.findByTag("bkgrd")[0];
var css = asset.resource.replace("asset-tag-bkgrd", bkgrdAsset.getFileUrl());
style.innerHTML = css;
});
// make sure assets loads
app.assets.load(asset);
Of course instead of hardcoding names of tags you could use regular expressions to extract tag names from your css text and find the asset. So that the string “asset-tag-bkgrd” would automatically be replaced by the asset with the “bkdgrd” tag.
Right, OK. The t= portion of the URL is the file hash. This is used because Image elements do not reload the image if you re-assign the same image to the src value (they ignore the cache parameters) So we add the hash value to force a change if the image data has changed.
You can get this value from the asset.file.hash property.
We can look into this and see if the hash property should be removed (possible it should be from production) or whether it should be included in the getFileUrl response (I’m not sure).
But in the mean time, you can add it yourself by using asset.file.hash.