← Kit de nivelesObjeto 3Dfogon/nivel-agua
Bloque de agua
Arrastrá para girarlo// «Bloque de agua» · gpt-6-sol (medium)
// A square water tile that tiles seamlessly: a full 48x48 footprint (x 0..47, y 0..47), 8 blocks thick. The lower part (z 0..5) is a solid slab of deep blue water, darker at the bottom, with straight vertical sides, NO stone rim or border so tiles join into one pool. The top 2 layers (z 6..7) are the water surface, a separate part with animated colors: light cyan and sky blue with a few white ripple highlights and small foam spots.
// Solid, borderless water slab with straight sides.
const depth = [
"#124b88", "#145493", "#1862a3",
"#1c70b1", "#217dbc", "#2689c7"
];
for (let z = 0; z <= 5; z++) {
box(0, 0, z, 47, 47, z, depth[z]);
}
// The full-footprint surface is a separate animated part.
part("agua", [24, 24, 7]);
for (let y = 0; y < 48; y++) {
for (let x = 0; x < 48; x++) {
const wave =
Math.sin((x + y * 0.55) * Math.PI / 8) +
0.55 * Math.sin((y - x * 0.3) * Math.PI / 6);
set(x, y, 6, wave > 0.7 ? "#4cc3f5" : "#2a8fd8");
set(x, y, 7, wave > 0.9 ? "#8fe3ff" :
wave < -0.9 ? "#2a8fd8" : "#4cc3f5");
}
}
// Sparse, curved ripple highlights and tiny foam flecks.
const ripples = [[11, 12], [35, 33], [34, 10], [13, 36]];
for (const [cx, cy] of ripples) {
for (let y = cy - 7; y <= cy + 7; y++) {
for (let x = cx - 8; x <= cx + 8; x++) {
if (x < 0 || x > 47 || y < 0 || y > 47) continue;
const dx = (x - cx) / 1.35;
const dy = y - cy;
const d = Math.sqrt(dx * dx + dy * dy);
if (d > 5.1 && d < 6.1 && dx + dy * 0.25 < 3.5) {
set(x, y, 7, "#8fe3ff");
}
if (d > 3.0 && d < 3.8 && dx - dy * 0.2 > 0) {
set(x, y, 7, "#e8fbff");
}
}
}
}
for (const [x, y] of [[8, 9], [10, 8], [38, 31], [36, 34],
[32, 8], [15, 39], [17, 37]]) {
set(x, y, 7, "#e8fbff");
}
animate("agua", {
type: "colors",
palette: ["#e8fbff", "#8fe3ff", "#4cc3f5", "#2a8fd8", "#1d64b0"],
pattern: "wave",
glow: 0.1
});import { draw } from "./assets/voxel";
import { nivelAgua } from "./assets/nivel-agua";
// En cada cuadro: parado sobre (x, y), el centro de su base.
draw(ctx, nivelAgua, x, y, { size: 64, angle: 0, t: performance.now() / 1000 });
// size: lo que mide en px su lado más largo
// angle: giro sobre el piso, en radianes
// t: segundos; si se mueve, se anima solo con eso# En una terminal, en la carpeta del juego
fogon assets add nivel-agua
# Con las herramientas de Fogón (conector)
add_assets({ slug: "<tu-juego>", ids: ["nivel-agua"] })
# Queda en client/assets/nivel-agua.ts
# https://fogon.page/object/nivel-agua