Tutorial Menciptakan 2D Sprite Sederhana Untuk Menciptakan Game 2D Di Unity

Pada artikel sebelumnya saya pernah membahas ihwal penggunaan Unity untuk menciptakan game 2D. Pada artikel tersebut saya masih memakai Unity 4.2x yang belum dilengkapi dengan tool 2D sehingga saya memerlukan tool suplemen yaitu Orthello Framework. Seiring perkembangan Unity, mulai versi 4.3 Unity telah dilengkapi dengan fitur 2D, hal ini memungkinkan Unity sanggup dipakai untuk menciptakan game 2D secara lebih gampang tanpa memerlukan tool tambahan. Nah pada artikel kali ini saya akan membahas tutorial menciptakan animasi sprite 2D di Unity memakai tol 2D bawaan Unity secara defult. Ok eksklusif saja kita mulai membuatnya, simak tutorial di bawah ini :

Perhatian : klik gambar untuk memperbesar

Alat dan materi :
Contoh sprite stickman sanggup didownload disini
Sample project hasil tutorial ini sanggup didownload disini

Langkah 1. Buat project baru

Seperti biasa, file >> new project. Namun perbedaannya pada pengembangan game 2D kita pilih 2D pada potongan 'Setup defaults for'.

Langkah 2. Import sprite

Disini saya mempunyai sebuah sprite sederhana berupa stickman dengan animasi lari, sprite ini terdiri dari gambar-gambar biasa, dimana bila di load secara bergantian dalam tempo waktu tertentu akan menghasilkan animasi lari.

Kemudian kita import dengan melaksanakan drag & drop. Disini sprite saya import pada direktori 'User Assets/Stickman/Sprite'. Sobat sanggup menciptakan sendiri direktorinya.

Langkah 3. Letakkan sprite di scene

Langkah selanjutnya yakni meletakkan sprite di scene. Lakukan drag & drop sprite idle ke window scene.

Letakkan pada posisi 0,0,0 dengan mengedit transform. Hal ini untuk memudahkan saja, Sobat sanggup memakai posisi lainnya.

Kemudian berilah nama sprite, kali ini saya memberinama sprite ini dengan nama 'Stickman'

Langkah 4. Animasi

Langkah 4.1. Buat animator

Langkah selanjutnya yakni menciptakan animasi dari sprite. Beri component 'Animator' pada sprite. Select sprite, klik Component >> Miscellaneous >> Animator

Setelah memperlihatkan component animator maka seharusnya animator ada di dalam sprite. Klik sprite 'stickman' kemudian lihat di potongan inspector.

Selanjutnya kita buat 'animator controller' untuk stickman. animation controller saya buat di dalam folder 'User Assets/Stickman/Animation Controllers'. Buat dengan klik kanan >> create >> animator controller

Kita beri nama animator controller tersebut dengan nama 'Stickman'

Selanjutnya kita masukkan animator controller yang gres kita buat ke dalam animator dengan cara drag & drop.

Selanjutnya kita munculkan window animator dan animation. window animator sanggup dimunculkan dengan klik window >> animator. Window animation sanggup dimunculkan dengan klik window >> animation. Kita susun sedemikian rupa window tersebut biar lezat dilihat. Sobat sanggup menghapus window-window yang mungkin tidak perlu. Disini bila Sobat mempunyai layar besar yakni satu laba buat sahabat sebab seluruh window sanggup dimunculkan secara jelas.

Langkah 4.2. Buat animasi 'Idle'

Animasi Idle ini nanti akan kita mainkan ketika abjad stickman dalam keadaan diam, tidak berjalan, tidak melompat, dan tidak melaksanakan action lain. Kita buat animasi baru, klik pada potongan window animation, klik Create New Clip.

Kita beri nama clip tersebut, misalkan 'idle'. Clip idle ini saya simpan di 'User assets/stickman/animations/Idle'. Ketika animasi idle dibentuk secara otomatis state gres berjulukan 'Idle' juga terbentuk di animator. 

Kemudian kita buat clip nya dengan melaksanakan drag & drop sprite pada timeline animation. Kita atur sedemikan rupa kecepatannya biar tidak terlalu cepat dan tidak pula terlalu lambat. 

Kemudian sahabat sanggup mencoba memainkan sprite dengan mengklik play pada window animation. kita lihat animasi akan berjalan.

Oke, seharusnya hingga disini Sobat sudah sanggup melihat sprite Sobat dengan animasi Idle.

Langkah 4.3. Buat animasi 'Run Right'

Animasi 'Run Right' akan dimainkan ketika kita menekan panah kanan. Karakter stickman akan memainkan animasi run right ini dan akan berlari ke kanan. Seperti biasa kita buat animasi baru, klik pada window animation >> Create new clip

Kemudian kita simpan animasinya menyerupai sebelumnya. Lihat di window animator maka akan muncul state 'Run Right'

Kemudian buat animasi dengan melaksanakan drag & drop. Sobat sanggup juga memilih kecepatan animasi dengan mengubah nilai dari sample. Silahkan mainkan nilai sample sehiingga animasi tidak terlalu cepat atau terlalu lambat.

Coba mainkan dengan menekan tombol play pada window animation. Jika berhasil animasi sanggup berjalan.

Langkah 4.4 Transition

Seluruh animasi sudah kita buat, langkah selanjutnya yakni menciptakan transisi animasi. Transisi ini dibutuhkan untuk memilih kapan animasi berpindah, misalkan dalam kasus ini animasi berpindah dari 'idle' ke 'run right' ketika kecepatannya yakni lebih dari sekian. 

Kita lihat pada animator, state 'Idle' berwarna orange sedangkan state lainnya abu-abu. Hal ini berarti state 'Idle' merupakan default state, artinya ketika sprite di load secara default akan memainkan state 'Idle' hingga ada kondisi transisi yang mengakibatkan state berpindah. Ok.. Langkah menciptakan transisi, kita klik kanan state 'idle' pada animator, pilih 'make transition'.

Kemudian kita arahkan panah ke state 'Run Right'

Selanjutnya buat juga transisi dari state 'Run Right' ke idle dengan cara yang sama.

Selanjutnya kita buat parameter 'speedX'. Parameter speedX ini kita gunakan sebagai parameter yang menyatakan kapan terjadi transisi dari idle ke run atau sebaliknya. Buat parameter speedX berupa float.Pada window animator di potongan parameters tambahkan dengan klik icon '+'

Kita beri nama 'speedX' dengan nilai default 0.0

Selanjutnya kita memerlukan window Inspector untuk melaksanakan pengaturan transisi. Munculkan window Inspector dengan klik window >> inspector

Select transisi dari idle ke run right. Kemudian lihat inspector, pada potongan conditions lakukan pengaturan 'speedX Greater 0.1'. Hal ini berarti animasi idle akan berubah ke run right ketika nilai speedX yakni lebih besar dari 0.1

Lakukan hal serupa untuk transisi run right ke idle. Kali ini dengan pengaturan 'speedX Less 0.1'. Hal ini berarti animasi run right akan berpindah ke idle bila nilai speedX kurang dari 0.1

OK.. Kedua transisi sudah selesai. Jangan lupa simpan scene ctrl + S biar bila sewaktu-waktu terjadi crash scene kita tidak hilang. Saya simpan scene dengan nama Scene 1.

Langkah 5. Memberi background arena

Selanjutnya kita beri background. Kenapa? Agar nanti sanggup terlihat pergerakannya. Bayangkan bila tidak ada background. Karakter bergerak menyerupai apapun juga gak akan terlihat.

Kita kembalikan tampilan window menyerupai semula dulu biar lebih mudah. Tampilkan window scene, game, hierarchy, asset, inspector. Ini pilihan Sobat, tidak harus menyerupai punya saya, tergantung Sobat enaknya bagaimana dan apa saja yang perlu ditampilkan.

Kita import background dengan drag & drop

Nah kita masukkan background ke scene. Langkahnya menyerupai biasa, drag & drop doank dan atur sedemikian rupa biar terlihat rapi dan bagus. Saya tidak perlu menjelaskan panjang lebar soal ini

Sobat juga sanggup memainkan ukuran pandangan main camera biar obyek tidak terlihat terlalu besar atau kecil. Lihat efeknya di window game

Buat tampilan di window game serapi mungkin, kurang lebih menyerupai ini, abjad sempurna di tengah dan dibawahnya ada arena permainan.

Langkah 6. Scripting

Langkah selanjutnya yakni proses scripting. Disini saya akan membagi dalam dua script, yaitu script Stickman.cs dan HUD.cs. Script Stickman.cs yakni script sikap dari abjad stickman menyerupai jalan kanan, jalan kiri, lompat, dsb. Script HUD (head up display) yakni script yang menangani input user, dan GUI 2D bila ada. Sobat sanggup menambahkan healthbar, button, dsb di HUD ini, jangan menggabungkannya dengan stickman.

Pemisahan script ini penting, kenapa? sebab dengan memisah script antara input/kontrol dengan abjad akan menciptakan kegiatan jauh lebih reuseable. Sobat sanggup mengganti platform dari android, iphone, desktop, playstation, dsb hanya dengan mengganti script HUD nya saja, namun script abjad tetap. Kenapa? Karena perbedaan platform menyerupai iphone, android, desktop, playstation, dsb kebanyakan hanya berbeda input kontrolnya saja, namun untuk karakter  tetap, sama sekali tak berubah.

Langkah 6.1. Scripting karakter

Buat script Stickman.cs dan letakkan pada sprite Stickman di hierarchy dengan cara drag & drop

Berikut yakni isi script Stickman.cs, klarifikasi lebih lengkap eksklusif saya komentari di script 

using UnityEngine; using System.Collections;  public class Stickman : MonoBehaviour {  public float walkSpeed; //kecepatan berjalan   private Animator animator; //animator  State state; //enum state, lihat baris 27   void Update(){   if(Input.GetKey(KeyCode.RightArrow)){    WalkRight();   }  }   //start yakni fungsi pertama yang dijalanan ketika menjalankan script ini  void Start(){   animator = this.GetComponent(); //mendapatkan komponen animator dalam obyek ini  }   //LateUpdate dipanggil 1x tiap 1 frame sesudah fungsi Update  void LateUpdate(){   if(state == State.idle){ //digunakan untuk mendeteksi idle, bila tidak ada action apapun (state == State.idle)    this.animator.SetFloat("speedX", 0); //memberi tahu animator bila ketika ini speednya yakni 0   }   state = State.idle; //secara default state yakni idle, jadi apapun statenya ketika selesai berjalan 1 frame maka state dikembalikan ke idle  }   //Method untuk berjalan ke kanan  public void WalkRight(){   state = State.walk; //ketika berjalan state yakni walk   this.transform.Translate(Vector2.right * this.walkSpeed * Time.deltaTime); //translasi biasa untuk bergerak   this.animator.SetFloat("speedX", walkSpeed); //memberi tahu animator bila ketika ini speedX yakni sebesar kecepatan walkSpeed  }   private enum State {idle, walk}; //deklarasi enum State } 

Lihat script diatas, fokuskan pada potongan berikut :

public float walkSpeed; //kecepatan berjalan

Variabel walkSpeed mempunyai modifier public. Di unity, variabel public sanggup dirubah sesuai impian di inspector, seingga kita tidak perlu merubah script untuk merubah valuenya. Klik obyek Stickman, lihat inspector, rubah variabel walkSpeed, nilainya terserah Sobat, semakin besar semakin cepat berlarinya.

Langkah 6.2 Scripting HUD

Empty GameObject  dengan klik GameObject >> Create Empty dan beri nama dengan HUD.

Buat script HUD.cs  dan letakkan ke dalam object HUD dengan cara drag & drop

Berikut yakni isi dari script HUD.cs, klarifikasi lebih lengkap eksklusif saya komentari di script 

using UnityEngine; using System.Collections;  public class HUD : MonoBehaviour {  public Camera activeCamera; //kamera yang aktif  public Stickman stickman; //stickman   //method update dipanggil 1x tiap frame  void Update () {   //membuat active kamera mengikuti stickman, dengan menciptakan nilai x kamera = nilai x stickman, sedang nilai y dan z tetap, yaitu nilai y dan z dari activeKamera itu sendiri    activeCamera.transform.position = new Vector3(stickman.transform.position.x, activeCamera.transform.position.y, activeCamera.transform.position.z);     if(Input.GetKey(KeyCode.RightArrow)){ //jika dipencet panah kanan    stickman.WalkRight(); //memanggil fungsi WalkRight dari stickman   }   } } 

Lihat kedua variabel berikut :

public Camera activeCamera; //kamera yang aktif public Stickman stickman; //stickman

Pada variabel tersebut bertype public sehingga sanggup dirubah di inspector. activeCamera isi dengan kamera, dan stickman isi dengan Stickman yang kita buat tadi. 

 

Langkah 7. Uji coba
Selesai sudah... Jalankan program.. Secara default stickman akan menjalankan animasi 'Idle'.

Coba tekan panah kanan, stickman akan bergerak ke kanan dan menjalankan animasi 'Run Right'

Selesai
Nah... alhasil selesai juga saya menulis tutorial ini, yang memakan waktu total lebih dari 8 jam, yang saya kerjakan dalam beberapa hari. Hahahaha.. Terima kasih sudah membaca, semoga artikel ini bermanfaat. Kurang lebihnya saya mohon maaf, tetap semangat dan terus berkarya ^^

Sumber http://duniadigit.blogspot.com/

Berbagi :