📖 Tutorial — Chivo-8

🚀 Para empezar

Todo pasa en una sola página, el Estudio (estudio.html), con 6 pestañas que comparten el mismo cartucho en memoria — pintás un sprite en la pestaña Sprites y ya aparece disponible en Mapa y en el código, sin recargar nada.

• 🐐 Inicio (index.html) — bienvenida con 3 caminos: jugar, crear de cero, o seguir donde quedaste.
• 🖥 Estudio (estudio.html) — donde se crea: Juego / Sprites / Mapa / Efectos / Música / Código.
• 🗂️ Cartuchos (cartuchos.html) — galería para jugar lo que guardaste (o el Demo de ejemplo).

Un cartucho es todo lo que hiciste (sprites, mapa, sonidos, música, código) guardado con un nombre. Vive en localStorage del navegador, y también se puede exportar/importar como archivo .json para pasarlo a otra máquina.

Autoguardado: el Estudio guarda tu sesión sola (sin nombre, aparte de tus cartuchos guardados) al salir de la pestaña. "🖥 Seguir en el Estudio" retoma exactamente donde quedaste — sprites, mapa, sonido, música y código — y la pestaña Juego corre tu propio código, no el Demo. "🎨 Crear un juego nuevo" sigue siendo un lienzo en blanco de verdad.

🎨 Sprites listo

Hoja de 256 sprites (16×16, de 8×8 px cada uno), con vista ampliada para pintar pixel por pixel.

• Paleta de 16 colores, en grilla compacta 4×4 al costado del canvas (solo visible en Sprites/Mapa — es una herramienta de pintar, no de jugar).
• Herramientas: lápiz, borrador, balde de relleno, selector de color (cuentagotas).
• Selección múltiple 1×/2×/4× — pintás sprites grandes de una vez.
• Copiar/Pegar un bloque completo de sprites entre posiciones.
• Flags por sprite (fget/fset, como TIC-80) — para marcar por ejemplo "esto es sólido" y leerlo desde el código del cartucho.
• Deshacer, tamaño de pincel que cicla, y grilla que se puede activar/desactivar.
• Previsualizar animación: armá una secuencia (hasta 8 sprites, ej. parado→saltando→en el aire) tocando casilleros, y verla en loop con control de velocidad — para probar el diseño sin escribir código. No se guarda en el cartucho, es solo para probar (a diferencia de Aseprite/Resprite, no tiene capas ni onion-skinning — eso queda para esas herramientas).
• Exportar como GIF (🎬): descarga la secuencia armada como un archivo .gif animado de verdad — para compartirla afuera de Chivo-8 (redes, chat, etc.), no solo para probar el diseño acá adentro.

📖 Mapa listo

Tilemap de 32×16 celdas (256×128 px — el doble de ancho que la pantalla), armado arrastrando los sprites de la hoja a una grilla.

• Pintar celda por celda con el sprite seleccionado.
• Bote de relleno (flood-fill) para rellenar áreas grandes de un tirón.
• mget(cx,cy)/mset(cx,cy,n) y map(...) disponibles desde el código del cartucho, igual que en PICO-8/TIC-80.

🔊 Efectos listo

Synth propio con Web Audio API (sin samples, todo generado): ondas cuadrada, triángulo, sierra y senoidal.

• Grilla visual de 16 pasos × tono — tocás una celda y ahí queda la nota.
• Parámetros por paso (igual que Música, tipo TIC-80): bajo la grilla, cada paso tiene volumen, octava (±2) y comando (·/M/m/5/V/S: acorde, vibrato, slide). Un láser con slide, un pickup con acorde, etc.
• Piano y header como en Música — teclado real y barra SFX/ONDA/FILAS.
• sfx(n) desde el código, con speed opcional.

🎵 Música listo

Mismo sistema que Efectos, pero para patrones que suenan en music(n) — y la parte que más se pulió esta ronda, revisando el tracker real de TIC-80.

• 5 patrones, cada uno con su propia onda.
• Parámetros POR PASO (como la columna COMMAND de TIC-80): bajo la grilla, cada paso tiene 3 tiras — volumen, octava (±2, tocá arriba/abajo) y comando (tocá para ciclar: · nada, M mayor, m menor, 5 quinta, V vibrato, S slide). Así podés poner vibrato solo en una nota, un acorde en otra y subir una octava en la tercera — no todo el patrón igual.
• Canción (track()): 3 canales en paralelo de 8 frames cada uno — melodía en un canal, bajo en otro, sonando JUNTOS, como una banda.
• Velocidad 0.5×–2× por patrón.
• Piano — tocá Z S X D C V G B H N J M , L . ; en tu teclado físico, O el piano dibujado en pantalla (clickeable, sirve en celular) para escuchar una nota antes de pintarla — mismo layout que el piano de edición de TIC-80.
• Header + grilla de frames tipo tracker — PATRÓN/ONDA/VEL/FILAS arriba, y la "Canción" como una tabla FRM × canal, igual que TIC-80.
• Volumen/mute por canal y cursor en vivo que marca el paso que está sonando.

💻 Código listo

El cartucho se programa en Lua (vía Fengari, un intérprete de Lua en JS) o en JavaScript directo, a elección.

• Misma API para ambos lenguajes: cls, pset, spr, map, btn, sfx, music, fget/fset, etc.
• Editor con resaltado básico y Tab que indenta en vez de saltar de foco.
• El código se guarda dentro del cartucho, junto con sprites/mapa/sonido.

🗂️ Cartuchos listo

• Guardar/Cargar por nombre, en localStorage.
• Exportar/Importar como archivo .json, para compartir o respaldar un cartucho fuera del navegador.
• Galería (cartuchos.html): miniatura, nombre, ▶ jugar, 🗑️ borrar — una vista a la vez (jugar oculta la galería, ✕ vuelve a mostrarla).
• Datos del cartucho (pestaña Juego, sección plegable "✍️"): autor, descripción, sitio, licencia, versión — como la cabecera de comentarios de TIC-80 (-- title/author/desc/...). Opcional; el autor se ve en la galería.
• Exportar assets sueltos: además del cartucho completo, cada pestaña (Sprites, Mapa, Efectos, Música) tiene su propio "📤 Exportar/Importar" para llevar solo ESE sprite/mapa/sfx/patrón a otro cartucho — no hace falta exportar todo.
• Controles táctiles (D-pad + 2 botones) que aparecen solos en pantallas táctiles.
• ⚙️ Config de controles (pestaña Juego): forzar Siempre/Nunca mostrar los controles táctiles (por si un dispositivo mixto no detecta bien), y modo zurdo (espeja D-pad y Z/X). Es del DISPOSITIVO, no del cartucho — aplica igual en Cartuchos.

🛠️ Qué se puede mejorar

Ideas reales, no todas para ahora — algunas son pulido chico, otras son features grandes.

Música idea

• Copiar/pegar un patrón completo (como ya existe para sprites).
• Instrumento (SFX) por paso, como la columna SFX del tracker de TIC-80 — hoy la onda es del patrón entero.
• Parámetros X/Y en el comando (ej. profundidad del vibrato, ticks del slide), como las columnas X Y de TIC-80.

Editor idea

• Deshacer también en Mapa/Efectos/Música (hoy solo Sprites lo tiene).
• Crear los íconos de la interfaz con el propio editor de sprites, para que Chivo-8 se dibuje a sí mismo (idea mencionada, no empezada).

Plataforma pendiente, a propósito

• El diseño ya recibió una pasada para móvil: barra de pestañas pegajosa (te sigue al bajar), objetivos táctiles más grandes, y feedback al tocar. Falta la prueba en un celular real con dedo de verdad en los editores.
• Empaquetar como app Android (Capacitor) — mencionado como posible "Fase 10" en el roadmap, sin arrancar todavía.

Formato de cartucho decisión ya tomada

• Se evaluó copiar el formato binario .tic de TIC-80 y se descartó: JSON es más simple de depurar y no hay ninguna ventaja real de tamaño para lo que hace Chivo-8 hoy. Sí se adoptaron ideas puntuales de ahí, como fget/fset.