Membuat Game 2D Sederhana dengan Unity (Part 3)

2222 (1)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.
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.

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 :


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!

Post a Comment