4-तरफा स्प्राइट चरित्र के लिए एक चलने वाला एनीमेशन लागू करें

सत्यापन वातावरण

विंडोज़

• विंडोज 11

एकता संपादक

• 2020.3.25f1

इनपुट सिस्टम पैकेज़

• 1.2.0

इस टिप के लिए आवश्यक शर्तें

निम्न सेटिंग्स इन युक्तियों के स्पष्टीकरण के लिए एक शर्त के रूप में पूर्व-कॉन्फ़िगर हैं।

• इनपुट सिस्टम पैकेज ़ का परिचय
• कैनवास के साथ कैमरा (2 डी) संरेखित करें

संदर्भ साइट

• एकता भाग 1 चलने एनीमेशन और ऑपरेशन के साथ एक आरपीजी बनाना

चलने वाले ग्राफिक्स की तैयारी

सबसे पहले, चलने वाले एनीमेशन को कई छवियों के बीच लगातार स्विच करके प्राप्त किया जाता है ताकि ऐसा लगे कि आप चल रहे हैं। इसलिए, आंदोलन और चलने की दिशा दिखाने के लिए जितना आवश्यक हो उतनी छवियां तैयार करना आवश्यक है।

सबसे सरल चलने वाले एनीमेशन को प्राप्त करने के लिए, निम्नलिखित छवि तैयार करना आम है। इस पैटर्न का उपयोग कई आरपीजी में भी किया जाता है।

सबसे पहले, इसे ऊपर और नीचे चार रेखाओं में विभाजित किया गया है, लेकिन यह उस दिशा को दर्शाता है जिसका आप चलते समय सामना करेंगे। ऊपर से, यह "नीचे, बाएं, दाएं, ऊपर" है।

और बाएं और दाएं के लिए, यह उस दिशा में चलने की गति होगी। सामान्य प्रवाह "मध्य, बाएं, मध्य, दाएं, मध्य ..." है।

इस बार तैयार किए गए कैरेक्टर के एक सेल का साइज 32x32px है। चूंकि यह 3x4 वर्गों के लिए तैयार किया गया है, छवि फ़ाइल का वास्तविक आकार 96x128px है। वैसे, एक वर्ण के आकार की कोई सीमा नहीं है, इसलिए 32x48px या 64x64px भी संभव है।

* इस बार तैयार की गई छवि इवामारू-कुन है, जिसे मैंने बहुत समय पहले बनाया था। आप इसे व्यवहार सत्यापन के रूप में उपयोग कर सकते हैं।

एक प्रोजेक्ट बनाएँ और चित्र तैयार करें

इस बार हम जो नमूना बनाएंगे, उसमें हम मान लेंगे कि आप एक वर्ण रख सकते हैं और इसे कीबोर्ड पर कर्सर कुंजी के साथ स्थानांतरित कर सकते हैं।

पहला कदम एक नया 2 डी प्रोजेक्ट बनाना है। अपने प्रोजेक्ट के लिए तैयार की गई चरित्र छवि जोड़ें।

आपके द्वारा अभी जोड़ी गई छवि का चयन करें और निरीक्षक में निम्न सेटिंग्स कॉन्फ़िगर करें:

सेटिंग करने के बाद, नीचे "लागू करें" बटन पर क्लिक करें।

इसके बाद, छवि को विभाजित करें ताकि आप एकता में उनके बीच स्विच कर सकें। निरीक्षक में एक "स्प्राइट संपादक" बटन है, इसलिए इसे क्लिक करें।

जब स्प्राइट संपादक संवाद प्रकट होता है, तो "स्लाइस" ड्रॉप-डाउन पर क्लिक करें, "प्रकार" को "सेल आकार द्वारा ग्रिड" पर सेट करें, 32 का पिक्सेल आकार दर्ज करें (आपके वर्ण के आकार के आधार पर) और स्लाइस बटन पर क्लिक करें।

फिर, छवि निर्दिष्ट आकार से विभाजित की जाएगी। यदि यह भ्रामक है, तो विभाजन रेखा देखने के लिए Ctrl कुंजी दबाएं।

विभाजित करने के बाद, इसे बंद करने के लिए "लागू करें" बटन पर क्लिक करें।

यदि आप इसे विस्तारित करने के लिए प्रोजेक्ट में छवि फ़ाइल के सर्कल दाएं बटन पर क्लिक करते हैं, तो आप देख सकते हैं कि छवि विभाजित है।

ऐनिमेशन डेटा बनाना

पिछले अनुभाग में बनाई गई छवि को दृश्य में छोड़ दें।

फिर, छवि जोड़ने के बजाय, एक सहेजें संवाद प्रदर्शित किया जाएगा। यह एनीमेशन सेटिंग्स को सहेज ेगा, इसलिए कुछ समय के लिए, इसे "< छवि नाम >एनीमेशन.एनिम" के रूप में सहेजें।

यह प्रोजेक्ट में दो फाइलें बनाएगा, दृश्य में विभाजित छवि और दृश्य में बाद की छवि के साथ।

वैसे, यदि आप इस राज्य में खेल चलाते हैं, तो मुझे लगता है कि चरित्र अपने दम पर एनिमेट हो जाएगा। यह एक ऐसी स्थिति है जिसमें किसी भी समय 12 छवियों को स्विच और प्रदर्शित किया जाता है।

यदि गेम चल रहा है, तो इसे छोड़ दें और एनिमेशन टैब का चयन करें। यदि नहीं, तो मेनू से "विंडो -> एनीमेशन -> एनीमेशन" चुनें।

आपने पदानुक्रम से आपके द्वारा बनाए गए ऑब्जेक्ट का चयन किया है (इस मामले में, Iwamaru_0).

पहले से ही एक ऑटो-जनरेटेड एनीमेशन है, लेकिन मुझे इसकी आवश्यकता नहीं है, इसलिए मैं इसे बाद में हटा दूंगा। "इवामारुएनीमेशन" नामक एक ड्रॉप-डाउन है जिसे मैंने इस बार नाम दिया है, इसलिए उस पर क्लिक करें और "नई क्लिप बनाएं" चुनें।

फिर सहेजें संवाद दिखाई देगा। चूंकि हम डाउन मूवमेंट का एक एनीमेशन बनाएंगे, इसलिए हम इसे "इवामारू डाउन" के रूप में छोड़ देंगे।

पदानुक्रम से "Iwamaru_0" का चयन करें और एनीमेशन को "इवामारुडाउन" में बदलें।

इस बार, हम "बाएं, मध्य, दाएं, मध्यम" में एनीमेशन दोहराएंगे, इसलिए हम नमूनों की संख्या 4 पर सेट करेंगे। फिर दाईं ओर की टाइमलाइन को 4 भागों में विभाजित किया जाएगा।

एनीमेशन टाइमलाइन में 0.0 पर प्रोजेक्ट के ऊपरी बाएं कोने में Iwamaru_0, छवि छोड़ दें।

इसके बाद, ऊपर की मध्य छवि में "Iwamaru_1" को 0.1 और 0.3 तक छोड़ दें।

अंत में, ऊपरी दाईं छवि में "Iwamaru_2" को 0.2 पर छोड़ दें।

जब आपका काम पूरा हो जाए, तो प्ले बटन पर क्लिक करें. आप देख सकते हैं कि दृश्य में चरित्र चल रहा है और एनिमेटिंग कर रहा है। (यह नमूना छवि समझने के लिए थोड़ा मुश्किल है, लेकिन ...)

बाएँ, दाएँ और शीर्ष एनिमेशन बनाने के लिए समान चरणों का पालन करें।

अंतिम परिणाम नीचे दी गई छवि के समान दिखना चाहिए।

सुनिश्चित करें कि प्रत्येक दिशा सही ढंग से एनिमेट करती है।

ऐनिमेशन संक्रमण सेटिंग्स

इसके बाद, इसे खोलने के लिए प्रोजेक्ट से "Iwamaru_0.नियंत्रक" डबल-क्लिक करें।

फिर एनिमेटर टैब खुल जाएगा और आपको आकृति में दिखाए गए स्क्रीन की तरह एक स्क्रीन दिखाई देगी। ऐसा इसलिए है क्योंकि आपके द्वारा अभी बनाया गया एनीमेशन "। नियंत्रक " फ़ाइल।

एक खाली स्थान पर राइट-क्लिक करें और नए मित्र ट्री से राज्य-> बनाएँ का चयन करें।

एक नया "ब्लेंड ट्री" बनाया जाएगा, उस पर राइट-क्लिक करें और "डिफ़ॉल्ट स्थिति के रूप में लेयर सेट करें" चुनें।

प्रविष्टि फिर ब्लेंड ट्री को देखेगी। इसका मतलब यह है कि जब एनीमेशन चलता है, तो ब्लेंड ट्री सबसे पहले स्थानांतरित होगा।

हम ब्लेंड ट्री में एनिमेशन स्थापित करने जा रहे हैं, इसलिए हम सभी मौजूदा एनिमेशन हटा देंगे।

बाईं ओर एक "पैरामीटर" टैब है, इसलिए इसे चुनें और + बटन से "फ्लोट" जोड़ें।

चूंकि दो पैरामीटर हैं, इसलिए उन्हें क्रमशः "एक्स" और "वाई" नाम दिया गया है।

ब्लेंड ट्री डबल-क्लिक करें।

दिखाई देने वाले ब्लेंड ट्री का चयन करें।

निरीक्षक से, मिश्रण प्रकार को 2 डी सरल डिक्शनल में बदलें।

पैरामीटर को "x" और "y" पर सेट करें।

गति में + बटन से, 4 बार गति फ़ील्ड जोड़ें का चयन करें।

प्रारंभिक मान अलग हो सकता है, लेकिन यह आंकड़े की तरह दिखना चाहिए।

हमारे द्वारा जोड़े गए चार मोशन आइटम के लिए, हम प्रोजेक्ट में ऊपर, नीचे, बाएं और दाएं .anims सेट करेंगे।

फिर, निर्दिष्ट करें कि प्रत्येक एनीमेशन को किस दिशा में जाना चाहिए।

यह एनीमेशन सेटअप को पूरा करता है।

अंत में, आप स्वचालित रूप से उत्पन्न एनीमेशन फ़ाइल को हटा सकते हैं क्योंकि आपको इसकी आवश्यकता नहीं है।

आंदोलन नियंत्रण

कीबोर्ड पर एक कुंजी दबाकर आंदोलन किया जाता है, ताकि आप इसे नियंत्रित करने के लिए एक स्क्रिप्ट बना सकें। इस बार, स्क्रिप्ट को चरित्र के साथ जोड़ा जाएगा, इसलिए हम इसे "कैरेक्टरमूव" के रूप में छोड़ देंगे।

स्क्रिप्ट इस तरह दिखती है:

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 विधि निर्दिष्ट पैरामीटर नाम के लिए कोई मान सेट कर सकते हैं। एनीमेशन सेटिंग्स में, हम सेट करते हैं कि एक्स और वाई मानों के अनुसार किस एनीमेशन का उपयोग करना है। यदि आप एक्स और वाई पैरामीटर की दिशा निर्धारित करते हैं, तो एनीमेशन उस दिशा में निष्पादित किया जाएगा। प्रारंभिक स्थिति में, हम नीचे का सामना करना चाहते हैं, इसलिए हम निर्दिष्ट करते हैं (एक्स: 0, वाई: -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 उसके बाद, हम विधि के साथ वस्तु को स्थानांतरित कर रहे हैं।

एक बार जब आप स्क्रिप्ट बना लेते हैं, तो इसे चरित्र ऑब्जेक्ट से संलग्न करें।

फाँसी

इससे पूरी प्रक्रिया पूरी हो जाती है। गेम को चलाने का प्रयास करें और इसे स्थानांतरित करने के लिए अपने कीबोर्ड पर कर्सर कुंजी दबाएं। यदि चरित्र उस दिशा में चलता है जिस दिशा में आपने इसे दबाया था, और चलने वाला एनीमेशन चलता है, जबकि ग्राफिक आपके सामने आने वाली दिशा में दिशा बदलता है, तो आप काम कर चुके हैं।