Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Game Development
  2. 3D
Gamedevelopment

Membuat Pesawat Penembak Luar Angkasa Dengan PlayCanvas: Bagian 1

by
Difficulty:BeginnerLength:LongLanguages:
This post is part of a series called Create a Space Shooter with PlayCanvas.
Create a Space Shooter With PlayCanvas: Part 2

Indonesian (Bahasa Indonesia) translation by Kurniawan Sugi Purwanto (you can also view the original English article)

PlayCanvas sangat memudahkan dalam membuat konten interaktif 3D yang didayai WebGL untuk web. Semuanya JavaScript, jadi berjalan secara asli di peramban tanpa plugin apa pun. Ini adalah mesin yang cukup muda dan baru muncul sekitar tahun 2014, tetapi dengan cepat mendapatkan daya tarik dari nama-nama seperti Disney, King and Miniclip menggunakannya untuk mengembangkan berbagai permainan.

Ini adalah alat yang hebat untuk dua alasan utama: Pertama, ini adalah mesin game yang berfitur lengkap, sehingga menangani semuanya dari grafik dan hantaman hingga audio dan bahkan integrasi dengan gamepa/VR. (Jadi Anda tidak harus berburu library eksternal atau khawatir tentang isu kompatibilitas peramban untuk kebanyakan hal). Yang kedua, dan apa yang membuatnya sungguh menonjol adalah editornya yang berbasis peramban.

Screenshot of PlayCanvass editor
Ini adalah contoh bagaimana suatu proyek tampak dalam editor internal peramban. Sungguh cara yang nyaman dan sangat bagus untuk mengorganisasikan pekerjaan Anda atau bahkan berkolaborasi dengan orang lain pada waktu sesungguhnya.

Jika Anda terbiasa menggunakan mesin Unity, editor PlayCanvas semestinya terlihat akrab (bahkan PlayCanvas menggunakan sistem berbasis komponen yang serupa untuk string-string fungsionalitas). Tidak seperti Unity, PlayCanvas tidak bersifat lintas platform dan hanya bisa menerbitkan untuk web. Meskipun demikian, jika Anda hanya mencar i tentang web, maka ini tetap suatu nilai plus yang besar, karena mesin ini berfokus pada web maka kinerjanya sungguh cepat dan ringan dibandingkan para pesaingnya.

Satu catatan terakhir: Meskipun mesin ini gratis dan sumber terbuka, alat-alat dan editor online hanya gratis untuk proyek umum. Tentu saja layak untuk membayar jika Anda mengembangkan kerja-kerja komersial dengannya, tetapi Anda selalu bisa menggunakannya secara murni sebagai framework penulisan kode dengan gratis.

Hasil Akhirnya

Inilah yang akan kita buat:

In-game screenshot of space shooter

Anda bisa mencoba suatu demo langsung.

Proyek ini sendiri bersifat umum, jadi Anda bisa mencari dan atau memilihnya di halaman proyeknya.

Anda tidak harus punya pengalaman dengan game-game 3D untuk bisa mengikuti tutorial ini, tetapi saya akan mengasumsikan Anda akrab dengan dasar-dasar JavaScript.

Membuat Proyek Kita Sendiri dari Nol

Hasil akhirnya adalah demo yang relatif sederhana di mana Anda bisa terbang dan mendorong asteroid, tetapi demo itu sudah cukup untuk mencakup fungsionalitas dasar yang akan bermanfaat dalam membuat game 3D apa saja. Bagian 1 akan mencakup pengaturan dasar, bekerja dengan berbagai model, sistem fisika, dan kontrol kamera. Bagian 2 akan mencakup sistem peluru, menghasilkan asteroid, dan bekerja dengan teks.

1. Pengaturan Awal Proyek

Buka playcanvas.com dan buat suatu akun.

Begitu Anda masuk, klik pada projects tab di dasbor dan tekan tombol new yang besar dan berwarna orange. Ini seharusnya akan menampilkan kotak "new project". Pilih "blank project" dan beri nama:

Dialog box for creating a new project

Begitu Anda selesai, tekan tombol create di kanan bawah. Ini akan mengirimkan Anda ke halaman project overview. Di sini, Anda akan mengakses pengaturan Anda dan menambahkan kolaborator. Untuk saat ini kita akan mendalami proyeknya saja, jadi klik tombol editor berwarna jingga dan besar.

Ketika Anda memasuki proyek pertama Anda, PlayCanvas akan menunjukkan Anda banyak petunjuk tentang editornya. Anda bisa mengabaikannya untuk saat ini. Hal-hal penting untuk dicatat adalah:

  • Panel (hirarki) sebelah kiri adalah daftar semua objek dunia Anda. Di sinilah Anda bisa menambahkan, menduplikasi, atau menghapus entitas dari layar Anda.
  • Panel (inspektor) sebelah kanan adalah untuk Anda mengedit properti objek yang dipilih. Setelah memilih suatu objek (dengan mengkliknya), Anda akan mampu mengeset posisi dan orientasinya atau memasukkan script dan komponen.
  • Panel (aset) bagian bawah berisi semua aset Anda. Di sinilah Anda bisa mengunggah tekstur atau model-model 3D dan juga membuat script.
  • Di tengah layar adalah tempat Anda mengedit dan membangun dunia game Anda.

2. Membuat suatu Objek

Untuk membuat objek baru di layar Anda, klik tanda plus kecil di puncak panel hirarki:

How to create a new entity

Catatan: Anda mungkin tidak sengaja membuat objek baru di dalam yang sudah ada. Hal ini berguna untuk membangun objek yang terbuat dari banyak bagian dan dijadikan satu dengan satu cara atau yang lain. Anda bisa menggerakkan objek di sekitar panel hirarki untuk mengontrol nesting. Seret ke objek Root untuk menempatkannya kembali di puncak hirarki.

Sebagai contoh, saya akan membuat kotak baru dan mewarnainya merah. Untuk memberikannya warna sesuai kesukaan Anda, kita harus membuat suatu material baru. Anda bisa melakukan ini di panel aset, baik dengan mengklik di mana saja di dalam panel, maupun mengklik ikon plus kecil:

How to add a new material

Begitu selesai dibuat, pilih material Anda dan beri nama deskriptif seperti "RedMaterial" (Anda bisa melihatnya di isian nama di panel inspektor).

Sekarang gulung ke bawah bagian diffuse dan ubah warnanya.

How to change the diffuse color to red

Begitu tahap itu selesai, kembalilah dan pilih kotak baru yang sudah Anda buat (baik dengan mengkliknya di layar atau di panel hirarki). Lalu atur materialnya ke material kustom yang baru saja kami buat:

Where to set an objects material

Dan kotak itu seharusnya sekarang sudah merah! Perhatikan bahwa material yang Anda buat bisa dilekati dengan objek sebanyak apapun yang Anda sukai.

3. Menambahkan Fisika

Untuk mengaktifkan fisika pada objek, kita harus menambahkan dua komponen: Rigid Body dan Collision.

Tambahkan Rigid Body dengan mengklik "Add Component" di panel inspektor objek Anda:

How to add a rigid body component to an entity

Pastikan bahwa tipenya diset ke dynamic.

Where to set rigid body type

Dan lalu tambahkan komponen collision dengan cara yang sama.

Sekarang luncurkan game Anda dengan mengklik pada tombol play kecil di pojok kanan atas layar Anda. Semestinya Anda melihat kotak Anda jatuh ke lantai! Untuk memastikannya, Anda harus menambahkan rigid body dan collision ke pesawatnya juga, pastikan tipe rigid body-nya statis (supaya tidak ikut jatuh).

Tantangan: Hanya untuk bersenang-senang, cobalah menambahkan suatu bola dan miringkan sedikit pesawatnya (baik di sumbu X atau sumbu Z untuk melihatnya berguling.

Catatan tentang Sistem Komponen

Penting untuk sejenak membicarakan tentang sistem komponen karena ini adalah bagian fundamental arsitektur PlayCanvas. Secara konseptual, idenya adalah memisahkan antara fungsionalitas dengan objek. Keuntungan terbesarnya adalah kemampuan untuk menyusun perilaku yang kompleks dari komponen-komponen modular yang lebih kecil.

Sebagai contoh, jika Anda melihat kamera di layar, Anda akan mendapati bahwa ini bukanlah objek yang spesial. Ini hanya entitas umum dengan komponen kamera yang dilekatkan. Anda bisa melekatkan komponen kamera ke apa saja untuk mengubahnya menjadi suatu kamera, atau melekatkan rigid body dan collision ke kamera untuk mengubahnya menjadi objek padat (coba saja!).

Jika Anda penasaran, Anda bisa membaca lebih banyak tentang manfaat dan kekurangan sistem komponen di halaman Wikipedia.

4. Menambahkan suatu Model

Sekarang Anda sudah akrab dengan dasar-dasar, kita bisa mulai menyusunnya jadi satu di game luar angkasa kita. Setidaknya dibutuhkan satu pesawat luar angkasa dan asteroid untuk melakukannya. Ada dua cara untuk menambahkan model:

Ambil suatu Model dari Library PlayCanvas

PlayCanvas memiliki suatu toko (dalam beberapa hal mirip dengan Unity Asset Store) yang di situ Anda bisa menemukan dan mengunduh berbagai aset langsung ke dalam proyek Anda. Untuk mengaksesnya, klik saja library di panel aset.

Tokonya masih sangat baru, jadi masih belum banyak isinya, tetapi ini tempat yang bagus untuk menemukan tempat tampungan (placeholder) atau berbagai aset lainnya untuk bereksperimen.

Saya menggunakan aset hovership ini dari toko sebagai kapal pemain saya.

Unggah Model Anda Sendiri

PlayCanvas benar-benar mendukung pengunggahan file-file FBX, OBJ, 3DS, dan COLLADA (DAE), tetapi yang lebih disukai adalah FBX. Anda bisa dengan mudag mengonversi model 3D apa saja ke FBX dengan membukanya di Blender dan mengekspornya ke format yang Anda inginkan.

Anda bisa menemukan model asteroid yang saya gunakan di Blendswap.com Perhatikan bahwa Anda mungkin ingin mengoptimalkan model 3D Anda sebelum menggunakannya di dalam permainan. Misalnya, model asteroid itu yang berisi lebih dari 200.000 segitiga! Mungkin model itu bagus untuk objek khusus di dalam game, tetapi begitu saya menambahkan lebih dari seratus asteroid di layar, segalanya mulai melambat. Pemodifikasi Decimate milik Blender adalah cara mudah untuk mengoptimasi model-model Anda. Saya menggunakannya untuk memotong model asteroid tersebut ke sekitar 7.000 segitiga tanpa kehilangan terlalu banyak detail.

Sekalinya model Anda masuk ke dalam proyek (mungkin Anda harus memuat ulang jika tidak langsung melihatnya di panel aset), Anda bisa menambahkannya ke layar. Cara paling mudah adalah dengan menyeret modelnya ke layar.

How to add the hovership model into the scene
Inilah model aktualnya yang bisa Anda tambahkan ke layar. Aset-aset lain di sekitarnya adalah tekstur/material, dsb.

Seperti sebelumnya, tambahkan suatu rigid body dan komponen benturan (collision) ke kapal angkasanya. Satu trik yang bisa Anda lakukan dengan benturan adalah menambahkan mesh objek yang sesungguhnya sebagai bentuk benturan-nya sendiri. Ini akan menghasilkan mesh benturan (collision) yang pikselnya sempurna, tetapi tidak akan sangat efisien. Untuk demo ini, saya memilih kotak sederhana sebagai bentuk benturan dan bola untuk asteroidnya) dan mengedit sampai separuh agar kurang lebih cocok dengan bentuk modelnya.

Bagaimana Ofset Bentuk Benturan

Satu masalah yang mungkin Anda dapatkan ketika menyesuaikan bentuk benturan adalah ketidakmampuannya untuk melakukan ofset dari tengah. Cara yang mudah untuk melakukannya (selain mengofset modelnya sendiri di alat semacam Blender sebelum mengekspornya) adalah dengan membuat objek induk yang memiliki collision dan rigid body, dan objek anak yang memiliki modelnya sendiri. Jadi Anda bisa mengofset modelnya sebagai anak secara relatif terhadap induk yang mengandung collision.

Beginilah cara saya melakukan pengaturan proyek demo, supaya Anda bisa melihat bagaimana melakukannya.

5. Mengubah Gravitasi & Pengaturan Layar

Karena game ini diatur di luar angkasa, kita harus mengabaikan gravitasi default. Anda bisa melakukannya di pengaturan layar. Di bagian paling bawah sebelah kiri, klik ikon roda gigi. Ini akan membuka pengaturan panel inspektor. Temukan bagian fisika dan ubah nilai gravitasinya.

Where to disable gravity

Untuk memastikan ini bekerja dengan baik, cobalah meluncurkannya lagi dan lihat apakah pesawatnya melayang-layang saja di angkasa.

Belum bisa disebut luar angkasa tanpa latar belakang bintang, jadi ketika ada di pengaturan layar, mari menambahkan suatu skybox. Anda bisa mengambil satu dari toko atau menemukan secara online yang Anda sukai. Begitu Anda mendapatkannya, tambahkan di bagian rendering:

How to add a skybox

Hal itu akan memberikan gamenya perasaan yang lebih nebula. Dan juga akan menjadi saat yang bagus untuk membersihkan layar Anda dan menghapus objek-objek uji yang kita buat sebelumnya.

6. Menulis Skrip Pesawatnya

Inilah di mana kita akhirnya menulis beberapa kode. Sistem skrip PlayCanvas adalah hal lain yang semestinya sudah akrab jika Anda menggunakan Unity. Anda membuat skrip yang bisa dilekatkan di objek apa saja, dan skrip tersebut bisa memiliki sejumlah atribut yang dikonfigurasi berdasarkan tiap objeknya. Atribut skrip sangat bermanfaat dan menyelesaikan dua pekerjaan:

  1. Modularitas. Anda bisa membuat skrip yang menetapkan bagaimana suatu musuh bergerak dengan atribut kecepatan dan menggunakannya kembali untuk jenis-jenis musuh yang berbeda dengan kecepatan yang berbeda.
  2. Kolaborasi. Atribut skrip bisa dilakukan secara langsung di dalam editor tanpa harus menyentuh kode apapun. Ini memungkinkan desainer untuk masuk dan mengubahsuai nilainya sendiri tanpa harus merepotkan programmer atau menggali kodenya.

Membuat Skrip

Pergi ke bilah assets dan buat aset baru dengan tipe Script. Ini akan menjadi kode untuk perilaku kapal, jadi beri nama semacam "Fly". Klik dua kali untuk membuka editor skrip.

Petunjuk pemakaian PlayCanvas sangat bermanfaat sebagai rujukan ketika menulis skrip, termasuk juga referensi API. Pelengkapan otomatis juga sangat memudahkan untuk menemukan metoda apa saja yang ada. Kita akan memulai dengan sekedar membuat pesawat kita berputar. Ketik ini di fungsi update:

Di dalam skrip apa saja, this merujuk ke komponen skrip itu sendiri, sedangkan this.entity merujuk pada objek yang dilekati oleh skrip tersebut. Anda bisa mengakses komponen apa saja yang dilekatkan ke entitas dengan cara ini. Di sini kita mengakses rigid body dan menerapkan daya anguler ke rigid body tersebut.

Pastikan Anda menyimpan skrip Anda sekarang.

Melekatkan suatu Skrip

Sebelum skripnya digunakan terlalu jauh, mari melekatkannya ke kapal untuk melihat apakah bekerja dengan baik. Untuk melakukannya, tambahkan saja script component ke kapal Anda, lalu tambahkan skrip "fly" Anda ke situ. Perhatikan bahwa Anda hanya bisa menambahkan satu komponen skrip untuk tiap objek, tetapi Anda bisa menambahkan banyak skrip ke komponen tersebut.

Begitu Anda meluncurkannya, Anda akan melihat pesawat Anda berputar!

Tambahkan sebuah Atribut

Sebagaimana dibahas sebelumnya, atribut skrip menjadikan kode kita jauh lebih fleksibel. Anda bisa menambahkan satu dengan mengetikkan ini di bagian atas kode Anda, tepat setelah baris pertama skrip ini dibuat:

Dalam hal ini, nama skrip saya adalah Fly. Satu-satunya opsi yang dibutuhkan adalah type.

Untuk melihat atributnya di editor, kembalilah ke komponen skrip Anda, dan klik ikon dengan dua panah di skrip fly. Ini adalah tombol parse yang akan mencari atribut apa saja dan memperbarui editornya. Sekarang komponen Anda akan terlihat seperti ini:

Where to find script attributes

Terakhir, untuk menggunakan nilai atribut di skrip Anda, lakukan saja this.[attribute_name]. Jadi jika kita ingin ini menjadi kecepatan rotasi, kita bisa mengubah baris kodenya menjadi:

Catatan: Karena tidak ada angular damping, kapalnya akan terus berputar lebih cepat semakin lama dayanya diterapkan. Jika Anda menghapus gayanya, inersianya masih akan ada dan terus berputar dengan kecepatan yang sama. Agar ini berubah, atur angular damping di komponen rigid body ke suatu nilai di bawah nol.

Pergerakan dengan Tombol Panah

Sekarang kita ingin menskripnya supaya bisa mengorientasikan kapalnya dengan tombol panah. Pendekatan yang naif mungkin seperti ini:

Bisakah Anda memberitahu masalah skrip ini? Cobalah. Bisakah Anda dengan mudah mengarahkan kapal ke arah yang diinginkan?

Pikirkan sebelum Anda lanjut membaca. Bagaimana hal ini bisa diperbaiki?

Masalahnya adalah kita menerapkan gaya di koordinat global tanpa memperhitungkan ke mana arah kapal menghadap. Jika posisi kapal relatif horisontal terhadap kamera, dan kita memutarnya di sumbu y dengan menekan tombol kiri/kanan, maka perputarannya benar. Tetapi jika posisi kapal vertikal, rotasi di sumbu y akan menjadi barrel roll.

Masalah yang sama akan terjadi jika kita mencoba menggerakkan kapalnya ke depan. Arah "ke depan" tergantung ke mana pesawat menghadap dan tidak bisa mutlak.

Sekarang, dengan nyaman tiap entitas punya tiga vektor arah yang bisa digunakan: up, right, dan forward. Untuk belok ke kiri/kanan, kita memutar di sepanjang sumbu up, untuk naik dan turun kita memutar di sepanjang sumbu right. up dan right bersifat relatif terhadap entitas. Versi yang sudah jelas akan terlihat seperti ini:

Menambahkan gerakan maju pada dasarnya juga sama:

Jika pergerakannya terasa tidak tepat atau terlalu licin, luangkan waktu untuk menata kecepatan dan faktor damping agar terasa pas.

7. Kontrol Kamera

Cukup sulit untuk melacak pergerakan suatu pesawat yang bergerak dengan kamera statis. Cara paling mudah untuk membuat kamera bergerak mengikuti objek adalah dengan menjadikannya anak objek tersebut.

Cobalah menyeret kamera di panel hirarki ke kapal Anda. Cara yang mudah untuk menyesuaikan pandangan kamera adalah dengan berpindah ke cara pandang kamera di layar. Klik pada tombol di bagian teratas layar yang bertuliskan Perspective. Ini akan memberikan Anda suatu drop-down berisi semua cara pandang layar yang berbeda yang bisa dipilih. Pilihlah Camera, yang posisinya paling bawah. Ini adalah cara pandang khusus karena apapun yang Anda lihat di editor adalah apa yang dilihat kamera di dalam game.

Begitu Anda selesai mengatur cara pandang kamera, pastikan untuk berpindah ke perspektif atau cara pandang lainnya untuk menghindari pengacauan sudut kamera secara tidak sengaja.

Tip: Jika Anda sudah memilih suatu objek di hirarki, tetapi Anda tidak bisa menemukannya di layar Anda, tekan F. Ini akan memfokuskan pandangan ke objek tersebut dan memperbesar tampilannya. Anda bisa melihat lebih banyak jalan pintas keyboard dengan mengklik tombol keyboard di sebelah kiri jauh layar Anda.

Sampai dengan titik ini, kamera akan mengikuti kapal Anda (serigid mungkin). (Anda mungkin tidak bisa mengatakan kapan Anda bergerak jika kamera bergerak mengikuti dan tidak ada objek lain di dunia game, jadi mari menambahkan beberapa objek).

Skrip Kamera

Kamera yang sekedar mengikuti pemain tidaklah sangat menarik. Kiriman di blog PlayCanvas ini mengeksplorasi beragam tipe gerakan kamera. Cara paling sederhana yang bisa kita implementasikan adalah look at camera.

Untuk melakukannya, pertama pindahkan kamera ke belakang, ke objek root.

Berikutnya, buat skrip baru yang bernama lookAt.

Fungsi pembaruan skrip itu akan tampak seperti ini:

Dan akan memiliki suatu atribut:

Sekarang lekatkan skrip itu ke objek kamera.Tekan tombol parse dan tetapkan entitas kapal sebagai targetnya.

Coba untuk melunurkannya! Jika segalanya berjalan dengan baik, kamera Anda akan tetap di tempat tetapi mengorientasikan dirinya ke pesawat.

Sekarang Anda bisa mengimplementasikan tipe kamera lainnya dengan cara yang sama. Trailing follow camera yang disebutkan di kiriman blog secara ideal adalah yang paling bagus, tetapi saya mendapatinya terlalu jittery apabila framerate sedikit turun, jadi untuk demo akhir, saya memilih kamera yang dilekatkan sebagai anak ke kapal tetapi menskripnya bergerak dan berputar sebagaimana kapalnya.

Kesimpulan

Jangan khawatir jika tutorial ini terasa membuat Anda kewalahan. PlayCanvas adalah mesin yang kompleks dengan begitu banyak detail di sana sini. Ada banyak lagi yang bisa dijelajahi, dan memiliki manual yang siap diakses dengan cepat adalah cara yang bagus untuk menemukan tempat bersandar. Cara lain yang bagus untuk belajar adalah dengan menemukan proyek-proyek umum dan melihat cara melakukan berbagai hal.

Bagian 2 akan dimulai dengan membuat suatu sistem peluru, lalu menambahkan berbagai asteroid untuk ditembak, dan akan kita lengkapi dengan menambahkan penghitung FPS dan teks dalam game. Jika Anda ada permintaan atau saran, atau jika ada yang kurang jelas, beritahu saya di komentar!

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.