← Así se hace un juego: Snake de Daily Challenge · Lección 4/16

Letras, sprites y paleta

1/7

Una fuente de 3 × 5

Daily Challenge no carga una tipografía para el marcador: cada letra es un dibujo de 3 píxeles de ancho por 5 de alto, guardado como cinco textos de unos y ceros. Así está la A en renderer.js:

'A':['010','101','111','101','101']

Para escribir, text() recorre cada letra, y por cada '1' pinta un píxel de 1 × 1. Después avanza 4 píxeles: 3 de la letra y 1 de espacio. Por eso un texto mide largo × 4 − 1 píxeles.

leccion.js

1// Cinco letras de la fuente real de renderer.js
2const FONT = {
3  S: ["111", "100", "111", "001", "111"],
4  N: ["110", "101", "101", "101", "101"],
5  A: ["010", "101", "111", "101", "101"],
6  K: ["101", "101", "110", "101", "101"],
7  E: ["111", "100", "111", "100", "111"],
8};
9
10function text(str) {
11  const renglones = ["", "", "", "", ""];
12  for (const ch of str) {
13    const g = FONT[ch];
14    for (let r = 0; r < 5; r++)
15      renglones[r] += g[r].replaceAll("1", "#").replaceAll("0", " ") + " ";
16  }
17  for (const r of renglones) console.log(r);
18}
19
20text("SNAKE");
21console.log("ancho en píxeles:", "SNAKE".length * 4 - 1);

$ node leccion.js

Pulsa CORRER (o Ctrl+Enter).

Qué mirar

Ahí está «SNAKE»: 5 píxeles de alto y 19 de ancho. La fuente entera tiene unas 60 entradas como éstas; agrega la T (['111','010','010','010','010']) y escribe «SKATE».

Toda la lección en una página

Una fuente de 3 × 5

'A':['010','101','111','101','101']

Para escribir, text() recorre cada letra, y por cada '1' pinta un píxel de 1 × 1. Después avanza 4 píxeles: 3 de la letra y 1 de espacio. Por eso un texto mide largo × 4 − 1 píxeles.

1// Cinco letras de la fuente real de renderer.js
2const FONT = {
3  S: ["111", "100", "111", "001", "111"],
4  N: ["110", "101", "101", "101", "101"],
5  A: ["010", "101", "111", "101", "101"],
6  K: ["101", "101", "110", "101", "101"],
7  E: ["111", "100", "111", "100", "111"],
8};
9
10function text(str) {
11  const renglones = ["", "", "", "", ""];
12  for (const ch of str) {
13    const g = FONT[ch];
14    for (let r = 0; r < 5; r++)
15      renglones[r] += g[r].replaceAll("1", "#").replaceAll("0", " ") + " ";
16  }
17  for (const r of renglones) console.log(r);
18}
19
20text("SNAKE");
21console.log("ancho en píxeles:", "SNAKE".length * 4 - 1);

Ahí está «SNAKE»: 5 píxeles de alto y 19 de ancho. La fuente entera tiene unas 60 entradas como éstas; agrega la T (['111','010','010','010','010']) y escribe «SKATE».

El bicho de premio

Los dibujos más grandes usan la misma idea. En Snake, cada cinco frutas sale un bicho de premio, como en el Snake II de Nokia: un sprite de 10 × 10 en el que '1' es píxel encendido y '.' apagado. Es de 1 bit: no guarda colores, sólo «hay o no hay». El color se lo pone quien lo pinta:

r.sprite(BICHO, x, y, PAL.yellow)

Como es sólo texto, se puede transformar con código: voltearlo, contarlo, compararlo.

1// El sprite tal cual está en snake.js
2const BICHO = [".1......1.", "..1....1..", "...1111...", "..111111..", ".11.11.11.",
3               ".11111111.", "..111111..", ".1.1..1.1.", "1..1..1..1", ".........."];
4
5const pintar = filas => filas.forEach(f => console.log(f.replaceAll("1", "#").replaceAll(".", " ")));
6pintar(BICHO);
7
8const encendidos = BICHO.join("").split("").filter(c => c === "1").length;
9console.log("píxeles encendidos:", encendidos, "de", BICHO.length * BICHO[0].length);
10
11console.log("--- de cabeza:");
12pintar([...BICHO].reverse());

Antenas, ojos (los huecos del renglón 5) y patas. El renglón de abajo está vacío a propósito: el bicho ocupa una casilla de 10 × 10 y así no se pega a la de abajo.

128 colores con una fórmula

La Atari 2600 tenía una paleta fija: 16 tonos por 8 luminosidades. core/palette.js la reproduce con una función atari(hue, lum) que devuelve un color CSS:

Tono 0 son los grises: v = lum * 34, de negro a casi blanco.
Los demás tonos dan la vuelta al círculo cromático al revés, como el chip de video de la consola (el TIA): h = (55 - (hue - 1) * 24 + 720) % 360.
Más luminosidad sube la l del HSL y baja un poco la saturación.

Luego PAL les pone nombre a los que más se usan, para no recordar números: PAL.green es atari(13, 4).

1// La función real de core/palette.js
2function atari(hue, lum) {
3  hue &= 15; lum &= 7;
4  if (hue === 0) { const v = Math.round(lum * 34); return "rgb(" + v + "," + v + "," + v + ")"; }
5  const h = (55 - (hue - 1) * 24 + 720) % 360;
6  const l = 14 + lum * 10;
7  const s = 90 - lum * 5;
8  return "hsl(" + h + "," + s + "%," + l + "%)";
9}
10
11const PAL = { black: atari(0, 0), white: atari(0, 7), yellow: atari(1, 6),
12              red: atari(4, 4), blue: atari(9, 4), green: atari(13, 4), lgreen: atari(13, 6) };
13for (const [nombre, color] of Object.entries(PAL)) console.log(nombre.padEnd(7), color);

La serpiente usa green para el cuerpo y lgreen (el mismo tono, más claro) para la cabeza; los muros son blue y la fruta, red. hue &= 15 recorta cualquier número a 0-15: un tono fuera de rango nunca rompe nada.