Membuat Game Android Dengan Unity : Space Sonic (Part 1)

Karena sedang dalam masa perkuliahan yang cukup padat, tutorial-tutorial Unity 2D selanjutnya mungkin akan saya update pada akhir pekan atau ketika ada waktu senggang. Oke, kali ini saya akan coba share tutorial pembuatan game 2D dengan Unity Engine dengan nama Game Space Sonic. Game ini sebenarnya project saya yang tertunda yang rencananya akan saya selesaikan dan kemudian di Upload di Playstore. Namun karena akhir-akhir ini saya jarang sekali ngoprek Unity, akhirnya saya coba bagikan saja file dan tutorialnya. Space Sonic ini semacam game space shooter yang mungkin sudah begitu familiar kita mainkan di konsol-konsol game klasik, saya coba adaptasi gameplay nya kedalam game Space Sonic ini. Berikut beberapa Screenshootnya :





Asset dalam game ini sebagian menggunakan assetnya kenney dengan lisensi public domain. UI nya masih menggunakan GUI lama Unity, kalau sempat akan coba saya upgrade ke system GUI unity yang baru.
Pada part 1 ini kita akan mencoba membuat background system-nya terlebih dahulu. Background bersifat looping untuk menghemat objek. Karena atmosfir gamenya adalah space shooter, maka background yang akan kita buat susasananya tidak jauh dari itu. Silahkan slice sprite yang sudah saya sediakan pada section download, kemudian rename sesuai kegunaan sprite.
Perhatikan gambar berikut :

Pilih sprite yang akan kita jadikan objek Background, karena resolusinya cukup kecil, susun background-backgroun tersebut menjadi beberapa objek (14 objek). Pastikan camera tercover dengan background. Jangan lupa pada saat pembuatan project pilih platform Android, sehingga camera dalam keadaan portrait (jika belum, atur pada player settings). Buat game objek baru dengan nama Background, kemudian seleksi sprite-sprite background tadi dan buat parent kedalam objek Background. Pilih game objek Background, kemudian beri komponen Collider2D pada objek Background tersebut seperti pada gambar.

Seleksi kembali sprite-sprite background yang terdapat dalam objek Background tadi, kemudian pada Sorting Layer pilih background. Jika belum tersedia, buat terlebih dahulu sorting layernya dengan memilih Add Sorting Layer. Pastikan layer background berada paling bawah. Sorting Layer ini berfungsi sebagai layering objek-objek yang akan dirender oleh kamera. Bisa juga memakai value dari sumbu Y, namun untuk keperluan optimasi kita menggunakan sorting layer saja.
Selanjutnya kita akan membuat pembatas atau dinding pada tepian camera. Ini berfungsi sebagai pembatas supaya player tidak keluar dari camera. Sehingga kita memerlukan beberapa objek dengan komponen collider 2D sebagai pembatasnya, misalnya kali ini saya menggunakan tiga objek collider 2D; pembatas kanan (obs_right), pembatas kiri (obs_left), pembatas atas (obs_top). Alasan saya tidak menggunakan pembatas bawah, karena nanti player (objek pesawat) hanya bisa bergerak kekiri dan kekanan dan pembatas atas digunakan untuk keperluan lain yang akan kita bahas di part selanjutnya. Pastikan ketiga objek dengan collider 2d tadi dalam keadaan size default kemudian harus berada pada posisi x=0, y=0, z=0 karena nanti position dan size nya akan kita atur via script. Saya juga mempunyai satu objek dengan collider dengan nama Looper. Looper ini digunakan untuk looping objek background seperti meteor dan bintang. Kemudian kita akan attach sebuah script kedalam Main Camera yang berfungsi sebagai movement player dan setup pembatas.
CameraFollow.cs

using UnityEngine; using System.Collections; public class CameraFollow : MonoBehaviour { public BoxCollider2D leftObstacle; public BoxCollider2D rightObstacle; public BoxCollider2D topObstacle; private Camera mainCam; public float speed = 0.5f; private float initialOffset; void Start () { mainCam = this.camera; leftObstacle.size = new Vector2 (1f, mainCam.ScreenToWorldPoint(new Vector3(0f, Screen.height * 2f, 0f)).y); leftObstacle.center = new Vector2 (mainCam.ScreenToWorldPoint(new Vector3(0f, 0f, 0f)).x - 0.7f , 0f); rightObstacle.size = new Vector2 (1f, mainCam.ScreenToWorldPoint(new Vector3(0f, Screen.height * 2f, 0f)).y); rightObstacle.center = new Vector2 (mainCam.ScreenToWorldPoint(new Vector3(Screen.width, 0f, 0f)).x + 0.7f, 0f); topObstacle.size = new Vector2 (mainCam.ScreenToWorldPoint(new Vector3(Screen.width * 2f, 0f, 0f)).x, 1f); topObstacle.center = new Vector2 (0f, mainCam.ScreenToWorldPoint(new Vector3(0f, Screen.height, 0f)).y + 0.45f); } void FixedUpdate () { transform.Translate (Vector2.up * speed * Time.deltaTime); } }

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32

using UnityEngine; using System.Collections;   public class CameraFollow : MonoBehaviour { public BoxCollider2D leftObstacle; public BoxCollider2D rightObstacle; public BoxCollider2D topObstacle; private Camera mainCam; public float speed = 0.5f; private float initialOffset;   void Start () { mainCam = this.camera;   leftObstacle.size = new Vector2 (1f, mainCam.ScreenToWorldPoint(new Vector3(0f, Screen.height * 2f, 0f)).y); leftObstacle.center = new Vector2 (mainCam.ScreenToWorldPoint(new Vector3(0f, 0f, 0f)).x - 0.7f , 0f);   rightObstacle.size = new Vector2 (1f, mainCam.ScreenToWorldPoint(new Vector3(0f, Screen.height * 2f, 0f)).y); rightObstacle.center = new Vector2 (mainCam.ScreenToWorldPoint(new Vector3(Screen.width, 0f, 0f)).x + 0.7f, 0f); topObstacle.size = new Vector2 (mainCam.ScreenToWorldPoint(new Vector3(Screen.width * 2f, 0f, 0f)).x, 1f); topObstacle.center = new Vector2 (0f, mainCam.ScreenToWorldPoint(new Vector3(0f, Screen.height, 0f)).y + 0.45f); }   void FixedUpdate () { transform.Translate (Vector2.up * speed * Time.deltaTime); } }

Pada variable obstacle, isi referensi variable dengan objek-objek pembatas yang telah kita buat tadi. Lakukan wiring lewat Inspector. Pada FixedUpdate() camera akan bergerak secara positif vertical dengan speed dikalikan waktu, artinya movement akan dieksekusi setiap frame terhadap waktu.

Tambahkan sprite meteor pada scene. Pastikan objek-objek meteor tersebut berada diluar proyeksi camera (dibagian atas), tambahkan collider 2D pada tiap-tiap sprite (lihat gambar), Buat sorting layer menjadi background dengan order = 1 sehingga berada satu posisi diatas sprite background. Ubah tag menjadi Meteor untuk masing-masing objek meteor, jika belum ada buat tag Meteor terlebih dahulu.

Tambahkan objek bintang dengan memasukan sprite star pada scene, buat sebuah animasi pada objek tersebut dengan menekan tombol record pada jendela animation. Tambahkan sprite renderer, buat sprite menjadi tiga step pada rentang waktu yang berbeda. Step 1 = sprite bintang kecil, step 2 = sprite bintang besar, step 3 = kembali ke bintang kecil. Sehingga ketika di play objek bintang mempunyai animasi kerlap-kerlip.

Lakukan langkah seperti pada saat menambahkan objek Meteor, tambahkan beberapa objek bintang tadi pada scene. Caranya buat dahulu prefab bintang yang telah dianimasikan tadi, kemudian drag prefab star pada scene. Letakan secara random seperti pada gambar. Ubah tag masing-masing object star menjadi tag Star. Jika belum ada, buat terlebih dahulu. Selanjutnya buat script yang berfungsi sebagai looper. Pada prinsipnya looper ini hanya throwing semua objek yang telah melewati camera kemudian menyentuh objek Looper pada posisi tertentu. Silahkan buat Script baru dengan nama BGLooper.cs

public float posMin = -2.359058f; public float posMax = 2.245874f; private SpriteRenderer sRender;

1 2 3

public float posMin = -2.359058f; public float posMax = 2.245874f; private SpriteRenderer sRender;

Kita mempunyai dua variable posMin dan posMax, variable ini adalah posisi minimal dan maksimal objek-objek backgrund yang akan kita random posisinya.

void Start () { GameObject[] meteors = GameObject.FindGameObjectsWithTag ("Meteor"); foreach (GameObject meteor in meteors) { Vector2 pos = meteor.transform.position; pos.x = Random.Range(posMin, posMax); meteor.transform.position = pos; meteor.transform.rotation = Quaternion.Euler(0,0, Random.Range(0,90)); sRender = meteor.GetComponent<spriterenderer>(); sRender.color = new Color(Random.Range(0.7f, 1.0f), Random.Range(0.7f, 1.0f), Random.Range(0.7f, 1.0f)); }

1 2 3 4 5 6 7 8 9 10

void Start () { GameObject[] meteors = GameObject.FindGameObjectsWithTag ("Meteor"); foreach (GameObject meteor in meteors) { Vector2 pos = meteor.transform.position; pos.x = Random.Range(posMin, posMax); meteor.transform.position = pos; meteor.transform.rotation = Quaternion.Euler(0,0, Random.Range(0,90)); sRender = meteor.GetComponent<SpriteRenderer>(); sRender.color = new Color(Random.Range(0.7f, 1.0f), Random.Range(0.7f, 1.0f), Random.Range(0.7f, 1.0f)); }

Pada kondisi Start() kita melakukan beberapa setup dan inisiasi. Pertama kita tentukan tugas untuk setiap objek Meteor. Posisi X meteor kita buat random pada saat pertama kali game dijalankan, begitu juga dengan rotasinya dibuat random dengan rentang rotasi 0-90 derajat. Untuk variasi lainnya, kita juga menggunakan random color untuk masing-masing object meteor.

GameObject[] stars = GameObject.FindGameObjectsWithTag ("Star"); foreach (GameObject star in stars) { Vector2 pos = star.transform.position; pos.x = Random.Range(posMin, posMax); star.transform.position = pos;

1 2 3 4 5

GameObject[] stars = GameObject.FindGameObjectsWithTag ("Star"); foreach (GameObject star in stars) { Vector2 pos = star.transform.position; pos.x = Random.Range(posMin, posMax); star.transform.position = pos;

Hal yang sama kita lakukan juga terhadap objek-objek star. Namun yang hanya akan buat random hanyalah posisi x nya saja.

void OnTriggerEnter2D(Collider2D coll) { if (coll.tag == "Background") { coll.transform.Translate (Vector2.up * 7.66f); } if (coll.tag == "Meteor") { Vector2 pos = coll.transform.position; pos.y = transform.position.y + 8; pos.x = Random.Range(posMin, posMax); coll.transform.position = pos; coll.transform.rotation = Quaternion.Euler(0,0, Random.Range(0,90)); sRender = coll.GetComponent<spriterenderer>(); sRender.color = new Color(Random.Range(0.7f, 1.0f), Random.Range(0.7f, 1.0f), Random.Range(0.7f, 1.0f)); } if (coll.tag == "Star") { sRender = coll.GetComponent<spriterenderer>(); Vector2 pos = coll.transform.position; pos.y = transform.position.y + 8; pos.x = Random.Range(posMin, posMax); coll.transform.position = pos; }

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21

void OnTriggerEnter2D(Collider2D coll) { if (coll.tag == "Background") { coll.transform.Translate (Vector2.up * 7.66f); } if (coll.tag == "Meteor") { Vector2 pos = coll.transform.position; pos.y = transform.position.y + 8; pos.x = Random.Range(posMin, posMax); coll.transform.position = pos; coll.transform.rotation = Quaternion.Euler(0,0, Random.Range(0,90)); sRender = coll.GetComponent<SpriteRenderer>(); sRender.color = new Color(Random.Range(0.7f, 1.0f), Random.Range(0.7f, 1.0f), Random.Range(0.7f, 1.0f)); } if (coll.tag == "Star") { sRender = coll.GetComponent<SpriteRenderer>(); Vector2 pos = coll.transform.position; pos.y = transform.position.y + 8; pos.x = Random.Range(posMin, posMax); coll.transform.position = pos; }

Pada fungsi ini digunakan sebagai looper objek-objek background dengan memanfaatkan OnTriggerEnter. Jadi setiap objek dengan collider memasuki collider triger dimana script ini disimpan, do something. Untuk objek background kita hanya perlu translate beberapa float kearah vector y. Value floatnya bisa kita ubah dan sesuaikan sehingga background ketika translate tidak terlihat glitch. Untuk objek meteor dan star kita menggunakan transform.position kearah sumbu Y senilai float tertentu. Nilai float bisa kita tentukan sesuai kondisi, temukan nilai yang paling smooth untuk transform objek tersebut, misal saya menambahkan nilai 8 pada transform positionnya. Untuk posisi x, buat random kembali dengan variable posMin dan posMax yang telah kita buat diawal tadi. Khusus untuk objek meteor, buat random kembali rotasi dan warna objeknya. Sehingga script lengkapnya adalah sebagai berikut :
BGLooper.cs

using UnityEngine; using System.Collections; public class BGLooper : MonoBehaviour { public float posMin = -2.359058f; public float posMax = 2.245874f; private SpriteRenderer sRender; void Start () { GameObject[] meteors = GameObject.FindGameObjectsWithTag ("Meteor"); foreach (GameObject meteor in meteors) { Vector2 pos = meteor.transform.position; pos.x = Random.Range(posMin, posMax); meteor.transform.position = pos; meteor.transform.rotation = Quaternion.Euler(0,0, Random.Range(0,90)); sRender = meteor.GetComponent<spriterenderer>(); sRender.color = new Color(Random.Range(0.7f, 1.0f), Random.Range(0.7f, 1.0f), Random.Range(0.7f, 1.0f)); } GameObject[] stars = GameObject.FindGameObjectsWithTag ("Star"); foreach (GameObject star in stars) { Vector2 pos = star.transform.position; pos.x = Random.Range(posMin, posMax); star.transform.position = pos; } } void OnTriggerEnter2D(Collider2D coll) { if (coll.tag == "Background") { coll.transform.Translate (Vector2.up * 7.66f); } if (coll.tag == "Meteor") { Vector2 pos = coll.transform.position; pos.y = transform.position.y + 8; pos.x = Random.Range(posMin, posMax); coll.transform.position = pos; coll.transform.rotation = Quaternion.Euler(0,0, Random.Range(0,90)); sRender = coll.GetComponent<spriterenderer>(); sRender.color = new Color(Random.Range(0.7f, 1.0f), Random.Range(0.7f, 1.0f), Random.Range(0.7f, 1.0f)); } if (coll.tag == "Star") { sRender = coll.GetComponent<spriterenderer>(); Vector2 pos = coll.transform.position; pos.y = transform.position.y + 8; pos.x = Random.Range(posMin, posMax); coll.transform.position = pos; } } }

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51

using UnityEngine; using System.Collections;   public class BGLooper : MonoBehaviour {   public float posMin = -2.359058f; public float posMax = 2.245874f; private SpriteRenderer sRender;   void Start () { GameObject[] meteors = GameObject.FindGameObjectsWithTag ("Meteor"); foreach (GameObject meteor in meteors) { Vector2 pos = meteor.transform.position; pos.x = Random.Range(posMin, posMax); meteor.transform.position = pos; meteor.transform.rotation = Quaternion.Euler(0,0, Random.Range(0,90)); sRender = meteor.GetComponent<SpriteRenderer>(); sRender.color = new Color(Random.Range(0.7f, 1.0f), Random.Range(0.7f, 1.0f), Random.Range(0.7f, 1.0f)); } GameObject[] stars = GameObject.FindGameObjectsWithTag ("Star"); foreach (GameObject star in stars) { Vector2 pos = star.transform.position; pos.x = Random.Range(posMin, posMax); star.transform.position = pos; } }     void OnTriggerEnter2D(Collider2D coll) { if (coll.tag == "Background") { coll.transform.Translate (Vector2.up * 7.66f); } if (coll.tag == "Meteor") { Vector2 pos = coll.transform.position; pos.y = transform.position.y + 8; pos.x = Random.Range(posMin, posMax); coll.transform.position = pos; coll.transform.rotation = Quaternion.Euler(0,0, Random.Range(0,90)); sRender = coll.GetComponent<SpriteRenderer>(); sRender.color = new Color(Random.Range(0.7f, 1.0f), Random.Range(0.7f, 1.0f), Random.Range(0.7f, 1.0f)); } if (coll.tag == "Star") { sRender = coll.GetComponent<SpriteRenderer>(); Vector2 pos = coll.transform.position; pos.y = transform.position.y + 8; pos.x = Random.Range(posMin, posMax); coll.transform.position = pos; } } }

Attach script ini pada objek Looper, sehingga ketika game di play Main Camera akan bergarak ke sumbu Y positif, kemudian Looper yang parent terhadap Main Camera tersebut akan ikut bergerak dan akan menyentuh objek-objek background, objek-objek background tersebut akan di translate dan di transform ke sumbu tertentu sehingga objek-objek tersebut terlihat seperti looping dengan variasi yang berbeda-beda setiap kali trigger kedalam Looper.

Pada part selanjutnya akan kita bahas tentang movement player beserta controlnya. Sampai bertemu di tutorial selanjutnya.