How to preload a huge scene in background ? not preloading the assets

Phaser 3
6

You could try a similar approach I use in my 2d car example where the loading screen is an separate html element.

The black loading screen you see at the beginning will be removed as soon as the mainScene is ready.

inside index.html

// https://github.com/yandeu/phaser3-matter-car-on-curved-terrain/blob/master/src/index.html
<style>
  html,
  body {
    height: 100%;
    margin: 0;
    background-color: #000000;
  }

  #loading-screen {
    display: flex;
    position: absolute;
    width: 100%;
    height: 100%;
    justify-content: center;
    align-items: center;
    background: black;
    overflow: visible;
  }

  h2 {
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    color: #ffffff;
  }
</style>

<div id="loading-screen">
  <h2 id="item">loading...</h2>
</div>

<!-- custom element for phaser game -->
<canvas id="myCustomCanvas"></canvas>

inside mainScene.ts

// https://github.com/yandeu/phaser3-matter-car-on-curved-terrain/blob/master/src/scripts/scenes/mainScene.ts
// hide the loading screen when at the end of create()
let loadingScreen = document.getElementById('loading-screen')
if (loadingScreen) loadingScreen.style.display = 'none'

You could also use some css to smoothly fade away the loading screen, like I did in the platformer example.

The advantage of this approach, is that the user will immediately see the loading screen. Even before the JavaScript for the Phaser games has been loaded by the browser.

1 Like