Υλοποίησε ένα κινούμενο σχέδιο περπατήματος για έναν χαρακτήρα sprite 4 κατευθύνσεων

Περιβάλλον επαλήθευσης

παράθυρα

• Παράθυρα 11

Επεξεργαστής ενότητας

• 2020.3.25στ1

Πακέτα συστήματος εισόδου

• 1.2.0

Προϋποθέσεις για αυτήν τη συμβουλή

Οι ακόλουθες ρυθμίσεις έχουν ρυθμιστεί εκ των προτέρων ως προϋπόθεση για την επεξήγηση αυτών των συμβουλών.

• Παρουσιάζουμε το πακέτο συστήματος εισόδου
• Ευθυγράμμιση της κάμερας (2D) με τον καμβά

Τοποθεσία αναφοράς

• Δημιουργία ενός RPG με το Unity Part 1 Walking Animation and Operation

Προετοιμασία γραφικών πεζοπορίας

Πρώτα απ 'όλα, το κινούμενο σχέδιο περπατήματος επιτυγχάνεται με συνεχή εναλλαγή μεταξύ πολλαπλών εικόνων για να φαίνεται σαν να περπατάτε. Ως εκ τούτου, είναι απαραίτητο να προετοιμάσετε όσες εικόνες είναι απαραίτητες για να δείξετε την κατεύθυνση της κίνησης και του περπατήματος.

Προκειμένου να επιτευχθεί η απλούστερη κινούμενη εικόνα περπατήματος, είναι σύνηθες να προετοιμάσετε την ακόλουθη εικόνα. Αυτό το μοτίβο χρησιμοποιείται επίσης σε πολλά RPG.

Πρώτα απ 'όλα, χωρίζεται σε τέσσερις γραμμές πάνω και κάτω, αλλά δείχνει την κατεύθυνση που θα αντιμετωπίσετε όταν περπατάτε. Από την κορυφή, είναι "κάτω, αριστερά, δεξιά, πάνω".

Και για την αριστερά και τη δεξιά, θα είναι μια κίνηση με τα πόδια προς αυτή την κατεύθυνση. Η γενική ροή είναι "μέση, αριστερά, μέση, δεξιά, μέση...".

Το μέγεθος ενός κελιού του χαρακτήρα που προετοιμάστηκε αυτή τη φορά είναι 32x32px. Δεδομένου ότι είναι προετοιμασμένο για τετράγωνα 3x4, το πραγματικό μέγεθος του αρχείου εικόνας είναι 96x128px. Παρεμπιπτόντως, δεν υπάρχει όριο στο μέγεθος ενός χαρακτήρα, επομένως είναι επίσης δυνατή η 32x48px ή 64x64px.

* Η εικόνα που προετοιμάστηκε αυτή τη φορά είναι Iwamaru-kun, την οποία έκανα πριν από πολύ καιρό. Μπορείτε να το χρησιμοποιήσετε ως επαλήθευση συμπεριφοράς.

Δημιουργία έργου και προετοιμασία εικόνων

Στο δείγμα που θα δημιουργήσουμε αυτή τη φορά, θα υποθέσουμε ότι μπορείτε να τοποθετήσετε έναν χαρακτήρα και να τον μετακινήσετε με τα πλήκτρα δρομέα στο πληκτρολόγιο.

Το πρώτο βήμα είναι να δημιουργήσετε ένα νέο 2D έργο. Προσθέστε την εικόνα χαρακτήρων που ετοιμάσατε για το έργο σας.

Επιλέξτε την εικόνα που μόλις προσθέσατε και διαμορφώστε τις ακόλουθες ρυθμίσεις στο εργαλείο επιθεώρησης:

Μετά τη ρύθμιση, κάντε κλικ στο κουμπί "Εφαρμογή" στο κάτω μέρος.

Στη συνέχεια, χωρίστε την εικόνα έτσι ώστε να μπορείτε να κάνετε εναλλαγή μεταξύ τους στο Unity. Υπάρχει ένα κουμπί "Sprite Editor" στον επιθεωρητή, οπότε κάντε κλικ σε αυτό.

Όταν εμφανιστεί το παράθυρο διαλόγου Sprite Editor, κάντε κλικ στο αναπτυσσόμενο μενού "Slice", ορίστε το "Type" σε "Grid By Cell Size", Εισαγάγετε μέγεθος pixel 32 (ανάλογα με το μέγεθος του χαρακτήρα σας) και κάντε κλικ στο κουμπί Slice.

Στη συνέχεια, η εικόνα θα χωριστεί κατά το καθορισμένο μέγεθος. Εάν προκαλεί σύγχυση, πατήστε το πλήκτρο 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, επομένως θα διαγράψουμε όλες τις υπάρχουσες κινούμενες εικόνες.

Υπάρχει μια καρτέλα "Παράμετροι" στα αριστερά, οπότε επιλέξτε την και προσθέστε "Float" από το κουμπί +.

Δεδομένου ότι υπάρχουν δύο παράμετροι, ονομάζονται "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 Μετά από αυτό, μετακινούμε το αντικείμενο με τη μέθοδο.

Αφού δημιουργήσετε τη δέσμη ενεργειών, επισυνάψτε την στο αντικείμενο χαρακτήρα.

εκτέλεση

Αυτό ολοκληρώνει την όλη διαδικασία. Δοκιμάστε να εκτελέσετε το παιχνίδι και να πατήσετε τα πλήκτρα δρομέα στο πληκτρολόγιό σας για να το μετακινήσετε. Εάν ο χαρακτήρας μετακινηθεί προς την κατεύθυνση που τον πατήσατε και η κινούμενη εικόνα περπατήματος μετακινηθεί ενώ το γραφικό αλλάζει κατεύθυνση προς την κατεύθυνση που κοιτάζετε, τελειώσατε.