# Loading necessary assets for each scene

**URL:** <https://phaser.discourse.group/t/loading-necessary-assets-for-each-scene/2780>\
**Category:** Phaser 3\
**Created:** [June 14, 2019, 11:25am UTC](https://phaser.discourse.group/t/loading-necessary-assets-for-each-scene/2780 "2019-06-14T11:25:03Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![Ananth](https://avatars.discourse-cdn.com/v4/letter/a/dfb087/32.png) [@Ananth](https://phaser.discourse.group/u/Ananth)\
**Post date:** [June 14, 2019, 11:25am UTC](https://phaser.discourse.group/t/loading-necessary-assets-for-each-scene/2780/1 "2019-06-14T11:25:03Z")

</div>

Hi,  
I don’t want to load all the graphic assets from the beginning. instead of that, load the necessary assets before every stage. for example when playing stage 1, load the resources for stage 2 in the background.

Is that possible in phaser3?.

can anyone help me to solve this?

---

<div class="post-metadata">

**Author:** ![Jake.Caron](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/jake.caron/32/1841_2.png) [@Jake.Caron](https://phaser.discourse.group/u/Jake.Caron)\
**Post date:** [June 14, 2019, 11:38am UTC](https://phaser.discourse.group/t/loading-necessary-assets-for-each-scene/2780/2 "2019-06-14T11:38:17Z")

</div>

There’s a preload method to every scene, so you can load all of the assets there and create them in the create method.

ex:

```javascript
function preload ()
{
    this.load.image('einstein', 'assets/pics/ra-einstein.png');
}

function create ()
{
    this.add.image(400, 300, 'einstein');
}

```

---

<div class="post-metadata">

**Author:** ![Ananth](https://avatars.discourse-cdn.com/v4/letter/a/dfb087/32.png) [@Ananth](https://phaser.discourse.group/u/Ananth)\
**Post date:** [June 14, 2019, 11:41am UTC](https://phaser.discourse.group/t/loading-necessary-assets-for-each-scene/2780/3 "2019-06-14T11:41:33Z")

</div>

Thanks jake,  
But when we load assets of current scene it hold on black screen initially and then load images in create function.I want to load assets of next state in a background of current state.

---

<div class="post-metadata">

**Author:** ![Jake.Caron](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/jake.caron/32/1841_2.png) [@Jake.Caron](https://phaser.discourse.group/u/Jake.Caron)\
**Post date:** [June 14, 2019, 12:16pm UTC](https://phaser.discourse.group/t/loading-necessary-assets-for-each-scene/2780/4 "2019-06-14T12:16:18Z")

</div>

Gotcha, that’s doable.

Let’s assume you have Scene A, which will have to act as your initial preloader and will contain very minimal assets to ensure a quick loading time. Once loaded, in the **create** method of Scene A, you can load all of the assets for Scene B like so:

```javascript
this.load.image('sceneBstuff', 'assets/pics/ra-einstein.png');
this.load.on('complete', ()=>{
    //ENABLE ABILITY TO GO TO SCENE B
});
this.load.start();

```

Note: If your game isn’t huge, I would suggest just creating a preload scene and loading all of the assets for your game there. The preload scene could simply have a progress bar to indicate when the assets have loaded and then progress you to your first scene and you won’t have to worry about preloading anything afterwards.

---

<div class="post-metadata">

**Author:** ![Ananth](https://avatars.discourse-cdn.com/v4/letter/a/dfb087/32.png) [@Ananth](https://phaser.discourse.group/u/Ananth)\
**Post date:** [June 14, 2019, 12:26pm UTC](https://phaser.discourse.group/t/loading-necessary-assets-for-each-scene/2780/5 "2019-06-14T12:26:56Z")

</div>

Thanks jake ,it works.