Todos los ejemplos · Sprites y 2D

Cambio de paleta

Qué enseña este ejemplo

Para solo enseñar una imagen dibujada se usa useLoadTexture: es lo normal, y el primer gammix de aquí se enseña así. useLoadPixels carga el mismo archivo como píxeles, para procesarlo en código: el juego lee o cambia el dibujo antes de enseñarlo.

createPixelTexture(gammix, paint) recibe la imagen cargada y una función que la cambia, y devuelve al momento una textura que se rellena cuando llega el archivo. La función trabaja sobre una copia, así que el dibujo, compartido por todas las escenas que lo cargan, nunca cambia. En art.ts:

  • recolor cambia los colores del cuerpo y del sombrero con swapColors: un cambio de paleta, como hacían las consolas de la época para sacar enemigos y segundos jugadores de un mismo dibujo.
  • silhouette vuelve blanco cada píxel dibujado con mapPixels: el destello de un golpe.
  • outline colorea cada píxel vacío que toca uno dibujado.

Haz clic para que el gammix con contorno destelle. El PNG se decodifica en JavaScript puro, sin canvas, así que funciona igual en el runtime nativo.

Arrancando