> 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/scenes-sdk7/optimizacion/pre-load-resources.md).

# Precargar recursos

La precarga de recursos permite que los assets se descarguen al iniciar la escena para que estén listos cuando el jugador interactúe con ellos por primera vez.

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 player presiona un button. En este escenario, la primera vez que el player presiona el button, el audio puede reproducirse un par de segundos demasiado tarde, porque el archivo solo se descarga cuando se necesita.

Para evitar este problema, usa el `AssetLoad` component para asegurarte de que estos assets se descarguen y estén listos para usarse 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 enumerados en el `AssetLoad` component se descargan y se agregan a la memoria, lo que garantiza 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 RootEntity), y puedes usarlo en tantas entities como necesites. 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. Quitar un asset de la lista en `AssetLoad.create` no liberará memoria.
* Si un asset se usa de inmediato cuando la scene se 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 precarga los assets que no sean necesarios al inicio de la scene para evitar costos de rendimiento innecesarios.
* Solo puedes precargar assets que se hayan subido como parte de los archivos de la scene. Esta función no funcionará para precargar imágenes desde una URL externa

## Reaccionar al estado de carga

Precargar assets es más útil si tu scene puede reaccionar cuando cada asset termina de descargarse. Por ejemplo, puedes querer mantener una pantalla de carga hasta que todos los assets estén listos, mostrar el progreso al player o manejar de forma elegante un asset que no pudo descargarse.

Para hacer seguimiento de esto, usa el `assetLoadLoadingStateSystem`. Llama a su `registerAssetLoadLoadingStateEntity` método, pasando la entity que contiene el `AssetLoad` component y una función de callback. El callback se ejecuta cada vez que cambia el estado de carga 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} ahora es: ${assetLoadState.currentState}`
    )
  }
)
```

El callback recibe un objeto con las siguientes propiedades:

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

El `LoadingState` enum puede contener 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 mientras se descargaba.
* `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 estado de carga para cambiar el color de una entity según cómo progresa su precarga:

```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 existente después de crearlo, por ejemplo como respuesta a una acción del player. Usa `AssetLoad.getOrCreateMutable()` para obtener el component y agregar nuevas rutas en su `assets` array. El callback registrado también se activará para estos assets recién agregados mientras se descargan.
{% endhint %}

{% hint style="info" %}
**💡 Consejo**: Para ver un ejemplo funcional de este component, consulta el [`88,-12-asset-load`](https://github.com/decentraland/sdk7-test-scenes/tree/main/scenes/88,-12-asset-load) test scene, que precarga un mp3, una texture, un video y un glb a través de un `AssetLoad` component e informa el estado de cada asset a través de `assetLoadLoadingStateSystem` — incluido un path ausente a propósito que se resuelve como `NOT_FOUND`.
{% 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 by asking a question.

Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters:

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

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case.

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.