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'.

new 2D project unity

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.
Contoh sprite 2D
Kemudian kita import dengan melakukan drag & drop. Disini sprite saya import pada direktori 'User Assets/Stickman/Sprite'. Sobat dapat membuat sendiri direktorinya.

import sprite 2D ke unity

Langkah 3. Letakkan sprite di scene
Langkah selanjutnya adalah meletakkan sprite di scene. Lakukan drag & drop sprite idle ke window scene.

meletakkan sprite ke scene
Letakkan pada posisi 0,0,0 dengan mengedit transform. Hal ini untuk memudahkan saja, Sobat dapat menggunakan posisi lainnya.

atur posisi sprite

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

Beri nama sprite

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

menambahkan komponen animator di unity
Setelah memberikan component animator maka seharusnya animator ada di dalam sprite. Klik sprite 'stickman' kemudian lihat di bagian inspector.

animator telah ditambahkan ke obyek

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

membuat animator controller di unity

Kita beri nama animator controller tersebut dengan nama 'Stickman'

animator controller telah dibuat dan diberi nama
Selanjutnya kita masukkan animator controller yang baru kita buat ke dalam animator dengan cara drag & drop.

masukkan animator controller ke dalam animator

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.

menampilkan window untuk animasi di unity

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.

membuat animasi baru di unity

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. 

state baru di animator muncul ketika animasi baru dibuat

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. 

membuat animasi idle pada sprite 2D di unity

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

menjalankan animasi sprite 2D di unity

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

membuat animasi run right pada sprite 2D di unity

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

state run right muncul di animator

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.

animasi sprite 2D di unity

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'.

membuat transisi animasi di animator di unity

Kemudian kita arahkan panah ke state 'Run Right'

transisi animasi dari idle ke run right

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

transisi animasi dari run right ke idle

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 '+'

menambah parameter transisi

Kita beri nama 'speedX' dengan nilai default 0.0

memberi nama parameter transisi

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

memunculkan window inspector di unity

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

memberikan pengaturan transisi pada animator di unity
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

memberikan pengaturan transisi pada animator di unity untuk transisi lain

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.

menyimpan scene di unity

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.

tampilan window standar

Kita import background dengan drag & drop

import sprite background

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

pengaturan letak obyek

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

merubah ukuran kamera di unity

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

tampilan di window scene

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

membuat script karakter stickman

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.

memasukkan parameter dari karakter stickman


Langkah 6.2 Scripting HUD
Empty GameObject  dengan klik GameObject >> Create Empty dan beri nama dengan HUD.

membuat HUD


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

membuat script HUD

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. 

 mengisi atribut kamera dan karakter di HUD

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

hasil ujicoba sprite 2D untuk pembuatan game 2D

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


hasil ujicoba sprite 2D untuk pembuatan game 2D pada state berlari

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 ^^

Post a Comment for "Tutorial Membuat 2D Sprite Sederhana Untuk Membuat Game 2D di Unity"