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

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

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

PlayCanvas menjadikannya sangat mudah untuk membina kandungan interaktif 3D berkuasa WebGL untuk web. Semuanya JavaScript, jadi ia berjalan secara asli dalam pelayar tanpa sebarang plugin. Ia adalah satu enjin yang cukup muda yang hanya sekitar sejak tahun 2014, tetapi ia telah cepat mendapat daya tarikan dengan nama-nama seperti Disney, King dan Miniclip menggunakannya untuk membangunkan permainan.

Ini alat yang hebat untuk dua sebab utama: Pertama, ia adalah enjin permainan yang dimainkan sepenuhnya, jadi ia mengendalikan segalanya dari grafik dan pelanggaran kepada audio dan juga integrasi dengan gamepad / VR. (Oleh itu, anda tidak perlu memburu perpustakaan luaran atau bimbang tentang isu keserasian pelayar untuk kebanyakan perkara.) Yang kedua, dan apa yang saya fikir membuatnya benar-benar menonjol, adalah editor berasaskan penyemak imbas mereka.

Screenshot of PlayCanvass editor
Inilah contoh projek contoh dalam editor dalam pelayar PlayCanvas. Ini cara yang sangat kuat dan mudah untuk mengatur kerja anda atau bekerjasama dengan orang lain dalam masa nyata.

Sekiranya anda terbiasa bekerja dengan enjin Unity, editor PlayCanvas seharusnya kelihatan biasa (ia juga menggunakan sistem berasaskan komponen yang serupa untuk berfungsi bersama). Tidak seperti Perpaduan, PlayCanvas tidak merentas platform dan hanya boleh menerbitkan web. Walau bagaimanapun, jika web adalah semua yang anda sayangi, maka ini menjadi tambah besar, memandangkan tumpuan enjin di web menjadikannya sangat cepat dan ringan berbanding dengan persaingan.

Satu nota akhir: Walaupun enjin itu sendiri bebas dan sumber terbuka, editor online dan alat dalam talian hanya percuma untuk projek awam. Ia sememangnya bernilai untuk membayar jika anda sedang membangunkan pekerjaan komersial dengannya, tetapi anda sentiasa boleh menggunakannya sebagai semata-mata rangka kerja kod dan juga secara percuma.

Keputusan Akhir

Inilah yang akan kami buat:

In-game screenshot of space shooter

Anda boleh mencuba demo langsung.

Projek itu sendiri adalah awam, jadi anda boleh mencubit dan/atau menanggalkannya di halaman projeknya.

Anda tidak perlu mempunyai sebarang pengalaman dengan permainan 3D untuk diikuti, tetapi saya akan menganggap beberapa kebiasaan asas dengan JavaScript.

Mewujudkan Projek Sendiri Dari Scratch

Hasil akhir adalah demo yang agak sederhana di mana anda hanya terbang dan menolak asteroid, tetapi ia meliputi fungsi asas yang cukup yang akan berguna dalam membuat apa-apa jenis permainan 3D. Bahagian 1 akan meliputi persediaan asas, bekerja dengan model, sistem fizik, dan kawalan kamera. Bahagian 2 akan meliputi sistem peluru, asteroid membiak, dan bekerja dengan teks.

1. Persediaan Projek

Teruskan ke playcanvas.com dan buat akaun.

Setelah anda log masuk, klik pada tab projek di papan pemuka dan tekan butang baru oren besar untuk membuat projek baru. Ini harus membawa kotak ''projek baru''. Pilih ''projek kosong'' dan beri nama:

Dialog box for creating a new project

Sebaik sahaja anda selesai, tekan butang buat di bahagian bawah kanan. Ini akan menghantar anda ke halaman gambaran keseluruhan projek. Di sini, anda boleh mengakses tetapan anda dan menambah kolaborator. Buat masa ini, kami hanya akan menyelam projek itu, jadi klik pada butang editor oren besar.

Apabila anda memasukkan projek pertama anda, PlayCanvas akan menunjukkan banyak petunjuk mengenai editornya. Anda boleh menolak mereka buat masa ini. Perkara utama yang perlu diberi perhatian ialah:

  • Panel kiri (hirarki) adalah senarai semua objek dunia anda. Ini juga di mana anda boleh menambah, menduplik, atau memadamkan entiti dari tempat kejadian anda.
  • Panel hak (inspektor) adalah di mana anda mengedit sifat objek yang dipilih. Selepas memilih objek (dengan mengklik padanya), anda dapat menetapkan kedudukan dan orientasi atau melampirkan skrip dan komponennya.
  • Panel bawah (aset) mengandungi semua aset anda. Di sinilah anda boleh memuat naik tekstur atau model 3D serta membuat skrip.
  • Adegan tengah adalah tempat anda boleh mengedit dan membina dunia permainan anda.

2. Mencipta Objek

Untuk membuat objek baru di tempat kejadian anda, klik pada butang tambah kecil di bahagian atas panel hierarki:

How to create a new entity

Nota: Anda mungkin sengaja membuat objek baru di dalam yang sudah sedia ada. Ini berguna untuk membina objek yang terdiri daripada pelbagai bahagian atau yang diikat bersama dalam beberapa cara. Anda boleh menggerakkan objek di sekitar panel hierarki untuk mengawal sarang. Seret ke objek Root untuk meletakkannya semula di bahagian atas hierarki.

Sebagai contoh, saya akan membuat kotak baru dan berwarna merah. Untuk memberikan warna tersuai, kita perlu membuat bahan baru. Anda boleh melakukan ini dalam panel aset, sama ada dengan mengklik kanan di mana-mana di dalam panel, atau mengklik ikon tambah kecil:

How to add a new material

Sebaik sahaja dibuat, pilih bahan anda dan berikannya nama deskriptif seperti ''RedMaterial'' (anda boleh melihat medan nama dalam panel inspektor).

Sekarang tatal ke bawah bahagian meresap dan tukar warna:

How to change the diffuse color to red

Sebaik sahaja itu selesai, kembali dan pilih kotak baru yang anda buat (sama ada dengan mengkliknya di tempat kejadian atau dalam panel hierarki). Kemudian tetapkan bahannya kepada bahan tersuai yang telah kami buat:

Where to set an objects material

Dan kotak itu kini merah! Perhatikan bahawa bahan yang anda buat boleh dilampirkan kepada seberapa banyak objek yang anda suka.

3. Menambah Fizik

Untuk membolehkan fizik pada sesuatu objek, kita perlu menambah dua komponen: Tubuh dan Tuberkejut.

Tambahkan Badan Tegar dengan mengklik pada ''Tambah Komponen'' di panel inspektor pada objek anda:

How to add a rigid body component to an entity

Pastikan jenisnya ditetapkan ke dinamik:

Where to set rigid body type

Dan kemudian tambah komponen perlanggaran dengan cara yang sama.

Sekarang luncurkan permainan anda dengan mengklik pada butang mainan kecil di bahagian atas sebelah kanan tempat anda. Anda harus melihat kotak anda jatuh ke lantai! Untuk membetulkannya, anda perlu menambah badan yang tegar dan perlanggaran pada pesawat juga, memastikan bahawa jenis badan yang tegar itu statik (supaya ia tidak jatuh juga).

Cabaran: Hanya untuk keseronokan, cuba tambah bola dan kecondongkan pesawat sedikit (sama ada pada paksi X atau Z) untuk menontonnya.

Nota mengenai Sistem Komponen

Ia perlu dibincangkan secara ringkas mengenai sistem komponen kerana ia merupakan bahagian asas seni bina PlayCanvas. Secara konseptual, idea ini adalah untuk memisahkan fungsi dari objek. Kelebihan terbesar ialah keupayaan untuk menyusun kelakuan kompleks daripada komponen modular yang lebih kecil.

Sebagai contoh, jika anda melihat kamera di tempat kejadian anda, anda akan melihat ia bukan objek khusus. Ia hanya entiti generik dengan komponen kamera yang dipasang. Anda boleh melampirkan komponen kamera kepada apa sahaja untuk menjadikannya kamera, atau melampirkan badan yang tegar dan perlanggaran pada kamera untuk menjadikannya objek padat (cuba!).

Jika anda ingin tahu, anda boleh membaca lebih lanjut mengenai kelebihan dan kekurangan sistem komponen pada halaman Wikipedia.

4. Menambah Model

Sekarang anda selesa dengan asas-asas, kita boleh mula menyusun permainan ruang kami. Kami memerlukan sekurang-kurangnya kapal dan asteroid untuk bekerja dengan. Terdapat dua cara untuk menambah model:

Dapatkan Model Dari PlayCanvas's Library

PlayCanvas mempunyai kedai (sama dengan Unity Asset Store dalam beberapa cara) di mana anda boleh mencari dan memuat turun aset terus ke projek anda. Untuk mengaksesnya, klik pada perpustakaan dalam panel aset.

Kedai ini sangat baru, jadi ia agak jarang, tetapi ia adalah tempat yang baik untuk mencari ruang letak atau aset untuk bereksperimen dengan.

Saya menggunakan aset hovership dari kedai sebagai kapal pemain saya.

Muat Naik Model Anda Sendiri

PlayCanvas tidak menyokong memuat naik fail FBX, OBJ, 3DS dan COLLADA (DAE), tetapi ia lebih suka FBX. Anda boleh dengan mudah menukar mana-mana model 3D ke FBX dengan membukanya dengan Blender dan mengeksportnya dalam format yang anda inginkan.

Anda boleh mencari model asteroid yang saya gunakan di Blendswap.com. Perhatikan bahawa anda mungkin mahu mengoptimumkan model 3D anda sebelum menggunakannya dalam permainan. Sebagai contoh, model asteroid mengandungi lebih daripada 200,000 segitiga! Itu mungkin baik untuk objek khusus dalam permainan, tetapi apabila saya menambahkan lebih dari seratus asteroid di tempat kejadian, perkara-perkara yang sangat perlahan untuk merangkak. Pengubah suai Pengisar Blender adalah cara mudah untuk mengoptimumkan model anda. Saya menggunakannya untuk mengurangkan model asteroid kepada sekitar 7,000 segitiga tanpa kehilangan terlalu banyak detail.

Sekali model berada dalam projek anda (anda mungkin perlu menyegarkan semula jika anda tidak melihatnya dengan segera dalam panel aset anda), anda boleh menambahnya ke tempat kejadian anda. Cara paling mudah untuk melakukannya ialah dengan hanya menyeret model ke dalam tempat kejadian:

How to add the hovership model into the scene
Ini adalah model sebenar yang anda boleh tambah ke tempat kejadian. Aset lain di sekelilingnya ialah tekstur/bahan, dll.

Sama seperti sebelumnya, tambahkan badan yang tegar dan komponen perlanggaran ke kapal. Satu helah yang boleh anda lakukan dengan perlanggaran adalah untuk menambah objek objek sebenar sebagai bentuk perlanggaran sendiri. Ini akan menghasilkan mesh perlanggaran piksel yang sempurna, tetapi tidak akan menjadi sangat cekap. Untuk demo ini, saya memilih kotak ringkas sebagai bentuk perlanggaran saya (dan sfera untuk asteroid) dan menyunting separuh hamparan untuk hampir menyamai bentuk model.

Bagaimana Mengimbangi Bentuk Pelanggaran

Satu masalah yang mungkin anda alami apabila menyesuaikan bentuk perlanggaran ialah ketidakupayaan untuk mengimbanginya dari pusat. Cara mudah untuk mendapatkan sekitar ini (selain daripada mengimbangi model itu sendiri dalam sesuatu seperti Blender sebelum mengeksportnya) adalah untuk membuat objek induk yang mempunyai perlanggaran dan badan yang tegar, dan objek kanak-kanak yang mempunyai model itu sendiri. Jadi anda boleh mengimbangi model itu sebagai seorang anak berbanding ibu bapa yang mengandungi perlanggaran.

Ini adalah bagaimana saya menyediakannya untuk projek demo, jadi anda boleh melihatnya untuk melihat bagaimana itu dilakukan.

5. Menukar Graviti & Tetapan Pemandangan

Oleh kerana permainan kami ditetapkan dalam ruang, kita perlu mengatasi graviti lalai. Anda boleh melakukan ini dalam tetapan tempat kejadian. Di bahagian kiri bawah skrin anda, klik pada ikon gear. Ini akan membuka tetapan dalam panel pemeriksa. Cari bahagian fizik dan tukar nilai graviti:

Where to disable gravity

Untuk memastikan ia berfungsi, cuba melancarkan semula dan lihat sama ada kapal hanya terapung di ruang angkasa.

Ia tidak cukup ruang tanpa latar belakang berbintang, jadi semasa kita berada dalam tetapan adegan, mari kita tambah kotak suara. Anda boleh mengambil satu dari kedai atau hanya mencari satu talian yang anda suka. Sebaik sahaja anda mendapatnya, tambahkannya dalam bahagian rendering:

How to add a skybox

Yang harus memberi permainan ini rasa yang lebih samar-samar. Ini juga merupakan masa yang baik untuk membersihkan tempat kejadian anda dan memadam sebarang objek ujian yang kami buat sebelum ini.

6. Menulis Skrip Kapal

Di sinilah kita akhirnya dapat menulis beberapa kod. Sistem skrip PlayCanvas adalah satu lagi perkara yang perlu diketahui jika anda menggunakan Perpaduan. Anda membuat skrip yang boleh dilampirkan pada objek apa pun, dan skrip ini boleh mempunyai atribut yang dikonfigurasi pada dasar setiap objek. Atribut skrip sangat berguna dan mencapai dua perkara utama:

  1. Modularity. Anda boleh membuat skrip yang mentakrifkan bagaimana musuh bergerak dengan atribut kelajuan, dan menggunakan semula untuk pelbagai musuh yang berbeza dengan kelajuan yang berbeza.
  2. Kerjasama. Atribut skrip boleh ditapis secara langsung dalam editor tanpa perlu menyentuh sebarang kod. Ini membolehkan pereka untuk masuk dan tweak menilai diri mereka tanpa perlu mengganggu programmer atau menggali kod.

Buat Skrip

Pergi ke tab aset dan buat aset jenis Skrip jenis. Ini akan menjadi kod untuk tingkah laku kapal, jadi namakan sesuatu seperti ''Fly''.Klik dua kali untuk membuka editor skrip.

Manual pengguna PlayCanvas adalah rujukan yang sangat berguna apabila menulis skrip, seperti rujukan API. Penyiapan automatik juga menjadikannya sangat mudah untuk mengetahui kaedah apa yang tersedia. Kami akan bermula dengan hanya membuat kapal kami berputar. Taipkan ini dalam fungsi kemas kini:

Di dalam skrip apa pun, ini merujuk kepada komponen skrip itu sendiri, sedangkan this.entity merujuk kepada objek skrip yang dilampirkan. Anda boleh mengakses mana-mana komponen yang dilampirkan kepada entiti dengan cara ini. Di sini kita mengakses badan yang tegar dan menggunakan daya sudut untuknya.

Pastikan anda menyimpan skrip anda sekarang.

Lampirkan Skrip

Sebelum naskah kami turut terlibat, mari melampirkannya ke kapal kami untuk melihat apakah ia berfungsi. Untuk melakukan itu, tambahkan komponen skrip ke kapal anda, kemudian tambah skrip ''fly'' anda. Ambil perhatian bahawa anda hanya boleh menambah satu komponen skrip bagi setiap objek, tetapi anda boleh menambah skrip berganda di dalam komponen tersebut.

Sebaik sahaja anda melancarkan, anda perlu melihat kapal anda berputar!

Tambah Atribut

Seperti yang dibincangkan di atas, atribut skrip membuat kod kami jauh lebih fleksibel. Anda boleh menambah satu dengan menaipkan ini di bahagian atas kod anda, selepas baris pertama di mana skrip dibuat:

Dalam kes ini, nama skrip saya adalah Fly. Satu-satunya pilihan yang diperlukan adalah jenis.

Untuk melihat atribut dalam editor, kembali kepada komponen skrip anda, dan klik pada ikon dengan dua anak panah pada skrip lalat. Ini adalah butang parse yang akan mencari sebarang atribut dan mengemas kini editor. Komponen anda sekarang seharusnya kelihatan seperti ini:

Where to find script attributes

Akhir sekali, untuk menggunakan nilai atribut dalam skrip anda, lakukan saja ini. [Attribute_name]. Oleh itu, jika kita mahu ini menjadi kelajuan putaran, kita boleh mengubah barisan kod kami kepada:

Nota: Oleh kerana tidak ada redaman sudut, kapal akan terus berputar dengan lebih cepat lagi daya yang digunakan. Sekiranya anda mengeluarkan kuasa, ia akan mengekalkan inersia dan berputar pada kelajuan yang sama. Untuk menukar ini, tetapkan redaman sudut dalam komponen badan tegar kepada sesuatu di atas sifar.

Ini merendahkan pengalaman pengguna dengan ketara.

Sekarang kita mahu skrip supaya kita boleh mengarahkan kapal dengan kekunci anak panah. Pendekatan naif mungkin kelihatan seperti ini:

Bolehkah anda memberitahu apa masalahnya dengan skrip ini? Cubalah. Bolehkah anda dengan mudah menunjuk kapal di mana anda mahu?

Beri sedikit pemikiran sebelum anda membaca. Bagaimana anda membetulkannya?

Masalahnya ialah kami menggunakan kekuatan dalam koordinat global tanpa mengambil kira di mana kapal menghadapi. Sekiranya kapal adalah relatif mendatar kepada kamera, dan kita berputar pada paksi y apabila kita menekan kiri / kanan, maka ia berputar dengan betul. Tetapi jika kapal menegak, putaran pada paksi y kini menjadi tong setong.

Masalah yang sama akan berlaku jika kami cuba memindahkan kapal ke hadapan juga. Arah yang ''ke hadapan'' bergantung pada mana kapal menghadapi dan tidak boleh mutlak.

Kini mudah, setiap entiti mempunyai tiga vektor arah yang boleh kita gunakan: up, kanan, dan ke hadapan. Untuk menghidupkan kiri/kanan, kita berputar sepanjang paksi atas, dan naik dan turun kita berputar sepanjang paksi kanan. Ini adalah up dan  kanan relatif kepada entiti. Versi tetap akan kelihatan seperti ini:

Menambah pergerakan ke hadapan adalah idea yang sama:

Sekiranya pergerakan itu terasa terlalu licin, luangkan masa untuk menaikkan kelajuan dan faktor redaman untuk mendapatkannya di mana ia merasa benar.

7. Kawalan Kamera

Sukar untuk mengesan sebuah kapal bergerak dengan kamera statik. Cara paling mudah untuk membuat kamera mengikuti objek hanya dengan meletakkan kamera sebagai kanak-kanak objek itu.

Cuba menyeret kamera dalam panel hierarki ke kapal anda. Cara mudah untuk menyesuaikan pandangan kamera adalah dengan beralih ke paparan kamera di tempat kejadian. Klik pada butang di bahagian atas skrin di mana ia mengatakan Perspektif. Ini akan memberi anda jurang dengan semua pemandangan pemandangan yang berbeza yang boleh anda pilih. Pilih Kamera, yang sepatutnya menjadi yang paling jauh ke bawah. Ini adalah pandangan khas kerana apa sahaja yang anda lihat dalam editor adalah apa yang akan dilihat kamera dalam permainan.

Sebaik sahaja anda telah menyesuaikan pandangan kamera, pastikan anda bertukar kepada perspektif atau pandangan lain untuk mengelakkan secara tidak sengaja mengacaukan sudut kamera.

Petua: Jika anda mempunyai objek yang dipilih dalam hierarki, tetapi anda tidak dapat menemukannya di tempat kejadian anda, tekan F. Ini akan memfokus pandangan pada objek itu dan zum masuk ke atasnya. Anda boleh melihat lebih pintasan papan kekunci dengan mengklik pada butang papan kekunci di sebelah kiri jauh skrin anda.

Pada ketika ini, anda sepatutnya mempunyai kamera mengikuti kapal anda (seperti yang tegar kerana ia mungkin). (Anda tidak akan dapat memberitahu jika anda bergerak jika kamera bergerak bersama dan tidak ada objek lain di dunia, jadi cuba tambah beberapa.)

Skrip Kamera

Kamera yang hanya tersekat pada pemain tidak begitu menarik. Siaran ini di blog PlayCanvas meneroka pelbagai jenis gerakan kamera. Yang paling mudah yang kita boleh laksanakan ialah melihat kamera.

Untuk melakukan itu, mula-mula memindahkan kamera ke objek akar.

Seterusnya, buat skrip baru yang dipanggil lookAt.

Fungsi pembaharuan skrip itu sepatutnya seperti:

Dan ia harus mempunyai atribut:

Sekarang lampirkan skrip itu pada objek kamera. Tekan butang parse dan tetapkan sasaran untuk menjadi entiti kapal.

Cuba melancarkan! Sekiranya semuanya berjalan lancar, kamera anda akan tetap berada di tempatnya tetapi hanya akan mengarahkan dirinya ke arah kapal.

Anda boleh melaksanakan jenis kamera lain dengan cara yang sama. The trailing follow camera yang disebutkan dalam postingan blognya nampaknya paling baik, tetapi saya telah mendapati ia terlalu jittery apabila framerate dips sedikit, jadi untuk demo akhir, saya akhirnya pergi dengan kamera yang dilampirkan sebagai seorang kanak-kanak ke kapal tetapi skrip untuk bergerak dan berputar seperti kapal itu.

Kesimpulan

Jangan bimbang jika ada yang terasa agak menggembirakan. PlayCanvas adalah enjin yang kompleks dengan banyak loceng dan wisel. Terdapat banyak cara untuk meneroka, dan memastikan manual yang dekat adalah cara yang baik untuk mencari galas anda. Satu lagi cara yang baik untuk belajar hanya dengan mencari projek-projek awam dan melihat bagaimana keadaan dibuat.

Bahagian 2 akan bermula dengan mewujudkan sistem peluru, dan kemudian menambahkan beberapa asteroid untuk menembak, dan kami akan menolaknya dengan menambah kaunter FPS dan teks dalam permainan. Jika anda mempunyai sebarang permintaan atau cadangan, atau jika ada yang tidak jelas, sila beritahu saya dalam komen!

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.