> For the complete documentation index, see [llms.txt](https://docs.decentraland.org/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.decentraland.org/creator/content-creator-es/escenas-sdk7/optimizacion/pre-load-resources.md).

# Precargar recursos

En algunos casos, un asset se agrega a la scene pero no se usa de inmediato. Por ejemplo, un archivo de sonido puede reproducirse solo cuando el jugador presiona un button. En este escenario, la primera vez que el jugador presiona el button, el audio puede reproducirse un par de segundos demasiado tarde, porque el archivo solo se descarga cuando es necesario.

Para evitar este problema, usa el `AssetLoad` component para asegurarte de que estos assets se descarguen y estén listos para usar antes de que se necesiten.

```ts
import { AssetLoad } from "@dcl/sdk/ecs"

AssetLoad.create(engine.RootEntity, {
  assets: [
    "assets/scene/bundle1/explosionSound.mp3",
    "assets/scene/bundle1/explosion.glb",
  ],
})
```

Los assets listados en el `AssetLoad` component se descargan y se agregan a la memoria, asegurando que estén disponibles al instante cuando la scene necesite cargarlos.

Algunas consideraciones importantes:

* Puedes colocar el `AssetLoad` component en cualquier entity (no solo en el RootEntity), y puedes usarlo en tantas entities como sea necesario. Esto puede ser útil para manejar estados de carga separados para distintos niveles o regiones de tu scene.
* El `AssetLoad` component se usa para agregar assets a la memoria, no para eliminarlos. Eliminar un asset de la lista en `AssetLoad.create` no liberará memoria.
* Si un asset se usa de inmediato cuando la scene carga (por ejemplo, un modelo GLB colocado en la scene, o un sonido de fondo que se reproduce continuamente), no es necesario usar el `AssetLoad` component, ya que ya se está descargando.
* Ten cuidado al agregar assets a `AssetLoad.create`y solo pre-carga los assets que no se necesiten al iniciar la scene para evitar costos de rendimiento innecesarios.
* Solo puedes pre-cargar assets que se hayan subido como parte de los scene files. Esta función no funcionará para pre-cargar imágenes desde una URL externa

## Reaccionar al loading state

La pre-carga de assets es más útil si tu scene puede reaccionar cuando cada asset termina de descargarse. Por ejemplo, quizá quieras mantener una pantalla de carga hasta que todos los assets estén listos, mostrar el progreso al jugador o manejar de forma elegante un asset que no se pudo descargar.

Para rastrear esto, usa el `assetLoadLoadingStateSystem`. Llama a su `registerAssetLoadLoadingStateEntity` method, pasando la entity que contiene el `AssetLoad` component y una función callback. La callback se ejecuta cada vez que cambia el loading state de uno de los assets de esa entity.

```ts
import {
  AssetLoad,
  LoadingState,
  assetLoadLoadingStateSystem,
} from "@dcl/sdk/ecs"

const preloader = engine.addEntity()
AssetLoad.create(preloader, {
  assets: [
    "assets/scene/bundle1/explosionSound.mp3",
    "assets/scene/bundle1/explosion.glb",
  ],
})

assetLoadLoadingStateSystem.registerAssetLoadLoadingStateEntity(
  preloader,
  (assetLoadState) => {
    console.log(
      `Asset ${assetLoadState.asset} is now: ${assetLoadState.currentState}`
    )
  }
)
```

La callback recibe un objeto con las siguientes properties:

* `asset`: La ruta del asset cuyo estado cambió. Esto coincide con una de las strings que listaste en el `AssetLoad` component.
* `currentState`: Un valor del `LoadingState` enum, que describe el nuevo estado de ese asset.

El `LoadingState` enum puede tener los siguientes valores:

* `LoadingState.LOADING`: El asset se está descargando actualmente.
* `LoadingState.FINISHED`: El asset terminó de descargarse correctamente y está listo para usarse.
* `LoadingState.FINISHED_WITH_ERROR`: El asset se encontró, pero ocurrió un error al descargarlo.
* `LoadingState.NOT_FOUND`: No se encontró ningún asset en la ruta proporcionada.
* `LoadingState.UNKNOWN`: El estado del asset no se conoce.

El siguiente ejemplo usa el loading state para cambiar el color de una entity según cómo avance su pre-carga:

```ts
import {
  AssetLoad,
  LoadingState,
  Material,
  assetLoadLoadingStateSystem,
} from "@dcl/sdk/ecs"
import { Color4 } from "@dcl/sdk/math"

function getLoadingColor(state: LoadingState): Color4 {
  switch (state) {
    case LoadingState.FINISHED:
      return Color4.Green()
    case LoadingState.LOADING:
      return Color4.Yellow()
    case LoadingState.FINISHED_WITH_ERROR:
    case LoadingState.NOT_FOUND:
      return Color4.Red()
    default:
      return Color4.Gray()
  }
}

assetLoadLoadingStateSystem.registerAssetLoadLoadingStateEntity(
  preloader,
  (assetLoadState) => {
    Material.setPbrMaterial(myEntity, {
      albedoColor: getLoadingColor(assetLoadState.currentState),
    })
  }
)
```

{% hint style="info" %}
**💡 Consejo**: Puedes agregar más assets a un `AssetLoad` component después de crearlo, por ejemplo en respuesta a una acción del jugador. Usa `AssetLoad.getOrCreateMutable()` para obtener el component y añadir nuevas rutas a su `assets` array. La callback registrada también se ejecutará para estos assets recién agregados a medida que se descargan.
{% endhint %}


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://docs.decentraland.org/creator/content-creator-es/escenas-sdk7/optimizacion/pre-load-resources.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.