Tutorial Membuat 2D Sprite Sederhana Untuk Membuat Game 2D di Unity

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

Perhatian : klik gambar untuk memperbesar

Alat dan bahan :
Contoh sprite stickman dapat didownload disini
Sample project hasil tutorial ini dapat didownload disini

Langkah 1. Buat project baru

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

Langkah 2. Import sprite

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

Kemudian kita import dengan melakukan drag & drop. Disini sprite saya import pada direktori 'User Assets/Stickman/Sprite'. Sobat dapat membuat sendiri direktorinya.

Langkah 3. Letakkan sprite di scene

Langkah selanjutnya adalah 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 dapat menggunakan 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 adalah membuat animasi dari sprite. Beri component 'Animator' pada sprite. Select sprite, klik Component >> Miscellaneous >> Animator

Setelah memberikan component animator maka seharusnya animator ada di dalam sprite. Klik sprite 'stickman' kemudian lihat di bagian 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 baru kita buat ke dalam animator dengan cara drag & drop.

Selanjutnya kita munculkan window animator dan animation. window animator dapat dimunculkan dengan klik window >> animator. Window animation dapat dimunculkan dengan klik window >> animation. Kita susun sedemikian rupa window tersebut agar enak dilihat. Sobat dapat menghapus window-window yang mungkin tidak perlu. Disini jika Sobat memiliki layar besar adalah satu keuntungan buat sobat karena seluruh window dapat dimunculkan secara jelas.

Langkah 4.2. Buat animasi 'Idle'

Animasi Idle ini nanti akan kita mainkan ketika karakter stickman dalam keadaan diam, tidak berjalan, tidak melompat, dan tidak melakukan action lain. Kita buat animasi baru, klik pada bagian 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 dibuat secara otomatis state baru bernama 'Idle' juga terbentuk di animator. 

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

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

Oke, seharusnya sampai disini Sobat sudah dapat 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 seperti sebelumnya. Lihat di window animator maka akan muncul state 'Run Right'

Kemudian buat animasi dengan melakukan drag & drop. Sobat dapat juga menentukan 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 dapat berjalan.

Langkah 4.4 Transition

Seluruh animasi sudah kita buat, langkah selanjutnya adalah membuat transisi animasi. Transisi ini diperlukan untuk menentukan kapan animasi berpindah, misalkan dalam kasus ini animasi berpindah dari 'idle' ke 'run right' ketika kecepatannya adalah 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' sampai ada kondisi transisi yang menyebabkan state berpindah. Ok.. Langkah membuat 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 bagian parameters tambahkan dengan klik icon '+'

Kita beri nama 'speedX' dengan nilai default 0.0

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

Select transisi dari idle ke run right. Kemudian lihat inspector, pada bagian conditions lakukan pengaturan 'speedX Greater 0.1'. Hal ini berarti animasi idle akan berubah ke run right ketika nilai speedX adalah 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 jika nilai speedX kurang dari 0.1

OK.. Kedua transisi sudah selesai. Jangan lupa simpan scene ctrl + S agar jika 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 bisa terlihat pergerakannya. Bayangkan jika tidak ada background. Karakter bergerak seperti apapun juga gak akan terlihat.

Kita kembalikan tampilan window seperti semula dulu agar lebih mudah. Tampilkan window scene, game, hierarchy, asset, inspector. Ini pilihan Sobat, tidak harus seperti 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 seperti biasa, drag & drop doank dan atur sedemikian rupa agar terlihat rapi dan bagus. Saya tidak perlu menjelaskan panjang lebar soal ini

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

Buat tampilan di window game serapi mungkin, kurang lebih seperti ini, karakter tepat di tengah dan dibawahnya ada arena permainan.

Langkah 6. Scripting

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

Pemisahan script ini penting, kenapa? karena dengan memisah script antara input/kontrol dengan karakter akan membuat program jauh lebih reuseable. Sobat dapat mengganti platform dari android, iphone, desktop, playstation, dsb hanya dengan mengganti script HUD nya saja, namun script karakter tetap. Kenapa? Karena perbedaan platform seperti 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 adalah isi script Stickman.cs, penjelasan lebih lengkap langsung 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 adalah 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 setelah fungsi Update
 void LateUpdate(){
  if(state == State.idle){ //digunakan untuk mendeteksi idle, jika tidak ada action apapun (state == State.idle)
   this.animator.SetFloat("speedX", 0); //memberi tahu animator jika saat ini speednya adalah 0
  }
  state = State.idle; //secara default state adalah 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 adalah walk
  this.transform.Translate(Vector2.right * this.walkSpeed * Time.deltaTime); //translasi biasa untuk bergerak
  this.animator.SetFloat("speedX", walkSpeed); //memberi tahu animator jika saat ini speedX adalah sebesar kecepatan walkSpeed
 }

 private enum State {idle, walk}; //deklarasi enum State
}

Lihat script diatas, fokuskan pada bagian berikut :

public float walkSpeed; //kecepatan berjalan

Variabel walkSpeed memiliki modifier public. Di unity, variabel public dapat dirubah sesuai keinginan 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 adalah isi dari script HUD.cs, penjelasan lebih lengkap langsung 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 membuat 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 dapat 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... akhirnya 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 ^^