Blockyard: la terminal de contenedores

Blockyard: objetos de una terminal de contenedores

Un pack de modelos para three.js: los objetos originales del mapa Blockyard de Contrafuego, tal como salen del juego. Contenedores de 20 y 40 pies en ocho colores, un autoelevador, la garita, torres de luz, barreras, cajones, pallets, una bobina de cable, un tanque IBC y más, cada uno con sus texturas PBR, sus calcos y sus rótulos. Con ellos vienen el rifle del jugador y siete superficies (asfalto, hormigón, ladrillo, chapa).

No están rehechos: se exportaron del juego en marcha (ver Origen y permiso).

En la demo: la lista de la izquierda tiene todo lo que trae el pack, en cuatro pestañas (Objetos, Contenedores, Superficies, Todo junto). Elegí uno y lo ves solo, girando: arrastrá para mirarlo, la rueda o dos dedos acercan, y las flechas ↑↓ recorren la lista. Abajo están su tamaño, sus triángulos y la línea de código que lo trae (un clic la copia). En los controles: Caja de colisión dibuja la caja con la que choca en el juego (amarilla) y las cajas finas (celestes), Mojado lo oscurece y abrillanta como bajo la lluvia, y la grilla es de un metro.

El mapa armado con estos objetos es otra pieza: «Blockyard: el mapa, a pie y con rifle» (blockyard-map).

Qué trae

Dos carpetas, y las dos se llevan (fogon pieces add blockyard-props):

Los modelos no viajan con el código: están en public/blockyard/ de esta demo (blockyard.glb, 6 MB, y catalog.json) y el cargador los baja de ahí. Lo demás es la demo (client/main.ts) y una sala vacía.

Los objetos

Los colores de los contenedores: red, blue, green, yellow, orange, white, grey, teal (16 modelos: cada uno con su logo, su matrícula y sus chorreaduras de óxido). Las superficies: asphalt, concrete, concrete_dirty, concrete_painted, brick, floor_epoxy, corrugated_roof.

En total: 32 objetos, 173.398 triángulos, 131 texturas en WebP (1024 px las más grandes) y 102 materiales.

Cómo se usa en un juego

Todo está en metros, con y hacia arriba. Cada objeto sale parado sobre el piso, centrado en x y z, con su lado largo sobre x: se pone con position y se gira con rotation.y.

import { loadProps, piece, slab } from "./blockyard/props";
import { dusk } from "./blockyard/light";

await loadProps();                          // baja blockyard.glb (6 MB) una sola vez
dusk(scene, renderer);                      // cielo, sol, y el entorno: sin él los metales salen negros

const forklift = await piece("forklift");
forklift.position.set(4, 0, -2);
scene.add(forklift);

scene.add(await piece("container40_teal"));
scene.add(slab("brick", 6, 3, 0.3));        // una pared de ladrillo de 6 × 3 m

Cada copia comparte geometría y materiales con las demás: ochenta contenedores ocupan en memoria lo que uno de cada color. Por lo mismo, si cambiás un material cambian todas (clonalo antes si querés uno distinto).

La luz. dusk() alumbra 30 m alrededor del origen; para una escena más grande decile dónde y cuánto: dusk(scene, renderer, { center: [-5, 0], reach: 48 }). Si ya tenés tu propia luz, lo único que hace falta es un scene.environment.

El rifle, colgado de la cámara (apunta a −Z, que es hacia donde mira):

import { rifle } from "./blockyard/props";

const gun = await rifle();
gun.position.set(0.115, -0.125, -0.3);
camera.add(gun);
scene.add(camera);

(La pieza blockyard-map trae el resto: retroceso, fogonazo, trazadora, marcas de impacto y sonido.)

En la sala, para que los objetos frenen a los jugadores y a las balas, sus cajas salen de sizes.ts:

import { propBox } from "../shared/blockyard/sizes";

const boxes = [propBox("forklift", 4, -2), propBox("container40_teal", 0, 0), propBox("container20_red", 0, 0, false, 2.59)];
// cada una: [minX, minY, minZ, maxX, maxY, maxZ]

Servir los modelos desde tu juego (para no depender de esta demo): copiá public/blockyard/ a tu public/ y avisale al cargador una vez, antes de cargar:

await loadProps({ base: "./blockyard/" });

Las cajas de colisión

PROP_SIZE trae la caja que el juego usa para cada objeto: [largo en x, alto, fondo en z], centrada y apoyada en el piso. Casi todas coinciden con el modelo a menos de 6 cm. Las que no:

info(name).colliders trae además las cajas finas del juego (el autoelevador tiene once: chasis, mástil, uñas, techo). En la demo, el control Caja de colisión las dibuja sobre el modelo.

Qué se perdió respecto del juego

Los modelos son los del juego: la misma geometría, los mismos colores por vértice, las mismas texturas. Lo que el juego agrega al dibujar no se puede guardar en un archivo de modelo, y no está:

• La lluvia sobre las superficies. El juego moja cada material según hacia dónde mira la cara (charcos arriba, chorreaduras en las paredes, una franja salpicada contra el piso) y le agrega gotas. setWetness() es un reemplazo parejo: oscurece y abrillanta todo por igual.
• La variación a gran escala: manchas de suciedad que el juego calcula por posición en el mundo, para que dos contenedores iguales no se vean iguales.
• El detalle fino del rifle: desgaste, rayas y gotas, que el juego calcula en su sombreador. Quedan sus colores, su rugosidad y su oscurecido por vértice. Tampoco están la retícula de la mira, ni las manos.
• Las variantes por semilla. En el juego cada objeto sale un poco distinto (otro logo, otra matrícula, otras manchas, otra carga en la estantería). Acá hay uno de cada uno; los contenedores, uno por color.
• Las luces de las torres son, en el juego, luces de verdad con halo; acá el foco brilla (material emisivo) e info(name).lamps dice dónde está cada lámpara y hacia dónde apunta, para ponerle una luz.

Tres ajustes menores: algunas rugosidades que el juego multiplica por más de 1 viajan aparte (el cargador las repone; otro visor de glTF las ve en 1), el tinte de la pintura está cocido en la textura de color (por eso hay una por color) y la munición de latón del cargador del rifle usa las coordenadas de textura de su malla en vez de la proyección del juego.

Origen y permiso

Los modelos, los materiales y el rifle son del juego Saltline (https://claude.ai/artifact/BGY1SztrAYcJQHSsnHHGmp) y están acá con permiso de su autor. No son de dominio público ni tienen una licencia abierta: si querés usarlos fuera de Fogón, o venderlos, preguntale a su autor.

El cargador, la luz, las cajas de colisión como datos, la demo y las herramientas de exportación son nuestros.

Cómo se hizo

Saltline no trae archivos de modelo: construye cada objeto por código al arrancar y fabrica sus texturas en la placa de video. Para tenerlos como archivo hubo que sacarlos del juego andando (las herramientas quedan en tools/, en la carpeta del estudio: no viajan con la pieza publicada):

1. tools/export/export.ts abre el juego en un Chrome sin ventana, le pide cada objeto a su propio constructor, lee cada textura de la placa de video, pasa los materiales a materiales estándar y los guarda con el exportador de glTF de three.js. Sale un .glb crudo de 60 MB.
2. tools/build.ts lo achica con glTF-Transform: une las mallas por material, suelda vértices, pasa las texturas a WebP y comprime la geometría con meshopt. Quedan 6 MB, y catalog.json con la caja y los datos de cada objeto.