Todos los ejemplos · Sprites y 2D

Pixel art procedural

Qué enseña este ejemplo

El arte que alguien dibuja se hace en un editor de pixel art y se carga con useLoadTexture. Este ejemplo trata del otro caso: imágenes generadas en código, para variaciones procedurales, para relleno provisional o para un agente que no tiene editor de imágenes. Es lo que hay que usar en vez de dibujar en un <canvas>, que solo existe en el navegador.

Cada imagen de esta escena se genera. createPixels es una imagen en memoria, bytes sin más; fillGradient, drawLine, fillRect, mapPixels y blitPixels pintan sobre ella; y createPixelTexture la convierte en una textura que un sprite enseña como cualquier imagen cargada.

No hay archivos de imagen ni <canvas>. Pintar es JavaScript sin más, así que funciona igual en el navegador, en el runtime nativo y en un test, y da los mismos píxeles en los tres. El cielo está cortado en catorce bandas tramadas donde se juntan, las palmeras salen de una semilla y el coche se monta con una carrocería y la misma rueda dos veces.

Pulsa R para repintar las colinas y las palmeras con otra semilla. Se pintan encima, en su sitio, y updatePixelTexture envía el cambio: ninguna textura nueva.

Arrancando