Is it possible to alter the ‘Loading screen’ script, to mimic a old school GIF, or more recently a JS carousel?
Could be nice for one of my projects, if the preloader had multiple images.
Yes you can. You can even use a GIF. Bear in mind that you don’t want your loading screen to add to what the users needs to download by too much.
ok, well I guess I mean the ladder … the ‘.png’ at example is easily exchanged with ‘.jpg’ or (yes) ‘.gif’.
More interested in a coded carousel/or slides - the specific chunk:
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 + '%';
}
};
- can I access the ‘value’ at ‘setProgress’, in order to ‘if(){}’ the progress?
I’m not sure what you mean? You can put extra code in setProgress and change the image based on the value of value.
Ok, but in such case this does not work:
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 showSplash2 = function () {
// splash wrapper
var wrapper = document.createElement('div');
wrapper.id = 'application-splash-wrapper2';
document.body.appendChild(wrapper);
// splash
var splash = document.createElement('div');
splash.id = 'application-splash2';
wrapper.appendChild(splash);
splash.style.display = 'none';
var logo = document.createElement('img2');
logo.src = 'https://amfibios.dk/Armbroest_01.png';
splash.appendChild(logo);
logo.onload = function () {
splash.style.display = 'block';
};
var container = document.createElement('div');
container.id = 'progress-bar-container2';
splash.appendChild(container);
var bar = document.createElement('div');
bar.id = 'progress-bar2';
container.appendChild(bar);
};
var hideSplash = function () {
var splash = document.getElementById('application-splash-wrapper');
splash.parentElement.removeChild(splash);
};
var setProgress = function (value) {
if(value>50) {alert("Alert it");
hideSplash(); createCss();
showSplash2();
}
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: #1d292c;',
'}',
'#progress-bar {',
' width: 0%;',
' height: 100%;',
' background-color: #f60;',
'}',
'@media (max-width: 480px) {',
' #application-splash {',
' width: 170px;',
' left: calc(50% - 85px);',
' }',
'#application-splash-wrapper2 {',
' position: absolute;',
' top: 0;',
' left: 0;',
' height: 100%;',
' width: 100%;',
' background-color: #283538;',
'}',
'#application-splash2 {',
' position: absolute;',
' top: calc(50% - 28px);',
' width: 264px;',
' left: calc(50% - 132px);',
'}',
'#application-splash2 img2 {',
' width: 100%;',
'}',
'#progress-bar-container2 {',
' margin: 20px auto 0 auto;',
' height: 2px;',
' width: 100%;',
' background-color: #1d292c;',
'}',
'#progress-bar2 {',
' width: 0%;',
' height: 100%;',
' background-color: #f60;',
'}',
'@media (max-width: 480px) {',
' #application-splash2 {',
' 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);
});
The value is between 0 and 1
Fine, it works
(ps: the value between 0 and 1, … fetched from github-engine codes? - not in the webpage source: https://developer.playcanvas.com/en/user-manual/designer/loading-screen/)
The value is passed from the engine via an event.
You can see the event being subscribed to here in the script:
app.on("preload:progress", setProgress);
In the function setProgress:
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 + '%';
}
};
The code is implying that it’s a value between 0 and 1 because of this line:
value = Math.min(1, Math.max(0, value));
The value is being clamped between 0 and 1.
1 Like