Crear una Textura con Canvas2D

Si necesitas crear texturas en tiempo de ejecución para pintar dinámicamente, tal vez quieras usar CanvasRenderingContext2D, que es el conjunto de métodos de dibujo en 2D del navegador sobre el elemento <canvas>.

En Wonderland Engine, crea una textura desde un canvas a través de la API TextureManager.create(): this.engine.textures.create(canvas).

Ejemplo

A continuación, encontrarás el ejemplo de la página de CanvasRenderingContext2D de MDN integrado en Wonderland Engine:

import {Component, Property} from '@wonderlandengine/api';

export class MyCanvasTexture extends Component {
    static TypeName = 'my-canvas-texture';
    static Properties = {
        /* Define este material en el editor. La textura se aplica a
         * todos los objetos que lo usen. */
        material: Property.material()
    };

    start() {
        const canvas = document.createElement('canvas');
        canvas.width = 300;
        canvas.height = 300;

        const ctx = canvas.getContext('2d');
        /* Realiza aquí tu dibujo en 2D (este es el ejemplo de MDN) */

        // Relleno de fondo blanco
        ctx.beginPath();
        ctx.fillStyle = '#fff';
        ctx.fillRect(0, 0, canvas.width, canvas.height);

        // Cambia el color de relleno de nuevo a negro
        ctx.fillStyle = '#000';
        // Define el grosor de la línea
        ctx.lineWidth = 10;

        // Muro
        ctx.strokeRect(75, 140, 150, 110);

        // Puerta
        ctx.fillRect(130, 190, 40, 60);

        // Techo
        ctx.beginPath();
        ctx.moveTo(50, 140);
        ctx.lineTo(150, 60);
        ctx.lineTo(250, 140);
        ctx.closePath();
        ctx.stroke();

        /* Crea una textura desde el canvas a través del TextureManager */
        this.canvasTexture = this.engine.textures.create(canvas);
        /* Aplica la textura al material (usa el setter generado) */
        this.material.setDiffuseTexture(this.canvasTexture);
    }
}

Actualizar después de un Cambio

Después de haber cambiado un canvas tras crear la textura inicial, asegúrate de actualizar la textura para reflejar los cambios.

Para el ejemplo anterior, tú harías:

this.canvasTexture.update();

Para actualizar solo una subregión y mejorar el rendimiento, usa Texture.updateSubImage() en su lugar:

// Actualizar una región de 100x60 en el destino (0, 0) desde la fuente (28, 4)
this.canvasTexture.updateSubImage(28, 4, 100, 60, 0, 0, canvas);