.:: Jasa Membuat Aplikasi Website,Desktop,Android Order Now..!! | | Order Now..!! Jasa Membuat Project Arduino,Robotic,Print 3D ::.

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

0 komentar


بِسْــــــــــــــــمِ اﷲِالرَّحْمَنِ اارَّحِيم
bismillaahirrahmaanirrahiim

السَّلاَمُ عَلَيْكُمْ وَرَحْمَةُ اللهِ وَبَرَكَاتُهُ
Assalamu'alaikum warahmatullahi wabarakatuh

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

Update Contact :
No Wa/Telepon (puat) : 085267792168
No Wa/Telepon (fajar) : 085369237896
Email : Fajarudinsidik@gmail.com
NB :: Bila Sobat tertarik Ingin membuat software, membeli software, membeli source code, membeli hardware elektronika untuk kepentingan Perusahaan maupun Tugas Akhir (TA/SKRIPSI), Insyaallah Saya siap membantu, untuk Respon Cepat dapat menghubungi kami, melalui :

No Wa/Telepon (puat) : 085267792168
No Wa/Telepon (fajar) : 085369237896
Email: Fajarudinsidik@gmail.com


atau Kirimkan Private messanger melalui email dengan klik tombol order dibawah ini :

ٱلْحَمْدُ لِلَّهِ رَبِّ ٱلْعَٰلَمِين
Alhamdulilah hirobil alamin

وَ السَّلاَمُ عَلَيْكُمْ وَرَحْمَةُ اللهِ وَبَرَكَاتُهُ
wassalamualaikum warahmatullahi wabarakatuh


Artikel Tutorial Membuat 2D Sprite Sederhana Untuk Membuat Game 2D di Unity, Diterbitkan oleh scodeaplikasi pada Jumat, 14 Februari 2014. Semoga artikel ini dapat menambah wawasan Anda. Website ini dipost dari beberapa sumber, bisa cek disini sumber, Sobat diperbolehkan mengcopy paste / menyebar luaskan artikel ini, karena segala yang dipost di public adalah milik public. Bila Sobat tertarik Ingin membuat software, membeli software, membeli source code ,Dengan Cara menghubungi saya Ke Email: Fajarudinsidik@gmail.com, atau No Hp/WA : (fajar) : 085369237896, (puat) : 085267792168.

Tawk.to