Membuat permainan WebGL dengan Perpaduan 5 dan JavaScript

panduan mudah untuk membuat permainan webgl dengan perpaduan 5 dan javascript

mata teras:

• Pengeksport WebGL Unity 5 memudahkan proses permainan penerbitan ke web, menggunakan WebGL dan ASM.JS untuk menjadikan grafik 3D interaktif secara langsung dalam penyemak imbas.
• Tutorial ini membimbing anda bagaimana untuk membuat permainan mudah dalam perpaduan menggunakan JavaScript (UnityScript) yang termasuk menubuhkan projek, mewujudkan watak-watak wira yang melantun pada platform, dan menambah perspektif orang pertama untuk pengalaman permainan yang mendalam.
• Skrip dalam Perpaduan membolehkan tingkah laku permainan dinamik, seperti penjanaan platform programatik dan kawalan responsif yang digunakan oleh input tetikus untuk mempengaruhi aksara wira dalam permainan.
• Langkah-langkah utama untuk melengkapkan permainan termasuk menambah antara muka pengguna dengan butang Mula dalam menu permainan, dan mengkonfigurasi tetapan membina untuk mengeksport projek sebagai aplikasi WebGL supaya ia dapat dimainkan dalam pelayar yang dibolehkan WebGL.
• Tutorial ini berakhir dengan cadangan penambahbaikan selanjutnya seperti menambah skor, lebih banyak jenis platform dan kaedah input tambahan, menunjukkan kepelbagaian perpaduan sebagai alat pembangunan permainan silang platform.

Artikel ini dikaji semula oleh Nilson Jacques Collins, Marc Towler dan Matt Burnett. Terima kasih kepada semua pengulas rakan sebaya SitePoint untuk mendapatkan kandungan SitePoint untuk yang terbaik!

Perpaduan adalah enjin permainan silang platform yang digunakan untuk membangunkan permainan video untuk PC, konsol permainan, peranti mudah alih dan laman web. Versi terkini (Unity 5) dilengkapi dengan pengeksport WebGL, yang bermaksud pemaju dapat dengan mudah menerbitkan permainan mereka ke web. Seperti namanya, pengeksport WebGL menggunakan WebGL (API JavaScript untuk memberikan grafik komputer 3D interaktif) dan ASM.JS (subset JavaScript yang dibangunkan oleh Mozilla, dianggap sebagai "bahasa pemasangan untuk web"). Anda boleh membaca lebih lanjut mengenai ASM.JS dan WebGL untuk Perpaduan dan Unreal Engine di sini.

Dalam tutorial ini, saya akan menunjukkan kepada anda bagaimana untuk memulakan dengan perpaduan. Saya juga akan menunjukkan kepada anda bagaimana untuk membuat permainan mudah dalam perpaduan menggunakan JavaScript dan bagaimana untuk mengeksport permainan anda ke web.

Anda boleh melihat permainan siap di sini (anda memerlukan pelayar desktop yang menyokong WebGL), atau anda boleh memuat turun fail permainan dan fail projek dari repositori GitHub kami.

mari kita mulakan ...

arahan mengenai JavaScript dalam Perpaduan

Apabila kita bercakap tentang JavaScript dalam Perpaduan, kita sebenarnya bercakap tentang UnityScript, yang merupakan jenis dialek JS. Perpaduan itu sendiri sering menyebut JavaScript ini, bagaimanapun, lebih banyak pemerhati sinis percaya bahawa "Perpaduan menggunakan JavaScript" adalah strategi pemasaran. Walau apa pun, kita harus menjelaskan bahawa UnityScript tidak mematuhi sebarang spesifikasi ECMAScript -ia juga tidak cuba melakukannya. Anda boleh mencari gambaran yang baik tentang perbezaan di sini.

Pemasangan Perpaduan

Untuk memulakan tutorial ini, kita perlu menjalankan versi Perpaduan, yang boleh dimuat turun dari sini. Perpaduan mempunyai pemasang untuk Windows dan Mac OS X. Pengguna Linux boleh menjalankan perpaduan melalui wain, tetapi hasil anda mungkin berbeza -beza.

Selepas pemasangan selesai, kita boleh bermula! Mari buka perpaduan dan buat projek 3D baru.

Tetapan Projek

Selepas perpaduan pertama dibuka, kita harus mengambil sedikit masa untuk memahami tetingkap utama:

Panel paling kiri adalah

sewa

, yang menggariskan semua elemen dalam adegan semasa. Adegan itu seperti pemandangan permainan, seperti tahap atau menu. Harus ada
1. kamera utama elemen dan cahaya arah elemen pada masa ini. Tengah ialah pemandangan
, yang menggambarkan kamera dan lampu dalam ruang 3D dalam bentuk ikon.
2. di sebelah tab
tab
3. adalah tab yang memaparkan permainan itu sendiri, seperti pemain yang dilihat. Ini direka untuk menguji permainan dalam editor. Di sebelah kanan adalah panel Inspektor
di mana anda boleh mengubah suai tetapan elemen. Mari cuba, klik pada cahaya arah dalam hierarki
4. . Sekarang kita harus melihat banyak maklumat mengenai cahaya ini dan dapat mematikan bayangannya menggunakan jenis bayangan: tiada bayangan . Di bahagian bawah ialah tetingkap Projek , yang memaparkan paparan fail yang diperlukan untuk membangunkan permainan.
Sekarang kita sudah biasa dengan antara muka Perpaduan, ada satu lagi perkara yang perlu dilakukan sebelum memulakan pembangunan: Simpan adegan semasa.
5. Fail & gt; Simpan adegan Buka Kotak dialog Simpan
Salah satu cara biasa untuk mengatur fail dalam perpaduan adalah dengan menggunakan subfolder. Oleh itu, tambahkan folder baru yang dinamakan adegan ke folder Aset dan simpan adegan dalam folder ini bernama Level.Unity.

Buat wira Permainan kami akan terdiri daripada satu wira, melompat dari satu platform ke platform yang lain, melompat lebih tinggi dan lebih tinggi. Jika ia merindui satu dan jatuh ke dalam ketiadaan, permainan akan gagal. Oleh itu, mari kita mulakan dengan mencipta wira. Oleh kerana pemain akan menonton permainan dari perspektif orang pertama, penampilan wira tidak penting, kita boleh menggunakan geometri sfera standard. Kelebihan sfera adalah bahawa ia boleh dibuat dalam beberapa langkah dan ia sesuai dengan sifat fizikal yang kita perlukan untuk melompat. Buat dalam hierarki

dan edit sifat berikut menggunakan Inspektor:

mari kita uji apa yang kita lakukan dengan menekan butang main. Kita harus melihat sfera di ruang 3D, yang terletak di hadapan langit.

Agar wira jatuh, ia mesti menambah berat badan. Oleh itu, kita perlu menambah komponen ke sfera dengan mengklik butang yang sepadan di Inspektor dan memilih badan tegar . Dan kerana kita tidak mahu wira berputar, kita akan membekukan wira dalam komponen badan yang tegar dengan menghidupkan kekangan dan memilih semua paksi di berputar baris. Apabila tempat kejadian dimainkan semula, kita sepatutnya dapat menonton kejatuhan wira.

Untuk menyelamatkan wira dari Falls Endless, kami akan membuat kotak rata yang berfungsi sebagai platform. Untuk melakukan ini, kita perlu menambah kiub dan menetapkan nilai skala.y kepada 0.1. Memainkan semula tempat kejadian mengesahkan bahawa wira mendarat dengan selamat di platform, walaupun saya harus mengakui ia tidak kelihatan semula jadi. Jadi bagaimana kita membuat rebound wira? Dengan menambah beberapa bahan fizikal.

Buat Rebound Hero

Pertama, kita perlu membuat bahan fizikal baru untuk bidang untuk menjadikannya elastik. Untuk melakukan ini, buat folder baru yang dipanggil Bahan dalam folder Aset, dan kemudian buat bahan fizikal baru di sini. Mari namakannya Bouncy_Sphere. Nilai yang kita perlukan untuk menyesuaikan diri dalam pemeriksa

adalah:

<code>位置 { X: 0, Y: 2.5, Z: 0 }
缩放 { X: 0.3, Y: 0.3, Z: 0.3 }</code>

Jika kita menambah bahan ini ke

sfera collider , ini akan menjadikan sfera melantun ke atas dan ke bawah, tetapi sentiasa mencapai ketinggian yang sama. Agar sfera melompat lebih tinggi dan lebih tinggi dengan setiap lantunan, kita juga perlu menambah beberapa bahan fizikal ke platform. Untuk melakukan ini, kami membuat bahan lain yang dipanggil Bouncy_platform dan menukar nilainya kepada:

<code>动态摩擦：10
静态摩擦：10
弹性：1
摩擦组合：最大
弹跳组合：最大</code>

Untuk mencapai konsistensi di sini, kita juga harus menamakan semula elemen kiub ke platform dengan mengklik dua kali dalam hierarki

. Apabila kita memulakan permainan sekarang, kita dapat melihat bahawa sfera melompat lebih tinggi dan lebih tinggi setiap kali.

kami juga akan membuat bahan standard baru yang dipanggil Platform untuk memberikan platform warna tertentu. Selepas membuat bahan ini, gunakan #C8FF00 sebagai warna

albedo (albedo adalah label dalam UI Perpaduan), dan seret dan jatuhkan bahan ini ke elemen platform. Ia semestinya kuning sekarang.

tambah perspektif orang pertama

Untuk menambah perspektif orang pertama, kami menyeret dan menjatuhkan kamera (dalam hierarki

) ke sfera. Ini akan menjadikan kamera sebagai anak pahlawan dan menyebabkan kamera mengikuti sfera ketika ia bergerak. Ciri -ciri kamera juga mesti diselaraskan dengan:

<code>动态摩擦：0.9
静态摩擦：0.9
弹性：1
摩擦组合：平均
弹跳组合：相乘</code>

kami juga akan membuat perhatian sebagai elemen anak kedua sfera. Ini akan memberi pemain idea ketinggian lompat semasa wira. Laraskan nilai perhatian kepada:

<code>位置 { X: 0, Y: 1, Z: 0 }
旋转 { X: 90, Y: 0, Z: 0 }
缩放 { X: 2.5, Y: 2.5, Z: 2.5 }
清除标志：纯色
背景：#000
视野：80.3</code>

(langkah -langkah berikutnya akan diterangkan secara ringkas kerana batasan ruang, dan coretan logik dan coretan kod utama akan dikekalkan)

kemahiran Pengawal Pengaturcaraan, Platform Penciptaan Program, Tambah Menu Permainan, Tambah Butang Permainan Mula, menerbitkan projek sebagai permainan penyemak imbas WebGL, dan lain -lain, sila rujuk dokumen asal. Oleh kerana batasan ruang, saya tidak akan mengulanginya di sini. Kuncinya adalah untuk memahami konsep teras sistem skrip Perpaduan, pengurusan objek permainan, enjin fizik dan sistem UI, dan mengamalkannya dalam kombinasi dengan contoh kod dalam tutorial.

FAQ (FAQ)

(bahagian FAQ juga dipermudahkan kerana batasan ruang, mengekalkan soalan teras dan jawapan ringkas)

Bagaimana untuk mengoptimumkan permainan webgl saya untuk prestasi yang lebih baik?

Kurangkan bilangan panggilan cabutan, gunakan bahan dan gabungan gabungan yang kurang, gunakan tahap terperinci (LOD), memampatkan tekstur dan fail audio, dan menggunakan profiler Perpaduan untuk mengenal pasti dan menetapkan kemunculan prestasi.

Bolehkah saya menggunakan WebGL untuk pembangunan permainan mudah alih?

Ya, tetapi permainan WebGL mungkin mengambil lebih banyak sumber daripada aplikasi asli dan memerlukan pengoptimuman yang teliti.

bagaimana untuk debug permainan webgl saya?

Anda boleh debug menggunakan alat penyemak imbas seperti Alat Pemaju Chrome atau Konsol Web Firefox.

Bagaimana untuk menambah ciri multiplayer ke permainan webgl saya?

Pelayan backend diperlukan untuk menguruskan komunikasi antara pemain, dan anda boleh menggunakan sistem rangkaian terbina dalam Unity UNET atau penyelesaian pihak ketiga (seperti foton).

bagaimana membuat wang pada permainan webgl saya?

iklan dalam permainan, pembelian dalam aplikasinya atau model freemium boleh didapati.

Bagaimana untuk memperbaiki grafik permainan webgl saya?

Tekstur berkualiti tinggi, teknik pencahayaan lanjutan dan shaders boleh didapati.

Bagaimana membuat permainan webgl saya bertindak balas terhadap saiz skrin yang berbeza?

Buat antara muka pengguna yang fleksibel dan berskala menggunakan sistem UI Unity, dan gunakan kelas skrin untuk mendapatkan maklumat saiz skrin pemain dan sesuaikan permainan dengan sewajarnya.

Bagaimana untuk menambah kesan bunyi dan muzik ke permainan webgl saya?

Gunakan sistem audio Perpaduan, import fail audio dan main balik kawalan menggunakan kelas audioSource dan audioClip, dan anda juga boleh menggunakan pengadun audio untuk membuat bunyi soundscapes yang kompleks.

Bagaimana untuk melindungi permainan webgl saya daripada menipu?

Kami boleh melaksanakan pengesahan server data permainan, Obfuscating Code JavaScript, dan menggunakan protokol komunikasi yang selamat.

Bagaimana untuk mengemas kini permainan webgl saya selepas menghantar?

Kembali semula permainan dan membuat perubahan dalam perpaduan, dan memuat naik binaan baru ke pelayan.

Harap versi mudah ini membantu anda! Ingatlah bahawa memahami konsep teras dan pengalaman praktikal enjin Perpaduan adalah penting untuk pembangunan permainan WebGL yang berjaya.

Atas ialah kandungan terperinci Membuat permainan WebGL dengan Perpaduan 5 dan JavaScript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!