از CatSync تا AnimaSync

01 // بخشاز CatSync تا AnimaSync

چند روزی بود که درگیر ساخت یک انیمیشن دوبعدی ساده بودم.

کار خیلی پیچیده‌ای نبود؛ چند فریم از یک شخصیت داشتم و برای حالت‌های مختلف دهانش فریم‌های جدا طراحی کرده بودم. برای دیالوگ هم از TTS استفاده می‌کردم. چیزی که می‌خواستم این بود که این فریم‌ها با صدای شخصیت هماهنگ شوند، بدون اینکه برای هر دیالوگ مجبور باشم بروم سراغ یک نرم‌افزار کامل انیمیشن یا هر بار از یک سرویس AI برای lip-sync استفاده کنم.

بعد از کلی گشتن و البته کلی حرف‌زدن با ChatGPT، به CatSync رسیدم.

ایده‌اش دقیقاً چیزی بود که می‌خواستم:

Sprite Sheet + Audio → Lip Sync

یک sprite sheet می‌دادی، فایل صوتی را هم اضافه می‌کردی و ابزار فریم‌ها را با صدا هماهنگ می‌کرد.

فقط یک مشکل کوچک داشت که برای من خیلی بزرگ شد.

فریم‌هایی که من طراحی کرده بودم دقیقاً در یک grid منظم قرار نگرفته بودند و slicing پیش‌فرض CatSync با مرز واقعی فریم‌ها یکی نبود. در نتیجه موقع پخش، فریم‌ها کمی جابه‌جا می‌شدند.

راه‌حل موقتی که پیدا کرده بودم واقعاً خنده‌دار بود:

CatSync → InShot → Stabilizer

برای هر دیالوگ خروجی می‌گرفتم، می‌بردم داخل InShot و با Stabilizer تکان فریم‌ها را اصلاح می‌کردم.

یک بار، دو بار... شاید.

ولی وقتی قرار است برای هر دیالوگ این کار را انجام بدهی، دیگر مشکل از workflow است، نه از خروجی.

همان‌جا تصمیم گرفتم به‌جای اینکه هر بار خروجی را تعمیر کنم، خود ابزار را تغییر بدهم.

رفتم سراغ سورس CatSync و دیدم کل برنامه تقریباً در یک فایل HTML جمع شده است.

پس fork کردم.

اولین چیزی که می‌خواستم اضافه کنم، امکان تعیین مستقل محدوده‌ی هر فریم بود؛ یعنی به‌جای اینکه ابزار مجبور باشد همه‌چیز را از روی یک grid منظم حدس بزند، خودم بتوانم مشخص کنم هر فریم دقیقاً از کجا شروع می‌شود و چه ابعادی دارد.

بعد کم‌کم مسئله فقط slicing نبود.

رابط کاربری CatSync برای چیزی که من می‌خواستم کمی فنی و شلوغ بود. قابلیت‌های زیادی وجود داشت، اما برای یک کار ساده، کاربر مجبور می‌شد با تنظیماتی مواجه شود که شاید اصلاً به آن‌ها نیاز نداشته باشد.

بنابراین پروژه کم‌کم از یک fork ساده فاصله گرفت و تبدیل شد به بازطراحی یک workflow:

تصویر را اضافه کن → صدا را اضافه کن → فریم‌ها را تنظیم کن → پیش‌نمایش بگیر → خروجی بگیر.

تنظیمات تخصصی‌تر سر جای خودشان ماندند، اما قرار شد پشت بخش Advanced قرار بگیرند.

رابط فارسی و RTL، طراحی responsive و mobile-first، مدیریت بهتر تنظیمات و reset امن‌تر هم به همین مسیر اضافه شدند.

و در نهایت اسم پروژه از CatSync به AnimaSync تغییر کرد.

برای من جالب بود که یک نیاز خیلی کوچک در یک پروژه‌ی شخصی، تبدیل شد به یک مسئله‌ی واقعی در طراحی یک ابزار:

گاهی بهترین راه‌حل این نیست که خروجی یک سیستم را بیشتر دستکاری کنیم؛ باید یک مرحله عقب‌تر برویم و ببینیم آیا خود سیستم، workflow درستی برای مسئله دارد یا نه.

AnimaSync از همین‌جا شروع شد.