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 2

by
Length:LongLanguages:
This post is part of a series called Create a Space Shooter with PlayCanvas.
Create a Space Shooter With PlayCanvas: Part 1

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

Ini adalah bagian kedua pengembaraan kita dalam membuat pesawat penembak luar angkasa 3D ini. Di bagian pertama kita melihat bagaimana pengaturan awal dasar game PlayCanvas, dengan physics dan collision, model kita sendiri, dan sebuah kamera.

Sebagai referensi, berikut adalah demo langsung hasil akhirnya.

Di bagian ini, kita akan berfokus pada pembuatan entitas secara dinamis dengan script (mulai peluru spawn sampai asteroid) dan juga menambahkan hal-hal seperti counter FPS dan teks dalam game. Jika Anda telah mengikuti bagian sebelumnya dan sudah senang dengan apa yang Anda miliki, Anda bisa mulai membangun dari sana dan melewati bagian pengaturan awal minimal di bawah ini. Jika tidak, Anda harus memulai lagi dari nol:

Pengaturan Awal Minimal

  1. Mulai suatu proyek baru.
  2. Hapus semua objek di scene kecuali Camera, Box, dan Light.
  3. Masukkan light dan camera ke dalam objek kotak di dalam panel hirarki.
  4. Posisikan kamera pada (0, 1.5,2) dan rotasi (-20,0,0).
  5. Pastikan light object diletakkan pada posisi yang kelihatan bagus (saya menaruhnya di atas kotak).
  6. Tempelkan suatu komponen rigid body ke kotak tersebut. Atur tipenya ke dynamic. Dan atur dampingnya ke 0.05 (baik yang linear maupun angular).
  7. Tambahkan komponen collision ke kotaknya.
  8. Atur gravity ke 0 (dari pengaturan scene)
  9. Letakkan suatu sphere di (0,0,0) untuk menandai posisi ini di ruang tersebut.
  10. Buat dan tempelkan script ini ke dalam kotak dan beri nama Fly.js.

Ujilah apakah semua bekerja dengan baik. Anda harus bisa terbang dengan Z ke thrust dan tombol panah untuk memutarnya!

8. Membuat Asteroid

Objek yang dibuat secara dinamis adalah hal krusial bagi semua jenis game. Dalam demo yang saya buat, saya membuat dua jenis asteroid. Yang pertama melayang-layang saja dan bertindak sebagai rintangan pasif. Asteroidnya akan dimunculkan kembali apabila posisinya terlalu jauh, ini dilakukan agar tercipta medan asteroid yang padat di sekitar pemain. Jenis kedua tercipta dari jauh dan bergerak menuju pemain (untuk menciptakan sensasi bahaya, bahkan ketika pemain tidak bergerak).

Kita butuh tiga hal untuk membuat asteroidnya:

  1. Suatu entitas AsteroidModel untuk mengkloning semua asteroid lainnya.
  2. Script AsteroidSpawner yang dilekatkan ke objek root yang akan bertindak sebagai pabrik/pengkloning.
  3. Suatu script Asteroid untuk mendefinisikan tingkah laku masing-masing asteroid.

Membuat suatu Model Asteroid

Membuat entitas baru dari model yang Anda pilih. Ini bisa sesuatu dari PlayCanvas store, atau BlendSwap, atau hanya bentuk dasar saja. (Jika Anda menggunakan model Anda sendiri, praktek yang baik adalah membukanya di Blender terlebih dahulu untuk memeriksa jumlah wajah yang digunakan dan mengoptimasinya jika diperlukan.)

Berikan bentuk collision dan komponen rigid body yang sesuai (pastikan dinamis). Sekalinya Anda menyukainya, hilangkan centang dari kotak Enabled:

Where to toggle the Enabled property

Apabila Anda menonaktifkan objek seperti ini, sama dengan menghapusnya dari dunia permainan. Hal ini bermanfaat untuk secara sementara menghilangkan objek tersebut, atau dalam kasus kita, untuk mempertahankan objek dengan semua propertinya tetapi tidak memunculkannya di dalam game.

Membuat Script Asteroid Spawner

Buat script baru yang bernama AsteroidSpawner.js dan lekatkan ke object Root di hirarki. (Perhatikan bahwa Root hanyalah suatu objek normal yang bisa memiliki komponen apa saja yang dilekatkan padanya, seperti Camera).

Sekarang  buka script yang baru saja Anda buat.

Cara umum untuk mengkloning suatu entitas dan menambahkannya ke dunia melalui script adalah seperti ini:

Beginilah cara bagaimana Anda akan mengkloning suatu objek jika Anda sudah punya objek "oldEntity". Ini akan menyisakan satu pertanyaan tak terjawab: Bagaimana kita mengakses AsteroidModel yang kita buat?

Ada dua cara untuk melakukan ini. Yang lebih fleksibel adalah dengan membuat atribut script yang memegang entitas yang akan dikloning, jadi Anda bisa dengan mudah berganti model tanpa menyentuh scriptnya. (Inilah yang tepatnya kita lakukan dengan script camera lookAt di langkah 7).

Cara lainnya adalah dengan menggunakan fungsi findByName. Anda bisa memanggil metode ini pada entitas apa saja untuk menemukan anaknya yang mana saja. Jadi bisa dipanggil di root object:

Dan begitulah kode kita dari atas akan dilengkapi. Script lengkap AsteroidSpawner adalah seperti ini:

Ujilah apakah berhasil dengan meluncurkannya dan melihat apakah model asteroid Anda ada.

Catatan: Saya menggunakan newEntity.rigidbody.teleport bukannya newEntity.setPosition. Jika suatu entitas memiliki rigidbody, maka rigidbody tersebut akan mengesampingkan posisi dan rotasi entitas, jadi ingatlah untuk mengeset properti tersebut pada rigidbody, bukan pada entitasnya sendiri.

Sebelum Anda lanjut, cobalah membuat sepuluh asteroid atau lebih di sekitar pemain, baik secara acak maupun dengan cara yang sistematis (mungkin dalam lingkaran?). Itu akan membantu meletakkan semua kode spawning Anda dalam suatu fungsi, jadi akan terlihat seperti ini:

Membuat Script Asteroid

Anda semestinya sekarang sudah terbiasa menambahkan script baru, Buatlah suatu script baru (bernama Asteroid.js) dan lekatkan ke AsteroidModel. Karena semua asteroid yang ada adalah kloningan, semuanya punya script yang sama yang dilekatkan ke mereka.

Jika kita akan membuat banyak asteroid, sebaiknya dipastikan asteroidnya hancur ketika tak lagi dibutuhkan atau jika lokasinya cukup jauh. Berikut adalah cara melakukannya:

Tip melakukan Debugging: Jika Anda ingin menampilkan apa saja, Anda selalu bisa menggunakan konsol peramban seakan-akan ini adalah aplikasi JavaScript normal. Jadi Anda bisa melakukan sesuatu seperti console.log(distance.toString()); untuk menampilkan vektor jarak, sehingga akan muncul di konsol.

Sebelum melanjutkan, periksa apakah asteroidnya benar-benar menghilang ketika Anda bergerak menjauhinya.

9. Spawning Peluru

Membuat peluru pada dasarnya hampir sama dengan asteroid, dengan satu konsep baru: Kita ingin mendeteksi kapan pelurunya mengenai sesuatu dan menghilangkannya. Untuk membuat sistem peluru yang kita butuhkan adalah:

  1. Suatu model peluru untuk dikloning.
  2. Suatu script Shoot.js untuk menghasilkan peluru ketika Anda menekan tombol X.
  3. Script Bullet.js untuk mendefinisikan perilaku tiap peluru.

Membuat Model Peluru

Anda bisa menggunakan bentuk apa saja untuk peluru Anda. Saya menggunakan kapsul supaya bisa mendapat gambaran pelurunya menghadap ke mana. Seperti sebelumnya, buat entitas Anda, kecilkan ukurannya, dan berikan rigid body dan collision box yang sesuai. Beri nama "Bullet" supaya mudah ditemukan.

Sekalinya Anda selesaai,, pastikan untuk menonaktifkannya (dii kotak centang Enabled).

Membuat Script Shoot

Buatlah script baru dan lekatkan ke kapal pemain Anda. Kali ini kita akan menggunakan atribut untuk mendapatkan referensi ke entitas peluru:

Kembalilah ke editor dan tekan "parse" untuk memunculkan atribut baru, lalu pilih entitas peluru yang Anda buat.

Sekarang perbarui fungsinya kita akan:

  1. Mengkloningnya dan menambahkannya ke dunia.
  2. Menerapkan daya ke arah pemain menghadap.
  3. Posisikan di depan pemain.

Anda sudah dikenalkan ke semua konsep ini. Anda telah melihat cara mengkloning asteroid, menerapkan gaya ke suatu arah agar kapalnya bergerak, dan bagaimana memposisikan sesuatu. Saya tidak akan menuliskan implementasinya sebagai tantangan buat Anda. (Tapi jika Anda macet, Anda selalu bisa melihat cara saya mengaplikasikan script Shoot.js saya sendiri di proyek saya).

Berikut beberapa tips yang mungkin bisa mengurangi kepusingan Anda:

  1. Gunakan keyboard.wasPressed bukannya keyboard.isPressed. Ketika mendeteksi kapan tombol X ditekan untuk mengeluarkan tembakan, kode yang depan adalah cara yang bagus untuk menembak hanya ketika Anda menekan tombolnya, bukan terus menerus menembak selama Anda menekan tombol tersebut.

  2. Gunakan rotateLocal, bukannya mengatur rotasi absolut. Untuk memastikan bahwa pelurunya selalu muncul paralel dengan kapal, cukup susah untuk mengalkulasi sudut secara tepat. Cara yang jauh lebih mudah adalah mengatur rotasi peluru ke rotasi kapal, lalu rotasi opelurunya di ruang lokal sejauh 90 derajat di sumbu X.

Membuat Script Perilaku Peluru

Di titik ini, peluru Anda akan dimunculkan, menghantam asteroid, dan memantul di ruang hampa. Jumlah peluru dengan cepat bisa sangat berlebihan, mengetahui cara mendeteksi hantaman adalah hal yang sangat bermanfaat. (Sebagai contoh, mungkin Anda mendapati bahwa Anda bisa membuat objek yang hanya memiliki komponen collision tetapi tidak punya rigid body. Ini akan bertindak sebagai pemicu tetapi tidak akan bereaksi secara fisik).

Buat script baru yang bernama Bullet dan lekatkan ke model Bullet Anda yang telah dikloning. PlayCanvas memiliki tiga tipe even kontak. Kita akan mendengarkan collisionend, yang menembak ketika objeknya berpisah (jika tidak pelurunya akan hancur sebelum asteroidnya sempat bereaksi).

Untuk mendengarkan suatu kejadian kontak, ketikkan ini ke dalam fungsi init Anda:

Lalu buatlah listener-nya sendiri:

Inilah saat ketika nama yang Anda berikan ke asteroid pada saat dimunculkan menjadi relevan. Kita ingin pelurunya hancur hanya ketika menghantam asteroid. result adalah entitas yang sudah dihantamnya.

Sebagai alternatif Anda bisa menghilangkan tanad centang dan membuatnya hancur ketika bertabrakan dengan apapun.

Benar bahwa tidak ada objek lain di dunia yang bisa dihantam, tapi sungguh ada beberapa isu pemainnya memicu hantaman peluru untuk satu frame dan menghilang sebelum bisa diluncurkan. Jika Anda membutuhkan kebutuhan hantaman yang lebih kompleks, PlayCanvas memang mendukung hantaman berkelompok dan masks, tetapi kurang terdokumentasikan dengan baik saat artikel ini ditulis.

10. Menambahkan FPS Meter

Pada intinya kita sudah menyelesaika game-nya pada titik ini. Tentu saja, ada banyak pemolesan kecil yang saya tambahkan pada demo akhir, tetapi tidak ada yang tidak bisa Anda lakukan mengingat apa yang sudah Anda pelajari sejauh ini.

Saya ingin menunjukkan Anda cara membuat FPS meter (meskipun PlayCanvas sudah punya profiler; Anda bisa dilayangkan di atas tombol play dan centang kotak profiler) karena ini adalah contohy yang bagus menambahkan elemen DOM yang ada di luar engine PlayCanvas.

Kita akan menggunakan library slick FPSMeter. Hal pertama yang akan dilakukan adalah menuju situs library tersebut dan mengunduh versi produksi yang telah dikecilkan.

Kembalilah ke editor PlayCanvas, buat script baru dan salin kode fpsMeter.min.js. Lekatkan script ini ke root object.

Setelah library tersebut dimuat, buatlah script baru yang akan menginisialisasi dan menggunakan libary. Beri nama meter.js, dan dari contoh penggunaannya di website library, yang kita miliki:

Tambahkan juga script meter ke root object, dan luncurkan. Anda seharusnya melihat FPS counter di pojok kiri atas layar!

11. Menambahkan Teks

Akhirnya, mari menambahkan sejumlah teks ke dunia game kita. Yang ini tidak terlalu sulit karena ada banyak cara untuk melakukannya. Jika Anda hanya ingin menambahkan UI statis, salah satu cara melakuannya adalah bekerja dengan DOM secara langsung, melapiskan elemen UI Anda di atas elemen kanvas PlayCanvas. Metode lainnya adalah menggunakan SVG. Kiriman ini membahas beberapa cara yang berbeda.

Karena semua itu adalah cara standar menangani teks di web, saya memilih untuk mencari cara membuat teks yang ada di dalam ruang dunia game. Jadi pikirkan sebagai teks yang tampil sebagai tanda di environment atau objek di gamenya.

Cara melakukan ini adalah dengan membuat material untuk tiap potongan teks yang akan kita render. Kami akan membuat invisible canvas sehingga kami melakukan render teks untuk mengakrabkan dengan metode canvas fillText. Akhirnya, kita akan melakukan render canvas ke material agar tampil di game.

Perhatikan bahwa metode ini bisa digunakan untuk lebih dari sekedar teks. Anda bisa secara dinamis menggambar tekstur atau melakukan sesuatu yang bisa dilakukan oleh kanvas.

Ciptakan Materialnya

Buatlah material baru dan beri nama seperti "TextMaterial". Atur warna difusinya ke hitam karena teks kita akan berwarna putih.

Buatlah entitas pesawat dan lekatkan material ini ke situ.

Buatlah Script Teksnya

Anda bisa menemukan script teks penuh di gist ini:

https://gist.github.com/OmarShehata/e016dc219da36726e65cedb4ab9084bd 

Anda bisa melihat bagaimana pengaturan awal tekstur untuk menggunakan canvas sebagai sumber, terutama di baris ini :this.texture.setSource(this.canvas);

Buat script ini dan lekatkan ke pesawat Anda. Perhatikan bahwa script akan membuat dua atribut: text dan font size. Dengan cara ini Anda bisa menggunakan script yang sama untuk objek teks apa saja di game Anda.

Luncurkan simulasinya dan Anda harus melihat teks besar "Hello World" di suatu tempat sekitar itu. Jika Anda tidak melihatnya pastikan bahwa : a) ada sumber cahaya di dekatnya dan b) Anda melihat ke sisi yang benar.  Teksnya tidak akan render bahkan jika Anda melihatnya dari belakang. (Juga membantu menempatkan objek fisik di dekat pesawat untuk menemukan lokasinya terlebih dahulu).

12. Menerbitkan

Begitu Anda selesai menjadikan satu purwarupa keren Anda, Anda bisa mengklik ikon PlayCanvas di pojok kiri atas layar dan memilih "Publishing". Inilah di mana Anda bisa menerbitkan bangunan baru untuk di-host di PlayCanvas dan membagikannya ke seluruh dunia!

Dialog box for publishing on PlayCanvas

Kesimpulan

Demikian untuk demo ini. Ada lebih banyak lagi yang bisa dijelajahi di PlayCanvas, tetapi harapannya ikhtisar ini bisa membuat Anda cukup nyaman dengan dasar-dasar membuat game Anda sendiri. Ini adalah engine yang sungguh bagus sehingga saya berpikir lebih banyak orang harus menggunakannya. Kebanyakan yang sudah dibuat dengan perangkat lunak ini berupa demo teknis, bukan game lengkap, tetapi tidak ada alasan Anda tidak bisa membangun dan menerbitkan sesuatu yang keren dengan PlayCanvas.

Satu fitur yang sebenarnya tidak saya bahas tetapi mungkin sudah jelas bahwa editor PlayCanvas mengizinkan Anda memperbarui game Anda pada waktu sesungguhnya. Ini benar-benar berlaku untuk desain, yang dengannya Anda bisa menggerakkan banyak hal dalam editor dan mereka akan memperbarui di jendela peluncuran jika Anda membukanya, demikian juga kodenya, dengan hot-reloading.

Yang terakhir, meskipun editor sungguh nyaman digunakan, semua yang bisa Anda lakukan dengannya juga bisa dilakukan dengan kode murni. Jadi jika Anda butuh menggunakan PlayCanvas dengan anggaran tertentu, referensi yang baik adalah dengan menggunakkan folder contoh di GitHub. (Tempat yang baik untuk mulai adalah contoh sederhana kubus berputar).

Jika ada yang membingungkan, beritahu saya di komentar! Atau jika Anda telah membuat sesuatu yang keren dan ingin membagikannya, atau menemukan cara yang lebih mudah untuk melakukan sesuatu, saya ingin mengetahuinya!

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.