Renderizado

El motor renderiza con WebGL durante la fase de renderizado del bucle de juego. El renderizado se construye a partir de tres piezas:

• Una cámara decide qué capas se dibujan en la pantalla.
• Las capas agrupan lo que se dibuja y controlan el orden de dibujado.
• Los componentes de renderizado (sprites, texto, formas, etc.) producen lo visual.

Cada entidad renderizable necesita un Transform: los componentes de renderizado dibujan en la posición de la entidad, más su propio offset.

Cámara

Una cámara es una entidad con un componente Camera y un Transform. No se dibuja nada a menos que una cámara renderice la capa en la que está el contenido. Una escena necesita al menos una cámara.

import { Transform, Camera } from "angry-pixel";

this.entityManager.createEntity([
    new Transform(),
    new Camera({ layers: ["Default", "UI"], zoom: 1 }),
]);

El componente Camera tiene estas opciones:

Se pueden usar varias cámaras a la vez —por ejemplo, una para el mundo del juego y otra para la interfaz—, ordenadas por su depth.

Capas

Cada componente de renderizado tiene una propiedad layer: una cadena que nombra la capa a la que pertenece. Una cámara dibuja solo las capas listadas en su array layers, en el orden en que aparecen: las capas anteriores se dibujan primero (detrás) y las posteriores encima. El contenido de una capa que ninguna cámara renderiza no se dibuja.

import { Transform, SpriteRenderer } from "angry-pixel";

this.entityManager.createEntity([
    new Transform(),
    new SpriteRenderer({ image: this.assetManager.getImage("player.png"), layer: "Default" }),
]);

Los nombres de las capas son cadenas arbitrarias; elige una convención y usa los mismos nombres en tus componentes de renderizado y en tu cámara. Una práctica habitual es mantener los nombres de las capas en un archivo de configuración dentro de src/config/.

Cargar imágenes

Las imágenes que usan los componentes de renderizado se cargan a través del Asset Manager con loadImage, normalmente en el método loadAssets de una escena. Una vez cargada, una imagen se obtiene con getImage y se pasa al componente de renderizado.

import { Scene } from "angry-pixel";

export class MainScene extends Scene {
    loadAssets() {
        this.assetManager.loadImage("player.png");
    }
}

Componentes de renderizado

El motor proporciona los siguientes componentes de renderizado. Consulta Componentes integrados para las opciones completas de cada uno.

Los sprites animados se controlan con el componente Animator junto con un SpriteRenderer.

import { Transform, TextRenderer, TextAlignment } from "angry-pixel";

this.entityManager.createEntity([
    new Transform(),
    new TextRenderer({
        text: "Score: 0",
        color: "#FFFFFF",
        fontSize: 24,
        layer: "UI",
        alignment: TextAlignment.Left,
    }),
]);