weixin minigame tutorial
1.0.0
Repositori ini berisi
Demo saat ini mencakup fungsi berikut:
├───game.js : main entry point, Phaser. Game main function declared here
├───game.json : minigame configuration
├───images : static assets repository
└───js
├───game
│ ├───managers : each manager is a set of functions
│ │ ├───collisions.js : handles all collision events
│ │ ├───db.js : backend CRUD functions for leaderboard (based on Leancloud API)
│ │ ├───events.js : main events of the game functions
│ │ ├───generators.js : objects generators functions
│ │ ├───leaderboard.js : functions that handle leaderboard and ranking algorithms
│ │ ├───wechat.js : functions that handle WeChat-related API (getting user profile, user friends list etc...)
│ └───objects : Each object is a Class, with its separated file
│ ├───Background
│ ├───Bird
│ ├───Button
│ ├───Floor
│ ├───Pipe
│ ├───objects.js : singleton namespace window.objects where all the game objects live
│ ├───phases.js : different game phases (preload, create, update (called every frame), render (called every frame))
│ └───state.js : singleton namespace window.state where all the game states and parameters live
└───libs
└───lodash-modules
Arsitektur Keseluruhan : Hampir seperti game web
Minigame WeChat didasarkan pada teknologi web, bahasa utama yang digunakan adalah Javascript. Sistemnya mirip dengan yang ada di web: elemen kanvas dapat diakses dan kita dapat menggambarnya di setiap frame. Kami memiliki akses ke WebGL API, sehingga dapat menggunakan GPU untuk perhitungan menggunakan Shaders (bahasa GLSL).
ctx.fillRect(25, 25, 100, 100);
ctx.clearRect(45, 45, 60, 60);
ctx.strokeRect(50, 50, 50, 50);
Namun penerapannya mempunyai beberapa perbedaan
Namun, implementasi WebGL dan Canvas API berbeda dari implementasi web asli yang dapat Anda temukan di sebagian besar browser web. Lingkungan minigame yang berjalan adalah JavaScriptCore di iOS, dan V8 di Android. Semuanya menjalankan lingkungan tanpa BOM dan DOM. Tidak ada iklan dokumen global, tidak ada objek jendela. Jadi, jika Anda ingin menggunakan DOM API untuk membuat elemen seperti Canvas dan Image, maka akan terjadi error. Lebih lanjut tentang dokumentasi resmi Minigame (Cina).
Perpustakaan Web dapat disesuaikan dengan lingkungan Minigame
Untuk menjembatani kesenjangan antara web dan minigame, tim minigame WeChat telah mengerjakan perpustakaan khusus, weapp-adapter. Tujuannya adalah membuat perpustakaan web kompatibel dengan Minigames. Namun implementasi perpustakaan saat ini masih belum sempurna dan tidak lengkap, dan sering kali diperlukan kerja ekstra untuk memperbaiki setiap perpustakaan pihak ketiga yang ingin Anda gunakan.
Banyak mesin game web telah di-porting (Resmi dan tidak resmi)
| Mesin | Fokus | Status |
|---|---|---|
| Kakao | Mesin Game Web berbasis UI 2d Cina | Didukung secara resmi |
| Lay | Mesin Game Web 2d & 3d Cina | Didukung secara resmi |
| Kuntul | Mesin Game Web berbasis UI 2d Cina | Didukung secara resmi |
| Persatuan | Mesin Game 3D/2D, standar industri | Belum didukung |
| Phaser (Web) | Mesin Game Web 2D, standar industri dalam game web | Bekerja melalui pelabuhan tidak resmi |
| Tigajs | Mesin Web 3D, standar industri | Bekerja melalui pelabuhan tidak resmi |
Bisakah saya membuat kode minigame saya sendiri? Ya, Anda sudah bisa membuat kode minigame Anda sendiri! Semua yang Anda perlukan, mulai dari dokumentasi hingga alat pengembang, tersedia untuk umum.
Apakah sudah bisa dirilis? Tidak, ini belum bisa dipublikasikan, tapi Anda masih bisa mempratinjaunya di ponsel Anda. (Lebih lanjut tentang presentasi IDE berikut)
Kapan akan dirilis? Kami belum tahu.
Gaya grafis permainan: 2D dan 3D dimungkinkan.
Berkat akses WebGL, kami juga dapat menampilkan game 3D yang akan diakselerasi GPU.
Kinerja: Sistem yang dioptimalkan sedikit lebih baik daripada game Web
Sistem ini masih muda dan dalam tahap pengujian beta, namun kita sudah dapat melihat bahwa performanya sangat mirip dengan kemampuan game web. Aturan praktis yang baik, untuk saat ini, adalah jangan berharap lebih dari apa yang bisa dilakukan oleh game web, dalam hal keterbatasan.
Ukuran masih menjadi kendala utama.
Salah satu keterbatasan terbesar sebuah minigame berasal dari ukurannya. WeChat saat ini hanya mengizinkan paket game hingga 4MB. Game Anda mungkin dapat mengunduh aset tambahan dari server eksternal, namun perlu diingat bahwa aset tersebut harus diambil setiap kali game dimulai. Jadi, game harus memiliki aset yang ringan, dan game 3D harus menggunakan objek 3D poli rendah dan tekstur berkualitas rendah.
Web → Konversi minigame: sangat bergantung pada basis kode yang mendasarinya
Dimungkinkan untuk mengubah game web menjadi minigame. Namun, berdasarkan perpustakaan spesifik dan mesin permainan yang digunakan, proses pengembangannya bisa memakan waktu berhari-hari hingga berbulan-bulan. Audit sebelumnya terhadap kode sumber game diperlukan untuk memperkirakan berapa lama waktu yang dibutuhkan untuk adaptasi tertentu.
Minigame → Konversi web: cepat!
Jika menggunakan kerangka permainan web standar untuk pengembangan minigame, seperti Phaser, sebagian besar kode Anda sudah kompatibel dengan web, sehingga akan berfungsi di browser tanpa banyak penyesuaian.
Alat IDE dan debugging sama dengan aplikasi mini. Namun, itu murni dalam bahasa China. Pengalaman debugging secara keseluruhan sangat baik, meskipun mungkin agak bermasalah karena masih muda.
Seluruh antarmuka telah diterjemahkan ke dalam bahasa Inggris di sini, untuk kejelasan.
Salah satu daya tarik utama dari minigame adalah akses tanpa batas ke fitur sosial yang tertanam di dalam platform WeChat, yang meningkatkan vitalitas dan tingkat keterlibatannya. Berikut ini pemaparan mekanisme utama dan cara penggunaannya.
Dapatkan informasi Pengguna terkini
wx.login({
success: function () {
wx.getUserInfo(userInfos)
}
})
Informasi pribadi lainnya yang bisa Anda peroleh:
wx.getLocation() => user location
wx.getWeRunData() => get podometer data from werun
https://mp.weixin.qq.com/debug/wxagame/dev/tutorial/open-ability/authorize.html?t=201832
Dapatkan daftar data Teman yang memainkan game tersebut
wx.getFriendCloudStorage()
Dapatkan daftar data Grup yang memainkan permainan
wx.getGroupCloudStorage()
Permainan Mini
Perpustakaan Game Phaser
Situs web Phaser
Phaser : Buat tutorial game pertama Anda
Contoh Phaser
Jangan percaya pratinjaunya, selalu uji pada perangkat nyata.
Ini adalah contoh potongan kode yang berfungsi pada emulator, namun tidak pada perangkat sebenarnya:
static preload(game) {
game.load.image('bg', 'js/game/objects/Background/bg.jpg') => working on both emulator + phone
// game.load.image('bg', './js/game/objects/Background/bg.jpg') => working only on emulator
}
Batasi penggunaan Perpustakaan pihak ketiga, karena kerja ekstra sering kali diperlukan
Perpustakaan seperti lodash tidak berfungsi begitu saja. Anda sering kali perlu masuk ke kode sumber dan memodifikasi bagiannya bergantung pada API DOM/BOM agar benar-benar dapat memuatnya. Di Lodash, Anda dapat menyelesaikan masalah dengan menambahkan modul tertentu satu per satu, dan bukan seluruh perpustakaan sekaligus. Tapi itu tidak selalu mudah!
npm install --save lodash.forEach
NOT
npm install --save lodash
Potong kode Anda menjadi file yang lebih kecil untuk mempermudah proses debug
Sistem debugging IDE saat ini bekerja secara berbeda dari sistem lainnya di Chrome dan Firefox. Salah satu sumber frustrasi terbesar yang pernah saya temui adalah banyak masalah yang berakhir dengan memunculkan pesan kesalahan yang sangat samar-samar dan tidak spesifik, tanpa informasi apa pun tentang dari mana masalah itu berasal, kecuali file yang mengalami kegagalan. Oleh karena itu, membagi kode Anda menjadi bagian-bagian yang lebih kecil sangatlah penting, karena menemukan kesalahan ketik pada file berisi seribu baris, tanpa satu petunjuk pun , jauh lebih sulit daripada menemukan kesalahan ketik pada file 50 baris.
