ekomen77/erko-ai-video-engine

Motor de Producción de Videos Animados Erko AI (erko-ai-video-engine)

Este skill proporciona el pipeline completo, probado en batalla, con assets, fuentes, rigs de personajes, un asistente de IA expresivo (Clawd) y un renderizador Headless Chrome + FFmpeg para producir videos explicativos de YouTube en 1080p a 30fps en el estilo explicativo ekomen77.

1. Reglas de Oro (CRÍTICAS — Nunca Violar)

1. CERO Modificación de Cara/Boca del Personaje (%100 Saf Karakter):
   • NUNCA recortes, pegues, parches o dibujes bocas/elipses sintéticas en los sprites del personaje.
   • SIEMPRE usa los PNGs transparentes normalizados y sin tocar en ./resources/pure_poses/pose_01.png hasta pose_13.png.
2. Poses de Personaje Estables y Tranquilas (Sin Cambios Rápidos Mientras Habla):
   • NUNCA cambies las poses del personaje basándote en la amplitud de audio cuadro por cuadro (amp < 0.12), ya que las pausas en las palabras causan un parpadeo frenético del cuerpo de 3–5 Hz.
   • NUNCA apliques una vibración continua de onda sinusoidal al cuerpo del personaje.
   • Mantén 1 pose estable por escena (o, como máximo, 1 transición de pose intencional cuando ocurra un golpe de sello o veredicto importante).
3. Alternar Entre Pizarra de Estudio y Gráficos en Movimiento a Pantalla Completa:
   • Escenas de Estudio (drawStudioBase): Úsalas para introducciones narrativas, transiciones y 1–2 tarjetas concisas dentro de la pizarra de pared (WB = { x: 1044, y: 274, w: 462, h: 294 }). Coloca al personaje en el suelo de madera abierto (footX = 870, footY = 942, scale = 0.85).
   • Diagramas de Papel Crema a Pantalla Completa (drawFullScreenPaperBg): Oculta el fondo del estudio por completo (lienzo de papel #EDE5D8) al mostrar 3+ tarjetas grandes, pilares de arquitectura o diagramas de podio (x = 680..1800).
   • Rejilla Cibernética / Pantalla Oscura a Pantalla Completa (drawFullScreenCyberBg): Oculta el fondo del estudio y renderiza un lienzo oscuro #0E1218 con una rejilla de suelo en perspectiva roja 3D (horizonY = 560) al mostrar volcados hexadecimales, terminales de descompilador o tarjetas de caja negra bloqueadas.
   • Regla de pose_08.png (Caballete "EL PLAN"): Debido a que pose_08.png tiene su propio caballete integrado, SOLO usa pose_08.png en Escenas de Diagrama de Papel a Pantalla Completa (footX = 285, footY = 885, scale = 0.82), nunca frente a la pizarra de pared del estudio.
4. Tipografía Turca y Sistema de Fuentes Maestro:
   • Escenas de Pizarra (Tablero de Pruebas de Investigación): Usa ./resources/fonts/Kalam-Bold.ttf para títulos y llamadas principales; usa ./resources/fonts/PatrickHand-Regular.ttf para viñetas de cuerpo, preguntas y notas. Ambas fuentes tienen soporte nativo verificado al 100% para glifos turcos (İ, ı, Ş, ş, Ğ, ğ, Ç, ç, Ö, ö, Ü, ü).
   • Gráficos en Movimiento a Pantalla Completa y Escenas de Terminal: Usa ./resources/fonts/Montserrat-Black.ttf, ./resources/fonts/SpaceMono-Bold.ttf, ./resources/Fredoka-Bold.ttf y ./resources/JetBrainsMono-Bold.ttf.
   • NUNCA uses ctx.globalAlpha < 1 antes de llamar a drawChunkyText, porque el trazo negro se filtrará a través del relleno semitransparente y volverá las letras grises y turbias. Para atenuar tarjetas de fondo detrás de un sello, dibuja las tarjetas con globalAlpha = 1.0 y luego dibuja un rectángulo de velo semitransparente (rgba(237, 229, 216, 0.42)) sobre las tarjetas antes de dibujar el sello.
5. Siempre Entregar un MP4 Reproducible:
   • El renderizador escribe el .mp4 final en ./out/<prefijo>_1080p.mp4 junto a tus archivos de proyecto.
   • Si se debe colocar una copia adicional en algún lugar conveniente (Escritorio, unidad compartida), establece ERKO_DELIVER_DIR=<carpeta> antes de ejecutar el renderizado; el script copia el MP4 final allí automáticamente.
6. Regla del Compañero de IA Ocasional (Clawd):
   • Clawd (la mascota de caja pintada a mano procedural de ./resources/clawd_assistant.js) es nuestro Agente / Asistente de IA R.E.A. en vivo.
   • NUNCA mantengas a Clawd permanentemente en pantalla — eso crea desorden visual y distrae del narrador.
   • Aparece SOLO para remates, momentos eureka, o asistencias interactivas (1–2 apariciones clave por capítulo, con una duración de 3–8 segundos).
   • Ejemplos de apariciones:
     • Apareciendo en el borde del escritorio/pizarra del estudio con auriculares o una bombilla de idea durante un avance.
     • Apareciendo con un sombrero fedora de detective o casco de ingeniería en una tarjeta a pantalla completa para romper un bloque de código bloqueado (furioso / determinado), luego celebrando con gafas de sol (cool).
7. Reglas Dinámicas de Estudio y Antipasta (Hacer Escenas Impactantes):
   • Zoom Instantáneo de Cámara Dinámica: Las escenas de estudio NO deben permanecer en un zoom fijo y amplio. Ajusta la cámara a 1.15x–1.25x con easeOutBack durante los remates clave, luego vuelve a salir suavemente.
   • Cambios de Iluminación de Estudio Temáticos: Ajusta la ambientación según el estado de ánimo narrativo:
     • Trabajo profundo nocturno (Capítulo 2): Atenúa la luz de la habitación, intensifica los monitores cian/verde brillantes y pulsa las brasas de la chimenea.
     • Momento eureka de avance: Una ráfaga de aura dorada radiante y cálida estalla detrás del personaje.
   • Emotes Procedurales: Usa drawEmote('!', ...) / drawEmote('?', ...) / drawEmote('bulb', ...) / drawEmote('sweat', ...) junto a los personajes para puntuar visualmente los remates del diálogo.
   • Sacudida de Pantalla por Impacto de Sello: Cuando un sello pesado (✔, ❌, ¡BOMBA!) o un zumbador de error golpean, aplica 3–5 cuadros de sutil sacudida de cámara (x += sin(t*40)*4, y += cos(t*40)*4).
   • Transiciones Dibujadas a Mano: Usa drawBrushWipe(ctx, progress) o drawIris(ctx, progress) entre los límites de escenas principales para un flujo narrativo sin fisuras.
8. Ilustraciones Personalizadas de IA (Uso Escaso + Referencias Exactas de Personajes + Preanuncio):
   • Columna Vertebral Central Sigue Siendo Estudio + Diagramas de Lienzo: NO conviertas el video en una presentación de diapositivas de imágenes de IA. Mantén el 85–90% de cada capítulo como nuestras clásicas Tarjetas/Terminales de Pizarra de Estudio + Gráficos en Movimiento a Pantalla Completa.
   • Solo Genera Ilustraciones Personalizadas Cuando Sea Realmente Necesario: Como máximo 1 ilustración personalizada por capítulo para una metáfora visual concreta (por ejemplo, cámara de pruebas, cofre de RPG, tribunal histórico).
   • Coincidencia Estricta de Referencia: Siempre que generes una imagen a través de image-generator, pasa SIEMPRE las imágenes de referencia exactas para Pickle (textura verde oliva apagada, sudadera con capucha negra extragrande, piernas delgadas de palo) y Clawd (caja rectangular terracota 10x6, 4 patas de clavija rechonchas, 2 brazos muñón, contorno de tinta negra).
   • Anunciar Plan Visual Antes de Renderizar: Antes de renderizar un nuevo capítulo, informa brevemente al usuario el plan visual escena por escena y si se utilizará alguna ilustración personalizada.
9. Alineación Estricta Pie-Sombra y Sin Superposición de Accesorios Laterales:
   • Las 13 poses del personaje (pose_01..13.png) están estandarizadas a 700x780 con CHAR_CENTER_X = 350 y FOOT_BASELINE_Y = 741 (margen transparente inferior de 39px).
   • Nunca uses un sprite de accesorio lateral sin recortar (como el antiguo caballete pose_08 de 1050x780) donde un accesorio incorporado quede atrapado detrás de las tarjetas del diagrama o desplace al personaje lejos de la sombra del suelo. pose_08.png tiene el caballete eliminado y Pickle centrado en x = 350.
   • En drawCharacter, dibuja siempre el sprite en y = footY - ih + 29 * scale + breathY para que las plantas de los pies del personaje se asienten directamente dentro de la elipse de sombra de contacto (footY - 10).
10. El Asistente Clawd Debe Pararse Siempre en una Superficie Sólida (Nunca Flotar):
    • Nunca coloques a Clawd en el aire o flotando frente a muebles/monitores.
    • En Escenas de Estudio, coloca a Clawd firmemente parado en las tablas de madera del suelo abierto justo al lado de Pickle (x = 685, y = 938), con su nítida sombra de contacto directamente debajo de sus 4 patas.
    • En Escenas de Diagrama a Pantalla Completa, pasa podium: true a drawClawd(...) (o colócalo sobre una superficie de suelo/podio sólida) para que se pare sobre un pequeño podio de madera a juego con una sombra de contacto clara.
11. Recorte de Polígono de Pizarra de Estudio Nativa (Sin Parche #FAF6EE Flotante):
    • Nunca dibujes un ctx.fillRect(WB.x, WB.y, WB.w, WB.h) opaco sobre studio_background_1080p.jpg, porque el marco metálico superior de la pizarra de fondo tiene una sutil pendiente de perspectiva y un rectángulo opaco crea una costura de parche/pegatina visible sobre el marco.
    • Siempre recorta al polígono interior exacto de 4 esquinas de la pizarra ((1034, 294) -> (1510, 279) -> (1510, 580) -> (1034, 580)), dibuja directamente sobre la superficie natural de la pizarra del fondo del estudio y rota el contenido de la pizarra en -0.024 rad (-1.4°) alrededor de (WB.cx, WB.cy) para que los encabezados y las tarjetas se alineen naturalmente con el ángulo del tablero físico.
12. Superposición de Interfaz de Usuario de Suscripción de YouTube Auténtica a Pantalla Completa para Llamada a la Acción:
    • Nunca ocultes las llamadas a la acción importantes para el espectador (Abone Ol, Bildirimleri Aç, Beğen) dentro de la pequeña pizarra de fondo del estudio.
    • Renderiza una Superposición de Interfaz de Usuario de Página de Visualización y Suscripción de YouTube Auténtica prominente y centrada (drawYouTubeSubscribeOverlay), completa con una vista previa del viewport de video en vivo, una barra de desplazamiento roja de YouTube, un avatar de canal y un cursor de mouse animado haciendo clic en ▶ ABONE OL ➔ ✔ ABONE OLUNDU y 🔔 TÜMÜ AÇIK! con una explosión de confeti/ondulación.
13. Regla Obligatoria de Gancho/Reclamo Provocador de los Primeros 15 Segundos (Uzun Videolar ve Shorts İçin Ortak Zorunluluk):
    • Format Bağımsızlığı: Bu kural hem tam uzunluktaki YouTube videolarında (Chapter 1 / Giriş) hem de YouTube Shorts / Reels videolarında İSTİSNASIZ zorunludur. Uzun video diye yavaş, sıkıcı veya teorik giriş yapılmaz.
    • Nunca comiences con una exposición pasiva de documental/académico (por ejemplo, "Bugün sizlere X mimarisini anlatacağım..." veya "Yazılım dünyasında yeni bir gelişme var..." kesinlikle yasaktır).
    • Her videonun ilk 15 saniyesi (Uzun videoda Bölüm 1'in ilk saniyeleri, Shorts'ta giriş) izleyicinin ezberini bozan, bir yalanı çürüten veya dev bir iddia ortaya atan 3 adımlı yapıdan oluşur:
      • 0.0s – 5.0s (Şok İddia / The Shock Claim): Yerleşik bir yanılgıyı yüzlerine vur ("Yazılım şirketlerinin 'kırılamaz' dediği kapalı kutu programlar koca bir yalan!" / "ChatGPT'nin seni anladığını sanıyorsan fena halde kandırılıyorsun!").
      • 5.0s – 10.0s (İddiayı & Meydan Okumayı Yükselt / High Stakes): İddiayı cesur bir benzetmeyle zirveye çıkar ("İddia ediyorum: Bir ekibin 5 yılda gizlediği sistemi, tek bir yapay zeka ajanı 10 dakikada deşifre edebilir!" / "Karşındaki bir zeka değil, tarihin en büyük şans çarkı!").
      • 10.0s – 15.0s (İspat Kapısı / The Proof Gate): İzleyiciyi videonun kalanını izlemeye mecbur bırak ("İnanmıyor musun? Arkadaki sihri ve büyük illüzyonu adım adım ispatlıyorum, iyi izleyin!").
14. Fórmula Oficial de Pizarra de Estudio: Tablero de Pruebas de Investigación (Dedektif Panosu + Clawd):
    • Sin Tarjetas de Dibujos Animados Baratos o Círculos Curiosos: Nunca dibujes cajas web redondeadas voluminosas o círculos rojos arbitrarios alrededor de las palabras (desordenan el tablero, se ven amateur y parecen plantillas genéricas de IA).
    • Lavado de Rotulador Neón de Punta de Cincel: Las palabras clave principales tienen una banda de resaltador fluorescente semitransparente dibujada detrás del texto (rgba(253, 224, 71, 0.65) amarillo neón, rgba(74, 222, 128, 0.5) verde menta, rgba(251, 146, 60, 0.45) naranja).
    • Tarjeta de Evidencia / Polaroid Pegada (drawPolaroid): Adjunta una tarjeta Polaroid de aspecto físico con cinta adhesiva semitransparente (rgba(180, 175, 165, 0.85)) en la parte superior, mostrando la metáfora visual concreta (ruleta de casino, dado 3D, arquitectura de chip, fragmento de descompilador).
    • Sello de Goma de Tinta Angulado (drawRubberStamp): Para desacreditar mitos o confirmar hechos, estampa directamente sobre la afirmación en -8° a -12° con tinta roja de doble borde envejecido ([ ÇÜRÜTÜLDÜ ], [ KANITLANDI ], [ İLLÜZYON ], [ HACKLENDİ ]).
    • Nota Post-It Amarilla Pegada (drawPostIt): Fijada o pegada con cinta adhesiva transparente en el lateral para fórmulas, porcentajes y reglas.
    • Clawd en el Borde de la Pizarra: Clawd se sienta firmemente en el marco/bandeja de madera debajo de la pizarra (x = 1045, y = 642, scale = 6), usando su sombrero fedora de detective marrón con una bombilla de idea 💡 o un emote de reacción, integrando perfectamente al dúo en el momento de enseñanza.
15. Antipatrones Estrictos y Prevención de Fallos (Önceki Hataları Asla Tekrarlamama Kuralları):
    • Cero "Síndrome de Pegatina" / Composición de Personaje Desconectada (YASAK: Havada Asılı / Yapıştırma Karakterler): Karakter etkileşime girdiği nesneye fiziksel olarak temas etmeli, oda ışığına (loş, sıcak şömine, siber) bürünmeli, temassız yapıştırma gibi durmamalıdır.
    • Cero Maquetas HTML/CSS Baratas (YASAK: Web Div'leri ve Emojilerle Sahte İllüstrasyon Yapmak): Asla sahte emojili 🍎 🍒 777 web kutuları üretilmez. Gerçekçi açılı GitHub/terminal kartları veya organik tebeşir diyagramları çizilir.
    • Cero Desorden Visual / Regla de Respiración (Görsel Dağınıklık Yasağı): Bir sahneye 4–5 farklı karmaşık öğe tıkıştırılmaz. Sahne tek bir güçlü analoji etrafında ferah ve odaklı olmalıdır.
    • Textura de Material Orgánico sobre Vectores Estériles (Dijital Jilet Çizgi Yasağı): Dümdüz steril cetvel çizgileri yasaktır. Çizgiler tebeşir tanecikli, hafif dalgalı ve köşeleri hafif taşmalıdır (overshoot).
16. Arquetipo Oficial de Escena a Pantalla Completa: Pizarra de Pizarra Oscura + Tarjeta de Evidencia Inclinada:
    • Zemin: Koyu arduvaz kara tahta slate dokusu (#20201F / #282725 organik tanecikli mat doku, hafif silgi tozu izleri ve kenar vinyeti).
    • Sol Taraf (Kanıt Kartı / Polaroid Artifact): $-5.5^ extdegree$ sola eğik (transform: rotate(-5.5deg)), kalın fildişi fotoğraf kenarlığı (#f2eee5), derin yumuşak gölge, gerçek kod veya terminal içeriği.
    • Sağ Taraf (Organik Tebeşir Mimari Ağacı): Üst girdi kutusu $ ightarrow$ Orta işlem kutusu $ ightarrow$ Alt dağılım kutuları.
17. Dirección Visual y Tipográfica Oficial: "Doğal Tebeşir & Sıcak Amber" (Stil 2 - Kullanıcı Onaylı Ana Standart):
    • Tipografi Hiyerarşisi:
      • Başlıklar, Büyük İddialar, Mühürler: ./resources/fonts/Kalam-Bold.ttf
      • Gövde Metni, Alt Başlıklar, Açıklamalar: ./resources/fonts/PatrickHand-Regular.ttf
      • Kod, Terminal, Teknik Etiketler: ./resources/fonts/SpaceMono-Bold.ttf veya ./resources/JetBrainsMono-Bold.ttf
      • Büyük Vurgular, Afiş Başlıkları: ./resources/fonts/Montserrat-Black.ttf veya ./resources/Fredoka-Bold.ttf
    • Renk Paleti (Ana & Vurgular):
      • Arka Plan / Kağıt: #EDE5D8 (Sıcak krem, doğal kağıt tonu)
      • Pano / Kara Tahta: #20201F (Koyu arduvaz)
      • Ana Yazı / Tebeşir: #2C2B26 (Yumuşak koyu kahve/siyah, saf siyah değil)
      • Vurgu Sarısı (Fosforlu Kalem): #FDE047 (Canlı neon sarısı)
      • Vurgu Yeşili (Onay / Devam): #4ADE80 (Canlı yeşil)
      • Vurgu Turuncusu (Uyarı / Dikkat): #FB923C (Sıcak turuncu)
      • Vurgu Kırmızısı (Hata / İptal / Mühür): #EF4444 (Tavşan kanı kırmızısı)
      • Siber / Terminal Arka Planı: #0E1218 (Koyu lacivert-siyah)
      • Siber Yeşil Metin: #22C55E (Matrix yeşili)
      • Amber Sıcak Işık / Altın: #FBBF24 (Sıcak amber, şömine ışığı)

2. Pipeline: Cómo el Sistema Produce un Video

El motor sigue este pipeline de alto nivel:

1. Interpretación del Guión: El agente de IA analiza el guión del usuario (en turco) y lo divide en escenas lógicas.
2. Planificación de la Escena: Para cada escena, el agente determina:
   • ¿Es una escena de Estudio (pizarra de fondo, personaje en el suelo) o Pantalla Completa (fondo de papel o cibernético)?
   • ¿Qué pose del personaje usar? (Mantener estable durante toda la escena).
   • ¿Qué tarjetas/elementos dibujar? (Tarjetas de pizarra, tarjetas Polaroid, sellos, diagramas).
   • ¿Aparece Clawd? (Solo para remates, 1-2 veces por capítulo).
   • ¿Qué efectos dinámicos se activan? (Zoom, cambio de luz, emotes, sacudida).
3. Renderizado de la Escena: Para cada escena, se genera un archivo HTML (o un fotograma) usando el motor de renderizado JavaScript del skill.
4. Sincronización de Audio y SFX: El locutor y los efectos de sonido se combinan con los fotogramas renderizados.
5. Ensamblaje Final: FFmpeg combina todos los fotogramas y pistas de audio en un archivo .mp4 final (1920x1080, 30fps) ubicado en ./out/.

Nota: El archivo original está truncado; la traducción cubre el contenido proporcionado.