Porting Game Unity ke Facebook App Lewat DropBox

Beberapa bulan yang lalu,  iseng nyoba bikin game 2D menggunakan Unity. Game tersebut berjalan di Platform Android. Sebenarnya secara pribadi gak terlalu puas dengan hasil game tersebut. Pertama, karena grafisnya yang biasa saja, karena bukan ilustrator dan seriously, ini game dibikin sendirian tanpa team jadi agak keteteran ngurusin ini-itu nya. Kedua entah kenapa game tersebut sangat berat kalau dimainkan di device Android dengan spesifikasi hardware low-end. Yah, memang gamenya gak terlalu populer. Entah gameplaynya yang membosankan atau grafisnya yang biasa saja, gue gak terlalu faham. Yang jelas kekurangan-kekurangan tersebut menuntut gue untuk terus belajar dan belajar lagi. Btw, bagi yang ingin mencoba gamenya, bisa mendownload via Playstore disini : PR Ade. Berikut beberapa penampakannya :




Dari kekurangan-kekurangan itu, gue berfikir untuk porting game PR Ade ini via web, karena sadar web gue aja sepi begini maka solusinya game tersebut harus berjalan di platform web facebook. Kebetulan beberapa waktu lalu facebook secara resmi meluncurkan facebook SDK untuk Unity. Dan, yeah ini akan semakin mudah bagi kita yang ingin porting game lewat Facebook. Setelah nyoba tutorial official dari facebook tentang membuat aplikasi Unity ke Facebook Canvas, akhirnya game PR Ade bisa running di facebook :

Tapi untuk sekarang, game tersebut belum akan dipublikasi, masih banyak yang harus di improvisasi. Rencananya pengen nambahin Leaderboard buat score yang nantinya nampilin Highscore dari akun-akun facebook, butuh research lagi nih untuk beberapa hari.
Bagi temen-temen developer yang ingin porting game Unity nya ke Facebook, bisa mengikuti official tutorial dari facebook di link berikut : Create your app on Facebook. Tutorialnya mudah difahami kok, dan langsung bisa dipraktekan. Mungkin kita akan sedikit kesulitan pas section Unity Binary URL seperti pada gambar berikut :

Unity Binary URL ini adalah link dimana file .unity3d diupload. Asumsi gue dulu facebook menyediakan hosting sendiri untuk upload gamenya, ternyata tidak. Kita tetep harus upload filenya ke hosting sendiri. Oke, kita punya hosting sendiri terus filenya diupload, ini masalah baru lagi. Facebook ternyata hanya menerima file dengan hosting bersertifikat atau ssl (https). Bagi yang hostingnya tidak memakai ssl seperti gue ini sedikit mengecewakan, soalnya untuk tambah sertifikat ssl harus membayar lagi ke penyedia hosting atau jasa ssl. Pencarian gue gak sampai disitu, setelah tanya-tanya ke forum ternyata hal tersebut bisa diakali dengan memakai DropBox. Tentu saja hosting file sharing sekelas DropBox memakai https. Nextstep, yang harus Anda lakukan yaitu upload file tersebut ke DropBox. Kalau belum punya akun, buat dulu aja. DropBox menyediakan kurang lebih 2GB untuk akun free, game yang gue upload saja hanya sekitar 6MB, jadi enggak ada masalah dengan kapasitas. Jika sudah selesai, copy link download dari file yang sudah Anda download tadi. Ingat, copy link downloadnya (salin alamat tautan), bukan link share filenya. Contoh seperti pada gambar berikut :

Jika telah selesai, paste-kan ke bagian Unity Binary URL seperti berikut :

Klik save pada pengaturan App, kemudian buka link facebook aplikasi Anda, seharusnya file tersebut berhasil di-load dan ditampilkan pada facebook canvas.

Cuman yang jadi masalah adalah, apakah skema tersebut dibenarkan Oleh DropBox ? Berarti setiap kali kita memainkan game tersebut otomatis kita mendownload filenya via DropBox. Selanjutnya jika gamenya banyak yang mainin, otomatis akan besar sekali traffic ke file tersebut. Saya sudah mencari berapa bandwidth yang diizinkan oleh DropBox untuk mendownload file kita, tetapi tidak ketemu. Semoga normal-normal aja ya.

Read more

Membuat Game 2D Sederhana dengan Unity (Part 5)

Oke, sebelum keburu basi mari kita lanjut ke video selanjutnya, yaitu menambahkan Score pada game. Video dari Brackeys seperti berikut :

Kita telah memiliki Game Object dengan nama _GM sebagai game manager. System score tersebut akan kita simpan sebagai komponen script pada objek _GM. Pada _GM buatlah script baru dengan nama GameManager dengan language Java Script seperti berikut :

Double klik pada komponen GameManager (script) tersebut sehingga muncul jendela monodevelop. Buat beberapa variable. Ada tiga variable yang kita butuhkan : variable score untuk player 1, variable score untuk player 2, dan variable berupa GUISkin sebagai indicator score.

static var playerScore01 : int =0 ; static var playerScore02 : int = 0; var theSkin : GUISkin;

1 2 3

static var playerScore01 : int =0 ; static var playerScore02 : int = 0; var theSkin : GUISkin;

Mengapa harus menggunakan keyword ‘static’ pada variable playerScore01 dan playerScore02 ? Ini akan berhubungan dengan function yang akan kita gunakan selanjutnya. Kita akan membuat sebuah fungsi dimana ketika Player01 berhasil memantulkan bola dan Player02 tidak mendapatkannya, maka Player01 akan mendapatkan Score = 1 begitu pula sebaliknya. Simpel, kita akan menjadikan wall dari masing-masing arah berlawanan sebagai point. Misal jika bola datang dari arah Player01 (yang berada di kiri) kemudian menyentuh wall yang berada di kanan (setelah Player02) maka Player01 mendapatkan point = 1. Got it ? Maka jika dituliskan dalam Script akan menjadi seperti berikut :

static function Score(wallName : String) { if(wallName == "RightWall") { playerScore01 += 1; } else if(wallName == "LeftWall") { playerScore02 += 1; } Debug.Log("Score player 1 adalah : " +playerScore01); Debug.Log("Score player 2 adalah : " +playerScore02); }

1 2 3 4 5 6 7 8 9 10 11 12 13

static function Score(wallName : String) { if(wallName == "RightWall") { playerScore01 += 1; } else if(wallName == "LeftWall") { playerScore02 += 1; } Debug.Log("Score player 1 adalah : " +playerScore01); Debug.Log("Score player 2 adalah : " +playerScore02); }

Kita membuat suatu function dengan keyword static, why ? Karena kita akan memanggil function Score secara langsung dari manapun tanpa harus instance atau mendifinisikannya terlebih dahulu. Normalnya kita bisa menggunakan method ‘SendMessage’, namun harus didefinisikan terlebih dahulu atau wiring di inspector yang mana hal tersebut bukan yang kita inginkan saat ini. Kita membutuhkan method yang lebih cepat untuk system score atau system-system yang bersifat manager atau penggunaannya sering. Sebagai pemahaman selanjutnya Anda bisa mengikuti module tutorial dari Unity tentang static di sini.Dalam function Score buat variable String sebagai identifikasi wall mana yang telah tersenutuh bola; kiri atau kanan. Jika ternyata informasi yang diterima function score ini adalah “RightWall”, maka 1 point untuk Player01, begitu juga sebaliknya.
Selanjutnya, siapa yang akan mengirimkan informasi “wall” ini ke GameManager (function score) ? Bila melihat skenarionya, kita bisa menggunakan objek Bola atau masing-masing wall (kiri dan kanan). Namun tutorial ini mengacu pada video brackeys, jadi kita akan menggunakan “LeftWall” dan “RightWall” sebagai pengirim pesan ke GameManager. Maka langkahnya sebagai berikut :

Seleksi kedua objek wall, kemudian tambahkan komponen script baru dengan nama PointScript atau apapun terserah Anda. Kemudian centang bagian ‘Is Trigger’ pada komponen Box Collider 2D (pada screenshoot belum di trigger). Buka script baru tersebut pada monodevelop, kemudian ubahlah menjadi seperti berikut :

function OnTriggerEnter2D(coll : Collider2D) { if(coll.name == "Ball") { var wallName : String = transform.name; GameManager.Score(wallName); } }

1 2 3 4 5 6 7 8

function OnTriggerEnter2D(coll : Collider2D) { if(coll.name == "Ball") { var wallName : String = transform.name; GameManager.Score(wallName); } }

OnTriggerEnter2D adalah sebuah fungsi dimana sebuah Collider dengan keadaan Trigger dimasuki atau bersentuhan (bukan Collision) dengan objek berkomponen Collider lainnya. Objek wall dengan keadaan Trigger nantinya akan di enter oleh objek Bola yang juga memiliki Collider, pada saat event tersebut, Do Something! Ya, kita akan mengirimkan informasi kepada GameManager bahwa bola telah menyentuh wall kiri atau kanan.
Perhatikan baris ‘GameManager.Score(wallName)’ : Baris ini adalah perintah untuk melakukan fungsi Score pada Script GameManager dengan arg berupa String yang berisi nama Objek dimana script ini diletakkan (transform.name). Sehingga proses penambahan score secara sederhana dapat di gambarkan seperti berikut :

Terakhir, kita akan menampilkan Score tersebut pada game. Pada script Game Manager tadi kita telah membuat variable untuk GUISkin. Sebelum membuat script untuk GUI nya, terlebih dahulu buat GUISkin pada folder asset, klik kanan seperti pada berikut :

Berinama sesuai keinginan Anda, kemudian drag-n-drop pada komponen GameManager seperti berikut :

Buka kembali script GameManager kemudian tambahkan fungsi baru berupa OnGUI berikut :

function OnGUI() { GUI.skin = theSkin; GUI.Label(new Rect(Screen.width / 2 - 150, 20, 100, 100), "" + playerScore01); GUI.Label(new Rect(Screen.width / 2 + 150, 20, 100, 100), "" + playerScore02); }

1 2 3 4 5 6

function OnGUI() { GUI.skin = theSkin; GUI.Label(new Rect(Screen.width / 2 - 150, 20, 100, 100), "" + playerScore01); GUI.Label(new Rect(Screen.width / 2 + 150, 20, 100, 100), "" + playerScore02); }

Pilih Save kemudian pilih GUISkin yang telah dibuat tadi. Pada tahap ini Anda bisa mengatur tampilan Score yang Anda inginkan seperti jenis font, style font, ukuran, warna dan lain-lain.

Hit Play! Jika langkahnya sudah benar, maka tampilannya akan seperti berikut :

Sistem Score berjalan dengan lancar, pada gambar diatas adalah ketika bola melewati Player02 kemudian menyentuh RightWall, maka +1 poin untuk Player01.
Berikut adalah Code lengkap script GameManager.js

#pragma strict static var playerScore01 : int =0 ; static var playerScore02 : int = 0; var theSkin : GUISkin; static function Score(wallName : String) { if(wallName == "RightWall") { playerScore01 += 1; } else if(wallName == "LeftWall") { playerScore02 += 1; } Debug.Log("Score player 1 adalah : " +playerScore01); Debug.Log("Score player 2 adalah : " +playerScore02); } function OnGUI() { GUI.skin = theSkin; GUI.Label(new Rect(Screen.width / 2 - 150, 20, 100, 100), "" + playerScore01); GUI.Label(new Rect(Screen.width / 2 + 150, 20, 100, 100), "" + playerScore02); }

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

#pragma strict   static var playerScore01 : int =0 ; static var playerScore02 : int = 0; var theSkin : GUISkin;     static function Score(wallName : String) { if(wallName == "RightWall") { playerScore01 += 1; } else if(wallName == "LeftWall") { playerScore02 += 1; } Debug.Log("Score player 1 adalah : " +playerScore01); Debug.Log("Score player 2 adalah : " +playerScore02); }   function OnGUI() { GUI.skin = theSkin; GUI.Label(new Rect(Screen.width / 2 - 150, 20, 100, 100), "" + playerScore01); GUI.Label(new Rect(Screen.width / 2 + 150, 20, 100, 100), "" + playerScore02); }

PointScript.js

#pragma strict function OnTriggerEnter2D(coll : Collider2D) { if(coll.name == "Ball") { var wallName : String = transform.name; GameManager.Score(wallName); } }

1 2 3 4 5 6 7 8 9 10

#pragma strict   function OnTriggerEnter2D(coll : Collider2D) { if(coll.name == "Ball") { var wallName : String = transform.name; GameManager.Score(wallName); } }

 What’s Next ?

Step selanjutnya adalah bagaimana Bola Respwan jika terjadi poin dan game terus berlanjut. Dibagian akhir kita akan mencoba porting game tersebut kedalam Platform Android.

Update!

Sepertinya untuk beberapa alasan seri ini tidak akan saya update lagi, selebihnya Anda bisa mengikuti lebih jauh tutorialnya lewat video di channel Youtubenya Brackeys. Selanjutnya saya akan sedikit banyak posting game-game clone atau seri tutorial-tutorial lainnya yang belum pernah (atas sepengetahuan saya) diposting atau dilakukan oleh orang lain. Bagi Anda yang ingin mendownload file project dari seri ini bisa Anda download filenya dibawah ini :

Read more

Membuat Game 2D Sederhana dengan Unity (Part 4)

Pada tutorial sebelumnya kita sudah membuat batas-batas sampai mana player boleh bergerak. Pada tutorial kali ini kita akan menambahkan bola serta behaviournya pada scene.
Buka folder Sprites pada folder asset, kemudian drag & drop sprite Ball ke dalam scene atau ke dalam hierarchy sehingga menjadi sebuah objek game baru.

Selanjutnya kita akan menambahkan komponen-komponen fisik sehingga nanti bola akan bergerak sesuai fisik sesungguhnya.

Pilih objek Ball, kemudian tambahkan komponen Circle Collider 2D baru pada objek tersebut. Pastikan collider menyelimuti semua permukaan objek dengan tepat dengan mengatur radius. Aturlah Radius dengan memasukan angka 0.23 sehingga permukaan objek benar-benar tertutupi.

Tambahkan komponen fisik kedua, Rigidbody 2D pada objek Ball. Atur properties-nya seperti gambar diatas. Hit play untuk melihat apa yang terjadi pada objek bola. Ketika scene dalam keadaan Play seharusnya bola akan terjatuh kebawah (vertical) dengan kecepatan rendah, karena kita mengatur Mass = 0,1 dan Gravity = 1 maka objek bola akan bergerak mengikuti visualisasi gaya gravitasi dengan perbandingan berat massa 1/10.

Selanjutnya untuk membuat bola memantul atau Bouncing kita bisa menggunakan Physics Material 2D. Klik kanan pada folder Sprites kemudian pilih PhyscsMaterial2D, berinama BallBounce. Pada inspector atur properties nya menjadi friction = 0 dan Bounciness = 1. Fricton adalah variable gesekan antar collider (collision), biarkan saja 0, kemudian Bounciness adalah variable untuk pantulan objek, isikan angka 1 untuk membuat pantulan terlihat nyata.

Drag BallBounce yang telah kita buat tadi pada variable Materal dalam komponen Circle Collider 2D seperti gambar diatas. Hit play kemudian lihat apa yang terjadi, seharusnya bola memantul secara vertical mengikuti gravitasi. Karena yang kita inginkan bola tersebut memantul secara horizontal, maka ubah value Gravity pada komponen Rigdbody2D menjadi nol.
Selanjutnya kita akan membuat behaviour dari bola tersebut sehingga berfungsi layaknya bola pingpong pada umumnya. Silahkan tambahkan komponen script baru berapa javascript pada komponen bola dengan nama BallControl.

function Start () { var randomNumber = Random.Range(0,2); if(randomNumber <= 0.5){ rigidbody2D.AddForce(new Vector2 (80, 10)); } else{ rigidbody2D.AddForce(new Vector2 (-80, -10)); } }

1 2 3 4 5 6 7 8 9 10

function Start () { var randomNumber = Random.Range(0,2); if(randomNumber <= 0.5){ rigidbody2D.AddForce(new Vector2 (80, 10)); } else{ rigidbody2D.AddForce(new Vector2 (-80, -10)); } }

Pertama, kita akan membuat bola memantul secara random pada saat game pertama kali dimulai. Buat variable baru pada function Start() berupa random range dengan range antara 0 sampai 2. Variable ini akan membuat float secara random dari 0-2, kita bisa memanfaatkan randominasi tersebut untuk assign apakah bola memantul harus ke kanan atau kekiri ketika pertama kali game dijalankan. Buat statement if yang jika random range tersebut lebih kecil atau sama dengan 0,5 maka bola akan bergerak ke kanan pada saat pertama kali game dimulai. Gunakan Addforce seperti pada kode diatas. Statement else untuk menghandle logika sisanya, maka buatlah bola bergerak kekiri terlebih dahulu dengan menggunakan AddForce yang sama dengan kondisi minus. Karena kita telah men-set gravity = 0 dan juga telah menambahkan Bounciness, seharusnya ketika game dijalankan bola sudah bisa memantul ketika mengenai player ataupun wall dengan posisi bola random ketika game pertama kali dibuat. Namun Movement bola belum tampak real, sehingga perlu ditambahkan fungsi lain pada script tersebut.

function OnCollisionEnter2D(collInfo : Collision2D) { if(collInfo.collider.tag == "Player"){ rigidbody2D.velocity.y = rigidbody2D.velocity.y/2 + collInfo.collider.rigidbody2D.velocity.y/3; } }

1 2 3 4 5

function OnCollisionEnter2D(collInfo : Collision2D) { if(collInfo.collider.tag == "Player"){ rigidbody2D.velocity.y = rigidbody2D.velocity.y/2 + collInfo.collider.rigidbody2D.velocity.y/3; } }

fungsi OnCollisionEnter2D berfungsi untuk mendeteksi apakah collider mengalami tabrakan atau Collision dengan collider lain. Buat suatu kondisi dimana ketika Collider dalam bola ini menyentuh collider lain dengan tag Player, maka akan terjadi movement seperti pada kode diatas. Kode tersebut membuat gerakan bola memantul sesuai gerakan Player. Ketika kedua Player tidak digerakan dan mengenai masing-masing Player, maka bola hanya memantul dua arah secara stagnan. Namun ketika bola menyentuh collider Player sambil Player bergerak ke arah tertentu, maka bola akan memantul mengikuti impak pergerakan Player.

Save Script, kemudian set Tag semua Player menjadi ‘Player’ seperti gambar diatas. Kemudian hit Play untuk melihat apa yang terjadi. Dan ya, sepertinya secara garis besar bola sudah bergerak sebagaimana mestinya dalam permainan pingpong. Langkah selanjutnya adalah menambahkan score dan beberapa tweak sehingga gamenya lebih terlihat rapi. Stay tune!

Read more

Membuat Game 2D Sederhana dengan Unity (Part 3)

Sesuai dengan judulnya, tutorial kali ini kita akan membahas tentang salah satu fitur di Unity, yaitu ScreenToWorldPoint. Fitur ini berfungsi supaya game objek berada pada posisi dinamik terhadap kamera, simpelnya game objek akan berada pada posisi absolut dengan value tertentu sesuai resolusi kamera, lebih jauh kita sebut itu responsive.
Buka kembali project yang sebelumnya kita buat. Implementasi ScreenToWorldPoint pada tutorial kali ini akan kita pakai dalam pembuatan objek pembatas. Objek pembatas ini nantinya akan berfungsi sebagai garis batas sampai dimana Player boleh melakukan movement. Idealnya garis batas tersebut tepat berada seperti garis kamera, sedangkan game yang akan kita build nanti asumsinya adalah cross-platform, otomatis screen resolution yang digunakanpun berbeda-beda yang membuat proyeksi kameranyapun memiliki resolusi yang berbeda juga. Oleh karenanya kita akan memakai fitur tersebut, sehingga tak peduli nantinya kamera akan beradaptasi menjadi ukuran berapapun posisi objek akan mengikuti ketentuan ScreenToWorldPoint.

Silahkan buat game objek kosong baru dengan nama _GM atau nama apapun sesuai keinginan Anda. Objek ini nantinya akan kita gunakan sebagai game manager yang menangani segala macam hal yang berhubungan dengan sistem game. Atur posisi x, y dan z pada komponen transform menjadi 0.

Posisi inspector masih pada game objek _GM, tambahkan komponen baru pada objek tersebut. Kali ini kita akan menambahkan script dengan bahasa Javascript, kemudian beri nama GameSetup. Double klik pada script tersebut, sehingga kita akan masuk pada script editor mono develop. Let’s write some codes!
kita akan membuat 4 objek yang akan berfungsi sebagai pembatas / wall. Idealnya dia tidak terlihat tetapi memiliki fisik, sehingga kita hanya perlu menambahkan collider saja.

var topWall : BoxCollider2D; var mainCam : Camera; var bottomWall : BoxCollider2D; var leftWall : BoxCollider2D; var rightWall : BoxCollider2D; var Player01 : Transform; var Player02 : Transform;

1 2 3 4 5 6 7 8

var topWall : BoxCollider2D; var mainCam : Camera; var bottomWall : BoxCollider2D; var leftWall : BoxCollider2D; var rightWall : BoxCollider2D;     var Player01 : Transform; var Player02 : Transform;

Buat beberapa variable seperti pada script diatas. Kita akan mengatur posisi 4 objek pembatas terhadap kamera beserta dua objek Player. Pada variable pembatas / wall kita memakai BoxCollider2D seperti yang telah dijelaskan sebelumnya dan pada objek Player memakai Transform. Terakhir kita juga membutuhkan objek Camera , tambahkan variable kamera pada script.

function Update () { // posisikan wall ke tepi screen topWall.size = new Vector2 (mainCam.ScreenToWorldPoint(new Vector3(Screen.width * 2f, 0f, 0f)).x, 1f); topWall.center = new Vector2 (0f, mainCam.ScreenToWorldPoint(new Vector3(0f, Screen.height, 0f)).y + 0.5f); bottomWall.size = new Vector2 (mainCam.ScreenToWorldPoint(new Vector3(Screen.width * 2f, 0f, 0f)).x, 1f); bottomWall.center = new Vector2 (0f, mainCam.ScreenToWorldPoint(new Vector3(0f, 0f, 0f)).y - 0.5f); leftWall.size = new Vector2 (1f, mainCam.ScreenToWorldPoint(new Vector3(0f, Screen.height * 2f, 0f)).y); leftWall.center = new Vector2 (mainCam.ScreenToWorldPoint(new Vector3(0f, 0f, 0f)).x + 0.5f, 0f); rightWall.size = new Vector2 (1f, mainCam.ScreenToWorldPoint(new Vector3(0f, Screen.height * 2f, 0f)).y); rightWall.center = new Vector2 (mainCam.ScreenToWorldPoint(new Vector3(Screen.width, 0f, 0f)).x + 0.5f, 0f); Player01.position.x = mainCam.ScreenToWorldPoint(new Vector3(75f, 0f,0f)).x; Player02.position.x = mainCam.ScreenToWorldPoint(new Vector3(Screen.width -75f, 0f,0f)).x; }

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

function Update () { // posisikan wall ke tepi screen topWall.size = new Vector2 (mainCam.ScreenToWorldPoint(new Vector3(Screen.width * 2f, 0f, 0f)).x, 1f); topWall.center = new Vector2 (0f, mainCam.ScreenToWorldPoint(new Vector3(0f, Screen.height, 0f)).y + 0.5f);     bottomWall.size = new Vector2 (mainCam.ScreenToWorldPoint(new Vector3(Screen.width * 2f, 0f, 0f)).x, 1f); bottomWall.center = new Vector2 (0f, mainCam.ScreenToWorldPoint(new Vector3(0f, 0f, 0f)).y - 0.5f);     leftWall.size = new Vector2 (1f, mainCam.ScreenToWorldPoint(new Vector3(0f, Screen.height * 2f, 0f)).y); leftWall.center = new Vector2 (mainCam.ScreenToWorldPoint(new Vector3(0f, 0f, 0f)).x + 0.5f, 0f);     rightWall.size = new Vector2 (1f, mainCam.ScreenToWorldPoint(new Vector3(0f, Screen.height * 2f, 0f)).y); rightWall.center = new Vector2 (mainCam.ScreenToWorldPoint(new Vector3(Screen.width, 0f, 0f)).x + 0.5f, 0f);     Player01.position.x = mainCam.ScreenToWorldPoint(new Vector3(75f, 0f,0f)).x; Player02.position.x = mainCam.ScreenToWorldPoint(new Vector3(Screen.width -75f, 0f,0f)).x;     }

Oke, selanjutnya kita mulai mengatur posisi masing-masing objek terhadap kamera.

topWall.size = new Vector2 (mainCam.ScreenToWorldPoint(new Vector3(Screen.width * 2f, 0f, 0f)).x, 1f);

Pertama kita akan mengatur size objek wall paling atas yaitu topWall, karena kita bermain di dimensi dua, maka koordinat yang akan kita pakai adalah Vector2. method size akan mengatur / membuat ukuran objek sesuai vector masing-masing sumbu (x dan y). Perlu diingat topWall berada di posisi atas dengan asumsi screen kita landscape. Karenanya posisi yang akan kita buat responsive adalah size x atau horizontal, sedangkan size pada titik y kita buat value float statisnya saja karena tidak akan berpengaruh besar terhadap dinamika screen. Maka ScreenToWorldPoint kita apply pada value x di Vector2 pada topWall.size. Screenspace atau ScreenToWorldPoint didefinisikan dalam pixel, lihat doc-nya di sini, Pada script diatas ScreenSpace.x adalah ScreenWidth dikalikan 2 float, pada implementasinya Anda akan lihat topWall Collider akan selalu lebih panjang beberapa pixel daripada lebar screen pada semua resolusi , dengan catatan game pada posisi play dengan expand window seperti pada gambar berikut :

topWall.center = new Vector2 (0f, mainCam.ScreenToWorldPoint(new Vector3(0f, Screen.height, 0f)).y + 0.5f);

Jika tadi kita telah mengatur ukurannya, selanjutnya kita akan mengatur posisi absolut terhadap kamera. method .center mengatur positioning dari Collider2D tersebut, selanjutnya kita hanya perlu mengatur posisi y atau vertical dari objek topWall. Kenapa hanya posisi y ? Karena posisi topWall harus berada terus diatas kamera. Mudahnya coba Anda atur resolusi layar, pada prinsip responsive jika resolusi diatur atas atau bawah yang berubah adalah posisi y, sebaliknya jika Anda merubah posisi ke kanan atau kekiri yang berubah adalah posisi x. Untuk follow-upnya, maka pada side lainnya sizenya dibuat dinamik mengikuti adjusment resolusinya. Misal, jika yang dirubah adalah panjang resolusi (vertical / sumbu y) maka semua posisi (samping kanan / samping kiri) yang posisi utamanya mengikuti sumbu tersebut harus dinamik mengikuti perbuhan sumbu tersebut. Pada script diatas posisi y diatur dalam Screen.height atau panjang screen yang diatur dalam posisi 0.5 pixel melewati edge / garis kamera. Polanya hampir sama untuk semua posisi termasuk objek Player, yang harus kita fahami adalah positioning dari objek-objek yang kita kehendaki terhadap ScreenSpace. Untuk pemahaman lebih jauhnya Anda bisa mengubah value dari masing-masing posisi pada script, lihat pada scene atau game apa saja yang berubah atau berpindah. Sehingga script akhirnya adalah sebagai berikut :

#pragma strict var mainCam : Camera; var topWall : BoxCollider2D; var bottomWall : BoxCollider2D; var leftWall : BoxCollider2D; var rightWall : BoxCollider2D; var Player01 : Transform; var Player02 : Transform; function Update () { // posisikan wall ke tepi screen topWall.size = new Vector2 (mainCam.ScreenToWorldPoint(new Vector3(Screen.width * 2f, 0f, 0f)).x, 1f); topWall.center = new Vector2 (0f, mainCam.ScreenToWorldPoint(new Vector3(0f, Screen.height, 0f)).y + 0.5f); bottomWall.size = new Vector2 (mainCam.ScreenToWorldPoint(new Vector3(Screen.width * 2f, 0f, 0f)).x, 1f); bottomWall.center = new Vector2 (0f, mainCam.ScreenToWorldPoint(new Vector3(0f, 0f, 0f)).y - 0.5f); leftWall.size = new Vector2 (1f, mainCam.ScreenToWorldPoint(new Vector3(0f, Screen.height * 2f, 0f)).y); leftWall.center = new Vector2 (mainCam.ScreenToWorldPoint(new Vector3(0f, 0f, 0f)).x + 0.5f, 0f); rightWall.size = new Vector2 (1f, mainCam.ScreenToWorldPoint(new Vector3(0f, Screen.height * 2f, 0f)).y); rightWall.center = new Vector2 (mainCam.ScreenToWorldPoint(new Vector3(Screen.width, 0f, 0f)).x + 0.5f, 0f); Player01.position.x = mainCam.ScreenToWorldPoint(new Vector3(75f, 0f,0f)).x; Player02.position.x = mainCam.ScreenToWorldPoint(new Vector3(Screen.width -75f, 0f,0f)).x; }

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

#pragma strict     var mainCam : Camera;     var topWall : BoxCollider2D; var bottomWall : BoxCollider2D; var leftWall : BoxCollider2D; var rightWall : BoxCollider2D;     var Player01 : Transform; var Player02 : Transform;     function Update () { // posisikan wall ke tepi screen topWall.size = new Vector2 (mainCam.ScreenToWorldPoint(new Vector3(Screen.width * 2f, 0f, 0f)).x, 1f); topWall.center = new Vector2 (0f, mainCam.ScreenToWorldPoint(new Vector3(0f, Screen.height, 0f)).y + 0.5f);     bottomWall.size = new Vector2 (mainCam.ScreenToWorldPoint(new Vector3(Screen.width * 2f, 0f, 0f)).x, 1f); bottomWall.center = new Vector2 (0f, mainCam.ScreenToWorldPoint(new Vector3(0f, 0f, 0f)).y - 0.5f);     leftWall.size = new Vector2 (1f, mainCam.ScreenToWorldPoint(new Vector3(0f, Screen.height * 2f, 0f)).y); leftWall.center = new Vector2 (mainCam.ScreenToWorldPoint(new Vector3(0f, 0f, 0f)).x + 0.5f, 0f);     rightWall.size = new Vector2 (1f, mainCam.ScreenToWorldPoint(new Vector3(0f, Screen.height * 2f, 0f)).y); rightWall.center = new Vector2 (mainCam.ScreenToWorldPoint(new Vector3(Screen.width, 0f, 0f)).x + 0.5f, 0f);     Player01.position.x = mainCam.ScreenToWorldPoint(new Vector3(75f, 0f,0f)).x; Player02.position.x = mainCam.ScreenToWorldPoint(new Vector3(Screen.width -75f, 0f,0f)).x;     }

Simpan script tersebut kemudian buat 4 objek kosong baru dengan nama : TopWall, BottomWall, LeftWall, RightWall kemudian beri komponen BoxCollider2D pada masing-masing objek tadi. Drag 4 objek tadi sehingga berada dalam objek _GM (lihat gambar) kemudian set semua posisinya menjadi 0. Pada tutorial sebelumnya kita hanya mempunyai 1 Player, silahkan tambahkan lagi Player kedua dengan cara duplikat Player01, rename menjadi Player02. Jika sudah, pilih kembali objek _GM, pada komponen Game Setup terlihat 6 variable yang belum di assign, silahkan assign sesuai namanya masing-masing (lihat gambar).

Jika sudah, hit tombol Play, kemudian perhatikan window Scene, masing-masing wall mempunyai Collider yang dinamis. Anda bisa melihatnya dengan cara mengatur resolusi pada window game. Selamat mencoba!

Read more