Article · 01

انیمیشن کاراکتر دوبعدی با Spine: از آماده‌سازی آرت تا اولین Idle

کاراکتر خوب در Spine از همان لایه‌بندی PSD شروع می‌شود، نه از دوپ‌شیت. در این مقاله مسیر کامل از آرت آماده تا یک Idle تمیز و لوپ‌شونده را قدم‌به‌قدم می‌رویم.

داود جنگجو مهر ۱۴۰۵ مطالعه: ۹ دقیقه مبتدی تا متوسط
SpineCharacter Animation2DIdle

اگر برای بازی موبایل کاراکتر دوبعدی می‌سازی، دو راه اصلی داری: انیمیشن فریم‌به‌فریم (اسپرایت‌شیت) یا انیمیشن اسکلتی. Spine یکی از رایج‌ترین ابزارهای راه دوم است و در موتورهایی مثل Unity با ران‌تایم رسمی اجرا می‌شود.

چرا انیمیشن اسکلتی؟

  • حجم کم: به‌جای ده‌ها فریم کامل، یک بار آرت را بارگذاری می‌کنی و حرکت را با داده‌ی استخوان‌ها توصیف می‌کنی.
  • ترکیب‌پذیری: می‌شود راه‌رفتن را با پایین‌تنه و شلیک را با بالاتنه هم‌زمان اجرا کرد (چند Track).
  • اسکین و تغییر ظاهر: لباس، سلاح یا رنگ را بدون ساخت انیمیشن جدید عوض می‌کنی.
  • نرمی حرکت: بین کلیدها درون‌یابی می‌شود و در هر فریم‌ریتی نرم می‌ماند.
نکته

اسکلتی بودن همیشه بهتر نیست. افکت‌هایی مثل آتش، دود و انفجار معمولاً با پارتیکل یا فریم‌به‌فریم بهتر درمی‌آیند و Spine برای کاراکتر و UI قوی‌تر است.

آماده‌سازی آرت

۷۰ درصد کیفیت خروجی، قبل از باز کردن Spine تعیین می‌شود. آرت را طوری لایه‌بندی کن که هر عضوی که جدا حرکت می‌کند، لایه‌ی مستقل داشته باشد.

  1. بدن را به اجزای اصلی بشکن: سر، گردن، تنه، لگن، بازو و ساعد، دست، ران، ساق و پا.
  2. در مفصل‌ها (آرنج، زانو، شانه) همپوشانی بگذار تا موقع چرخش شکاف دیده نشود.
  3. بخش‌های پشت‌نما را کامل بکش. قسمتی که پشت جسم دیگر است هنگام چرخش دیده می‌شود.
  4. برای هر لایه نام قابل فهم بگذار، مثلاً arm_L_upper و arm_R_upper.
  5. آرت را با بزرگ‌ترین اندازه‌ای که در بازی لازم است بساز؛ کوچک کردن در Spine آسان‌تر از بزرگ کردن است.

برای انتقال لایه‌ها از Photoshop به Spine اسکریپت‌های Export وجود دارد که لایه‌ها را به PNG و یک فایل چیدمان تبدیل می‌کنند؛ نسخه‌ی سازگار با نسخه‌ی Spine خودت را از مستندات رسمی بگیر.

ساخت اسکلت (Rig)

در حالت Setup اسکلت را روی تصویر می‌چینی. ساختار پیشنهادی برای یک انسان‌نما:

root
└─ hip
   ├─ spine ─ chest ─ neck ─ head
   │            ├─ arm_L_upper ─ arm_L_lower ─ hand_L
   │            └─ arm_R_upper ─ arm_R_lower ─ hand_R
   ├─ leg_L_upper ─ leg_L_lower ─ foot_L
   └─ leg_R_upper ─ leg_R_lower ─ foot_R
  • root فقط برای جابه‌جایی کل کاراکتر است و معمولاً انیمیت نمی‌شود.
  • hip مرکز حرکت بدن است؛ بیشتر حس وزن از همین استخوان می‌آید.
  • مبدأ هر استخوان را روی مفصل واقعی بگذار، نه وسط تصویر.
  • همه‌ی تصاویر را به استخوان درست وصل کن و ترتیب نمایش (Draw Order) را مرتب کن.

IK و کانسترینت‌ها

برای پا و گاهی دست از IK Constraint استفاده کن. وقتی هدف (مثلاً استخوان کف پا) را حرکت بدهی، زانو خودش خم می‌شود و پا روی زمین می‌ماند. برای راه‌رفتن و دویدن این کار زمان زیادی کم می‌کند.

  • برای حرکت‌های «ضربه‌ای» (مشت‌زدن، پرتاب) اغلب FK (چرخش مستقیم استخوان‌ها) طبیعی‌تر است.
  • Transform Constraint برای کپی کردن بخشی از حرکت یک استخوان روی استخوان دیگر مفید است.
  • اگر نسخه‌ی ۴٫۲ یا بالاتر داری، Physics Constraint برای مو، شنل و دم یک حرکت ثانویه‌ی خودکار می‌دهد.

اولین انیمیشن: Idle

Idle انیمیشنی است که بیشترین زمان روی صفحه دیده می‌شود، پس ارزش وقت گذاشتن دارد. هدف: «زنده بودن» بدون حواس‌پرتی.

گام‌ها

  1. یک انیمیشن جدید بساز و طول آن را مثلاً ۱ تا ۲ ثانیه بگذار.
  2. روی hip یک حرکت خیلی کوچک بالا و پایین کلید بزن (نفس‌کشیدن).
  3. سینه (chest) کمی دیرتر از لگن حرکت کند؛ سر و دست‌ها باز هم کمی دیرتر. این همان Follow Through و Overlapping است.
  4. برای مو یا لباس‌های آویزان، کلیدها را چند فریم عقب‌تر بزن.
  5. فریم اول را کپی کن و دقیقاً در انتهای انیمیشن بچسبان تا لوپ بدون پرش بشود.
  6. در Graph منحنی‌ها را به حالت نرم (Bezier) ببر تا شروع و پایان حرکت آرام باشد (Slow In / Slow Out).
اشتباه رایج

همه‌ی استخوان‌ها را با یک تایمینگ حرکت دادن. وقتی همه هم‌زمان شروع و تمام شوند، کاراکتر شبیه ربات می‌شود. اختلاف چند فریمی بین قسمت‌ها بیشترین تأثیر را دارد.

چک‌لیست قبل از خروجی

  • فریم اول و آخر انیمیشن‌های لوپ یکسان‌اند.
  • هیچ لایه‌ای نام تکراری یا بی‌معنی (مثل Layer 12) ندارد.
  • مفصل‌ها در شدیدترین حالت چرخش شکاف ندارند.
  • Draw Order در همه‌ی انیمیشن‌ها درست است (مثلاً دست جلو و دست عقب).
  • اسکلت با کمترین تعداد استخوان لازم ساخته شده است.

در مقاله‌ی بعد سراغ مش و وزن‌دهی می‌رویم تا قسمت‌هایی مثل شنل، مو و بدن نرم‌تر خم شوند.

پروژه‌ای با Spine یا Unity داری؟

برای انیمیشن کاراکتر، UI و پیاده‌سازی در Unity می‌توانیم با هم صحبت کنیم.

Telegram View Portfolio