Slice & Stitch

📐 Çalışma Akışı

Karakterini animasyonlamak için şu sırayla araçları kullan:

Kısa yol: Elinde zaten hazır poz görselleri varsa (ör. AI ile üretilmiş 200 farklı poz) parçalama / rig'leme yapmadan doğrudan 📖 Flipbook Player'a sürükleyebilirsin — klasik frame-by-frame animasyon.

🚀 Hızlı Başlangıç

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

✅ v0.2'de Eklenenler

• Esnek katman sistemi — Photoshop tarzı N katman, sprite swap (yüz mimikleri için ideal)
• Per-layer mask brush — her katmana ayrı mask, paint/erase, undo, dirty-rect render
• Animasyon timeline — keyframe + per-key easing curves + onion skinning
• Bone animator — 17 bone'un rotation'ları animate edilebilir, keyframe'lere dahil
• Multi-select — Shift+tık ile birden çok katman seç, birlikte taşı
• Drag-drop her yerde — kanvas alanına PNG/JSON sürükle, otomatik route
• Global undo/redo — Ctrl+Z her yerde (transform, layer, keyframe, canvas resize)
• Layer reorder — sağ-tık → Bring to Front / Send to Back (eski sabit sıra kaldırıldı)
• Background image — PNG/WebP arkaplan + Cover/Contain/Stretch fit modu
• Canvas resize — 16:9 / 9:16 / 1:1 preset'leri + manuel W×H
• Mask save/load (PNG Rigger v2) — gzip ile ~5 KB rig dosyası, mask aynen geri gelir
• Mask-driven mesh skinning — pose deformation'da hayalet pikseller temizlendi
• Multi-image batch — 200 görseli tek bone config ile parçalama, ZIP çıktı
• Export — WebM (native), GIF (gif.js), PNG single, PNG sequence (ZIP)

✨ Flipbook Player v0.3'te Eklenenler

v0.1 (initial) → v0.3 (mature) — bu oturumda eklenen özellikler:

• Per-frame transform — X / Y / Scale / Rotation / Flip H / Alpha. Canvas'ta sürükle veya inspector slider'ı.
• 🔒 Lock + ⏱️ Hold (fractional) — Distribute anchor + playback'te snap (geçiş efekti yok). Hold 0.5 = hızlı flash, 3 = animator linger.
• Auto-Distribute (multi-anchor) — Locked frame'ler arasında lerp ile dağıtım. Linear / easeIn / easeOut / easeInOut. V/zigzag hareketler.
• 🛣️ Path overlay — Frame pozisyonlarını birleştiren yörünge çizgisi.
• Smooth Scale/Rotation toggles — Per-pose freeze: scale/rot her poz kendi değerinde sabit kalır (artifact yok).
• 🌄 BG image (PNG/WebP/JPG) + cover/contain/stretch + Match canvas.
• 🎵 Audio tracks — Drag-drop MP3/WAV, per-track volume/mute/start/loop/trim, Master toggle, WebM export'a mix.
• 〰️ Audio waveform on timeline — Her track'in dalga formu timeline'da çizilir (decodeAudioData + 800-bucket peak cache). startTime/trim/mute değişince anında güncellenir; SFX cue'larını gözle eşleştirme.
• 📈 Per-frame easing curves (Bezier editor) — Her frame'in Distribute outgoing curve'ü ayrı (CSS cubic-bezier formatı). Inspector'da mini preview + Edit modal (drag P1/P2 handles, 6 preset: Linear/EaseIn/EaseOut/EaseInOut/Anticipate/Back overshoot, numeric input, multi-select uygulama). Anchor segment başına override; null = global modal easing fallback (geri uyumlu).
• 🌫️ Cross-fade between frames — Opt-in alfa dissolve geçişi (toolbar "Fade" toggle). Adjacent frame aynı interp transform'da, t alfası ile ÜSTÜNE çizilir — source-over kompozit ile tam doluluk (bg ışıma yok, clean blend). Lock'lı frame'lerde otomatik devre dışı (snap korunur). Smooth Scale/Rot ile birlikte cinematic dissolve. Export'a dahil.
• 🎯 Per-frame SFX markers — Frame'e kilitli cue point'ler (yürüyüş, çarpma, kapı sesleri). Audio track'lerden bağımsız: playback'te yeni frame'e geçildiğinde fire eder (scrub'da değil, idempotent — aynı frame'i tekrar tetiklemez). Audio panel'de ayrı "SFX MARKERS" bölümü + her marker için preview/frame#/mute/remove. Timeline'da yeşil dot marker'lar, fire anında parlama animasyonu. Master OFF'ta SFX de susar. ZIP save/load + snapshot + WebM export mix'e dahil.
• 💡 Per-frame lighting override — Her karakter (frame) için ayrı tint: color + strength + blend mode (soft-light / multiply / overlay / screen / source-atop). Sadece karakter alfasında uygulanır (bg etkilenmez) — offscreen canvas + destination-in mask pipeline. 4 preset: 🌅 Warm, ❄️ Cool, 🌙 Night, ✨ Rim. Multi-select destekli. "Aynı sahnede biri sıcak ışıkta, diğeri soğukta" için kritik.
• 🔆 Light source markers (directional shading) — Canvas'a 2D ışık kaynakları yerleştir (click-to-place + drag). Karakter merkezinden ışığa yön vektörü hesaplanır, linear gradient ile "ışığa bakan yüz parlar, arkası nötr kalır" efekti. Multiple lights additive (sıcak + soğuk = renkli sahne). Her marker: color / intensity / radius (linear falloff). Canvas overlay sun icon + halo ring (editor-only, export'a dahil değil). ESC ile placement iptal. Drag ile pozisyon. Browser tool'larında nadir bir özellik — Flipbook'u "sahne kompozit aracı" seviyesine çıkarır.
• 🎚️ Audio fade in/out — Per-track fadeIn / fadeOut (saniye) — track başında 0→volume rampası, sonunda volume→0 rampası. computeFadedVolume trim-aware (effective duration üzerinden), her timeupdate'te volume güncellenir. Hard-cut "pop" sesini yok eder; BGM yumuşak giriş, ambient ses yumuşak çıkış için kritik.
• ⏱️ Sub-frame SFX timing (offsetSec) — SFX trigger modeli "frame transition event" → "time threshold event"e refactor edildi. Marker: frameIdx + offsetSec ile sub-frame precision. Walk cycle'da "ayak yere değmeden hemen önce" gibi anticipation timing, uzun hold'lu frame'de orta vurguda fire, negatif offset ile önceki frame'e taşıma. Timeline marker pozisyonu time-based (totalDur içindeki oran), sub-frame'i doğru gösterir. checkSfxFires(timeSec) tick içinde her marker'ın mutlak zamanına ulaşılıp ulaşılmadığını kontrol eder (idempotent: _sfxFiredIds Set ile per-session tek fire).
• 🌅 Light scene presets — Toolbar'da 4 tek-tık preset: Sunset (sıcak turuncu üst-sol), Rim (beyaz arkadan), Moonlight (soğuk mavi üst-merkez ambient), Studio 3-pt (warm key + cool fill + white rim = 3 ışık). Canvas dimensions'a relatif pozisyon, mevcut ışıkları temizler. "İyi görünen lighting"i tek tıkla — manuel placement gerekmez.
• ⏩ Variable playback speed — 4 chip: ¼× / ½× / 1× / 2× — preview slow-mo veya fast-forward. Tick'te playbackSpeed çarpanı + audio.playbackRate eşleme (pitch değişir). Mid-playback speed değişiminde _playStartTime re-anchor edilir (tBase atlamaz, smooth geçiş). Export'a etki etmez (her zaman 1× sabit).
• 📁 Multi-project gallery (IDB) — Şimdi browser'da birden fazla proje paralel saklanır (her birine UUID). Toolbar → "Gallery" → grid view (thumb + name + frames + age). Tıkla → aç, ✕ → sil. Her autosave kendi projesinin UUID'sini günceller (160px JPEG thumbnail dahil, ~10KB per project). Legacy 'current' key tek-shot atomic migration ile UUID'ye çevrilir. idbListAll metadata-only (blob lazy-load) — büyük projelerde gallery hızlı açılır.
• 🪰 Particle overlay (atmospheric) — Canvas üzerinde "canlılık hissi" katan parçacık sistemi (Wingunity-game'deki firefly'lardan ilham). 4 tip: Fireflies (yellow glow + blink), Spores (yumuşak yukarı drift), Dust (lazy 2D drifting motes), Snow (gravity + sway). Per-particle: position / phase / size / speed / drift; type'a göre motion+blink+glow farklı. Toolbar grup: toggle + type select + count slider (0-120). Ambient RAF idle modda 30fps, playback'te tick zaten render eder. Canvas-native (DOM değil) → WebM export'a dahildir. ZIP save/load + snapshot tüm config'i taşır.
• 💬 Text overlays — 5 stil + animasyonlar + manuel tail — Masal anlatıcı, oyunlaştırma, dialogue için tam paket. Toolbar 5 buton: 💬 Speech / ☁️ Thought / 📢 Title / 📝 Subtitle / ✏️ Caption.
  • ☁️ Thought bubble — Bulutlu kenar (multi-arc cloud shape) + 3 küçük yuvarlak kuyruk küçülerek karaktere doğru. İç monolog için.
  • ✏️ Caption — Küçük italic Georgia serif, drop shadow ile okunur. Sol-üst köşe default. Sinematik notlar ("Bir hafta sonra...", "Sahne 2").
  • 🎯 Manuel bubble tail — Inspector'da tail: auto / down / up / left / right / none. Auto-bind yetmediğinde override. computeTailAnchorFromDirection bubble kenarından tail uzunluğu boyunca anchor noktası hesaplar.
  • ⌨️ Typewriter animation — Per-overlay typewriterMs field. Harf harf reveal: charsToShow = floor(elapsed_ms / typewriterMs), partial substring render. Layout stable kalır (full text wrap önceden hesaplanır, sadece görünen kısım çizilir). Playback'te currentFrameFloat ile smooth — sub-frame precision. Storytelling app için kritik.
  • ↘️ Slide-in animation — slideInFrom: left/right/top/bottom. Fade-in süresince yandan kayarak gelir, max %35 canvas mesafesinden başlar. Slide ve fade aynı anda çalışır (slideProgress = 1-slideMul). Title girişleri için sinematik feel.
  Speech/Thought bubble'ın bg shape'i farklı (rounded rect vs cloud), tail mantığı style-aware (triangle vs 3 dots). Italic font support (Georgia, sans-serif). Drop shadow opsiyonel. Multi-line word-wrap. Frame range + fade + typewriter + slide tümü kombinasyon halinde kullanılabilir.
• ↕️ Resizable timeline track — Timeline'ın üstünde drag handle: ns-resize cursor ile sürükleyerek track yüksekliği 40-220px arasında ayarlanır. Thumb stripindeki frame önizlemeleri daha net görünür (yarım görünme sorunu çözüldü). state.timelineTrackHeight ZIP + snapshot'a kaydedilir, kullanıcının tercihini her oturumda hatırlar. applyTimelineHeight() helper'ı DOM'a uygular + thumb strip'i re-render eder.
• 🖱️ Audio waveform right-click context menu — Timeline'daki audio waveform'a sağ tık → menü: ✂️ Trim start here (sol kısmı kes, startTime + trimStart ayarla) · ✂️ Trim end here (sağ kısmı kes) · ↺ Reset trim (sıfırla) · 📍 Move to current frame (audio'yu mevcut frame'in başına taşı) · ▶ Preview track · 🗑️ Remove track. Tıklanan canvas pozisyonu animasyon zamanına çevrilir, trim ayarı buna göre uygulanır. Off-screen check ile menü ekran kenarından taşmaz. Drag handles (move/trim from edges) ve numeric input'lar paralel UX olarak korunur.
• 🖱️ Audio drag handles on timeline (Canva-style) — Timeline waveform üzerinde doğrudan müdahale: orta drag → tüm track sola/sağa kayar (startTime), sol kenar (~14px) drag → trim-start ayarı, sağ kenar drag → trim-end ayarı. Hover'da cursor zone-aware (grab/ew-resize). Drag sırasında waveform glow + audio panel'deki sayısal input'lar canlı senkron — DOM rebuild edilmez (listener'lar korunur). Pointer events ile mouse + touch unified. Math: dragDeltaPx × (totalDur / stripW) = dragDeltaSec. Constraint'ler: startTime ∈ [0, totalDur], trimStart + trimEnd < duration - 0.1. Numeric input'lar ve drag paralel UX — istenen yöntemle istenildiği gibi kullanılır.
• 💥 Camera Shake (per-frame + SFX-bound) — Iki mod, ikisi de bağımsız: (A) Per-frame trigger: Inspector'da bir frame'e shake config (intensity / duration / freq). Playback o frame'e ulaşınca canvas titrer, decay ile söner. 3 preset (💥 Impact / 🌋 Quake / 🍃 Tremble) + "▶ Test" butonu önizleme için. (B) SFX marker'a bağlı: Her SFX marker'a "💥 Shake on fire" toggle + intensity/duration input. Fire olunca audio + visual senkron — footstep ile mikro titreşim, impact ile büyük shake. Render: ctx.translate(shakeX, shakeY) tüm canvas'a en başta uygulanır, save/restore wrap. Frame transform'ları, motion, lights hiçbir şey bozulmaz. Math: amp * decay² * sin(t*ω), ease-out decay (post-impact yumuşar), elliptical motion (x sin, y cos+phase). Amplitude canvas boyutuna relatif (% 2.5). Lock'a karışmaz. Project ZIP'e + snapshot'a tüm config dahil.
• 🎨 Motion Curve Editor (custom preset builder + global library) — Mevcut 6 builtin'in matematik formülünü veriye sample edip (12 keyframe) düzenlenebilir custom preset yaratan multi-track editor. "Base from: Breath/Walk/.../None" ile template başla, 4 property track'inde (ty / scaleX / scaleY / rotation) keyframe noktalarını çift tık ekle, sürükle taşı, sağ tık sil. Keyframe başına easing curve (linear/easeIn/easeOut/easeInOut/step). Live preview canvas içinde animated rectangle + ground shadow gerçek zaman önizleme. "Save as Custom" → state.customMotionPresets[]'a kaydedilir, toolbar preset listesinde "✨ Custom" optgroup'unda görünür. Frame'lerin frame.motion field'ı custom preset id'sini saklar — builtin'lerle aynı şekilde kullanılır. Builtin'ler dokunulmaz — sadece "base from" ile kopyalanır, orijinaller matematik formül olarak kalır. 📚 Global Motion Library: editor'dan "Export to Library" ile preset'i IndexedDB store'a kaydet → tüm projeler arası paylaşıldı. Library modal: tüm kayıtlı preset'leri listele, "📥 Import" ile mevcut projeye kopyala, "✏️ Edit" ile düzenle, "✕" ile sil. Project-local + global iki katman: ZIP'le proje paylaşırsan ekteki custom preset'ler beraber gider; global library kendi browser'ında yedek.
• 🫁 Ambient motion (6 preset + per-frame override + ground shadow) — Karakteri "yaşıyor" gösteren render-time transform delta sistemi (WingU Karakter v2'deki CSS @keyframes port'u). 6 preset: 🫁 Breath (3.6s nefes, -1% charH lift + scaleX/Y modülasyon), 🚶 Walk (0.6s bob + ±1.2° rotation), 🤸 Happy (0.9s squash → -17% jump → squash), 🤔 Thinking (4.2s sway + ±1.5° rotation), 🪑 Sit (4.8s daha yavaş/küçük nefes), 🪽 Fly (3.6s -17% sustained lift + osc). Karakter-yüksekliğine relatif matematik — sprite ne olursa olsun anatomi-uyumlu (auto-scale). Per-frame override Inspector'da: Auto/Off/preset adı — frame'ler arası farklı motion'lar (idle→happy→walk sequence). Frame transform'a EKLENİR (üzerine yazmaz; manual keyframe'ler korunur). Ground shadow yeni katman: karakter ayaklarının altına radial gradient ellipse, motion'la senkron (zıpladığında küçülür, uçtuğunda uzakta kalır). Ambient RAF particles ile paylaşılır — idle modda 30fps render. Export'a dahil.
• ↶↷ Undo/Redo (Ctrl+Z) — Yığın tabanlı history (max 50), her state değişikliğinde checkpoint.
• 💾 Auto-save IndexedDB — 3sn debounced background save, page reload'da restore prompt.
• 💡 Lighting tint — Warm/Cool/Night presets + manuel color + strength + soft-light/multiply/overlay modes.
• 🌑 Drop shadow — Alpha-aware silüet, canvas-native shadow API.
• 🔁 Loop range markers — Animasyonun sadece bir bölümünü loop'la (yürüme cycle'ı).
• 📐 Grid overlay + crosshair — Boyut + hizalama yardımcısı (16/32/64/128 px).
• 🎞️ Timeline thumbnail strip — Premiere/AE tarzı, her frame için mini thumb (200+ frame için downsample).
• 🔢 Multi-select frames — Shift+click range, Ctrl+click toggle. Bulk transform/lock/hold/delete.
• 📱 Social export presets — IG Square/Story, TikTok 9:16/16:9, YouTube 1080p/Shorts, Twitter — tek tıkla canvas + FPS.
• 📦 .flipbook.zip self-contained save/load — manifest + tüm görseller + audio + ayarlar tek dosyada. Legacy .json da açılır.
• 🎬 Frame range export — Sadece N–M arası WebM/GIF/PNG sequence.
• 🎮 Sprite atlas export — Unity/Phaser/Godot için tek PNG grid + JSON metadata.
• 🖱️ Right-click menü — Duplicate (Ctrl+D) / Reset / Lock / Delete (multi-select destekli).
• Sort options — Natural / Alphabetic / Reverse / Shuffle.
• Lucide ikonlar + custom hover tooltip — İsim + açıklama + kbd badge.

📋 Yapılacaklar (TODO)

📖 Flipbook Player sıradaki olası iyileştirmeler (opsiyonel — bu oturumda 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) — Flipbook şu an tek karakter. 2+ karakter aynı sahnede, ayrı timeline'lar, etkileşim. Mevcut single-character varsayımına dayalı; refactor riski yüksek. Ara çözüm: ayrı projeler + video editör'de compose. ~800-1000 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 / PNG Rigger 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.
• Bone constraints — Dirsek 180°'den fazla bükülemesin gibi sınırlar. Ters bükülmeyi engeller.
• Çoklu animasyon klipi — Bir karakterde "yürü", "zıpla", "üzgün" gibi farklı animasyonları aynı dosyada sakla, oynatma sırasında seç.
• Sprite atlas export — Oyun motorları (Unity, Phaser, Godot) için tek görsel + JSON map.
• (Düşünmeye değer) Inverse Kinematics — Eli istediğin yere koy, dirsek/omuz açıları otomatik hesaplansın.
• (İleride) WebGL render — Şu an Canvas2D; 4K+ canvas'ta veya çok katmanda performans için.
• (İleride) Yüz mimikleri için mesh deformation — Göz kırpma, ağız hareketi (sprite swap basit karakterler için yeterli, mesh detaylı kontrol için).

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 (büyük refactor) — Aynı sahnede 2+ karakter, karşılıklı poz, etkileşim. Mevcut mimari tek-karakter varsayımına dayalı (global loadedModel/keyframes/bones). Yapmak için: karakter listesi panel + aktif karakter switch + per-character keyframe map + per-char position/scale/rotation + save formatı array. ~500-600 satır + yüksek refactor riski (mevcut tek-char akışı tek tek refactor + test). Ara çözüm: ayrı projelerde animate et, WebM'leri video editöründe compose et (kod yok, anında çalışır). ~500-600 satır.

⚠️ Bilinen Sınırlamalar

• PNG Rigger Pose modu (mesh deformation) büyük poz değişikliklerinde görsel bozulabilir. Cutout Animator v2 yolu (sprite swap + parçalı pose) genelde daha iyi sonuç verir.
• Multi-image batch reference görselin aynı boyutunda input bekler. Farklı çözünürlükteki görseller atlanır.
• 3D Rigger v2 — proximity weighting + manuel Joint Edit ile humanoid karakterlerin çoğunda iyi sonuç. Çok atipik silüetlerde (kanatlı, 4-ayaklı) ek manuel düzeltme gerekebilir. Mask brush (texture'a baked artifact'leri gizleme) yapılmadı; mevcut yöntemle çözülemediği için atlandı.
• Tüm araçlar tek HTML dosyası — offline çalışır. CDN bağlantısı sadece GIF (gif.js), PNG sequence (JSZip), rig gzip (pako) için lazım, ilk kullanımda otomatik yüklenir.

🌱 Bu Toolkit Hakkında

Slice & Stitch, kodlama bilmeyen bir kullanıcının Claude AI ile birlikte geliştirdiği prototip araçlardır. v0.1 ilk 5-6 saatte tamamlandı (web chat'te); v0.2 ise Claude Code ile genişletildi — esnek katman sistemi, animasyon timeline, mask brush, bone animator, undo/redo, gzip rig save, multi-image batch ve daha fazlası.

Profesyonel araçların (Spine, DragonBones, Toon Boom, Live2D) tam yerini tutmaz, ama açık kaynak ve ücretsiz olarak benzer bir iş akışı sunar. Amaç bir endüstri devine rakip olmak değil — kendi karakterlerini animasyonlamak ve teknoloji geliştikçe geri dönüp üzerine inşa edebileceğin bir temel kurmak.

Tüm araçlar tek HTML/JavaScript dosyası, herhangi bir tarayıcıda offline çalışır, kurulum gerektirmez. CDN bağlantısı sadece export aşamalarında (GIF/zip/gzip) ilk kullanımda lazımdır.