Kit de inicio: escena básica

Kit de inicio: escena básica

El Starter Kit Basic Scene de Kenney, que está hecho para Godot, pasado a three.js y TypeScript. El original no es un juego: es una escena ya armada, con la luz, las sombras y los colores puestos a punto para que unos modelos low-poly se vean bien desde el primer minuto. Esto es lo mismo: una función que le pone ese «set-up» a cualquier escena de three.js, y las 22 piezas de Mini Arena con su cargador.

En la demo: «La escena del kit» es la del original, con sus seis piezas y su cámara; «Las 22 piezas» las muestra todas con el nombre con que se piden, y deja elegir qué hace el soldado (tiene 32 animaciones). Arrastrá para girar, la rueda acerca y el botón derecho mueve; en el teléfono, un dedo gira y dos acercan y mueven. La casilla prende y apaga la sombra en los rincones.

Es solo la página. No hay sala ni red, ni nada que se juegue: es un punto de partida.

Qué trae

client/scene es lo que se lleva.

Lo demás es la demo: client/main.ts tiene la cámara en órbita, las etiquetas y los botones.

Cómo se usa en un juego

fogon pieces add starter-scene

Eso trae client/scene (solo código) y agrega three.js al package.json. Los modelos no viajan con el juego: se cargan desde la demo publicada de esta pieza (https://play.fogon.page/starter-scene/mini-arena/).

import * as THREE from "three";
import { loadMiniArena } from "./scene/mini-arena";
import { SAMPLE, build, placeCamera } from "./scene/sample";
import { addSetup } from "./scene/setup";

const renderer = new THREE.WebGLRenderer({ canvas, antialias: true });
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(40, innerWidth / innerHeight, 0.1, 600);

const setup = addSetup(renderer, scene); // luces, sombras, piso, fondo y curva de tonos
placeCamera(camera);                     // donde la pone el kit: 6 m atrás, mirando a (0, 0,45, 0)

const arena = await loadMiniArena();
scene.add(build(arena, SAMPLE));         // la escena del kit…

const column = arena.piece("column");    // …o las piezas una por una
column.position.set(3, 0, 0);
scene.add(column);

const soldier = arena.soldier();         // un soldado, quieto y respirando
soldier.object.position.set(0, 0, 2);
scene.add(soldier.object);
soldier.play("walk");                    // o "sprint", "jump", "attack-melee-right", "emote-yes", "die"…

let last = performance.now();
renderer.setAnimationLoop(() => {
  const now = performance.now();
  soldier.update((now - last) / 1000);
  last = now;
  setup.update(camera);                  // el fondo sigue a la cámara
  renderer.render(scene, camera);
});

El «set-up» en tu escena. addSetup sirve con cualquier modelo, no solo con estos. Todo se puede cambiar:

import { addOcclusion, addSetup, godotColor } from "./scene/setup";

const setup = addSetup(renderer, scene, {
  background: godotColor(0.66, 0.69, 0.76), // o false, para dejar tu propio cielo
  sunFrom: [0.41, 0.77, -0.49],             // desde dónde alumbra el sol
  sunEnergy: 1,
  shadowOpacity: 0.95,                      // 1: sombras negras; menos: dejan pasar algo de sol
  shadowReach: 8,                           // metros con sombra alrededor del foco
  ambientEnergy: 1.15,
  floor: { size: 100 },                     // o false, si tu mapa trae su piso
});
setup.focus(player.position);               // en un mapa grande: las sombras siguen al jugador

Los números son los de Godot: una luz de energía 1 es una luz de energía 1 del editor, y los colores se escriben como en sus archivos (godotColor). Así se puede copiar el ambiente de cualquier otro proyecto de Godot.

La sombra en los rincones es aparte, porque cuesta (en la demo, en el teléfono arranca apagada):

const occlusion = addOcclusion(renderer, scene, camera);
occlusion.setSize(innerWidth, innerHeight); // y de nuevo cuando cambie el tamaño
// en cada cuadro, en lugar de renderer.render:
occlusion.render();

Las piezas. Están en metros, con +Y para arriba, apoyadas en y = 0 y pensadas para una grilla de 1 m: los pisos, los bloques y las escaleras miden 1 × 1 m; las paredes, 1 m de largo y 1 m de alto.

loadMiniArena({ only: ["column", "tree"] }) baja solo esas (y piecesOf(SAMPLE), de sample.ts, dice cuáles usa una lista). Para servir los archivos vos, copiá la carpeta public/mini-arena de este proyecto a tu public/ (son 600 KB) y pasá { base: "./mini-arena/" }.

Qué quedó distinto del original

• Se agregó la cámara en órbita (en el kit está fija) y la vista de las 22 piezas (el kit las trae en una carpeta, sin mostrarlas).
• La sombra en los rincones es la de three.js (GTAO), no el SSAO de Godot: oscurece lo mismo, con otro dibujo.
• El piso del kit es una caja sin material, que Godot pinta de gris con un poco de brillo; acá es un plano mate del mismo gris.
• El sol, las sombras, la luz ambiente, el fondo y la curva de tonos son los mismos: comparada con la captura del kit, la demo da los mismos colores (el piso, igual; las sombras y los modelos, a dos o tres puntos de 255).

Límites

• Son modelos quietos: no hay choques. Para chocar, usá arena.bounds(nombre) (una caja por pieza) o armá tus formas.
• La baldosa floor es un plano en y = 0, igual que el piso de addSetup: si usás los dos, levantá las baldosas unos milímetros o pasá floor: false.
• La espada tiene su origen en la empuñadura (para ponerla en una mano), no en el suelo.
• Si cambiás el material de una copia cambian todas: cloná el material primero para un color propio.
• La curva de tonos se pone en el lugar del «tone mapping a medida» de three.js, que es uno solo por página.
• Las sombras son un solo mapa (2048 px) alrededor de un punto: en un mapa grande hay que moverlo con setup.focus.
• server/room.ts y shared.ts están vacíos, solo porque todo proyecto de Fogón los lleva.

Créditos y licencias

• De Kenney (kenney.nl): la escena y su ambiente (el repositorio original, con licencia MIT: está en LICENSE-kenney.md) y los modelos de Mini Arena de public/mini-arena, en dominio público (CC0: su licencia está ahí mismo, en License.txt).
• Nuestro: el pase a three.js y TypeScript (todo client/), también MIT.