Slice & Stitch

Üstteki 2D Çalışma Akışı rehberine göre yolunu seç:

Yol 1 — Flipbook Player (hazır pozlar)

1. Flipbook Player v2'yi aç
2. Hazır poz görsellerini (PNG/WebP) sürükle-bırak — dosya adına göre otomatik sıralanır
3. Frame'leri sürükleyip yeniden sırala; gerekiyorsa per-frame transform (X/Y/Scale/Rotation/Flip/Alpha) + Lock/Hold
4. (İsteğe bağlı) Çok-karakterli sahne: + Add ile karakter ekle → z-order + parent/child + kamera + ses
5. Space ile oynat → WebM / GIF / PNG / Frames / Sprite Atlas export

Yol 2 — PNG Rigger (Pozla, tek T-pose mesh-deform)

1. PNG Rigger v2'yi aç → T-pose görseli sürükle
2. İskelet modunda 17 noktayı yerleştir (Otomatik Sığdır + elle düzelt)
3. (İsteğe bağlı) Boyama modunda taşan pikselleri "Yok Et" ile temizle
4. Pozla moduna geç → kemiği seç, slider'la veya doğrudan sürükleyerek döndür (mesh deforme olur)
5. Bir frame'de poz ver → Keyframe Ekle → başka frame → başka poz → tekrar
6. Oynat → WebM / GIF / Kareler export

Yol 3 — PNG Rigger → Cutout Animator (detaylı cutout)

1. PNG Rigger v2'yi aç — T-pose karakteri sürükleyerek yükle
2. 17 iskelet noktasını otomatik veya elle yerleştir
3. Boyama moduna geç → kafa/gövde kenarlarındaki taşan pikselleri "Yok Et" ile temizle (şeffaf yap)
4. Rig Kaydet → bir sonraki sefer aynı karakteri açtığında mask + iskelet aynen geri yüklenir
5. Parçalara Böl → 10 PNG + 9 yama + meta JSON iner
6. (Opsiyonel) Batch ile aynı bone'larla 200 farklı poz görselini tek seferde parçala (ZIP)
7. Cutout Animator v2'ye geç — meta JSON + tüm PNG'leri canvas'a sürükle (drag-drop)
8. Sol panelden parçayı seç, sağ panelden Transform slider'larını oynat veya canvas'ta sürükle/döndür/scale et
9. Aynı vücut bölgesi için birden fazla varyant ekle (Kafa-Normal, Kafa-Gülen, Kafa-Şaşkın) → frame'lerde visibility toggle ile sprite swap
10. Frame seç → K ile keyframe ekle → başka frame → başka poz → tekrar K
11. Space ile oynat, WebM / GIF / PNG / Frames butonları ile dışa aktar

3D — 3D Rigger v2 (GLB/FBX)

1. 3D Rigger v2'yi aç → GLB/FBX modeli sürükle
2. Pre-rigged ise doğrudan poz ver; rigsizse Auto-Skin (source rig) veya manuel 17-nokta + Bake
3. Kemikleri döndür → Keyframe ekle (veya Mixamo klip yükle) → Oynat
4. Export: WebM / .glb / OBJ (Mixamo) / PNG

📖 Flipbook Player sıradaki olası iyileştirmeler (opsiyonel — bilinçli olarak ertelendi):

• 📜 Alt UI dikey scroll fix — bottom-shell wrapper (max-height: 50vh, overflow-y: auto) eklendi ama kullanıcının ekranında scrollbar görünmüyor. Muhtemel sebep: bottom-shell içeriği toplam yüksekliği zaten 50vh altında kalıyor (scroll trigger olmuyor) veya iç element'lerin pointer-events / display kurgusu shell scroll'unu maskeliyor. Çözüm yönleri: (1) min-content + flex-shrink ile gerçek overflow oluştur, (2) ScrollView pattern: shell'i CSS Grid `auto-rows: minmax(0, max-content)` yap, (3) explicit scrollbar görünür kıl (always show, dikkat çekici renk). ~30 satır.
• 🎞️ Thumb strip ekran-aware downsampling — Frame önizleme thumb'ları timeline-track yüksekliğine göre küçük gösterilmiyor, içerik fazlaysa kesilebiliyor. Çözüm: timelineTrackHeight + frame sayısına göre dinamik thumb size + max-thumbs limit. Veya thumb strip kendi içinde horizontal scroll (timeline width sınırlıysa). ~80 satır.
• 🌍 i18n / dil seçimi (TR ↔ EN) — Tüm UI metinleri şu an Türkçe. Bir strings dict + state.locale ('tr' | 'en') ekleyip toolbar'da dil select'i. Tüm data-tip-name / data-tip-desc / button label'ları / toast mesajları / inspector label'ları çevrilmeli. Hatta dosya isimleri için "auto-detect language" da olabilir. Büyük scope ~400-600 satır (her metin tekrar gözden geçirilir) ama yüksek değer (uluslararası kullanıcılar).
• 💬 Text overlays — kalan ekstra geliştirmeler:
  • 🎨 Rich text spans — Tek text overlay içinde "Önemli bir karar" gibi inline format. Multi-segment color/bold/italic. ~120 satır.
  • 🔊 Typewriter sound — Typewriter animasyonu sırasında her N harf bir tıklama sesi (SFX bağlantısı). Storytelling app için ekstra polish. ~40 satır.
  • ⏱️ Per-character speed curve — Typewriter'da nokta/virgülde dur, "!" sonrası hızlan (doğal okuma ritmi). ~60 satır.
• Continuous ambient camera shake — Mevcut shake per-frame trigger + SFX-bound modlarına ek olarak: "Her zaman hafif titrek" handheld-camera modu. Toolbar global toggle + intensity slider. Found-footage, depremi, panik sahnesi için. ~50 satır (mevcut shake math'inin sürekli versionu).
• Mobil dokunmatik destek — Touch event'leri canvas drag, frame list reorder için. ~100 satır.
• WebGL renderer — 500+ frame veya 4K canvas'ta Canvas2D yavaşlayabilir. WebGL'e port büyük effort ama scalability için. ~600 satır.
• ✅ Multi-character / scene layers (büyük refactor) — TAMAMLANDI v0.4'te. 2+ karakter aynı sahnede, ayrı timeline'lar, parent/child puppet follow, triggered keyframes, shared SFX, sinematik camera follow, onboarding tour, debug HUD. Phase 0-5 sırasında ~3500 satır eklendi. docs/multi-character-design.md'de detay.

🎯 v0.4 Multi-character — sıradaki olası polish/ek özellikler (Phase 6+ kapsamı):

• 👋 Audio track replace — Mevcut: track yüklendikten sonra dosyayı değiştirmek için remove + add gerek. "Replace audio file" butonu (volume/trim/fade ayarlarını koruyarak blob değiştir). ~40 satır.
• 🧹 Project gallery temizlik — Galeri modal'ında "Hepsini sil" + "30 günden eskileri sil" + "Sadece açık olanı tut" butonları. IDB autosave'leri biriken kullanıcı için. Test sırasında bizim IDB de doldu. ~80 satır.
• 🎨 Per-entity lighting tint — Her karakter için lighting override (mevcut frame.lighting entity-level extension). "A sıcak ışıkta, B soğukta aynı sahnede". ~120 satır.
• 🌑 Per-entity drop/ground shadow — Mevcut shadow global; her entity'nin kendi gölgesi (renk/intensity/offset). ~80 satır.
• 🧅 Multi-entity onion skinning — Phase 1'de onion sadece aktif entity için. "Her entity için kendi onion'u" toggle. ~60 satır.
• 🔲 Camera bounds / clamp — Kamera sahne sınırlarını aşmasın (background image boyutuna clamp). Wide pan'da bg kayıp kalmasın. ~40 satır.
• 🎯 Solo entity export — Sahnedeki tek karakterin export'u (visibility tek tıkla solo, diğerleri muted). ~30 satır.
• 📁 2-character starter template — Toolbar'da "+ New 2-char scene" — default 2 entity ile boş proje (yan yana konum, farklı z). Onboarding'in pratik tarafı. ~50 satır.
• 📐 Smart Add Character defaults — Yeni karakter eklendiğinde otomatik kademeli konum (her +Add bir önceki entity'nin sağında, çakışma engellenir). ~25 satır.
• 🎥 Trigger action: set-active-entity — Cross-entity sceneOffset + auto-switch camera target combo. Karakter A frame X'e gelince B aktif olur + kamera B'ye geçer. ~50 satır.
• ♻️ Frame reorder'da SFX/Trigger davranışı — Frame'ler yeniden sıralandığında frameIdx-anchored SFX/Trigger'lar nereye düşer? Şu an index'e takılı kalıyor (içerik takip etmiyor). Frame-id-anchored alternatif değerlendirilebilir. ~doc + test.
• 🚀 Performance audit + bottleneck fix — Debug HUD ile büyük projede (3+ entity, 50+ frame) profiling, render/s + memory + autosave süresi grafikleyip darboğazı bul + optimize et. ~150 satır + ölçüm.
• 🎬 Export multi-entity validation suite — Camera follow + parent/child + triggers'in WebM export'a doğru yansıdığını sistematik test (3-4 senaryo, frame-by-frame doğrulama). ~100 satır test framework.

📖 Flipbook v0.3'ten kalan polish ve gelecek özellikler:

• 📜 Alt UI dikey scroll fix — bottom-shell wrapper (max-height: 50vh, overflow-y: auto) eklendi ama kullanıcının ekranında scrollbar görünmüyor. Muhtemel sebep: bottom-shell içeriği toplam yüksekliği zaten 50vh altında kalıyor (scroll trigger olmuyor) veya iç element'lerin pointer-events / display kurgusu shell scroll'unu maskeliyor. Çözüm yönleri: (1) min-content + flex-shrink ile gerçek overflow oluştur, (2) ScrollView pattern: shell'i CSS Grid `auto-rows: minmax(0, max-content)` yap, (3) explicit scrollbar görünür kıl (always show, dikkat çekici renk). ~30 satır.
• 🎞️ Thumb strip ekran-aware downsampling — Frame önizleme thumb'ları timeline-track yüksekliğine göre küçük gösterilmiyor, içerik fazlaysa kesilebiliyor. Çözüm: timelineTrackHeight + frame sayısına göre dinamik thumb size + max-thumbs limit. Veya thumb strip kendi içinde horizontal scroll (timeline width sınırlıysa). ~80 satır.
• 🌍 i18n / dil seçimi (TR ↔ EN) — Tüm UI metinleri şu an Türkçe. Bir strings dict + state.locale ('tr' | 'en') ekleyip toolbar'da dil select'i. Tüm data-tip-name / data-tip-desc / button label'ları / toast mesajları / inspector label'ları çevrilmeli. Hatta dosya isimleri için "auto-detect language" da olabilir. Büyük scope ~400-600 satır (her metin tekrar gözden geçirilir) ama yüksek değer (uluslararası kullanıcılar).
• 💬 Text overlays — kalan ekstra geliştirmeler:
  • 🎨 Rich text spans — Tek text overlay içinde "Önemli bir karar" gibi inline format. Multi-segment color/bold/italic. ~120 satır.
  • 🔊 Typewriter sound — Typewriter animasyonu sırasında her N harf bir tıklama sesi (SFX bağlantısı). Storytelling app için ekstra polish. ~40 satır.
  • ⏱️ Per-character speed curve — Typewriter'da nokta/virgülde dur, "!" sonrası hızlan (doğal okuma ritmi). ~60 satır.
• Continuous ambient camera shake — Mevcut shake per-frame trigger + SFX-bound modlarına ek olarak: "Her zaman hafif titrek" handheld-camera modu. Toolbar global toggle + intensity slider. Found-footage, depremi, panik sahnesi için. ~50 satır (mevcut shake math'inin sürekli versionu).
• Mobil dokunmatik destek — Touch event'leri canvas drag, frame list reorder için. ~100 satır.
• WebGL renderer — 500+ frame veya 4K canvas'ta Canvas2D yavaşlayabilir. WebGL'e port büyük effort ama scalability için. ~600 satır.

🎬 Video / klip editör genişletmeleri — Flipbook'u bir mini video editöre çevirir:

• Tek video clip layer (hafif) — Audio track gibi tek video katmanı: drag-drop MP4/WebM, startTime + trim + x/y/scale + volume. Flipbook frame'lerin üstüne overlay, export edilir (HTMLVideoElement seek + canvas blit). Kısıtlar: tek track, frame-accurate değil (±1 frame drift), multi-track / copy-paste yok. ~500-700 satır. Senin "video üretirim, bir klibi animasyonun içine ekleyip taşır/kısaltırım" kullanımına uyar.
• Multi-clip on single track — Aynı track'e ardışık birden fazla klip dizilir (drag-arrange). Klip taşı / kısalt (sağ kenardan trim) / kopyala-yapıştır (Ctrl+C/V) / sil. Kliplerin timeline pozisyonu görsel olarak sürüklenir. ~+400-500 satır (yukarıdakinin üstüne).
• Cross-clip transitions — Adjacent kliplerin overlap aralığında cross-fade / wipe / fade-to-black. Per-transition süre seçici. ~+200 satır.
• Full NLE (ayrı tool: Stitch Editor) — Multi-track timeline, picture-in-picture, frame-accurate cut (WebCodecs API), keyframe-level audio automation, color correction primitives. Flipbook scope dışı, ayrı proje. Browser uyumluluğu Chrome/Edge ağırlıklı (WebCodecs Safari kısmi, Firefox deneysel). ~2000-3000+ satır, ayrı uygulama tier'ı. CapCut Web / Clipchamp benzeri.

Cutout Animator v2 — sıradaki olası iyileştirmeler:

• Çoklu animasyon klipi — Bir karakterde "yürü", "zıpla", "üzgün" gibi farklı animasyonları aynı dosyada sakla, oynatma sırasında seç. (Cutout birincil animatör; aynı zamanda PNG Rigger timeline'ında da geçerli.)
• Sprite atlas export — Oyun motorları (Unity, Phaser, Godot) için tek görsel + JSON map. (Not: Flipbook'ta rendered-frame atlas zaten var; Cutout'ta parça + iskelet/keyframe "Spine tarzı" export olarak anlamlı. Statik parça-atlası PNG Rigger'da da yapılabilir.)

PNG Rigger v2 — sıradaki olası iyileştirmeler:

• Aynalama (mirror) — Sol kol animasyonunun sağ kol için otomatik tersi. Yürüme animasyonu için altın değerinde. (PNG Rigger'da L/R isimli iskelet + kemik-açısı keyframe var → aynalama temiz oturur.)
• Bone constraints — Dirsek 180°'den fazla bükülemesin gibi sınırlar. Ters bükülmeyi engeller. (Pozla modunda kemik rotation slider'ına sınır.)
• Inverse Kinematics (düşünmeye değer) — Eli istediğin yere koy, dirsek/omuz açıları otomatik hesaplansın. (Pozla modu kemik-sürükleme tabanlı; IK doğal oturur.)
• Yüz mimikleri için mesh deformation — Göz kırpma, ağız hareketi. (Mesh-deform motoru zaten PNG Rigger'da; basit ihtiyaç Cutout sprite-swap ile karşılanıyor — bu madde detaylı kontrol için.)

Ortak (her iki araç):

• (İleride) WebGL render — Şu an ikisi de Canvas2D; 4K+ canvas'ta veya çok katmanda performans için. (Mesh-deform yaptığı için PNG Rigger en çok faydalanır.)

3D Rigger v2 — atlanan / opsiyonel:

• Mask brush (atlandı) — texture'a baked halo/artifact'ları gizleme. Geometry-tabanlı 5 deneme başarısız oldu; texture-paint apayrı bir sistem (~300 satır) gerektiriyor. Şu anki Joint Edit + Yeniden Bağla + Skeleton Genel Ayar bu ihtiyacı ~%90 kapatıyor, mask brush düşük öncelikte.
• Topology-aware auto-skin retargeting (opsiyonel) — kanatlı / 4-ayaklı / atipik karakterler için. Şu an skeleton bütün halinde transfer ediliyor; hedef mesh'in extremity'lerini tespit edip uygun alt-skeleton seçmek gerekir. Mevcut auto-skin + Joint Edit Wing-tipi karakterleri zaten kapatıyor; bu sadece tek-tük edge case için.
• Otomatik pozlarda hassasiyet — Manuel rigli karakterlerde test pozları (Otur, Zıpla, El Salla) bone local axis convention'a sıkı bağlı; karakterin orientasyonu farklıysa pozlar yana eğilebilir. Modeli Döndür butonları kısa vadeli çözüm; uzun vadede bone-axis auto-detect eklenebilir.
• Poz albümü v1 (opsiyonel) — Şu an Pozu Kaydet/Yükle dosya bazlı (v0). v1: tarayıcı içi IndexedDB albüm + modal grid view (poz adı + thumbnail + tarih + Apply/Delete). Hızlı erişim, organize, paylaşılamaz. ~150-200 satır.
• Poz albümü v2 (opsiyonel) — v1 + albümü JSON dosyası olarak export/import (cihazlar arası taşıma) + etiket sistemi (yürüme / kavga / ifade gruplama). ~250-300 satır.
• Gerçek gölge / shadowMap (opsiyonel) — Mevcut directional light'lar gölge düşürmüyor. Performans maliyeti var (depth materyali + shadowMap render); WebGL renderer'a shadowMap.enabled=true + her ışıkta castShadow + materyalde receiveShadow gerek. Atmosferik kompozisyon için. ~50 satır + perf testi.
• Per-ışık renk seçici (opsiyonel) — Şu an key=beyaz, fill=warm orange sabit. Renk picker ile gün batımı / mavi saat / studio gibi ışık renkleri set edilebilir. UI clutter trade-off'u var. ~30 satır.
• Spot/Point light tipi geçişi (opsiyonel) — Mevcut DirectionalLight'lar (sonsuz uzaklıkta paralel ışınlar). Spot için kone açısı + decay parametreleri eklenmeli, point için sadece pozisyon. Niche kullanım. ~40 satır.
• ✓ Çoklu karakter sahnesi (TAMAMLANDI — Phase 0-4) — Aynı sahnede 2+ karakter, geç giriş (sceneOffsetSec), per-char transform/keyframes/visibility, .rigz v3 save/load + autosave + shell-slot restore akışı. Docs: docs/3d-rigger-multi-character-design.md. Safe rollback: 3d-rigger-pre-multichar tag.
• Manual rig multi-char desteği (opsiyonel — düşük öncelik) — 17-nokta manuel iskelet yerleştirme + bake akışı şu an tek-karakter varsayımına derin bağlı (bonePositions, placementHistory, skeletonRoot, skinnedMesh, isBaked tüm globaller). Multi-char'a evirmek ~8-10 saat + yüksek regresyon riski. Pre-rigged GLB + Auto-Skin çoğu use-case'i kapatıyor, manuel rig dar (~%5) use case. Şimdilik "Manuel rig single-char only" kısıtı var; multi-char istenirse ileride. ~600 satır + yüksek risk.
• Test pozları için animasyon klipi import (B seçeneği) — Şu an Idle/Yürüme statik tek-frame pose preset'leri var. Geliştirme: Mixamo FBX'ten tam animasyon klipini timeline'a keyframes olarak yükleyen "Preset Animasyonlar" menüsü (örn. 24 frame nefes alma loop'u, walk cycle). Mevcut _importAnimationTracks mantığı temel — bunu butona bağlamak + sınırlı bir kütüphane (Idle / Walking / Run / Wave) sunmak ~250 satır. Risk: keyframe'lerin doğru frame rate'te scale'lenmesi, mevcut keyframe'lerin silinme uyarısı, manifest serializasyonu üzerine etki. Orta-yüksek karmaşıklık.
• i18n / Çoklu dil desteği (TR + EN) — Tüm UI text'leri şu anda Türkçe hardcoded. Toplama: ~120 unique string. Tipik yaklaşım: I18N = { tr: {...}, en: {...} } sözlüğü + t('key') helper + sayfa load'da ?lang=en param veya header dropdown. Mevcut tooltip+toast+section başlıklarını refactor. ~300-400 satır + tüm string'lerin TR + EN çiftleri. Düşük risk ama dikkatli iş.