Todos los capítulos · Capítulo 2/9

La pala

Arrancando

Una línea nueva y ya hay algo. Ese rectángulo naranja es un sprite: el objeto que dibuja el motor en 2D, con su posición, su tamaño y su color.

createSprite({
    anchor: { x: 0, y: 0 },
    transform: { x: (WIDTH - PADDLE_W) / 2, y: HEIGHT - 24 },
    width: PADDLE_W,
    height: PADDLE_H,
    tint: getColor('#ff6b1a'),
});

Sin imagen, y a propósito

Un sprite normalmente lleva una imagen. Este no: cuando no le das ninguna, el motor dibuja un rectángulo liso del color de tint. Sirve para prototipos, para cajas de depuración y, como aquí, para un juego entero.

Ese es medio truco del rompeladrillos: no necesitas ni un solo dibujo. La pala, la bola y los ladrillos son rectángulos de colores, igual que en 1976. Vas a terminar el tutorial sin abrir un editor de imágenes, y el resultado seguirá pareciendo un juego.

El eje Y crece hacia abajo

Aquí está la trampa que pilla a todo el mundo. En la clase de mates, subir es aumentar la Y. En una pantalla, no:

Por eso HEIGHT - 24 deja la pala cerca del suelo, no cerca del techo. Es la convención de todas las pantallas desde que existen las pantallas, y el motor la respeta en 2D.

Y otra cosa: qué punto del sprite cae en x e y lo dice anchor. Por defecto es su centro, que es lo cómodo para girar y escalar. En este tutorial usamos anchor: { x: 0, y: 0 }, la esquina superior izquierda, porque las cuentas de choques de los próximos capítulos se leen mejor así: un rectángulo va de x a x + ancho. Por eso, para centrar la pala, hay que restarle su propio ancho antes de dividir:

x: (WIDTH - PADDLE_W) / 2

Si pusieras x: WIDTH / 2, la pala empezaría en el centro y se saldría 32 píxeles hacia la derecha.

¿Qué son esas constantes en mayúsculas?

Arriba del fichero hay varias líneas así:

const PADDLE_W = 64;

const crea un nombre para un valor. A partir de ahí, PADDLE_W significa 64 en todo el fichero.

Se escriben en mayúsculas por costumbre, para avisar de que ese número no cambia nunca mientras el juego corre. No es una regla del lenguaje: es un aviso entre personas.

¿Por qué molestarse, en vez de escribir 64 directamente? Porque el 64 va a aparecer en cinco sitios (al dibujar la pala, al centrarla, al frenarla en los bordes, al rebotar la bola) y el día que quieras una pala más corta, tendrías que acordarte de cambiarlos los cinco. Con la constante, cambias uno.

Ahora tú

Cambia el tint a otro color. Cambia PADDLE_W a 120 y fíjate en que la pala sigue centrada: eso es lo que te ha comprado escribir (WIDTH - PADDLE_W) / 2 en vez de un número a mano.

Y luego pon y: 0 para comprobar lo del eje: se va arriba del todo.