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.

Tetapan Projek

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

Panel paling kiri adalah

, 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

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.

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

<code>動態(tài)摩擦：10
靜態(tài)摩擦：10
彈性：1
摩擦組合：最大
彈跳組合：最大</code>

<code>動態(tài)摩擦：0.9
靜態(tài)摩擦：0.9
彈性：1
摩擦組合：平均
彈跳組合：相乘</code>

<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>

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!