Custom Screen Loading (HTML5)

Hi,

Here is a link to a project that shows how to customize the loading screen of your game (HTML5 only). I replaced the white text with purcentage by a more elegant progress bar and the logo od GDevelop.
freetalent.fr/gd/samples/loader.zip

This is an example that you can rework (if you master the javascript) to suit your game.

You just need to add the source of your project loader.js the script. There is nothing else to do, it’s automatic.

Freetalent.

Could you make it so it uses external images for the logo and such instead of storing it inside JS as base64? I feel this would make it more flexible to use, without the need to learn JS (you basically just replace images with ones you want/need and are done).

Yes, of course !

In using this web site :
base64-image.de/

replaces the variable code with the code of your PNG image.
Freetalent.

Hi!
What might be the problem when loading bar is stuck in one spot? It loads normally, but when it reach that point, it stops. I try example what was in the first post to my game and did not change anything and the example did not worked like it should be? Or is that example that kind of thing I have to change something?

Thanks!

Maybe have you a ressource not available ? Check all your assets (in the console of your browser, check the 404 errors).

Hi there does this script still work? I’m just getting a black screen.
any thoughts

The file is surely outdated, you’ll have to check this modified file and see how it creates the new PIXI objects, then you’ll have to apply the code in the right place.
Now, as GD supports multiple renderers (PIXI and Cocos), the function has been abstracted from specific renderer functions, it just call an external function to render the loading percent, this function depends on the renderer. If you export the game with the PIXI renderer, the file you are searching for is located at:

exporting-folder/pixi-renderers/loadingscreen-pixi-renderer.js

The first function initializes the PIXI objects, the second function uses the PIXI objects to render the text, the parameter is the loading percent (between 0 and 100).

So, if you want a custom loading screen, you’ll have to create the PIXI sprites, tiled sprites, texts, etc. in the first function. Then, in the second function, use the objects to render based on the progress parameter “percent” :slight_smile:
If you want to do it with the Cocos renderer, you’ll have to check its custom loading-screen-renderer file :wink:

Thank you for the heads up lizard!
Anyone reading this, please feel free to use my script mod to add a logo to your projects
the image should 289 x 109px and added to your images within the GD.

If you require a different size logo, you will need to adjust the position of the image by modifying the script.

https://drive.google.com/file/d/0B_Rk-GFlTEtuUWQ1X01JRUdiUUU/view?usp=sharing

2 Likes

the link is broken

2 Likes

Hello Nerdite sorry for necroposting but where should I be using your script? I opened my Gdevelop project using visual editor, but I`m not into programming…need some help

Here an process updated for the lastest version.

3 Likes

@moondog Well this isn’t actually needed anymore. ah! lol thanks @Bouh for the update.
There is a splash screen example in the examples too.

2 Likes