ใช้ภาพเคลื่อนไหวเดินสําหรับตัวละครสไปรท์ 4 ทาง

สภาพแวดล้อมการตรวจสอบ

หน้าต่าง

• หน้าต่าง 11

บรรณาธิการ Unity

• ปี 2020.3.25f1

แพ็คเกจระบบอินพุต

• 1.2.0

ข้อกําหนดเบื้องต้นสําหรับเคล็ดลับนี้

การตั้งค่าต่อไปนี้ถูกกําหนดค่าไว้ล่วงหน้าเป็นข้อกําหนดเบื้องต้นสําหรับคําอธิบายของเคล็ดลับเหล่านี้

• ขอแนะนําแพ็คเกจระบบอินพุต
• จัดตําแหน่งกล้อง (2D) ให้ตรงกับผืนผ้าใบ

เว็บไซต์อ้างอิง

• สร้าง RPG ด้วย Unity Part 1 Walking Animation and Operation

การเตรียมกราฟิกการเดิน

ก่อนอื่นภาพเคลื่อนไหวการเดินทําได้โดยการสลับไปมาระหว่างภาพหลายภาพอย่างต่อเนื่องเพื่อให้ดูเหมือนว่าคุณกําลังเดิน ดังนั้นจึงจําเป็นต้องเตรียมภาพให้มากที่สุดเท่าที่จําเป็นเพื่อแสดงทิศทางการเคลื่อนไหวและการเดิน

เพื่อให้ได้ภาพเคลื่อนไหวการเดินที่ง่ายที่สุดเป็นเรื่องปกติที่จะเตรียมภาพต่อไปนี้ รูปแบบนี้ยังใช้ในเกม RPG หลายเกม

ก่อนอื่นมันแบ่งออกเป็นสี่บรรทัดด้านบนและด้านล่าง แต่มันแสดงทิศทางที่คุณจะเผชิญเมื่อคุณเดิน จากด้านบนคือ "ลงซ้ายขวาขึ้น"

และสําหรับซ้ายและขวามันจะเป็นการเคลื่อนไหวเดินไปในทิศทางนั้น การไหลทั่วไปคือ "กลาง, ซ้าย, กลาง, ขวา, กลาง..."

ขนาดของหนึ่งเซลล์ของอักขระที่เตรียมไว้คราวนี้คือ 32x32px เนื่องจากเตรียมไว้สําหรับสี่เหลี่ยม 3x4 ขนาดจริงของไฟล์ภาพคือ 96x128px อย่างไรก็ตามไม่มีการ จํากัด ขนาดของอักขระหนึ่งตัวดังนั้นจึงเป็นไปได้ 32x48px หรือ 64x64px

* ภาพที่เตรียมไว้คราวนี้คือ Iwamaru-kun ซึ่งฉันทํามานานแล้ว คุณสามารถใช้เป็นการตรวจสอบพฤติกรรมได้

สร้างโปรเจ็กต์และเตรียมรูปภาพ

ในตัวอย่างที่เราจะสร้างในครั้งนี้เราจะสมมติว่าคุณสามารถวางอักขระและย้ายด้วยปุ่มเคอร์เซอร์บนแป้นพิมพ์

ขั้นตอนแรกคือการสร้างโครงการ 2 มิติใหม่ เพิ่มภาพตัวละครที่คุณเตรียมไว้สําหรับโครงการของคุณ

เลือกรูปภาพที่คุณเพิ่งเพิ่มและกําหนดการตั้งค่าต่อไปนี้ในตัวตรวจสอบ:

หลังจากตั้งค่าแล้วให้คลิกปุ่ม "ใช้" ที่ด้านล่าง

จากนั้นแยกภาพเพื่อให้คุณสามารถสลับไปมาระหว่างภาพเหล่านั้นใน Unity มีปุ่ม "Sprite Editor" ในตัวตรวจสอบดังนั้นคลิก

เมื่อกล่องโต้ตอบ Sprite Editor ปรากฏขึ้นให้คลิกเมนูแบบเลื่อนลง "Slice" ตั้งค่า "Type" เป็น "Grid By Cell Size" ป้อนขนาดพิกเซล 32 (ขึ้นอยู่กับขนาดของอักขระของคุณ) แล้วคลิกปุ่ม สไลซ์

จากนั้นภาพจะถูกแบ่งตามขนาดที่ระบุ ถ้าเกิดความสับสน ให้กดแป้น Ctrl เพื่อดูเส้นแบ่ง

หลังจากแยกแล้วให้คลิกปุ่ม "ใช้" เพื่อปิด

หากคุณคลิกปุ่มวงกลมขวาของไฟล์ภาพในโครงการเพื่อขยายคุณจะเห็นว่าภาพถูกแบ่งออก

การสร้างข้อมูลภาพเคลื่อนไหว

วางรูปภาพที่สร้างในส่วนก่อนหน้าลงในมุมมอง

จากนั้นแทนที่จะเพิ่มรูปภาพกล่องโต้ตอบบันทึกจะปรากฏขึ้น การดําเนินการนี้จะบันทึกการตั้งค่าภาพเคลื่อนไหวดังนั้นในขณะนี้ให้บันทึกเป็น "ชื่อภาพ< >Animation.anim"

สิ่งนี้จะสร้างไฟล์สองไฟล์ในโครงการโดยมีภาพแยกในมุมมองและภาพต่อมาในมุมมอง

อย่างไรก็ตามหากคุณเรียกใช้เกมในสถานะนี้ฉันคิดว่าตัวละครจะเคลื่อนไหวด้วยตัวเอง นี่คือสถานะที่ภาพ 12 ภาพถูกสลับและแสดงได้ตลอดเวลา

หากเกมกําลังทํางานอยู่ ให้ออกจากเกมแล้วเลือกแท็บ ภาพเคลื่อนไหว หากไม่มีให้เลือก "Window -> Animation -> Animation" จากเมนู

คุณได้เลือกวัตถุที่คุณสร้างจากลําดับชั้น (ในกรณีนี้คือ 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" จากโครงการเพื่อเปิด

จากนั้นแท็บ Animator จะเปิดขึ้นและคุณจะเห็นหน้าจอเหมือนที่แสดงในรูป นี่เป็นเพราะภาพเคลื่อนไหวที่คุณเพิ่งสร้างขึ้นคือ " ตัวควบคุม" ไฟล์

คลิกขวาที่พื้นที่ว่างแล้วเลือก Create State -> From New Friend Tree

"Blend Tree" ใหม่จะถูกสร้างขึ้นคลิกขวาที่มันและเลือก "Set Layer as Default State"

รายการจะดูที่ Blend Tree ซึ่งหมายความว่าเมื่อภาพเคลื่อนไหวเคลื่อนไหว Blend Tree จะเป็นสิ่งแรกที่ต้องเคลื่อนไหว

เราจะตั้งค่าภาพเคลื่อนไหวใน Blend Tree ดังนั้นเราจะลบภาพเคลื่อนไหวที่มีอยู่ทั้งหมด

มีแท็บ "พารามิเตอร์" ทางด้านซ้ายดังนั้นเลือกและเพิ่ม "ลอย" จากปุ่ม +

เนื่องจากมีสองพารามิเตอร์จึงมีชื่อว่า "X" และ "Y" ตามลําดับ

ดับเบิลคลิกที่ Blend Tree

เลือก Blend Tree ที่ปรากฏขึ้น

จากสารวัตรให้เปลี่ยนประเภทการผสมเป็น 2D Simple Dictional

ตั้งค่าพารามิเตอร์เป็น "X" และ "Y"

จากปุ่ม + ใน Motion ให้เลือก Add Motion Field 4 ครั้ง

ค่าเริ่มต้นอาจแตกต่างกัน แต่ควรมีลักษณะเหมือนตัวเลข

สําหรับรายการ Motion สี่รายการที่เราเพิ่มเราจะตั้งค่า. 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 หลังจากนั้นเรากําลังเคลื่อนย้ายวัตถุด้วยวิธีการ

เมื่อคุณสร้างสคริปต์แล้ว ให้แนบสคริปต์นั้นไปกับวัตถุอักขระ

การประหารชีวิต

การดําเนินการนี้ทําให้กระบวนการทั้งหมดเสร็จสมบูรณ์ ลองเรียกใช้เกมและกดปุ่มเคอร์เซอร์บนแป้นพิมพ์เพื่อย้าย หากตัวละครเคลื่อนที่ไปในทิศทางที่คุณกดและภาพเคลื่อนไหวการเดินจะเคลื่อนที่ในขณะที่กราฟิกเปลี่ยนทิศทางไปยังทิศทางที่คุณกําลังเผชิญอยู่คุณก็ทําเสร็จแล้ว