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

Buat Shooter Ruang Dengan PlayCanvas: Bahagian 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

Malay (Melayu) translation by Meyria (you can also view the original English article)

Ini adalah bahagian kedua usaha kami untuk mencipta penembak ruang 3D. Pada bahagian pertama kita melihat bagaimana untuk menetapkan permainan PlayCanvas asas, dengan fizik dan perlanggaran, model kita sendiri, dan kamera.

Untuk rujukan, inilah demo langsung hasil akhir kami lagi.

Di bahagian ini, kami akan memberi tumpuan kepada mewujudkan entiti dinamik dengan skrip (untuk menembakkan peluru dan asteroid) serta cara menambah perkara seperti kaunter FPS dan teks dalam permainan. Sekiranya anda telah mengikuti bahagian sebelumnya dan berpuas hati dengan apa yang anda ada, anda boleh mula membina dan melangkau bahagian persediaan minimum berikut. Jika tidak, jika anda perlu memulakan semula dari awal:

Persediaan Minimum

  1. Mulakan projek baru.
  2. Padamkan semua objek di tempat kejadian kecuali untuk Kamera, Peti, dan Cahaya.
  3. Letakkan kedua-dua cahaya dan kamera di dalam objek kotak dalam panel hierarki.
  4. Letakkan kamera pada posisi (0,1,5,2) dan putaran (-20,0,0).
  5. Pastikan objek cahaya ditempatkan dalam kedudukan yang kelihatan baik (saya meletakkannya di atas kotak).
  6. Lampirkan komponen badan yang tegar ke kotak. Tetapkan jenisnya kepada dinamik. Dan tetapkan redamannya kepada 0.95 (kedua-duanya linear dan sudut).
  7. Pasang komponen perlanggaran ke dalam kotak.
  8. Tetapkan graviti ke 0 (dari tetapan pemandangan).
  9. Letakkan sfera pada (0,0,0) hanya untuk menandakan kedudukan ini di ruang angkasa.
  10. Buat dan lampirkan skrip ini ke kotak dan panggilnya Fly.js:

Uji bahawa semuanya berfungsi. Anda sepatutnya dapat terbang dengan Z untuk menekan butang dan anak panah untuk berputar!

8. Spawning Asteroid

Secara dinamik mewujudkan objek adalah penting untuk hampir semua jenis permainan. Dalam demo yang saya buat, saya memancarkan dua jenis asteroid. Jenis pertama hanya terapung dan bertindak sebagai halangan pasif. Mereka respawn apabila mereka terlalu jauh untuk mewujudkan medan asteroid yang padat di sekeliling pemain. Jenis kedua bertelur dari jauh dan bergerak ke arah pemain (untuk mewujudkan rasa bahaya walaupun pemain tidak bergerak).

Kita memerlukan tiga perkara untuk menanam asteroid kita:

  1. Satu entiti AsteroidModel yang akan mengklon semua asteroid lain.
  2. Skrip AsteroidSpawner melekat pada objek akar yang akan bertindak sebagai kilang/cloner kami.
  3. Skrip Asteroid untuk menentukan kelakuan setiap asteroid.

Mewujudkan Model Asteroid

Buat entiti baru daripada model pilihan anda. Ini mungkin sesuatu yang keluar dari kedai PlayCanvas, atau sesuatu dari BlendSwap, atau hanya bentuk asas. (Jika anda menggunakan model anda sendiri, amalan yang baik untuk membukanya di Blender terlebih dahulu untuk memeriksa bilangan muka yang digunakan dan mengoptimumkannya jika perlu.)

Beri bentuk perlanggaran yang sesuai dan komponen badan yang tegar (pastikan ia dinamik). Sebaik sahaja anda gembira dengannya, jangan tanda kotak Enabled:

Where to toggle the Enabled property

Apabila anda mematikan objek seperti ini, ia bersamaan dengan mengeluarkannya dari dunia sejauh pemain berkenaan. Ini berguna untuk menghapus objek secara sementara, atau dalam kes kita, untuk menjaga objek dengan semua sifatnya tetapi tidak memilikinya muncul dalam permainan.

Membuat Skrip Spawner Asteroid

Buat skrip baru yang dipanggil AsteroidSpawner.js dan lampirkannya pada objek Root dalam hierarki. (Perhatikan bahawa Root hanyalah objek biasa yang boleh mempunyai sebarang komponen yang melekat padanya, sama seperti Kamera.)

Sekarang buka skrip yang baru anda buat.

Cara umum kloning entiti dan menambahnya ke dunia melalui skrip seperti ini:

Inilah cara anda mengklon objek jika anda sudah mempunyai objek ''oldEntity'[. Ini meninggalkan satu soalan yang tidak dijawab: Bagaimana kita mengakses AsteroidModel yang kita buat?

Terdapat dua cara untuk melakukan ini. Cara yang lebih fleksibel adalah untuk mencipta atribut skrip yang memegang entiti mana yang diklon, supaya anda boleh menukar model dengan mudah tanpa menyentuh skrip. (Ini betul-betul bagaimana kita melakukan skrip kameraSekali kembali dalam langkah 7.)

Cara lain ialah dengan menggunakan fungsi findByName. Anda boleh memanggil kaedah ini pada mana-mana entiti untuk mencari mana-mana anaknya. Jadi kita boleh memanggilnya pada objek akar:

Dan ini akan melengkapkan kod kami dari atas. Skrip AsteroidSpawner penuh sekarang kelihatan seperti ini:

Uji bahawa ini berfungsi dengan melancarkan dan mencari untuk melihat apakah model asteroid anda wujud.

Nota: Saya menggunakan newEntity.rigidbody.teleport baru bukan NewEntity.setPosition. Sekiranya entiti mempunyai tegar, maka orang tegar akan mengatasi kedudukan dan putaran entiti, jadi ingatlah untuk menetapkan sifat-sifat ini pada orang yang tegar dan bukan pada entiti itu sendiri.

Sebelum anda beralih, cuba buatnya menanam sepuluh atau lebih asteroid di sekitar pemain, sama ada secara rawak atau dalam beberapa cara yang sistematik (mungkin dalam bulatan?). Ia akan membantu untuk meletakkan semua kod pemijilan anda menjadi fungsi supaya ia kelihatan seperti ini:

Membuat Skrip Asteroid

Anda harus selesa menambah skrip baru sekarang. Buat skrip baru (dipanggil Asteroid.js) dan lampirkannya ke AsteroidModel. Oleh kerana semua asteroid mentah kami adalah klon, mereka semua akan mempunyai skrip yang sama dengan mereka.

Sekiranya kita mencipta banyak asteroid, ia adalah idea yang baik untuk memastikan ia dimusnahkan apabila kita tidak lagi memerlukannya atau ketika mereka sudah cukup jauh. Berikut adalah satu cara anda boleh melakukan ini:

Petua Menyahpepijat: Jika anda mahu mencetak apa-apa, anda boleh menggunakan konsol pelayar seolah-olah ini adalah aplikasi JavaScript biasa. Jadi anda boleh melakukan sesuatu seperti console.log (distance.toString ()); untuk mencetak vektor jarak jauh, dan ia akan muncul di konsol.

Sebelum bergerak, periksa bahawa asteroid hilang apabila anda berpindah dari situ.

9. Peluru Pemantauan

Peluru berpura-pura akan menjadi idea yang sama seperti asteroid pemijahan, dengan satu konsep baru: Kami mahu mengesan apabila peluru memukul sesuatu dan mengeluarkannya. Untuk mewujudkan sistem peluru kami, kami memerlukan:

  1. Model peluru untuk diklon.
  2. Skrip Shoot.js untuk peluru pemijahan apabila anda menekan X.
  3. Skrip Bullet.js untuk menentukan kelakuan setiap peluru.

Mewujudkan Model Bullet

Anda boleh menggunakan sebarang bentuk untuk peluru anda. Saya menggunakan kapsul hanya untuk mengetahui arah mana peluru itu menghadap. Sama seperti sebelum ini, buat entiti anda, skala itu turun, dan berikannya badan yang tegar dinamik dan kotak perlanggaran yang sesuai. Beri nama ''Bullet'' itu supaya mudah dicari.

Sebaik sahaja selesai, pastikan untuk mematikannya (dengan kotak semak Enabled).

Membuat Skrip Menembak

Buat skrip baru dan pasangkannya ke kapal pemain anda. Kali ini kita akan menggunakan atribut untuk mendapatkan rujukan kepada entiti peluru kami:

Kembali ke editor dan tekan ''mengurai'' untuk atribut baru untuk dipaparkan, dan pilih entiti peluru yang anda buat.

Sekarang dalam fungsi kemas kini, kami ingin:

  1. Clone dan tambahkannya ke dunia.
  2. Sapukan daya ke arah yang dihadapi oleh pemain.
  3. Letakkannya di hadapan pemain.

Anda sudah diperkenalkan kepada semua konsep ini. Anda telah melihat bagaimana untuk mengklon asteroid, bagaimana untuk menerapkan gaya dalam arah untuk membuat kapal bergerak, dan bagaimana untuk meletakkan perkara. Saya akan meninggalkan pelaksanaan bahagian ini sebagai satu cabaran. (Tetapi jika anda terperangkap, anda sentiasa boleh melihat bagaimana saya melaksanakan skrip Shoot.js saya sendiri dalam projek saya).

Berikut adalah beberapa petua yang mungkin akan menyelamatkan nyawa anda:

  1. Gunakan keyboard.wasPressed instead of keyboard.isPressed. Apabila mengesan apabila kunci X ditekan untuk memadamkan tembakan, bekas adalah cara mudah untuk menjadikannya hanya apabila anda menekan sebagai menentang tembakan selagi butang itu dipegang.

  2. Gunakan rotateLocal daripada menetapkan putaran mutlak. Untuk memastikan peluru sentiasa melancarkan selari dengan kapal, ia adalah kesakitan untuk mengira sudut dengan betul. Cara yang lebih mudah adalah dengan hanya menetapkan putaran peluru ke putaran kapal, dan kemudian putar peluru di ruang setempat dengan 90 darjah pada paksi X.

Mencipta Skrip Kelakuan Peluru

Pada ketika ini, peluru anda perlu membiak, memukul asteroid, dan hanya memikul ruang kosong. Bilangan peluru dapat dengan cepat mendapat perhatian, dan mengetahui bagaimana untuk mengesan pelanggaran berguna untuk segala macam perkara. (Contohnya, anda mungkin perasan bahawa anda boleh membuat objek yang hanya mempunyai komponen perlanggaran tetapi tiada badan tegar. Ini akan bertindak sebagai pencetus tetapi tidak akan bertindak secara fizikal.)

Buat skrip baru yang dipanggil Bullet dan pasangkannya ke model Bullet anda yang mendapat klon. PlayCanvas mempunyai tiga jenis peristiwa hubungan. Kita akan mendengarkan kecelakaan, yang kebakaran apabila objek terpisah (sebaliknya peluru akan hancur sebelum asteroid mempunyai peluang untuk bertindak balas).

Untuk mendengar pada acara kenalan, taipkan ini ke fungsi init anda:

Dan kemudian buat pendengar sendiri:

Di sinilah nama yang anda berikan kepada asteroid anda apabila anda menelurkannya menjadi relevan. Kami mahu peluru itu hanya dimusnahkan apabila ia bertembung dengan asteroid. Hasilnya adalah entiti yang ia selesai bertembung dengan.

Sebagai alternatif, anda boleh mengalih keluar cek itu dan hanya memusnahkan perlanggaran dengan apa-apa.

Memang tidak ada objek lain di dunia untuk bertembung, tetapi saya mempunyai beberapa masalah awal dengan pemain yang mencetuskan perlanggaran peluru untuk satu bingkai dan ia hilang sebelum ia boleh dilancarkan. Jika anda mempunyai keperluan perlanggaran yang lebih rumit, PlayCanvas menyokong kumpulan pertembungan dan topeng, tetapi ia tidak didokumenkan dengan baik pada masa penulisan.

10. Menambah Meter FPS

Kami pada dasarnya telah melakukan permainan dengan sendirinya pada ketika ini. Sudah tentu, terdapat banyak perkara menggilap kecil yang saya tambah pada demo akhir, tetapi tidak ada apa-apa di sana yang anda tidak boleh lakukan dengan apa yang anda pelajari setakat ini.

Saya ingin menunjukkan kepada anda cara membuat meter FPS (walaupun PlayCanvas sudah mempunyai profiler, anda boleh tuding ke atas butang main dan periksa kotak profiler) kerana ia merupakan contoh yang baik untuk menambah elemen DOM yang berada di luar enjin PlayCanvas.

Kami akan menggunakan perpustakaan FPSMeter yang licin ini. Perkara pertama yang perlu dilakukan ialah pergi ke laman web perpustakaan dan muat turun versi pengeluaran minified.

Kembali ke editor PlayCanvas anda, buat skrip baru, dan salin ke atas kod fpsMeter.min.js. Lampirkan skrip ini kepada objek akar.

Sekarang bahawa perpustakaan telah dimuatkan, buat skrip baru yang akan memulakan dan menggunakan perpustakaan. Hubungi meter.js, dan dari contoh penggunaan di laman web perpustakaan, kami mempunyai:

Tambah skrip meter ke objek akar juga, dan lancarkan. Anda perlu melihat kaunter FPS di sudut kiri atas skrin!

11. Menambah Teks

Akhirnya, mari kita tambahkan beberapa teks di dunia kita. Yang satu ini sedikit terlibat kerana terdapat pelbagai cara untuk melakukannya. Jika anda hanya mahu menambah UI statik, satu cara untuk melakukannya adalah dengan bekerja dengan DOM secara langsung, melengkapkan unsur UI anda di atas elemen kanvas PlayCanvas. Kaedah lain adalah menggunakan SVGs. Siaran ini membincangkan beberapa cara yang berbeza ini.

Memandangkan ini adalah semua cara yang standard untuk mengendalikan teks di web, saya memilih bukan untuk melihat cara membuat teks yang wujud di dalam ruang dunia permainan. Oleh itu, fikirkannya sebagai teks yang akan menandatangani sesuatu persekitaran atau objek dalam permainan.

Cara kami melakukan ini adalah dengan membuat bahan untuk setiap teks yang kami mahu tunjukkan. Kami kemudiannya membuat kanvas yang tidak kelihatan yang kami buatkan untuk menggunakan kaedah kanvas fillText biasa. Akhir sekali, kami membuat kanvas ke bahan supaya ia muncul dalam permainan.

Ambil perhatian bahawa kaedah ini boleh digunakan untuk lebih daripada sekadar teks. Anda boleh menarik tekstur secara dinamik atau melakukan apa sahaja yang dapat dilakukan kanvas.

Cipta Bahan Teks

Buat bahan baru dan sebutlah sesuatu seperti ''TextMaterial''. Tetapkan warna tersebar menjadi hitam kerana teks kami akan putih.

Buat entiti satah dan lampirkan bahan ini kepadanya.

Buat Skrip Teks

Anda boleh mencari skrip text.js penuh dalam intipati ini:

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

Anda dapat melihat bagaimana ia membentuk tekstur untuk menggunakan kanvas sebagai sumber, khususnya pada baris: this.texture.setSource (this.canvas);

Buat skrip ini dan pasangkannya ke pesawat anda. Perhatikan bagaimana ia mewujudkan dua atribut: saiz teks dan fon. Dengan cara ini, anda boleh menggunakan skrip yang sama untuk sebarang objek teks dalam permainan anda.

Pelancaran simulasi dan anda akan melihat teks ''Hello World'' yang besar di suatu tempat. Sekiranya anda tidak melihatnya, pastikan bahawa a) ia mempunyai sumber cahaya di dekatnya dan b) anda melihat di sebelah kanannya. Teks tidak akan memberi jika anda melihatnya dari belakang. (Ia juga membantu untuk meletakkan objek fizikal berhampiran pesawat itu untuk mengesannya pada mulanya.)

12. Penerbitan

Sebaik sahaja anda telah menyusun prototaip hebat anda, anda boleh mengklik ikon PlayCanvas di sudut kiri atas skrin dan pilih ''Penerbitan''. Di sinilah anda boleh menerbitkan binaan baru untuk dihoskan di PlayCanvas dan berkongsi dengan dunia!

Dialog box for publishing on PlayCanvas

Kesimpulannya

Itu sahaja untuk demo ini. Terdapat lebih banyak lagi untuk diterokai di PlayCanvas, tetapi diharapkan gambaran ini memberi anda cukup selesa dengan asas-asas untuk memulakan membina permainan anda sendiri. Ia satu enjin yang bagus yang saya fikir lebih banyak orang harus menggunakannya. Banyak apa yang telah dibuat dengannya telah demo teknologi berbanding permainan penuh, tetapi tidak ada sebab anda tidak boleh membina dan menerbitkan sesuatu yang hebat dengannya.

Salah satu ciri yang saya tidak benar-benar bercakap tentang tetapi mungkin telah jelas ialah editor PlayCanvas membolehkan anda mengemas kini permainan anda secara real time. Ini benar untuk reka bentuk, kerana anda boleh mengalihkan perkara dalam editor dan mereka akan mengemas kini dalam tetingkap pelancaran jika anda memilikinya terbuka, serta untuk kod, dengan pengemaskiniannya yang panas.

Akhirnya, ketika editornya sangat mudah, apa pun yang dapat anda lakukan dengannya boleh dilakukan dengan kod murni. Jadi, jika anda perlu menggunakan PlayCanvas pada belanjawan, rujukan yang baik untuk digunakan adalah folder contoh pada GitHub. (Tempat yang baik untuk memulakan akan menjadi contoh mudah bagi kiub berputar.)

Jika ada yang mengelirukan sama sekali, sila beritahu saya dalam komen! Atau jika anda telah membina sesuatu yang sejuk dan mahu berkongsi, atau mencari cara yang lebih mudah untuk melakukan sesuatu, saya suka melihat!

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.