Customizable loading screen

[TheWalruzz]

Hey guys, I've been evaluating this engine for a couple of days (so far I'm very pleased) and was wondering if there are any plans for customization of the loading and start screen?

[chrisk-7777]

There is quite a bit of flexibility built into the Loader class to customise the look and feel of the loading screen.
The team might be able to give you more input, but as an example:

https://codepen.io/chrisk7777/pen/RwMvXKZ?editors=0010

You can alter the following (and maybe more?):

• the bar color with loadingBarColor
• the bar position with loadingBarPosition
• the logo itself with logo, by passing a base64 image string (you can use something like this tool https://www.base64-image.de/)
• the logo position with logoPosition
• the button text with playButtonText

You can also extend the Loader class and overwrite the draw method to completely alter the look and feel. Inside the draw method you have access to this.progress so you can display (or visually represent) the progress)

I don't believe its in the docs, but the API docs has a full breakdown: https://excaliburjs.com/docs/api/edge/classes/Loader.html#logoPosition

I often just read through the source files, they are really well documented: https://github.com/excaliburjs/Excalibur/blob/main/src/engine/Loader.ts

[KokoDoko]

And you can change the button style in the CSS as well:

button#excalibur-play {
    background: rgb(0,0,0) !important;
}

[mattjennings]

I personally have found the Loader a bit too limited for customization. As @chrisk-7777 mentions, it does offer a decent amount of options, but unless you want to follow the same template of loading bar, logo, and play button, it can get pretty tricky.

There is an old issue proposing implementing Loaders as scenes. I really like that idea, so much that I made a custom scene router that implements it. It's a bit more of a heavy handed solution than you may want, but it might be worth looking into if you find the native loader too limiting.

[eonarheim]

I've been thinking about this a bit, I think it would be worth building a new type that is easier to customize. Maybe something called ex.LoadingScreen (which which would still implement Loadable)?

What features would be important to you? Perhaps something more scene like as the that issue suggests?

[TheWalruzz]

Cool! I completely missed that Loader IS the loading screen, thanks for clarification!