Snapchat Web Lenses memungkinkan kamu mengambil game HTML5 biasa, mengompres build-nya jadi zip, lalu menerbitkannya di dalam Snapchat sebagai Lens (filter interaktif Snapchat). Game menjadi fokus pertama, fiturnya masih beta, dan meskipun framework web apa pun bisa dipakai, Snap merekomendasikan PlayCanvas dan menggunakannya di seluruh dokumentasinya. Kamu sama sekali tidak perlu membuka Lens Studio.
PlayCanvas mengumumkan dukungan ini pada 23 Oktober 2026, bersamaan dengan empat game pertama yang sudah tayang. Panduan ini menjelaskan apa itu Web Lens, batasan ketat yang wajib dipenuhi build kamu, apa saja yang disediakan Web Lens API, dan jalur praktis lima langkah dari build web sampai game yang bisa ditemukan pemain lewat nama atau Snapcode.
Sekilas tentang Snapchat Web Lenses
| Apa itu | Aplikasi web yang dikemas sebagai zip dan diterbitkan sebagai Lens Snapchat |
| Platform | Snapchat untuk iOS dan Android |
| Layar | Layar penuh potret, 9:16 (lanskap tidak didukung) |
| Engine | Framework web apa pun; PlayCanvas direkomendasikan Snap |
| Ukuran paket | Zip maksimal 8 MB, index.html maksimal 1 MB di root zip |
| Runtime | WebAssembly (termasuk multithread), Web Workers, dan eval() didukung |
| Sandbox | Tanpa jaringan, kamera, mikrofon, atau sensor gerak |
| Fitur Snapchat | Leaderboard, Bitmoji, dan Storage lewat Web Lens API |
| Status | Beta; detail bisa berubah |
Kenapa developer game web perlu peduli
Snapchat digunakan oleh 971 juta orang setiap bulan, menurut laporan kuartal kedua 2026 Snap, dan Snap melaporkan Game Lenses-nya menarik lebih dari 175 juta orang per bulan. Web Lenses membuka audiens sebesar itu bagi developer web tanpa perlu listing di app store atau instalasi: pemain membuka game dengan cara yang sama seperti mencoba Lens apa pun.
Angka awal yang dibagikan para developer pertama memberi gambaran tentang apa yang mungkin dicapai:
| Game | Studio | Genre | Yang dilaporkan developer |
|---|---|---|---|
| Bloom | NOWWA | Puzzle taman yang santai | Rata-rata sekitar 260 detik per sesi, hampir 30% kembali keesokan harinya |
| Ball Smasher | MetaM | Shooter basket jalanan | Prototipe dalam hitungan jam, jutaan kali dimainkan dalam hitungan hari |
| Snake Showdown | Elanra Studios | Pertarungan ular | 7 juta kali dimainkan oleh 1,8 juta pemain dalam empat minggu pertama |
| Bitmoji Ski | Snap | Arcade ski | Dibuat dalam sehari, 6 juta impresi per hari |
Untuk monetisasi, program Lens+ Payouts dari Snap memungkinkan kreator yang memenuhi syarat (18+, di negara yang memenuhi syarat) menandai Lens sebagai eksklusif untuk pelanggan Lens+ dan Platinum, lalu mendapat bagi hasil berdasarkan engagement. Snap juga mengundang developer untuk mengajukan ide game Web Lens orisinal demi pendanaan pengembangan, dengan prioritas untuk game yang dibangun di sekitar social loop seperti leaderboard.
Aturan yang wajib dipatuhi build kamu
Sebagian besar unggahan yang ditolak berasal dari segelintir kesalahan pengemasan, jadi pahami ini sebelum menulis kode game apa pun.
- Hanya potret. Lens berjalan layar penuh dengan rasio 9:16. Rancang kamera, HUD, dan tombol untuk satu tangan sejak awal.
- Zip 8 MB atau kurang. Batas ini berlaku untuk file terkompresi yang diunggah. Anggap ini plafon, bukan target: zip yang lebih kecil dimuat lebih cepat, dan waktu sampai bisa mulai main adalah yang paling penting.
index.htmldi root, 1 MB atau kurang. Zip isi folder build kamu, bukan foldernya. Jadikanindex.htmltitik masuk yang ramping dan jangan menyisipkan seluruh bundle atau URLdata:berukuran besar ke dalamnya.- Path relatif di mana-mana. Gunakan
./a/game.js, jangan pernah/a/game.js, baik di HTML maupun di panggilanfetch()saat runtime. Dengan Vite, aturbase: './'. - Garis miring maju di dalam zip. Di Windows,
Compress-Archivemilik PowerShell menulis backslash dan merusak path. Gunakan “Compress to ZIP file” di Explorer,zip -r, atau script Node dengan paketarchiver, lalu cek denganunzip -l.
Sandbox: yang tidak bisa dilakukan Web Lens
Web Lens sepenuhnya mandiri. Ia tidak bisa mengakses jaringan, tidak bisa memakai kamera atau mikrofon, tidak bisa membaca sensor gerak, dan localStorage serta IndexedDB selalu kosong setiap kali dibuka. Dalam praktiknya, artinya:
- Setiap script, model, tekstur, font, dan suara harus ikut di dalam zip.
- Tidak ada panggilan analytics, remote config, atau backend multiplayer online.
- Progres harus disimpan dengan kemampuan Storage dari Web Lens API.
Web Lens API: leaderboard, Bitmoji, dan penyimpanan
API dari Snap (paket npm @snap/web-lens-api) menghubungkan game kamu dengan Snapchat. Panggil init() sekali saat startup dan cek isSupported() sebelum memakai sebuah kemampuan. Di luar Snapchat, di desktop atau dev server lokal, API menjawab dari stub bawaan dengan data contoh, jadi kamu bisa mengembangkan tanpa HP — cukup pastikan game tetap bisa dimainkan kalau suatu kemampuan tidak tersedia.
| Kemampuan | Fungsinya | Yang perlu diketahui |
|---|---|---|
| Leaderboards | Mengirim skor dan membuka panel leaderboard bawaan Snapchat | Skor harus bilangan bulat; gunakan urutan naik untuk time trial; teman bisa mendapat notifikasi saat skor mereka dikalahkan |
| Bitmoji | Memuat Bitmoji pemain sebagai GLB 3D yang sudah di-rig atau gambar 2D kepala dan bahu | URL kedaluwarsa setelah sekitar lima menit; Bitmoji dikirim tanpa animasi; selalu sertakan karakter default |
| Storage | Penyimpanan key-value kecil yang terikat ke akun pemain | Setiap nilai berupa JSON maksimal 32 KiB, total 100 KiB per Lens per pemain; simpan saat progres berubah dan saat halaman disembunyikan |
Leaderboard yang baik menghargai sesuatu yang ingin ditingkatkan pemain — akurasi, kecepatan, atau daya tahan — dan membuat percobaan berikutnya cukup satu tap saja. Progres yang disimpan juga layak dipikirkan dengan cara yang sama: tentukan apa yang harus bertahan antarsesi (skor terbaik, stage yang sudah terbuka) dan apa yang aman di-reset.
Dari build web sampai Lens terbit dalam 5 langkah
- Pilih alur kerja. Bisa PlayCanvas Engine sebagai proyek JavaScript biasa (ideal bersama asisten coding AI), dibuat dengan
npm create playcanvas@latest my-lens -- --starter web-lens, atau PlayCanvas Editor berbasis browser, yang bisa terhubung ke asisten AI lewat Editor MCP Server-nya. Starter tersebut sudah menyiapkan layout potret, safe area, path relatif, pengemasan, dan Web Lens API. - Tambahkan PlayCanvas Skills (opsional).
npx skills add playcanvas/skillsmengajari agen coding AI yang kompatibel cara menyiapkan scene, animasi, HUD, dan efek di PlayCanvas. - Build untuk HP. Jaga HUD di dalam
env(safe-area-inset-*)karena Snapchat menggambar tombol tutupnya sendiri di dekat bagian atas, skalakan gerakan berdasarkan waktu yang berlalu (banyak HP berjalan di 120 Hz), mulai audio dari interaksi pengguna, dan jeda saat Lens disembunyikan. Import class engine berdasarkan nama supaya bundler bisa membuang kode yang tidak dipakai, kompres tekstur, dan lewati source map. - Integrasikan API. Kirim skor saat game over, muat Bitmoji kalau perlu, dan simpan progres dengan Storage.
- Kemas, unggah, dan ajukan. Di proyek starter,
npm run packageakan mem-build dan mengecek zip terhadap aturan Snap. Lalu masuk ke My Lenses, buat Web Lens, unggah zip-nya, dan tambahkan nama, ikon PNG 512 × 512, serta video pratinjau 5 detik berukuran 720 × 1280. Setelah lolos review, pemain bisa menemukan game lewat nama atau Snapcode.
Tidak mau ngoding sama sekali? Easy Lens, pembuat Lens berbasis AI dari Snap, kini bisa membuat game Web Lens bertenaga PlayCanvas dari prompt teks; fitur ini tersedia untuk pelanggan Lens+ di Easy Lens versi web.
Game seperti apa yang paling cocok untuk Web Lens?
| Cocok | Kurang cocok |
|---|---|
| Game arcade, puzzle, dan kejar skor dengan satu jempol | Game lanskap atau berbasis keyboard dan mouse |
| Sesi singkat dengan restart instan | Sesi panjang yang bergantung pada server |
| Aset kecil yang terkompresi | Unduhan aset besar saat runtime |
| Kompetisi berbasis leaderboard | Multiplayer online real-time |
Mulailah dengan proyek kecil yang jarak dari membuka sampai bermainnya pendek. Uji kontrol sentuh, tepi layar, audio, jeda, dan restart di HP sungguhan (npx vite preview --host memungkinkan kamu membuka build di browser HP), dan catat setiap perubahan khusus platform supaya update berikutnya tidak menghapusnya.
Untuk detail resmi, baca dokumentasi Web Lenses dari Snap, persyaratan platform, dan pengumuman PlayCanvas.
FAQ
Apa itu Snapchat Web Lens?
Web Lens adalah aplikasi web yang berjalan di dalam Snapchat sebagai Lens. Kamu membuatnya dengan teknologi web, meng-zip build-nya, lalu mengunggahnya lewat My Lenses, tanpa Lens Studio.
Apakah wajib memakai PlayCanvas?
Tidak. Framework web apa pun bisa dipakai, tetapi Snap merekomendasikan PlayCanvas dan dokumentasinya menggunakan PlayCanvas dengan Vite.
Seberapa besar ukuran game Web Lens?
Zip terkompresi bisa sampai 8 MB, dan index.html di root-nya sampai 1 MB. Ini batasan masa beta, jadi cek persyaratan terbaru sebelum mengunggah.
Bisakah Web Lens memakai internet atau server multiplayer?
Tidak. Web Lens tidak bisa mengakses jaringan, jadi semua aset harus dibundel dan backend multiplayer online tidak bisa dipakai. Sebagai gantinya, leaderboard tersedia lewat Web Lens API.
Bagaimana cara menyimpan progres pemain?
Gunakan kemampuan Storage dari Web Lens API. Penyimpanan browser biasa selalu kosong setiap kali Lens dibuka.
Bisakah saya menghasilkan uang dari game Web Lens?
Kreator yang memenuhi syarat bisa bergabung dengan Lens+ Payouts, yang membagi pendapatan untuk Lens yang ditandai eksklusif bagi pelanggan Lens+ dan Platinum, dan Snap sedang menerima pengajuan untuk game yang didanai.
