הטמעת הנפשת הליכה עבור דמות ספרייט 4-way

סביבת אימות

חלונות

• חלונות 11

עורך Unity

• 2020.3.25F1

חבילות מערכת קלט

• 1.2.0

תנאים מוקדמים לטיפ זה

ההגדרות הבאות מוגדרות מראש כתנאי מוקדם להסבר של עצות אלה.

• היכרות עם חבילת מערכת הקלט
• יישור המצלמה (דו-ממדית) עם בד הציור

אתר עיון

• ביצוע RPG עם Unity חלק 1 אנימציה מהלך ותפעול

הכנת גרפיקה להליכה

קודם כל, אנימציה הליכה מושגת על ידי כל הזמן מעבר בין מספר תמונות כדי לגרום לזה להיראות כאילו אתה הולך. לכן, יש צורך להכין תמונות רבות ככל הנדרש כדי להראות את כיוון התנועה וההליכה.

על מנת להשיג את הנפשת ההליכה הפשוטה ביותר, מקובל להכין את התמונה הבאה. דפוס זה משמש גם במשחקי תפקידים רבים.

קודם כל, הוא מחולק לארבעה קווים מעל ומתחת, אבל זה מראה את הכיוון שתפנה כשאתה הולך. מלמעלה, זה "למטה, שמאלה, ימין, למעלה".

ועבור השמאל והימין, זו תהיה תנועת הליכה בכיוון הזה. הזרימה הכללית היא "אמצע, שמאלה, אמצע, ימין, אמצע...".

גודלו של תא אחד של התו שהוכן הפעם הוא 32x32px. מכיוון שהוא מוכן לריבועים בגודל 3x4, הגודל בפועל של קובץ התמונה הוא 96x128px. אגב, אין הגבלה על גודל של תו אחד, ולכן 32x48px או 64x64px אפשרי גם.

* התמונה שהוכנה הפעם היא Iwamaru-kun, שעשיתי לפני זמן רב. באפשרותך להשתמש בו כאימות התנהגות.

יצירת פרויקט והכנת תמונות

במדגם שניצור הפעם, נניח שאתה יכול למקם תו ולהזיז אותו עם מקשי הסמן במקלדת.

הצעד הראשון הוא ליצור פרויקט דו-ממדי חדש. הוסף את תמונת הדמות שהכנתם לפרוייקט.

בחר את התמונה שזה עתה הוספת וקבע את ההגדרות הבאות במפקח:

לאחר ההגדרה, לחץ על כפתור "החל" בתחתית.

לאחר מכן, פצל את התמונה כך שתוכל לעבור ביניהם ב- Unity. יש כפתור "עורך ספרייט" במפקח, אז לחץ עליו.

כאשר תיבת הדו-שיח Sprite Editor מופיעה, לחץ על התפריט הנפתח "פרוסה", הגדר את "סוג" ל "רשת לפי גודל תא", הזינו גודל פיקסל של 32 (בהתאם לגודל הדמות) ולחצו על הלחצן 'פרוסה'.

לאחר מכן, התמונה תפוצל לפי הגודל שצוין. אם הוא מבלבל, הקש על מקש Ctrl כדי לראות קו מפריד.

לאחר הפיצול, לחץ על כפתור "החל" כדי לסגור אותו.

אם תלחץ על הלחצן הימני העיגולי של קובץ התמונה בפרויקט כדי להרחיב אותו, תוכל לראות שהתמונה מחולקת.

יצירת נתוני הנפשה

שחרר את התמונה שנוצרה בסעיף הקודם לתוך התצוגה.

לאחר מכן, במקום להוסיף את התמונה, תוצג תיבת דו-שיח לשמירה. פעולה זו תשמור את הגדרות ההנפשה, כך שלעת עתה, שמור אותה כ"שם התמונה < >Animation.anim".

פעולה זו תיצור שני קבצים בפרוייקט, כאשר התמונה המפוצלת בתצוגה והתמונה המאוחרת יותר בתצוגה.

אגב, אם אתה מפעיל את המשחק במצב הזה, אני חושב שהדמות תנפיש מעצמה. זהו מצב שבו 12 תמונות מוחלפות ומוצגות בכל עת.

אם המשחק פועל, צא ממנו ובחר בכרטיסיה הנפשות. אם לא, בחר "Window -> Animation -> Animation" מהתפריט.

בחרת את האובייקט שיצרת מההירארכיה (במקרה זה, Iwamaru_0).

יש כבר אנימציה שנוצרה באופן אוטומטי, אבל אני לא צריך אותה, אז אני אמחק אותה מאוחר יותר. יש רשימה נפתחת בשם "IwamaruAnimation" שקראתי לה הפעם, אז לחץ עליה ובחר "צור קליפ חדש".

לאחר מכן תופיע תיבת הדו-שיח לשמירה. מכיוון שניצור אנימציה של תנועת דאון, נשאיר אותה כ"איוואמארו דאון".

בחר "Iwamaru_0" מההירארכיה ושנה את ההנפשה ל- "IwamaruDown".

הפעם, נחזור על האנימציה ב"שמאל, באמצע, ימינה, מדיום", ולכן נגדיר את מספר הדגימות ל -4. לאחר מכן ציר הזמן מימין יחולק ל -4 חלקים.

שחרר את Iwamaru_0, התמונה בפינה השמאלית העליונה של הפרויקט, על 0.0 בציר הזמן של ההנפשה.

לאחר מכן, שחרר את "Iwamaru_1" בתמונה האמצעית לעיל ל 0.1 ו 0.3.

לבסוף, שחרר את "Iwamaru_2" בתמונה הימנית העליונה ל- 0.2.

כשתסיים, לחץ על לחצן ההפעלה. אתה יכול לראות שהדמות בתצוגה הולכת ומנפישת. (תמונה לדוגמה זו קצת קשה להבנה, אבל...)

בצע את אותם השלבים כדי ליצור הנפשות שמאליות, ימניות ועליונות.

התוצאה הסופית צריכה להיראות דומה לתמונה למטה.

ודא שכל כיוון מונפש כראוי.

הגדרות מעבר הנפשה

לאחר מכן, לחץ פעמיים על "Iwamaru_0.controller" מהפרויקט כדי לפתוח אותו.

לאחר מכן הכרטיסייה אנימטור תיפתח ותראה מסך כמו זה המוצג באיור. הסיבה לכך היא שהאנימציה שזה עתה יצרת היא ". בקר" קובץ.

לחץ לחיצה ימנית על שטח ריק ובחר צור מצב -> מעץ חברים חדש.

ייווצר "עץ מיזוג" חדש, לחץ עליו באמצעות לחצן העכבר הימני ובחר "קבע שכבה כמצב ברירת מחדל".

לאחר מכן הערך יסתכל על עץ המיזוג. משמעות הדבר היא שכאשר ההנפשה זזה, עץ המיזוג יהיה הדבר הראשון לזוז.

נגדיר הנפשות בעץ המיזוג, כך שנמחק את כל ההנפשות הקיימות.

יש כרטיסייה "פרמטרים" בצד שמאל, אז בחר אותו והוסף "צף" מכפתור +.

מאז ישנם שני פרמטרים, הם נקראים "X" ו "Y" בהתאמה.

לחצו פעמיים על עץ המיזוג.

בחרו בעץ המיזוג שיופיע.

מתוך המפקח, שנה את סוג המיזוג ל- 2D Simple Dictional.

הגדר את הפרמטרים ל- "X" ו- "Y".

בלחצן + בתנועה, בחר הוסף שדה תנועה 4 פעמים.

הערך הראשוני עשוי להיות שונה, אבל זה צריך להיראות כמו הדמות.

עבור ארבעת פריטי התנועה שהוספנו, נגדיר את ה- .anims העליון, התחתון, השמאלי והימני בפרויקט.

לאחר מכן, ציין לאיזה כיוון צריכה כל הנפשה לנוע.

פעולה זו משלימה את הגדרת ההנפשה.

לבסוף, באפשרותך למחוק את קובץ ההנפשה שנוצר באופן אוטומטי מכיוון שאינך זקוק לו.

בקרת תנועה

התנועה נעשית על ידי לחיצה על מקש במקלדת, כך שתוכל ליצור סקריפט כדי לשלוט בו. הפעם, התסריט יהיה מצורף לדמות, אז נשאיר אותו כמו "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 לאחר מכן, אנו מזיזים את האובייקט עם השיטה.

לאחר יצירת הסקריפט, צרף אותו לאובייקט התו.

הוצאה להורג

זה משלים את כל התהליך. נסה להפעיל את המשחק וללחוץ על מקשי הסמן בלוח המקשים כדי להזיז אותו. אם הדמות זזה בכיוון שלחצת עליה, וההנפשה ההולכת זזה בזמן שהגרפיקה משנה כיוון לכיוון שאליו פנית, סיימת.