Eso de ahí arriba es un juego. No hace nada todavía, pero ya está corriendo: hay un bucle dibujando un fotograma tras otro, sesenta veces por segundo, y lo único que dibuja es un fondo. Todo lo demás lo vas a ir poniendo tú.
Son dieciséis líneas y conviene mirarlas de una en una, porque las tres ideas que aparecen aquí son las que sostienen el resto del tutorial.
createGame no crea el juego
Parece que sí, por el nombre, pero mira lo que hace la última línea:
const game = createGame('#app', { ... });
game({ Game });createGame devuelve una función. La configuración (el tamaño, el color de fondo) se
da una vez, y lo que sale de ahí es algo que puedes llamar con las escenas que quieras.
El juego empieza a existir en la segunda línea, no en la primera.
Las escenas van en un objeto, { Game }, y la clave es su nombre: así es como luego se
cambia de una a otra, por su nombre. La primera es la que arranca.
Es el tropiezo número uno con esta API, así que vale la pena que lo veas ahora, en un programa de dieciséis líneas, y no dentro de tres capítulos.
El '#app' es dónde se mete el lienzo: el motor busca ese elemento en la página y monta
dentro un <canvas>. En un proyecto tuyo sería un <div id="app"> en tu index.html.
Una escena es una función
const Game = () => {
return createScene();
};Sin clases, sin heredar de nada, sin un método create() que alguien decidió que se
llamara así. Una escena es una función que se ejecuta una vez, al arrancar, y dentro
de ella declaras lo que hay. Al final devuelve createScene(), que cierra la escena con todo
lo que declaraste.
Ese «una vez» es importante y va a volver: el cuerpo de la escena no se repite cada fotograma. Lo que se repite lo verás en el capítulo 3.
El color no es una cadena de texto
background: getColor('#12102b'),getColor traduce lo que le des ('#12102b', 0x12102b, 'skyblue', 'rgb(18,16,43)')
a los cuatro números que la tarjeta gráfica entiende. Le puedes pasar cualquier color de
CSS.
Espera: ¿qué es una función?
Una función es un trozo de código con nombre que puedes ejecutar cuando quieras. Se escribe así:
const saludar = () => {
console.log('hola');
};saludar no hace nada por sí solo: es la receta. Se ejecuta cuando alguien escribe
saludar(), con los paréntesis.
En este capítulo, Game es una receta para montar una escena. Tú no la ejecutas: se la
das al motor con game({ Game }), y él la ejecuta cuando toca. Fíjate en que ahí va sin
paréntesis: le estás pasando la receta, no el resultado de cocinarla.
Ahora tú
Cambia el '#12102b' por otro color y espera medio segundo: el juego se vuelve a
ejecutar solo. Prueba con 'rebeccapurple', o con '#000'.
Cambia también el 480 y el 320. Eso es el tamaño del juego en píxeles, y el motor dibuja
exactamente esos, así que el lienzo crece o encoge con ellos. Un juego de la época del Mega
Drive medía 320×224; uno de Super Nintendo, 256×224. Prueba los dos y verás lo poco que
cabía en aquellas pantallas.