I don’t know how to change it, and I’ve gone to the tutorial
Hi @thebosser24,
So, you need to create a custom loading screen file:
https://developer.playcanvas.com/en/user-manual/designer/loading-screen/
From there you can change the generated HTML and CSS to update the visuals.
As a start try playing with the CSS, for example change the progress bar color:
'#progress-container {',
' width: 100%;',
' height: 2px;',
' position: absolute;',
' background-color: yellow;',
'}',
Brown is the screen I have
'#progress-container {',
' width: 100%;',
' height: 2px;',
' position: absolute;',
' background-color: purple;',
'}',
Copy that.
no how do i add A Title: Capsule Boy
and i tried it and its still brown, here’s the code
pc.script.createLoadingScreen(function (app) {
var showSplash = function () {
// splash wrapper
var wrapper = document.createElement('div');
wrapper.id = 'application-splash-wrapper';
document.body.appendChild(wrapper);
// splash
var splash = document.createElement('div');
splash.id = 'application-splash';
wrapper.appendChild(splash);
splash.style.display = 'none';
var logo = document.createElement('img');
logo.src = 'https://s3-eu-west-1.amazonaws.com/static.Playcanvas.com/images/play_text_252_Black.png';
splash.appendChild(logo);
logo.onload = function () {
splash.style.display = 'block';
};
var container = document.createElement('div');
container.id = 'progress-bar-container';
splash.appendChild(container);
var bar = document.createElement('div');
bar.id = 'progress-bar';
container.appendChild(bar);
};
var hideSplash = function () {
var splash = document.getElementById('application-splash-wrapper');
splash.parentElement.removeChild(splash);
};
var setProgress = function (value) {
var bar = document.getElementById('progress-bar');
if(bar) {
value = Math.min(1, Math.max(0, value));
bar.style.width = value * 100 + '%';
}
};
var createCss = function () {
var css = [
'body {',
' background-color: #8C5E4B;',
'}',
'#application-splash-wrapper {',
' position: absolute;',
' top: 0;',
' left: 0;',
' height: 100%;',
' width: 100%;',
' background-color: #8C5E4B;',
'}',
'#application-splash {',
' position: absolute;',
' top: calc(50% - 28px);',
' width: 264px;',
' left: calc(50% - 132px);',
'}',
'#application-splash img {',
' width: 100%;',
'}',
'#progress-container {',
' width: 100%;',
' height: 2px;',
' position: absolute;',
' background-color: purple;',
'}',
'#progress-bar {',
' width: 0%;',
' height: 100%;',
' background-color: #;',
'}',
'@media (max-width: 480px) {',
' #application-splash {',
' width: 170px;',
' left: calc(50% - 85px);',
' }',
'}'
].join("\n");
var style = document.createElement('style');
style.type = 'text/css';
if (style.styleSheet) {
style.styleSheet.cssText = css;
} else {
style.appendChild(document.createTextNode(css));
}
document.head.appendChild(style);
};
createCss();
showSplash();
app.on('preload:end', function () {
app.off('preload:progress');
});
app.on('preload:progress', setProgress);
app.on('start', hideSplash);
});
This is a problem. 8C5E4B could be the background brown colour. I don’t know why this happens. It’s supposed to stay the same unless someone changed it to brown.
so what do i do
Can you link a project where this problem is affected? Then I can try and find what the problem is.
Do you want the loading bar to be purple?
yes
1 Like
pc.script.createLoadingScreen(function (app) {
var showSplash = function () {
// splash wrapper
var wrapper = document.createElement('div');
wrapper.id = 'application-splash-wrapper';
document.body.appendChild(wrapper);
// splash
var splash = document.createElement('div');
splash.id = 'application-splash';
wrapper.appendChild(splash);
splash.style.display = 'none';
var logo = document.createElement('img');
logo.src = 'https://s3-eu-west-1.amazonaws.com/static.playcanvas.com/images/play_text_252_white.png';
splash.appendChild(logo);
logo.onload = function () {
splash.style.display = 'block';
};
var container = document.createElement('div');
container.id = 'progress-bar-container';
splash.appendChild(container);
var bar = document.createElement('div');
bar.id = 'progress-bar';
container.appendChild(bar);
};
var hideSplash = function () {
var splash = document.getElementById('application-splash-wrapper');
splash.parentElement.removeChild(splash);
};
var setProgress = function (value) {
var bar = document.getElementById('progress-bar');
if(bar) {
value = Math.min(1, Math.max(0, value));
bar.style.width = value * 100 + '%';
}
};
var createCss = function () {
var css = [
'body {',
' background-color: #283538;',
'}',
'#application-splash-wrapper {',
' position: absolute;',
' top: 0;',
' left: 0;',
' height: 100%;',
' width: 100%;',
' background-color: #283538;',
'}',
'#application-splash {',
' position: absolute;',
' top: calc(50% - 28px);',
' width: 264px;',
' left: calc(50% - 132px);',
'}',
'#application-splash img {',
' width: 100%;',
'}',
'#progress-bar-container {',
' margin: 20px auto 0 auto;',
' height: 2px;',
' width: 100%;',
' background-color: purple;',
'}',
'#progress-bar {',
' width: 0%;',
' height: 100%;',
' background-color: purple;',
'}',
'@media (max-width: 480px) {',
' #application-splash {',
' width: 170px;',
' left: calc(50% - 85px);',
' }',
'}'
].join("\n");
var style = document.createElement('style');
style.type = 'text/css';
if (style.styleSheet) {
style.styleSheet.cssText = css;
} else {
style.appendChild(document.createTextNode(css));
}
document.head.appendChild(style);
};
createCss();
showSplash();
app.on('preload:end', function () {
app.off('preload:progress');
});
app.on('preload:progress', setProgress);
app.on('start', hideSplash);
});
This script should work, if it doesn’t tell me.
2 Likes
it aint qorking 
This did not happen in my project… Let me see.
The script that @Gabriel_Dobrzynski sent to you works perfectly fine. So check what you did wrong @thebosser24. It looks like you are not copying and pasting the entire script.
3 Likes
Yes! Thank you @Albertos!
I didn’t know what the problem was since it was fine in my other projects, so that is understandable that @thebosser24 didn’t copy and paste it all.
the screen isn’t brown and it doesn’t say Capsule Boy, The purple thing works
If you want a brown background you have to change the background-color of the application-splash-wrapper.
If you want to replace the PlayCanvas text image, you have to create an image with your own text and uploaded the image somewhere on the web. After that you have to change the logo.src with the link to your own image.
i tried but i dont know how to do that,