engine.scope(({ start, cls, rectfill, pset, line, btn, caption, base }) => { const { WallTexture, PosterTexture, PropSprite, Darken, Constants } = base(); const MapSize = 16; const Cell = 1; const MmX = 112; const MmY = 112; const mapSprite = [ 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 8, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 1, 0, 0, 0, 0, 1, 0, 9, 0, 0, 1, 0, 0, 0, 0, 1, 1, 0, 0, 9, 0, 0, 0, 0, 0, 0, 11, 0, 0, 9, 0, 1, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 1, 1, 11, 0, 1, 1, 1, 0, 0, 1, 1, 1, 0, 11, 1, 1, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 0, 9, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 9, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 1, 1, 1, 11, 0, 1, 1, 0, 0, 0, 0, 0, 1, 1, 0, 11, 1, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 1, 1, 0, 9, 0, 0, 0, 0, 0, 9, 0, 0, 0, 0, 0, 9, 1, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, ]; function parseMapSprite(sprite, size) { const map = []; const props = []; const decals = []; let spawnX = 1.5, spawnY = 1.5; for (let y = 0; y < size; y++) { map[y] = []; for (let x = 0; x < size; x++) { const color = sprite[y * size + x]; switch (color) { case 0: map[y][x] = 0; break; case 1: map[y][x] = 1; break; case 8: map[y][x] = 0; spawnX = x + 0.5; spawnY = y + 0.5; break; case 9: map[y][x] = 0; props.push({ x: x + 0.5, y: y + 0.5 }); break; case 11: map[y][x] = 1; decals.push({ mx: x, my: y, side: x === 0 || sprite[y * size + (x - 1)] === 0 ? 0 : 1 }); break; default: map[y][x] = 0; break; } } } return { map, props, decals, spawnX, spawnY }; } const { map: Map, props: Props, decals: Decals, spawnX, spawnY } = parseMapSprite(mapSprite, MapSize); const sprites = { wall: WallTexture, poster: PosterTexture, prop: PropSprite }; const CollisionRadius = 0.3; let px = spawnX; let py = spawnY; let pa = 0; function hasDecal(mx, my, side) { return Decals.some( (d) => d.mx === mx && d.my === my && d.side === side, ); } function collidesWithProp(x, y) { return Props.some( (p) => Math.abs(p.x - x) < CollisionRadius && Math.abs(p.y - y) < CollisionRadius, ); } function update() { if (btn('ArrowLeft')) pa -= Constants.RotSpeed; if (btn('ArrowRight')) pa += Constants.RotSpeed; if (btn('ArrowUp')) { const nx = px + Math.cos(pa) * Constants.MoveSpeed; const ny = py + Math.sin(pa) * Constants.MoveSpeed; if (Map[Math.floor(py)][Math.floor(nx)] === 0 && !collidesWithProp(nx, py)) px = nx; if (Map[Math.floor(ny)][Math.floor(px)] === 0 && !collidesWithProp(px, ny)) py = ny; } if (btn('ArrowDown')) { const nx = px - Math.cos(pa) * Constants.MoveSpeed; const ny = py - Math.sin(pa) * Constants.MoveSpeed; if (Map[Math.floor(py)][Math.floor(nx)] === 0 && !collidesWithProp(nx, py)) px = nx; if (Map[Math.floor(ny)][Math.floor(px)] === 0 && !collidesWithProp(px, ny)) py = ny; } } function draw() { cls(0); rectfill(0, 0, 128, 64, 1); rectfill(0, 64, 128, 128, 5); const dirX = Math.cos(pa); const dirY = Math.sin(pa); const planeX = -dirY * Constants.Fov; const planeY = dirX * Constants.Fov; const zBuffer = new Array(128); for (let x = 0; x < 128; x++) { const cameraX = (2 * x) / 128 - 1; const rdx = dirX + planeX * cameraX; const rdy = dirY + planeY * cameraX; let mx = Math.floor(px); let my = Math.floor(py); const deltaDistX = Math.abs(rdx) < 1e-10 ? 1e30 : Math.abs(1 / rdx); const deltaDistY = Math.abs(rdy) < 1e-10 ? 1e30 : Math.abs(1 / rdy); let stepX, stepY, sideDistX, sideDistY; if (rdx < 0) { stepX = -1; sideDistX = (px - mx) * deltaDistX; } else { stepX = 1; sideDistX = (mx + 1 - px) * deltaDistX; } if (rdy < 0) { stepY = -1; sideDistY = (py - my) * deltaDistY; } else { stepY = 1; sideDistY = (my + 1 - py) * deltaDistY; } let side; while (true) { if (sideDistX < sideDistY) { sideDistX += deltaDistX; mx += stepX; side = 0; } else { sideDistY += deltaDistY; my += stepY; side = 1; } if (Map[my]?.[mx] === 1) break; } const perpDist = side === 0 ? sideDistX - deltaDistX : sideDistY - deltaDistY; zBuffer[x] = perpDist; const stripeH = Math.floor(128 / perpDist); const drawStart = Math.max(0, Math.floor(64 - stripeH / 2)); const drawEnd = Math.min(128, Math.floor(64 + stripeH / 2)); let wallHit; if (side === 0) { wallHit = py + perpDist * rdy; } else { wallHit = px + perpDist * rdx; } wallHit -= Math.floor(wallHit); const tx = Math.floor(wallHit * 8); const texStep = 8 / stripeH; let texPos = (drawStart - 64 + stripeH / 2) * texStep; const decal = hasDecal(mx, my, side); for (let sy = drawStart; sy < drawEnd; sy++) { const ty = Math.min(7, Math.floor(texPos)); texPos += texStep; let color = sprites.wall[ty * 8 + tx]; if (color < 0) continue; if (decal) { const dc = sprites.poster[ty * 8 + tx]; if (dc >= 0) color = dc; } if (perpDist >= 6) { color = Darken[Darken[color]]; } else if (perpDist >= 3) { color = Darken[color]; } if (side === 0) { color = Darken[color]; } pset(x, sy, color); } } const sorted = Props.map((p, i) => ({ i, dist: (p.x - px) * (p.x - px) + (p.y - py) * (p.y - py), })).sort((a, b) => b.dist - a.dist); const invDet = 1 / (planeX * dirY - dirX * planeY); for (const { i } of sorted) { const p = Props[i]; const sx = p.x - px; const sy = p.y - py; const transformX = invDet * (dirY * sx - dirX * sy); const transformY = invDet * (-planeY * sx + planeX * sy); if (transformY <= 0) continue; const screenX = Math.floor((128 / 2) * (1 + transformX / transformY)); const sprH = Math.floor(128 / transformY); const sprW = sprH; const drawStartY = Math.max(0, Math.floor(64 - sprH / 2)); const drawEndY = Math.min(128, Math.floor(64 + sprH / 2)); const drawStartX = Math.max(0, Math.floor(screenX - sprW / 2)); const drawEndX = Math.min(128, Math.floor(screenX + sprW / 2)); for (let stripe = drawStartX; stripe < drawEndX; stripe++) { if (transformY >= zBuffer[stripe]) continue; const tx = Math.min(7, Math.max(0, Math.floor( ((stripe - (screenX - sprW / 2)) * 8) / sprW, ))); for (let y = drawStartY; y < drawEndY; y++) { const ty = Math.min(7, Math.max(0, Math.floor( ((y - (64 - sprH / 2)) * 8) / sprH, ))); let color = sprites.prop[ty * 8 + tx]; if (color < 0) continue; if (transformY >= 6) { color = Darken[Darken[color]]; } else if (transformY >= 3) { color = Darken[color]; } pset(stripe, y, color); } } } for (let y = 0; y < MapSize; y++) { for (let x = 0; x < MapSize; x++) { const color = Map[y][x] === 1 ? 5 : 6; pset(MmX + x, MmY + y, color); } } for (const p of Props) { pset( MmX + Math.floor(p.x), MmY + Math.floor(p.y), 9, ); } rectfill( MmX + Math.floor(px) - 1, MmY + Math.floor(py) - 1, MmX + Math.floor(px) + 1, MmY + Math.floor(py) + 1, 11, ); line( MmX + Math.floor(px), MmY + Math.floor(py), MmX + Math.floor(px + Math.cos(pa) * 3), MmY + Math.floor(py + Math.sin(pa) * 3), 11, ); caption('a bigger level from pixel art', 2, 2, 7); } start({ sprites, sounds: {}, update, draw, target }); });

Editando: PNG Level Design: Designing a Bigger Level

Ediciones recientes

Plugins