پیاده سازی یک انیمیشن پیاده روی برای یک شخصیت روح 4 طرفه

صفحه به روز شده : 1402 آبان 9, سه‌شنبه

تاریخ ایجاد صفحه : 1401 تیر 16, پنجشنبه

محیط تایید

ویندوز

ویندوز 11

ویرایشگر یونیتی

دانلود: 2020.3.25f1

بسته های سیستم ورودی

1.2.0

پیشنیازهای این نکته

تنظیمات زیر به عنوان پیش نیاز برای توضیح این نکات از قبل پیکربندی شده است.

سایت مرجع

ساخت یک RPG با Unity Part 1 پیاده روی انیمیشن و عملیات

اماده سازی گرافیک راه رفتن

اول از همه، انیمیشن پیاده روی با تغییر مداوم بین چندین تصویر به دست می اید تا به نظر برسد که شما در حال راه رفتن هستید. بنابراین، لازم است تا انجا که لازم است تصاویر را برای نشان دادن جهت حرکت و راه رفتن اماده کنید.

به منظور دستیابی به ساده ترین انیمیشن پیاده روی، اماده سازی تصویر زیر معمول است. این الگو در بسیاری از ار پی جی ها نیز استفاده می شود.

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

و برای چپ و راست، این یک حرکت پیاده روی در این جهت خواهد بود. جریان عمومی "وسط، چپ، وسط، راست، وسط ..." است.

اندازه یک سلول از شخصیت اماده شده این بار 32x32px است. از انجا که برای مربع های 3x4 اماده شده است، اندازه واقعی فایل تصویر 96x128px است. به هر حال، هیچ محدودیتی برای اندازه یک کاراکتر وجود ندارد، بنابراین 32x48px یا 64x64px نیز امکان پذیر است.

* تصویر اماده شده این بار Iwamaru-kun است که من مدت ها پیش ساخته ام. شما می توانید از ان به عنوان یک تایید رفتار استفاده کنید.

ایجاد یک پروژه و اماده سازی تصاویر

در نمونه ای که این بار ایجاد خواهیم کرد، فرض می کنیم که می توانید یک کاراکتر را قرار دهید و ان را با کلیدهای مکان نما روی صفحه کلید حرکت دهید.

اولین قدم این است که یک پروژه 2D جدید ایجاد کنید. تصویر کاراکتری را که برای پروژه خود اماده کرده اید اضافه کنید.

تصویری را که اضافه کرده اید انتخاب کنید و تنظیمات زیر را در بازرس پیکربندی کنید:

نام ایتم ارزش		ملاحظات
نوع بافت	جن
حالت Sprite	جمع
تعداد پیکسل در واحد	32	هنگام قرار دادن در نما ، اندازه را تحت تاثیر قرار می دهد
نوع مش	مستطیل کامل
حالت صافی	نقطه	در صورت لزوم
فشرده سازی	بدون	در صورت لزوم

پس از تنظیم، روی دکمه "Apply" در پایین کلیک کنید.

بعد، تصویر را تقسیم کنید تا بتوانید بین انها در Unity تغییر دهید. یک دکمه "Sprite Editor" در بازرس وجود دارد، بنابراین روی ان کلیک کنید.

هنگامی که گفتگوی Sprite Editor ظاهر می شود، روی کشویی "Slice" کلیک کنید، "Type" را به "Grid By Cell Size" تنظیم کنید. اندازه پیکسل 32 را وارد کنید (بسته به اندازه شخصیت شما) و روی دکمه Slice کلیک کنید.

سپس تصویر با اندازه مشخص شده تقسیم می شود. اگر گیج کننده است، کلید Ctrl را فشار دهید تا یک خط تقسیم را ببینید.

پس از تقسیم، روی دکمه "Apply" کلیک کنید تا ان را ببندید.

اگر روی دکمه سمت راست دایره فایل تصویر در پروژه کلیک کنید تا ان را گسترش دهید، می توانید ببینید که تصویر تقسیم شده است.

ایجاد داده های پویانمایی

تصویر ایجاد شده در بخش قبلی را در نما رها کنید.

سپس، به جای اضافه کردن تصویر، یک گفتگوی ذخیره نمایش داده می شود. این تنظیمات انیمیشن را ذخیره می کند، بنابراین در حال حاضر، ان را به عنوان "نام تصویر < >Animation.anim" ذخیره کنید.

این دو فایل در پروژه ایجاد می کند، با تصویر تقسیم شده در منظره و تصویر بعدی در منظره.

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

اگر بازی در حال اجرا است، ان را ترک کنید و زبانه انیمیشن ها را انتخاب کنید. در غیر این صورت، "Window -> Animation -> Animation" را از منو انتخاب کنید.

شما شیء ای را که از سلسله مراتب ایجاد کرده اید انتخاب کرده اید (در این مورد، Iwamaru_0).

در حال حاضر یک انیمیشن خودکار تولید شده وجود دارد، اما من به ان نیاز ندارم، بنابراین بعدا ان را حذف خواهم کرد. یک کشویی به نام "IwamaruAnimation" وجود دارد که من این بار ان را نامگذاری کردم، بنابراین روی ان کلیک کنید و "Create New Clip" را انتخاب کنید.

سپس Save Dialog ظاهر می شود. از انجا که ما یک انیمیشن از حرکت پایین ایجاد خواهیم کرد، ان را به عنوان "Iwamaru Down" ترک خواهیم کرد.

"Iwamaru_0" را از سلسله مراتب انتخاب کنید و انیمیشن را به "IwamaruDown" تغییر دهد.

این بار انیمیشن را در "چپ، وسط، راست، متوسط" تکرار خواهیم کرد، بنابراین تعداد نمونه ها را به 4 تنظیم خواهیم کرد. سپس جدول زمانی در سمت راست به 4 قسمت تقسیم خواهد شد.

Iwamaru_0، تصویر در گوشه بالا سمت چپ پروژه، بر روی 0.0 در جدول زمانی انیمیشن رها کنید.

بعد، "Iwamaru_1" را در تصویر میانی بالا به 0.1 و 0.3 رها کنید.

در نهایت، "Iwamaru_2" را در تصویر سمت راست بالا به 0.2 رها کنید.

هنگامی که کارتان تمام شد، روی دکمه پخش کلیک کنید. شما می توانید ببینید که شخصیت در نظر راه رفتن و متحرک است. (درک این تصویر نمونه کمی دشوار است، اما ...)

همان مراحل را برای ایجاد انیمیشن های چپ، راست و بالا دنبال کنید.

تنظیم تصویر	نام پرونده پویانمایی
ایوامارودان	Iwamaru_0، Iwamaru_1، Iwamaru_2، Iwamaru_1
ایوامارلفت	Iwamaru_3، Iwamaru_4، Iwamaru_5، Iwamaru_4
IwamaruRight	Iwamaru_6، Iwamaru_7، Iwamaru_8، Iwamaru_7
ایوامارواپ	Iwamaru_9، Iwamaru_10، Iwamaru_11، Iwamaru_10

نتیجه نهایی باید شبیه به تصویر زیر باشد.

اطمینان حاصل کنید که هر مسیر به درستی متحرک می شود.

تنظیمات انتقال پویانمایی

بعد، روی "Iwamaru_0.controller" از پروژه دوبار کلیک کنید تا ان را باز کنید.

سپس تب Animator باز خواهد شد و شما یک صفحه نمایش مانند یک نشان داده شده در شکل را ببینید. این به این دلیل است که انیمیشنی که شما فقط ایجاد کرده اید" است. کنترل کننده" فایل.

روی یک فضای خالی کلیک راست کرده و Create State -> From New Friend Tree را انتخاب کنید.

یک "درخت مخلوط" جدید ایجاد خواهد شد، روی ان کلیک راست کنید و "تنظیم لایه به عنوان حالت پیش فرض" را انتخاب کنید.

سپس ورودی به درخت مخلوط نگاه خواهد کرد. این بدان معنی است که هنگامی که انیمیشن حرکت می کند، Blend Tree اولین چیزی است که حرکت می کند.

ما قصد داریم انیمیشن ها را در Blend Tree راه اندازی کنیم، بنابراین تمام انیمیشن های موجود را حذف خواهیم کرد.

یک برگه "پارامترها" در سمت چپ وجود دارد، بنابراین ان را انتخاب کنید و "Float" را از دکمه + اضافه کنید.

از انجا که دو پارامتر وجود دارد، انها به ترتیب "X" و "Y" نامیده می شوند.

روی Blend Tree دوبار کلیک کنید.

درخت Blend که ظاهر می شود را انتخاب کنید.

از بازرس، نوع ترکیب را به 2D Simple Dictional تغییر دهد.

پارامترها را به "X" و "Y" تنظیم کنید.

از دکمه + در حرکت، Add Motion Field را 4 بار انتخاب کنید.

مقدار اولیه ممکن است متفاوت باشد، اما باید شبیه رقم باشد.

برای چهار مورد Motion که اضافه کردیم، بالا، پایین، چپ و راست .anims را در پروژه تنظیم خواهیم کرد.

سپس مشخص کنید که هر انیمیشن باید در کدام جهت حرکت کند.

جهت	X	Y
تحت	0	-1
بالا	0	1
چپ	-1	0
راست	1	0

این راه اندازی انیمیشن را تکمیل می کند.

در نهایت، می توانید فایل انیمیشن تولید شده به طور خودکار را حذف کنید زیرا به ان نیاز ندارید.

کنترل حرکت

حرکت با فشار دادن یک کلید بر روی صفحه کلید انجام می شود، بنابراین شما می توانید یک اسکریپت برای کنترل ان ایجاد کنید. این بار، فیلمنامه به شخصیت متصل خواهد شد، بنابراین ما ان را به عنوان "CharacterMove" ترک خواهیم کرد.

فیلمنامه به این شکل است:

using UnityEngine;
using UnityEngine.InputSystem;

public class CharacterMove : MonoBehaviour
{
  // あらかじめ Animator コンポーネントを持っておくようにする
  private Animator _animator;

  // 最初のフレーム更新の前に開始が呼び出されます
  void Start()
  {
    // オブジェクトに紐付いている Animator を取得する
    _animator = GetComponent<Animator>();

    // 最初の向き (下) を設定する
    _animator.SetFloat("X", 0);
    _animator.SetFloat("Y", -1);
  }

  /// <summary>一定時間ごとに呼ばれるメソッドです。</summary>
  void FixedUpdate()
  {
    // キーボードの入力方向を取得
    var move = GetMove();

    if (move != Vector2.zero)
    {
      // 入力されている場合はアニメーターに方向を設定
      _animator.SetFloat("X", move.x);
      _animator.SetFloat("Y", move.y);

      // 入力した方向に移動
      transform.Translate(move * 0.2f);
    }
  }

  /// <summary>キーボード入力による移動方向を取得します。</summary>
  /// <returns>キーボード入力による移動方向。</returns>
  private Vector2 GetMove()
  {
    Vector2 move = Vector2.zero;
    if (Keyboard.current.upArrowKey.isPressed)
    {
      move += new Vector2(0, 1);
    }
    if (Keyboard.current.downArrowKey.isPressed)
    {
      move += new Vector2(0, -1);
    }
    if (Keyboard.current.leftArrowKey.isPressed)
    {
      move += new Vector2(-1, 0);
    }
    if (Keyboard.current.rightArrowKey.isPressed)
    {
      move += new Vector2(1, 0);
    }

    // 入力した値がある場合は正規化して返す
    return move == Vector2.zero ? move : move.normalized;
  }
}

در زیر توضیح هر بخش است.

// あらかじめ Animator コンポーネントを持っておくようにする
private Animator _animator;

// 最初のフレーム更新の前に開始が呼び出されます
void Start()
{
  // オブジェクトに紐付いている Animator を取得する
  _animator = GetComponent<Animator>();

  // 最初の向き (下) を設定する
  _animator.SetFloat("X", 0);
  _animator.SetFloat("Y", -1);
}

Start اول، جزء را در روش قرار Animator دهید. Update این در استفاده خواهد شد، بنابراین ان را در پیشبرد.

Animator.SetFloat این روش می تواند یک مقدار برای نام پارامتر مشخص شده تعیین کند. در تنظیمات انیمیشن، ما تعیین می کنیم که انیمیشن با توجه به مقادیر X و Y استفاده شود. اگر جهت پارامترهای X و Y را تعیین کنید، انیمیشن در ان جهت اجرا خواهد شد. در حالت اولیه، ما می خواهیم رو به پایین، بنابراین ما مشخص (X: 0، Y: -1). به هر حال، توجه داشته باشید که نام پارامترها حساس به حروف هستند.

/// <summary>一定時間ごとに呼ばれるメソッドです。</summary>
void FixedUpdate()
{
  // キーボードの入力方向を取得
  var move = GetMove();

  if (move != Vector2.zero)
  {
    // 入力されている場合はアニメーターに方向を設定
    _animator.SetFloat("X", move.x);
    _animator.SetFloat("Y", move.y);

    // 入力した方向に移動
    transform.Translate(move * 0.2f);
  }
}

FixedUpdate در روش، ما به طور دوره ای وضعیت ورودی صفحه کلید را بررسی می کنیم و زمانی که ورودی وجود دارد، ان را پردازش می کنیم.

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

هنگامی که ورودی صفحه کلید وجود دارد، Animator.SetFloat جهت روش را تنظیم کنید. این انیمیشن را در جهتی که حرکت داده اید امکان پذیر می کند. transform.Translate پس از ان، ما جسم را با روش حرکت می دهیم.

هنگامی که اسکریپت را ایجاد کردید، ان را به شیء شخصیت متصل کنید.

اعدام

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

تغییر تصویر روح در حالی که بازی در حال اجرا است

پیاده سازی انیمیشن پیاده روی شخصیت 8 راه sprite