I am using Cocos Creator 3.2.0
When I run the game from editor I see cocos logo and a progress bar
When I build the game I can only see the logo in splash screen there is no progress bar.
I want to create custom loading screen with progress bar I can control.
Can you please provide some help on how to do this?
Is there a way to customized a loading screen?
Hi guys
can you provide some help on this?
If you have just an image for the loading screen, you should be able to modify this under the build settings.
if you want to update the progress bar yourself, you will have to modify the index.html or the application.js file.
@vkgamedev thank you for you answer.
I have a requirement to place several logos and between them place the progress bar.
How do I do something like that.
in application.js or index.html file I don’t find any reference to progress bar.
Is there any sample code I can have a look to get an idea how to do this?
This is what i used on 2.4.2. I assume something similar should be available on 3.x
splashscreen_update.zip (115.5 KB)
@vkgamedev thank you for sending this.
This does show how to replace the loading screen.
But the progress bar does not seems to update and I don’t see a way to update it.
Previous version in main.js has following to update the progress bar
function setLoadingDisplay () {
// Loading splash scene
var splash = document.getElementById('splash');
var progressBar = splash.querySelector('.progress-bar span');
onProgress = function (finish, total) {
if (progressBar) {
progressBar.style.width = percent.toFixed(2) + '%';
}
};
splash.style.display = 'block';
progressBar.style.width = '0%';
}
I assume something similar needs to be in application.js ?
Can you provide some help on how to adjust it?
Any idea how to do this in cocos 3 ?
One way to customise the colour of the progress bar is by first building the game and then accessing “style-desktop” or “style-mobile” based on your version of the build.
In there, you’ll find the “.progress-bar span” selector where you can edit the “background-color” property to set your custom colour.
I tried adding an image, but it doesn’t seem to be working. To control the flow of the progress bar, you’ll need to edit the “setLoadingDisplay ()” function in “main.js.”
Code snippets for reference:
style-mobile:
.progress-bar span {
display: block;
height: 10%;
border-radius: 3px;
transition: width .4s ease-in-out;
background-color: #ff0000;
main.js
function setLoadingDisplay () {
// Loading splash scene
var splash = document.getElementById('splash');
var progressBar = splash.querySelector('.progress-bar span');
onProgress = function (finish, total) {
var percent = 100 * finish / total;
if (progressBar) {
progressBar.style.width = percent.toFixed(2) + '%';
}
};
splash.style.display = 'block';
progressBar.style.width = '0%';
cc.director.once(cc.Director.EVENT_AFTER_SCENE_LAUNCH, function () {
splash.style.display = 'none';
});
}
@grimfangs thank you for your answer. I have been doing this in previous versions of Cocos Creator. But in version 3 we don’t have this function. I assume there is a way to put something similar in application.js.
But don’t know from where I should call this function.
Hi @wijesijp, checking the difference in CC2.4 and CC3.2 I found something that might help to start with. Not sure this will work.
The main difference I saw was the loadscene,
Here in 2.4 bundle.loadscene is used, but as shown in below image in 3.2 cc.director.loadscene is used.
So I think that changing this as in 2.4 and adding setLoadingDisplay() function in application.js will help.
Along with this changes in index.html, style.css might be needed.
Not sure if you are still looking for answers but this seems like it might be a good starting point…
After building your project to web mobile
1- Add this to your <body></body> inside your index.html.
<script src="https://connect.facebook.net/en_US/fbinstant.6.3.js"></script>
2 - Add this to your application.js file
function onGameStarted(cc, settings){
....
....
....
FBInstant.initializeAsync();
FBInstant.setLoadingProgress(100);
FBInstant.startGameAsync();
}
you can customize FBInstant.setLoadingProgress(100); across application.js functions so you can get a dynamic loading from 1 to 100```it’s work fine !