edit example of default script:
-
How to change the loading interface picture
-
Learning js and CSS
Hi @chuxinhao,
From what I see in line 16 you have already changed the logo src, isn’t that working for you?
- The picture of the background I changed is not the logo
Right, you can easily do so by updating some CSS, for example:
'#application-splash-wrapper {',
' position: absolute;',
' top: 0;',
' left: 0;',
' height: 100%;',
' width: 100%;',
' background-image: url(http://photographyblogger.net/wp-content/uploads/2017/06/Alberta-wilderness-near-Banff.jpg);',
' background-size: cover;',
'}',
1 Like
Thank you very much. That’s what I want.I still have a question, how do I convert urls in CSS to resource addresses in the editor
You can do it but really it’s easier to host it yourself as the loading screen is considered to be outside of the PlayCanvas application.
Here’s an example on how you could change the logo with an asset in the PlayCanvas project but it has to wait till the engine is ready which can be a bit late: https://developer.playcanvas.com/en/tutorials/advance-loading-screen/
Relevant code:
// Use an image from the assets in the project via the asset registry
// More information: http://developer.playcanvas.com/en/api/pc.AssetRegistry.html
app.on('preload:start', function() {
var splash = document.getElementById('application-splash');
var logoAsset = app.assets.find('logo.jpg');
if (logoAsset) {
var logo = document.createElement('img');
logo.src = logoAsset.getFileUrl();
// Insert DOM before the progress bar
if (splash.childNodes.length > 0) {
splash.insertBefore(logo, splash.childNodes[0]);
} else {
splash.appendChild(logo);
}
logo.onload = function () {
splash.style.display = 'block';
};
}
});
1 Like
This is to modify the logo, if it is to modify the background picture, how to do?
You can change the CSS in the same way as changing the logo by modifying the CSS to use the URL from the asset.
Is this the way to write it?I don’t know if I wrote it right but the background doesn’t change.
app.on('preload:start', function() {
var wrapper = document.getElementById('application-splash-wrapper');
var bgAsset = app.assets.find('bg.png');
if (bgAsset) {
var bg = document.createElement('img');
bg.src = bgAsset.getFileUrl();
// Insert DOM before the progress bar
if (wrapper.childNodes.length > 0) {
wrapper.insertBefore(bg, wrapper.childNodes[0]);
} else {
wrapper.appendChild(bg);
}
bg.onload = function () {
wrapper.style.display = 'block';
};
}
});
I’m going to do that and I’m going to load it up, but how do I get the background image to go full screen?
This method of writing loads much slower than changing url in CSS. Why
Hi @chuxinhao,
The following should be sufficient to add the image asset as a CSS property:
app.on('preload:start', function(){
var wrapper = document.getElementById('application-splash-wrapper');
var bgAsset = app.assets.find('Alberta-wilderness-near-Banff.jpg');
wrapper.style.backgroundImage = "url('"+bgAsset.getFileUrl()+"')";
wrapper.style.backgroundSize = 'cover';
});
It should be fast, depending on the size of your image file.
1 Like
-
This one is to modify the image url with CSS
-
This is to modify the image url through js
-
Why is it so much faster to change CSS ？
Because it has to wait for Playcanvas to parse and start loading the assets. Hosting the file on an external server will always be faster.
2 Likes
- Oh, I see. Thank you very much
1 Like
Excuse me, are you how to modify the full screen?