# Load assets dynamically in the runtime multiple time in the same scene

**URL:** <https://phaser.discourse.group/t/load-assets-dynamically-in-the-runtime-multiple-time-in-the-same-scene/13570>\
**Category:** Phaser 3\
**Created:** [September 18, 2023, 6:16pm UTC](https://phaser.discourse.group/t/load-assets-dynamically-in-the-runtime-multiple-time-in-the-same-scene/13570 "2023-09-18T18:16:51Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![Rangerz132](https://avatars.discourse-cdn.com/v4/letter/r/cc9497/32.png) [@Rangerz132](https://phaser.discourse.group/u/Rangerz132)\
**Post date:** [September 18, 2023, 6:16pm UTC](https://phaser.discourse.group/t/load-assets-dynamically-in-the-runtime-multiple-time-in-the-same-scene/13570/1 "2023-09-18T18:16:51Z")

</div>

Hello! I’m facing some issue with the loading process.

At the moment I’m able to load all of my assets on the runtime (outside the preload method) which is exactly what I desired at the time.

However, I would like to load other assets later on in the same scene. When I try to do it, it seems like the loader is not starting even if I’m calling it. The debug message _‘loading started’_ is only trigger once.

**My questions is : why is the loader only starting once? Thanks**

```javascript
export default class AssetLoader {
  private scene: Phaser.Scene

  constructor(scene: Phaser.Scene) {
    this.scene = scene

    // Load assets on start
    this.scene.load.on('start', () => {
      this.loadCommunAssets()
      this.loadThemeAssets()
      console.log("loading started")
    })
 
    // Load assets on events
    EventDispatcher.getInstance().on('onTransition', this.onLoadSceneAssets)
  }

  // Callback to load new assets
  private readonly onLoadSceneAssets = (targetKey: string): void => {
    this.loadGameAssets(targetKey)
    this.scene.load.start()
  }

  // Load game assets
  private loadGameAssets(targetKey: string): void {
    // [...]
  }
}

```

---

<div class="post-metadata">

**Author:** ![samme](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/samme/32/5275_2.png) [@samme](https://phaser.discourse.group/u/samme)\
**Post date:** [September 19, 2023, 2:44am UTC](https://phaser.discourse.group/t/load-assets-dynamically-in-the-runtime-multiple-time-in-the-same-scene/13570/2 "2023-09-19T02:44:27Z")

</div>

👋

Is one `AssetLoader` supposed to load 1 batch or 2 batches? I only see 1 `load.start()`, and it’s not in the constructor.

> [@Rangerz132](#):
>
> `// Load assets on start`

Here don’t you want to queue those assets before starting the loader?

---

<div class="post-metadata">

**Author:** ![Rangerz132](https://avatars.discourse-cdn.com/v4/letter/r/cc9497/32.png) [@Rangerz132](https://phaser.discourse.group/u/Rangerz132)\
**Post date:** [September 19, 2023, 1:21pm UTC](https://phaser.discourse.group/t/load-assets-dynamically-in-the-runtime-multiple-time-in-the-same-scene/13570/3 "2023-09-19T13:21:14Z")

</div>

Oh! Thanks for the precision. Basically, I would simply have to move the **loadCommunAssets** and **loadThemeAsset** methods outside the start callback in the constructor to queue those before starting the loader… I had some confusion there.

---

<div class="post-metadata">

**Author:** ![Rangerz132](https://avatars.discourse-cdn.com/v4/letter/r/cc9497/32.png) [@Rangerz132](https://phaser.discourse.group/u/Rangerz132)\
**Post date:** [September 19, 2023, 5:30pm UTC](https://phaser.discourse.group/t/load-assets-dynamically-in-the-runtime-multiple-time-in-the-same-scene/13570/4 "2023-09-19T17:30:32Z")

</div>

Hello, I changed the code a bit according to your saying and I still have the same issue.

Basically, when the game starts, only the game assets related to **‘shed’** are loading (which is OK). However, when the player interacts with some elements, I would like to load new assets but nothing seems to load. Why?

Thanks!

```javascript
import EventDispatcher from '../eventDispatcher'
import Phaser from 'phaser'

export default class AssetLoader {
  private scene: Phaser.Scene
  private locationData: any
  private itemData: any
  private characterData: any
  private puzzleData: any

  constructor(scene: Phaser.Scene) {
    this.scene = scene
    this.locationData = this.scene.cache.json.get('locationData')
    this.itemData = this.scene.cache.json.get('itemData')
    this.characterData = this.scene.cache.json.get('characterData')
    this.puzzleData = this.scene.cache.json.get('puzzleData')

    this.loadCommunAssets()
    this.loadThemeAssets()
    this.loadGameAssets('shed')
    this.scene.load.start()

    EventDispatcher.getInstance().on('onLoadScene', this.onLoadScene)
  }

  private readonly onLoadScene = (targetKey: string): void => {
    this.loadGameAssets(targetKey)
  }

  /**
   * Load commun assets
   */
  private loadCommunAssets(): void {
      // [...]
  }

  /**
   * Load theme assets
   */
  private loadThemeAssets(): void {
    // [...]
  }

  /**
   * Load game assets
   */
  private loadGameAssets(targetKey: string): void {
    // [...]
  }

```

---

<div class="post-metadata">

**Author:** ![Rangerz132](https://avatars.discourse-cdn.com/v4/letter/r/cc9497/32.png) [@Rangerz132](https://phaser.discourse.group/u/Rangerz132)\
**Post date:** [September 19, 2023, 5:49pm UTC](https://phaser.discourse.group/t/load-assets-dynamically-in-the-runtime-multiple-time-in-the-same-scene/13570/5 "2023-09-19T17:49:22Z")

</div>

I don’t know if this is the best approach but this seems to fix my issue

```javascript
 private readonly onLoadScene = (targetKey: string): void => {
  this.scene.load.reset()
  this.loadGameAssets(targetKey)
  this.scene.load.start()
}

```

---

<div class="post-metadata">

**Author:** ![samme](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/samme/32/5275_2.png) [@samme](https://phaser.discourse.group/u/samme)\
**Post date:** [September 19, 2023, 6:23pm UTC](https://phaser.discourse.group/t/load-assets-dynamically-in-the-runtime-multiple-time-in-the-same-scene/13570/6 "2023-09-19T18:23:14Z")

</div>

Did you confirm that `onLoadScene()` ever gets called?

If you want to troubleshoot more, try [phaser-plugin-loader](https://github.com/samme/phaser-plugin-loader).

I might try to simplify this by getting rid of the class altogether.

---

<div class="post-metadata">

**Author:** ![Rangerz132](https://avatars.discourse-cdn.com/v4/letter/r/cc9497/32.png) [@Rangerz132](https://phaser.discourse.group/u/Rangerz132)\
**Post date:** [September 19, 2023, 6:28pm UTC](https://phaser.discourse.group/t/load-assets-dynamically-in-the-runtime-multiple-time-in-the-same-scene/13570/7 "2023-09-19T18:28:29Z")

</div>

Yes! The method is being called. Everything seems to work perfectly now.

As I mentionned, I don’t know if **this.scene.load.reset()** could cause some drawbacks but its working fine.

Might have to look a that in the future.