Melancarkan permainan aksi isometrik terus di dalam pelayar mudah alih membawa cabaran teknikal yang getir. Pelayar web mudah alih mengenakan had memori yang ketat, pelaksanaan JavaScript berbenang tunggal, dan sifar ruang untuk muat turun aplikasi bersaiz beberapa megabait. Sekiranya permainan arked mengambil masa sepuluh saat untuk dimuat turun dan dimulakan melalui sambungan selular, pemain akan berundur sebelum bingkai pertama sempat dipaparkan.
Bagi MADNESS: Last Stand, matlamat reka bentuknya adalah pertarungan bos arked tanpa sebarang kerumitan pemasangan. Pemain melangkah ke grid arena terapung, mengelak serangan telegraf daripada gergasi kayu bertingkat yang menjulang tinggi, serta mengimbangi tembakan blaster jarak jauh dengan pertempuran jarak dekat menentang konco magma yang menghampiri.
Keseluruhan seni bina, reka bentuk sistem, enjin audio prosedural, dan saluran paip aset direka bentuk, dibina, serta diuji di dalam Antigravity menggunakan Gemini. Bekerja dalam Antigravity membolehkan penerokaan teknikal yang pantas merentasi matematik koordinat isometrik 2:1, sintesis Web Audio prosedural, dan pengekstrakan kroma imej kanvas di pihak klien, merealisasikan permainan daripada spesifikasi reka bentuk kepada pelancaran web dalam beberapa jam.
👉 Lancarkan dan Main MADNESS: Last Stand Terus dalam Pelayar Anda
(Main serta-merta, tiada muat turun atau pemasangan diperlukan, sedia untuk sentuhan dan desktop)
Ringkasan Pilihan Tindanan Teknologi
| Lapisan | Teknologi Terpilih | Sebab Dipilih | Alternatif yang Ditolak |
|---|---|---|---|
| Enjin | Phaser 3 (3.80.1) | But sejuk bawah sesaat, paparan 2D WebGL 2.0, susunan kedalaman dinamik yang ringan | Unity atau Godot 4 (binari WebAssembly berat 15 hingga 30 MB) |
| Audio | Web Audio API Prosedural | Sifar muatan aset audio, 4 trek BGM berorientasikan algoritma, main balik jam perkakasan | Pek sprite audio MP3/WAV (muatan audio berat 10 hingga 20 MB) |
| Saluran Paip Aset | Pengekstrakan kroma Canvas pihak klien | Penyingkiran latar belakang automatik dalam pelayar untuk seni piksel generatif | Aliran kerja pemotongan grafik manual dan helaian PNG lut sinar yang berat |
| Alatan | TypeScript + Vite | Pengoptimuman kelas monomorfik V8, HMR serta-merta, binaan studio dwi-titik masuk | Webpack (binaan perlahan) atau Vanilla JS (pepijat masa larian dalam keadaan kompleks) |
| Fizik | Phaser Arcade Physics | Penyelesaian pelanggaran AABB skala mikrosaat pada 60 FPS, beban CPU minimum | Matter.js atau Box2D (pengiraan poligon yang tidak diperlukan untuk pertempuran grid) |
| Kawalan | Butang tindakan kontekstual + kayu bedik maya | Butang bersepadu untuk tembakan blaster dan tumbukan fizikal, sifar halangan skrin | Skema sentuhan berbilang butang statik yang menyemakkan paparan mudah alih |
| Penyerahan | PWA + Cloudflare Pages | Pengedaran pinggir global, sokongan pekerja perkhidmatan luar talian, pemuatan bawah sesaat | Gedung aplikasi mudah alih natif atau pelayan aplikasi berpusat |
1. Enjin: Unjuran Isometrik 2D Berbanding Enjin 3D Berat
Permainan isometrik sering mendorong pembangun memilih masa larian 3D penuh seperti Three.js, Babylon.js, atau Godot 4. Walaupun enjin 3D penuh menawarkan koordinat ruang natif, ia membawa pengiraan matriks GPU yang berat, saluran paip pembayang yang kompleks, dan saiz muat turun masa larian yang besar. Mengeksport Godot 4 atau Unity ke WebAssembly menghasilkan 15 hingga 30 megabait binari termampat. Pada peranti mudah alih, menyusun dan memulakan modul yang besar ini membebankan benang utama dan menimbulkan kelewatan but yang ketara. Eksport WebAssembly berbilang benang juga memerlukan pengepala pelayan tersuai, termasuk Cross-Origin-Opener-Policy dan Cross-Origin-Embedder-Policy, yang menyukarkan pelancaran dalam webview atau iframe pihak ketiga.
Phaser 3 menyediakan paparan WebGL 2.0 dipercepatkan perkakasan dengan sandaran automatik ke Canvas dalam pakej termampat di bawah 380 kilobait. Oleh kerana Phaser beroperasi terus pada permukaan 2D, unjuran isometrik dipermudahkan menjadi pemetaan koordinat Cartesian. Logik permainan berjalan pada grid maya 6 kali 5, memetakan kedudukan ke ruang skrin menggunakan formula dimetrik standard 2:1. Susunan kedalaman entiti dikemas kini setiap bingkai dengan mengira hasil tambah koordinat grid lantai. Pengiraan ringan ini mengekalkan wira, tangan gergasi terapung, dan konco lantai dalam perspektif visual yang tepat tanpa memerlukan penimbal kedalaman 3D.
2. Audio: Sintesis Bunyi Algoritma Berbanding Pek Audio Berbilang Megabait
Permainan pelayar tradisional memperuntukkan 60% atau lebih daripada jumlah saiz muat turun untuk aset audio. Menghasilkan skor arked lengkap dengan muzik tajuk, gelung pertempuran, serangan bos, tembakan senjata, dan keraian kemenangan biasanya memerlukan 10 hingga 15 megabait fail audio termampat. Menyahkod fail termampat ke dalam memori audio pada peranti mudah alih memakan RAM yang berharga dan berisiko menyebabkan penurunan kelancaran bingkai semasa adegan pantas.
MADNESS: Last Stand menghapuskan muat turun audio sepenuhnya. Subsistem audio menyintesis setiap kesan bunyi dan skor muzik secara masa nyata menggunakan Web Audio API natif.
Enjin muzik tersuai memainkan empat trek algoritma:
- Tema Skrin Mula menyajikan pengenalan atmosfera 120 BPM menggunakan gelombang bes segitiga dan melodi utama pentatonik.
- Tema Medan Pertempuran memacu rentak aksi 135 BPM yang dikuasakan oleh garis bes gigi gergaji satu perenam belas serta perkusi sintetik.
- Keraian Kemenangan membawakan kegembiraan 132 BPM berasaskan kord triad major dan larian sintesis arpeggio.
- Irama Kekalahan menutup perlawanan dengan progresi minor menurun 88 BPM yang perlahan.
Kesan bunyi pertempuran dijana melalui suara penyintesis khusus. Tembakan laser meluncurkan pengayun sapuan frekuensi daripada frekuensi tinggi ke rendah, letupan dan tembakan membentuk hingar putih melalui penapis biquad laluan jalur, manakala impak tumbukan menghasilkan letupan pic melengkung yang pendek. Saiz muat turun aset audio adalah tepat 0 bait. Oleh kerana semua nota dijadualkan terus pada jam perkakasan konteks audio pelayar, ketepatan masa audio kekal pada tahap ketepatan sampel tanpa terjejas oleh penurunan kadar bingkai.
3. Saluran Paip Aset: Pengekstrakan Kroma Canvas Pihak Klien Berbanding Helaian Sprite Pasang Siap
Menjana seni piksel arked 16-bit tersuai menggunakan model generatif menghasilkan postur watak yang ekspresif, namun output model mentah tiba dengan latar belakang padu. Memotong puluhan sudut isometrik dan bingkai pertempuran secara manual dalam editor imej desktop memakan masa berhari-hari. Mengedarkan fail PNG mentah dengan saluran alfa pula meningkatkan saiz muatan rangkaian dengan ketara berbanding JPEG termampat.
Pemuat aset menyelesaikan masalah ini dengan memproses sprite terus di dalam pelayar semasa permulaan. Permainan memuat turun sprite JPEG termampat yang dijana menggunakan gesaan seni piksel tersasar. Semasa babak but, konteks Canvas HTML5 luar skrin mengambil sampel daripada empat piksel bucu setiap imej, mengenal pasti warna latar belakang, dan menjalankan pengekstrakan kroma secara automatik dengan pembersihan limpahan tepi (edge despill). Output kanvas lut sinar ini didaftarkan terus ke dalam pengurus tekstur WebGL Phaser.
Pemuat aset melepaskan pelaksanaan kembali kepada benang utama pelayar selama 16 milisaat antara setiap pas aset. Ini mengelakkan antara muka pelayar daripada terkunci dan memastikan animasi but berjalan lancar pada 60 bingkai sesaat pada telefon pintar.
4. Alatan: TypeScript, Vite, dan Pelantar Studio Dwi-Titik Masuk
Menyelaras logik pertempuran merentasi bos berbilang bahagian, kolam projektil, dan konco yang muncul memerlukan sempadan jenis yang teguh. TypeScript memberikan jaminan masa kompilasi bagi fasa bos, pengesanan hentaman, dan peralihan status pemain. Dalam enjin JavaScript moden seperti V8, objek dengan susun atur sifat yang stabil membina kelas tersembunyi monomorfik, menghapuskan beban carian sifat dinamik semasa gelung permainan 60 FPS.
Vite mengurus proses pembinaan menggunakan seni bina dwi-titik masuk:
- Permainan produksi menyajikan berkas klien yang ramping dan bebas kod berlebihan, dioptimumkan untuk mainan serta-merta di dalam pelayar.
- Studio pratonton aset interaktif menyediakan abah-abah aplikasi sekunder khusus di mana pembangun boleh menguji tempo muzik prosedural, menguji frekuensi papan bunyi, meneliti kesemua 13 postur wira dan 8 sudut konco, serta menala ambang kroma secara berasingan.
Mengasingkan persekitaran pengimbangan daripada masa larian pemain memastikan lelaran pembangunan kekal pantas tanpa meningkatkan saiz muat turun produksi.
5. Pertempuran & Fizik: Pelanggaran Grid AABB Ringan Berbanding Enjin Jasad Tegar
Menambah enjin fizik jasad tegar penuh seperti Matter.js atau Box2D sering mendatangkan beban pengiraan yang tidak diperlukan. Enjin jasad tegar menghitung geseran putaran, pelanggaran bucu poligon berterusan, dan fizik keanjalan pada setiap jasad yang aktif.
MADNESS: Last Stand adalah permainan pertempuran tindak balas arked. Ia bergantung kepada Phaser Arcade Physics dengan semakan Axis-Aligned Bounding Box. Pelanggaran antara tembakan blaster pemain, zon sentuhan konco, dan kawasan serangan bos selesai dalam masa kurang daripada 0.1 milisaat setiap bingkai.
Serangan bos menggunakan lapisan telegraf lantai yang memaparkan corak amaran separa lut sinar pada jubin lantai 1.5 saat sebelum serangan mendarat. Pemain membaca telegraf lantai dan menggunakan navigasi analog berterusan untuk melangkah ke zon grid yang selamat sebelum gergasi menghentak lajur atau baris. Oleh kerana pengiraan pelanggaran menggunakan sumber CPU yang minimum, pelayar memperuntukkan hampir keseluruhan bajet bingkai 16.6 milisaat untuk memaparkan sprite dan kesan zarah.
6. Kawalan & Penyerahan Mudah Alih: Kawalan Dwi-Tindakan Kontekstual dan PWA Pinggir
Permainan arked pada peranti skrin sentuh kerap berdepan masalah butang atas skrin yang berselerak. Menyusun butang maya berasingan untuk menembak, menumbuk, dan mengelak mengundang salah tekan serta menyebabkan tangan pemain melindungi pandangan terhadap serangan bos yang datang.
Seni bina kawalan dalam MADNESS: Last Stand memudahkan interaksi sentuhan:
- Ibu jari kiri mengawal pergerakan analog berterusan merentasi satah lantai isometrik menggunakan kayu bedik maya terapung 360 darjah yang dinamik.
- Ibu jari kanan mengendalikan satu butang tindakan kontekstual. Apabila pemain mempunyai peluru, butang tersebut melepaskan tembakan blaster dengan penguncian sasaran automatik ke atas bahagian bos yang aktif. Apabila peluru habis, butang yang sama bertukar secara automatik menjadi butang tumbukan jarak dekat untuk menentang konco yang menghampiri.
- Gelung pemulihan peluru memunculkan konco sejurus selepas peluru kehabisan. Menewaskan konco menyebabkan ia menjatuhkan peti senjata yang mengandungi peluru baharu, memulihkan tembakan jarak jauh dan mengembalikan pemain kepada pertempuran bos.
Permainan ini dilancarkan sebagai Aplikasi Web Progresif (PWA) yang dihoskan di Cloudflare Pages. Pekerja perkhidmatan menyimpan cache aset statik untuk pemuatan ulangan serta-merta. Pengendali orientasi tersuai memantau nisbah aspek peranti, memaparkan gesaan orientasi sekiranya dipegang dalam mod potret dan mengunci paparan ke mod landskap untuk pengalaman arked yang mengasyikkan.
Dibina dengan Antigravity dan Gemini
Membangunkan permainan arked isometrik dengan audio prosedural masa nyata, saluran paip aset tersuai, dan mesin keadaan bos pelbagai fasa lazimnya memerlukan gabungan beberapa alatan pembangunan yang terpisah. Dalam MADNESS: Last Stand, keseluruhan kitaran kejuruteraan ini direka bentuk, dikodkan, dan disahkan di dalam Antigravity menggunakan Gemini:
- Seni bina sistem, matematik transformasi isometrik 2:1, dan mesin keadaan serangan bos dirancang secara langsung dalam konteks perbualan.
- Enjin sintesis Web Audio prosedural, mengandungi empat trek muzik lengkap dan kesan bunyi pertempuran yang disintesis, dimodelkan secara matematik dan dilaksanakan dalam TypeScript tanpa sebarang fail audio luaran.
- Suite gesaan Penjana Kelompok DNA distruktur untuk menghasilkan seni piksel 16-bit yang konsisten merentasi 8 sudut isometrik bagi watak, komponen gergasi, konco, dan jubin lantai arena.
- Algoritma pengekstrakan kroma kanvas pihak klien dilaksanakan dan ditentukur untuk membuang piksel latar belakang padu secara automatik semasa permulaan.
- Ergonomik mudah alih, tindak balas sentuhan, dan pengendali orientasi disahkan merentasi sesi pelayar menggunakan alatan automatik.
Ringkasan Metrik Produksi
| Metrik | Ukuran |
|---|---|
| Berkas JavaScript Produksi | ~384 kB termampat gzip (termasuk masa larian permainan utama dan studio pratonton) |
| Muatan Aset Audio | Tepat 0 bait (100% sintesis Web Audio prosedural) |
| Masa But Sejuk | Bawah 800 milisaat pada sambungan selular 4G |
| Sasaran Kadar Bingkai | 60 FPS stabil pada pelayar desktop dan mudah alih |
| Saluran Paip Aset | Pengekstrakan kroma kanvas dalam pelayar dan kelutsinaran alfa limpah-isi |
| Sasaran Penyerahan | Cloudflare Pages (Aplikasi Web Progresif dengan Pekerja Perkhidmatan) |
| URL Permainan Langsung | https://madness-2d-isometric.pages.dev/ |
| Repositori Sumber | [email protected]:ihsanberahim/madness-2d-isometric.git |
Alami Ritma Pertempuran Secara Langsung
Bersedia untuk merasai ritma pertempuran, menetapkan masa elakan anda melalui telegraf gergasi, dan mendengar sintesis Web Audio prosedural masa nyata beraksi?
👉 Main MADNESS: Last Stand Sekarang dalam Pelayar Anda
(Dimuatkan dalam masa kurang sesaat. Serasi dengan pelayar desktop dan skrin sentuh mudah alih.)