Cómo se hizo Cielo y Acero: Ofensiva
Cielo y Acero: Ofensiva nació como reconstrucción moderna de un prototipo de helicóptero y blindado. Richard Javier (Panamá) pidió un juego mobile-first con mapa de ciudades, diez pilotos, flota desbloqueable y el acabado visual de apps premium. Este artículo documenta decisiones técnicas y de producto —sin revelar secretos de terceros ni copiar assets ajenos.
Del prototipo a Ofensiva
El prototipo original unía dos vehículos a la vez (Céfiro y Yunque) sobre territorios de Santo Domingo. La reconstrucción cambió la regla: un piloto + un vehículo, desbloqueos por nivel, campaña RD → Panamá, y una UI con barra de monedas/vidas/estrellas, banners y modales de victoria/derrota.
Stack: simple a propósito
HTML, CSS y JavaScript planos. Sin framework de juego pesado. Un canvas 2D, WebAudio con GainNode maestro e intervalo mínimo de 40 ms entre SFX, service worker y manifest. El costo de backend es cero: todo el estado va a localStorage con esquema {'{'}v:1, data{'}'}, migración, límites, copia _bak y persistencia en pagehide/visibilitychange.
Bucle y física jugable
Un solo runId de requestAnimationFrame; en pausa se cancela y no se piden frames. Paso fijo 16.67 ms con acumulador y subpasos. Joystick y teclado normalizados (las diagonales no aceleran de más). Colisiones por distancia al cuadrado con break tras el primer impacto. Hitbox de jugador ~10 px. killEnemy() único para disparo y contacto.
Entrada táctil
Pointer Events con pointerId separado para joystick y fuego, setPointerCapture, liberación en pointercancel/blur/visibilitychange. Joystick a la izquierda, botones ≥64 px, touch-action:none, safe-area-inset-bottom. El jugador se reclampa al rotar.
Rendimiento
DPR máximo 2. Terrenos y sprites pre-dibujados en canvas ocultos. Pools de balas y partículas (tope ~200). HUD se actualiza solo cuando cambia el texto o el porcentaje de vida. AudioContext se suspende al ocultar la pestaña.
Arte original
Retratos cartoon 3D de diez pilotos ficticios, sprites cenitales de diez vehículos, enemigos (tanque, búnker, torreta, heli, jefe), tres terrenos tileables y iconos de moneda/corazón/estrella/bomba. Fondos optimizados a WebP; peso total de assets de juego muy por debajo de 6 MB. Sin logos militares u oficiales reales.
Privacidad (Ley 81 de 2019, Panamá)
Preferencias con categorías Técnicas (siempre on), rendimiento y publicidad. Textos propios en español. Anuncios solo en artículos estáticos; el canvas es zona libre de ads. robots.txt permite el sitio y el sitemap apunta a cielo-acero.pages.dev.
SEO
Title y description orientados a búsqueda de shooter gratis en navegador. H1 visible. og:image 1200×630. Cinco guías largas. La experiencia de juego no depende de anuncios para ser jugable.
Qué sigue
Más pulido de sprites, posibles niveles extra y —si Richard lo pide— sincronizar progreso entre aparatos con un backend gratuito. Por ahora, Ofensiva cumple la promesa: instalar, volar, recuperar ciudades, sin descargar una tienda.
¿Hallaste un bug? Escribe a richardesteban@gmail.com con asunto “Cielo y Acero”. Gracias por jugar.
Proceso de arte
Generamos hojas de retratos y vehículos, recortamos con Python/Pillow, aplicamos chroma a magenta y exportamos WebP. Los terrenos se redimensionaron a 512². El icono de app compone un retrato sobre círculo teal con anillo dorado (192 y 512 PNG maskable + apple-touch-icon).
QA con Playwright
Probamos en viewport 390×844: mapa, pilotos, vehículos, misión, modal, privacidad. Cero errores de consola como meta. Capturas en /workspace/shots/cielo2_*.png para revisión humana.
Créditos y límites
Crédito creativo: Richard Javier. Implementación asistida por Grok Bot. Referencias de jugabilidad y UI usadas solo como brújula estilística. Prohibido en el brief: insignias militares reales, copia de assets, publicar sin OK.
Si este making-of te motiva a crear tu propio PWA, empieza pequeño: un canvas, un bucle fijo, un guardado versionado y respeto por el pulgar del jugador. El resto es paciencia y playtests.
Decisiones que dijimos que no
No sincronizamos progreso en la nube en esta versión (añadiría cuentas y costo). No metimos anuncios en el canvas. No usamos emojis rotos ni caracteres fuera de ASCII en IDs de vehículos (el viejo parche del emoji incorrecto se eliminó corrigiendo los datos). No dejamos alert() ni confirm() nativos.
Licencia emocional del proyecto
Es un juego casero con ambición de acabado profesional. Está bien que falle un sprite; no está bien mentir sobre privacidad o copiar el trabajo de otro estudio. Esa línea ética es parte del “cómo se hizo” tanto como el requestAnimationFrame.
Gracias a quienes prueban builds intermedios y mandan capturas. La ofensiva se construye en comunidad pequeña, aparato por aparato.
Checklist de publicación (cuando Richard diga OK)
Token fresco salon-deploy no aplica aquí: el proyecto se llamará cielo-acero en Pages. Verificar title, og:image, sitemap enviado a Search Console, preferencias de privacidad en primer inicio, y una partida completa en iPhone real. Solo entonces se borra el token.