رفتن به محتوا
بازگشت به همه‌ی پروژه‌ها

متن‌باز // Animation

AnimaSync

یک ابزار سبک برای ساخت lip-sync در انیمیشن‌های دوبعدی؛ با تمرکز روی کنترل فریم‌ها و یک workflow ساده برای صدا، پیش‌نمایش و خروجی.

ReactWeb AudioJavaScript
رابط کاربری AnimaSync
بخشی از رابط کاربری و قابلیت‌های AnimaSync.

01 // بخشAnimaSync

AnimaSync یک ابزار سبک و تحت وب برای ساخت lip-sync در انیمیشن‌های دوبعدی است؛ مخصوصاً زمانی که انیمیشن با مجموعه‌ای از فریم‌های تصویری یا sprite sheet ساخته می‌شود.

این پروژه از یک نیاز کاملاً عملی شروع شد: ساخت انیمیشن‌های کوتاه دوبعدی و هماهنگ‌کردن حرکت دهان شخصیت با دیالوگ، بدون نیاز به نرم‌افزارهای سنگین انیمیشن یا سرویس‌های AI که برای هر تغییر کوچک در دیالوگ دوباره هزینه و زمان مصرف می‌کنند.

رابط کاربری دسکتاپ AnimaSync

02 // بخشمسئله

در یک workflow ساده‌ی frame-by-frame، می‌توان چند حالت مختلف از دهان یک شخصیت را به‌صورت فریم‌های جداگانه طراحی کرد و هنگام پخش صدا، بین آن‌ها جابه‌جا شد.

برای این کار ابتدا از CatSync استفاده کردم؛ ابزاری که ایده‌ی اصلی آن ساده است:

Sprite Sheet + Audio → Lip-Synced Animation

اما در عمل یک مشکل وجود داشت: برش پیش‌فرض sprite sheet همیشه با مرز واقعی فریم‌هایی که طراحی کرده بودم منطبق نبود. در نتیجه هنگام پخش، فریم‌ها جابه‌جا می‌شدند و خروجی دقیق نبود.

راه‌حل موقت این بود که خروجی را برای هر دیالوگ وارد یک نرم‌افزار تدوین کنم و با Stabilizer موقعیت فریم‌ها را اصلاح کنم؛ روشی که برای یک workflow تکرارشونده، منطقی نبود.

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

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

AnimaSync به‌عنوان یک fork از CatSync شروع شد، اما هدف آن صرفاً تغییر چند خط از رابط کاربری نیست.

تمرکز پروژه روی ساخت یک workflow ساده‌تر و قابل‌کنترل‌تر برای کاربر است:

  1. تصویر را اضافه کن
  2. فایل صدا را اضافه کن
  3. فریم‌ها را تنظیم کن
  4. پیش‌نمایش را ببین
  5. خروجی بگیر

تنظیمات فنی و قابلیت‌های تخصصی‌تر نیز در بخش Advanced قرار می‌گیرند تا workflow اصلی شلوغ نشود.

04 // بخشقابلیت‌ها

  • پشتیبانی از sprite sheet و فریم‌های متعدد
  • کنترل مستقل محدوده‌ی هر فریم
  • هماهنگ‌سازی فریم‌ها با صدا
  • پیش‌نمایش زنده‌ی انیمیشن
  • تنظیمات پیشرفته‌ی تحلیل صدا
  • کنترل FPS و مدت نمایش فریم‌ها
  • ابزارهای slicing و alignment
  • onion/ghost preview
  • تنظیمات viewport
  • پشتیبانی از حالت Live
  • خروجی PNG و WebM
  • رابط کاربری واکنش‌گرا برای دسکتاپ و موبایل
  • رابط فارسی و راست‌به‌چپ
  • اجرا در مرورگر، بدون نیاز به نرم‌افزار تخصصی انیمیشن

05 // بخشچرا AnimaSync؟

هدف پروژه این نیست که جایگزین یک نرم‌افزار حرفه‌ای انیمیشن باشد.

AnimaSync برای یک مسئله‌ی مشخص طراحی شده است: وقتی فریم‌های آماده‌ی یک شخصیت را دارید و می‌خواهید آن‌ها را با یک فایل صوتی هماهنگ کنید، مسیر انجام کار باید تا حد ممکن کوتاه و قابل‌کنترل باشد.

در طراحی جدید، قابلیت‌های پیچیده حذف نشده‌اند؛ فقط از workflow اصلی جدا شده‌اند. کاربر معمولی می‌تواند بدون درگیرشدن با تنظیمات فنی به خروجی برسد و کاربر حرفه‌ای همچنان به کنترل‌های دقیق دسترسی دارد.

06 // بخشوضعیت پروژه

AnimaSync منتشر شده و به‌صورت Open Source در دسترس است.

این پروژه در ابتدا به‌عنوان fork از CatSync شروع شد و سپس با تمرکز بر workflow ساده‌تر، کنترل دقیق‌تر فریم‌ها و تجربه‌ی کاربری بهتر بازطراحی شد.

توسعه‌ی پروژه ادامه خواهد داشت و قابلیت‌ها و بهبودهای بعدی بر اساس استفاده‌ی واقعی از ابزار اضافه خواهند شد.

07 // بخشتکنولوژی

نسخه‌ی اولیه‌ی CatSync یک ابزار مستقل مرورگری ب

08 // بخشمنبع

AnimaSync یک fork از پروژه‌ی CatSync است و تحت مجوز MIT توسعه داده می‌شود.

نوشته‌های مرتبط
Python
Django
FastAPI
REST API
Async
SQLAlchemy
Telegram Bots
Bale Bots
Scraping
APIs
Workflow Automation
PostgreSQL
SQLite
Redis
Linux
Docker
Nginx
Cloudflare
HTML
CSS
JavaScript
React
Next.js
WordPress
WooCommerce
Git