تنفيذ حركة مشي لشخصية كائن من 4 اتجاهات

بيئة التحقق

نوافذ

• ويندوز ١١

محرر الوحدة

• 2020.3.25f1

حزم نظام الإدخال

• 1.2.0

المتطلبات الأساسية لهذه النصيحة

يتم تكوين الإعدادات التالية مسبقا كشرط أساسي لشرح هذه النصائح.

• تقديم حزمة نظام الإدخال
• محاذاة الكاميرا (2D) مع اللوحة القماشية

الموقع المرجعي

• صنع آر بي جي مع الوحدة الجزء 1 المشي الرسوم المتحركة والتشغيل

إعداد رسومات المشي

بادئ ذي بدء ، يتم تحقيق الرسوم المتحركة للمشي من خلال التبديل المستمر بين صور متعددة لجعلها تبدو وكأنك تمشي. لذلك ، من الضروري إعداد أكبر عدد ممكن من الصور لإظهار اتجاه الحركة والمشي.

من أجل تحقيق أبسط الرسوم المتحركة للمشي ، من الشائع إعداد الصورة التالية. يستخدم هذا النمط أيضا في العديد من ألعاب تقمص الأدوار.

بادئ ذي بدء ، يتم تقسيمه إلى أربعة خطوط أعلى وأسفل ، لكنه يوضح الاتجاه الذي ستواجهه عند المشي. من الأعلى ، هو "أسفل ، يسار ، يمين ، أعلى".

وبالنسبة لليسار واليمين ، ستكون حركة مشي في هذا الاتجاه. التدفق العام هو "وسط ، يسار ، وسط ، يمين ، وسط ...".

حجم خلية واحدة من الحرف المعد هذه المرة هو 32x32px. نظرا لأنه معد لمربعات 3 × 4 ، فإن الحجم الفعلي لملف الصورة هو 96 × 128 بكسل. بالمناسبة ، لا يوجد حد لحجم حرف واحد ، لذلك من الممكن أيضا 32 × 48 بكسل أو 64 × 64 بكسل.

* الصورة المعدة هذه المرة هي Iwamaru-kun ، التي صنعتها منذ وقت طويل. يمكنك استخدامه للتحقق من السلوك.

إنشاء مشروع وإعداد الصور

في العينة التي سننشأها هذه المرة ، سنفترض أنه يمكنك وضع حرف وتحريكه باستخدام مفاتيح المؤشر على لوحة المفاتيح.

الخطوة الأولى هي إنشاء مشروع 2D جديد. أضف صورة الشخصية التي أعددتها لمشروعك.

حدد الصورة التي أضفتها للتو وقم بتكوين الإعدادات التالية في المفتش:

بعد الإعداد ، انقر فوق الزر "تطبيق" في الأسفل.

بعد ذلك ، قم بتقسيم الصورة بحيث يمكنك التبديل بينها في Unity. يوجد زر "محرر الكائنات" في المفتش ، لذا انقر فوقه.

عندما يظهر مربع حوار محرر الكائن ، انقر فوق القائمة المنسدلة "شريحة" ، واضبط "النوع" على "الشبكة حسب حجم الخلية" ، أدخل حجم بكسل 32 (حسب حجم شخصيتك) وانقر فوق الزر شريحة.

بعد ذلك ، سيتم تقسيم الصورة حسب الحجم المحدد. إذا كان الأمر مربكا ، فاضغط على المفتاح Ctrl لرؤية خط فاصل.

بعد التقسيم ، انقر فوق الزر "تطبيق" لإغلاقه.

إذا قمت بالنقر فوق الزر الأيمن للدائرة لملف الصورة في المشروع لتوسيعه ، يمكنك أن ترى أن الصورة مقسمة.

إنشاء بيانات الرسوم المتحركة

قم بإسقاط الصورة التي تم إنشاؤها في القسم السابق في طريقة العرض.

بعد ذلك ، بدلا من إضافة الصورة ، سيتم عرض مربع حوار حفظ. سيؤدي هذا إلى حفظ إعدادات الرسوم المتحركة ، لذلك في الوقت الحالي ، احفظها ك "اسم صورة < >Animation.anim".

سيؤدي هذا إلى إنشاء ملفين في المشروع ، مع تقسيم الصورة في طريقة العرض والصورة اللاحقة في طريقة العرض.

بالمناسبة ، إذا قمت بتشغيل اللعبة في هذه الحالة ، أعتقد أن الشخصية ستتحرك من تلقاء نفسها. هذه هي الحالة التي يتم فيها تبديل 12 صورة وعرضها في أي وقت.

إذا كانت اللعبة قيد التشغيل ، فقم بإنهائها وحدد علامة التبويب الرسوم المتحركة. إذا لم يكن كذلك ، فحدد "نافذة -> رسوم متحركة -> رسوم متحركة" من القائمة.

لقد حددت الكائن الذي قمت بإنشائه من التسلسل الهرمي (في هذه الحالة ، Iwamaru_0).

يوجد بالفعل رسم متحرك تم إنشاؤه تلقائيا ، لكنني لست بحاجة إليه ، لذلك سأحذفه لاحقا. هناك قائمة منسدلة تسمى "IwamaruAnimation" سميتها هذه المرة ، لذا انقر عليها وحدد "إنشاء مقطع جديد".

ثم سيظهر مربع حوار الحفظ. نظرا لأننا سننشئ رسما متحركا للحركة لأسفل ، فسنتركها ك "Iwamaru Down".

حدد "Iwamaru_0" من التسلسل الهرمي وقم بتغيير الرسوم المتحركة إلى "IwamaruDown".

هذه المرة ، سنكرر الرسوم المتحركة في "اليسار ، الوسط ، اليمين ، المتوسط" ، لذلك سنقوم بتعيين عدد العينات على 4. ثم سيتم تقسيم الجدول الزمني على اليمين إلى 4 أجزاء.

قم بإسقاط Iwamaru_0 ، الصورة في الزاوية اليسرى العليا من المشروع ، على 0.0 في المخطط الزمني للرسوم المتحركة.

بعد ذلك ، قم بإسقاط "Iwamaru_1" في الصورة الوسطى أعلاه إلى 0.1 و 0.3.

أخيرا ، قم بإسقاط "Iwamaru_2" في الصورة العلوية اليمنى إلى 0.2.

عند الانتهاء ، انقر فوق زر التشغيل. يمكنك أن ترى أن الشخصية في العرض تمشي وتنعش. (يصعب فهم هذه الصورة النموذجية قليلا ، ولكن ...)

اتبع نفس الخطوات لإنشاء رسوم متحركة لليسار واليمين وأعلى.

يجب أن تبدو النتيجة النهائية مشابهة للصورة أدناه.

تأكد من أن كل اتجاه يتحرك بشكل صحيح.

إعدادات انتقال الحركة

بعد ذلك ، انقر نقرا مزدوجا فوق "Iwamaru_0.controller" من المشروع لفتحه.

ثم سيتم فتح علامة التبويب الرسوم المتحركة وسترى شاشة مثل تلك الموضحة في الشكل. هذا لأن الرسوم المتحركة التي أنشأتها للتو هي ". وحدة التحكم" ملف.

انقر بزر الماوس الأيمن فوق مساحة فارغة وحدد إنشاء حالة -> من شجرة الأصدقاء الجديدة.

سيتم إنشاء "شجرة مزج" جديدة ، انقر بزر الماوس الأيمن عليها وحدد "تعيين الطبقة كحالة افتراضية".

سيلقي الإدخال بعد ذلك نظرة على شجرة المزج. هذا يعني أنه عندما تتحرك الرسوم المتحركة ، ستكون Blend Tree هي أول شيء يتم نقله.

سنقوم بإعداد الرسوم المتحركة في Blend Tree ، لذلك سنحذف جميع الرسوم المتحركة الموجودة.

توجد علامة تبويب "المعلمات" على اليسار ، لذا حددها وأضف "عائم" من الزر +.

نظرا لوجود معلمتين ، يتم تسميتهما "X" و "Y" على التوالي.

قم بالنقر المزدوج على شجرة المزج.

حدد شجرة المزج التي تظهر.

من المفتش ، قم بتغيير نوع المزج إلى 2D Simple Dictional.

اضبط المعلمات على "X" و "Y".

من الزر + في الحركة، حدد إضافة حقل حركة 4 مرات.

قد تكون القيمة الأولية مختلفة ، لكن يجب أن تبدو مثل الشكل.

بالنسبة لعناصر الحركة الأربعة التي أضفناها ، سنقوم بتعيين الرسوم المتحركة العلوية والسفلية واليسرى واليمنى في المشروع.

ثم حدد الاتجاه الذي يجب أن يتحرك فيه كل رسم متحرك.

هذا يكمل إعداد الرسوم المتحركة.

أخيرا ، يمكنك حذف ملف الرسوم المتحركة الذي تم إنشاؤه تلقائيا لأنك لست بحاجة إليه.

مراقبة الحركة

تتم الحركة عن طريق الضغط على مفتاح على لوحة المفاتيح ، حتى تتمكن من إنشاء برنامج نصي للتحكم فيه. هذه المرة ، سيتم إرفاق البرنامج النصي بالشخصية ، لذلك سنتركه ك "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 بعد ذلك ، نقوم بتحريك الكائن بالطريقة .

بمجرد إنشاء البرنامج النصي ، قم بإرفاقه بكائن الحرف.

تنفيذ

هذا يكمل العملية برمتها. حاول تشغيل اللعبة والضغط على مفاتيح المؤشر على لوحة المفاتيح لتحريكها. إذا تحركت الشخصية في الاتجاه الذي ضغطت عليه ، وتحركت الرسوم المتحركة للمشي بينما يغير الرسم اتجاهه إلى الاتجاه الذي تواجهه ، فقد انتهيت.