Snapchat Web Lenses : comment transformer votre jeu HTML5 en jeu Snapchat avec PlayCanvas

Les Snapchat Web Lenses vous permettent de prendre un jeu HTML5 ordinaire, de compresser le build en zip et de le publier dans Snapchat sous forme de Lens (un filtre interactif). Les jeux sont le premier cas d’usage, la fonctionnalité est en bêta et, si n’importe quel framework web peut être utilisé, Snap recommande PlayCanvas et s’en sert dans toute sa documentation. Vous n’avez jamais besoin d’ouvrir Lens Studio.

PlayCanvas a annoncé cette prise en charge le 23 octobre 2026, avec quatre premiers jeux déjà en ligne. Ce guide explique ce qu’est une Web Lens, les limites strictes que votre build doit respecter, ce que propose la Web Lens API, et un parcours concret en cinq étapes pour passer d’un build web à un jeu que les joueurs trouvent par son nom ou par Snapcode.

Les Snapchat Web Lenses en bref

Ce que c’est	Une application web empaquetée en zip et publiée comme Lens Snapchat
Plateformes	Snapchat pour iOS et Android
Écran	Plein écran en portrait, 9:16 (le paysage n’est pas pris en charge)
Moteur	N’importe quel framework web ; PlayCanvas recommandé par Snap
Taille du paquet	Zip jusqu’à 8 MB, index.html jusqu’à 1 MB à la racine du zip
Exécution	WebAssembly (y compris multithread), Web Workers et eval() pris en charge
Sandbox	Pas de réseau, de caméra, de micro ni de capteurs de mouvement
Fonctions Snapchat	Classements, Bitmoji et stockage via la Web Lens API
Statut	Bêta ; les détails peuvent changer

Pourquoi les développeurs de jeux web devraient s’y intéresser

Snapchat est utilisé par 971 millions de personnes chaque mois, selon les résultats du deuxième trimestre 2026 de Snap, et Snap indique que ses Game Lenses touchent plus de 175 millions de personnes par mois. Les Web Lenses ouvrent ce public aux développeurs web sans fiche sur un store ni installation : les joueurs lancent un jeu comme ils essaient n’importe quelle Lens.

Les premiers chiffres communiqués par les développeurs donnent une idée du potentiel :

Jeu	Studio	Genre	Ce que le développeur a annoncé
Bloom	NOWWA	Puzzle cosy de jardinage	Environ 260 secondes par session en moyenne, près de 30 % des joueurs reviennent le lendemain
Ball Smasher	MetaM	Tir de basket de rue	Prototypé en quelques heures, des millions de parties en quelques jours
Snake Showdown	Elanra Studios	Combat de serpents	7 millions de parties par 1,8 million de joueurs en quatre semaines
Bitmoji Ski	Snap	Arcade de ski	Créé en une journée, 6 millions d’impressions par jour

Côté monétisation, le programme Lens+ Payouts de Snap permet aux créateurs éligibles (18 ans et plus, dans les pays éligibles) de réserver une Lens aux abonnés Lens+ et Platinum et de toucher une part des revenus selon l’engagement. Snap invite aussi les développeurs à proposer des jeux Web Lens originaux pour obtenir un financement, en donnant la priorité aux jeux construits autour d’une boucle sociale comme les classements.

Les règles que votre build doit respecter

La plupart des envois refusés viennent d’une poignée d’erreurs d’empaquetage : apprenez ces règles avant d’écrire la moindre ligne de code de jeu.

1. Portrait uniquement. Les Lenses tournent en plein écran en 9:16. Pensez votre caméra, votre HUD et vos boutons pour une seule main dès le départ.
2. Zip de 8 MB maximum. La limite s’applique au fichier compressé envoyé. Voyez-la comme un plafond, pas comme un objectif : un zip plus léger se charge plus vite, et le temps avant de pouvoir jouer est ce qui compte le plus.
3. index.html à la racine, 1 MB maximum. Compressez le contenu de votre dossier de build, pas le dossier lui-même. Gardez index.html comme un point d’entrée léger et n’y intégrez pas tout le bundle ni de grosses URL data:.
4. Des chemins relatifs partout. Utilisez ./a/game.js, jamais /a/game.js, dans le HTML comme dans les appels fetch() à l’exécution. Avec Vite, réglez base: './'.
5. Des barres obliques dans le zip. Sous Windows, Compress-Archive de PowerShell écrit des barres obliques inverses et casse les chemins. Utilisez « Compresser dans un dossier ZIP » de l’Explorateur, zip -r ou un script Node avec le paquet archiver, puis vérifiez avec unzip -l.

Le sandbox : ce qu’une Web Lens ne peut pas faire

Une Web Lens est autonome. Elle ne peut pas accéder au réseau, ni utiliser la caméra ou le micro, ni lire les capteurs de mouvement, et localStorage comme IndexedDB repartent à zéro à chaque lancement. Concrètement :

• Chaque script, modèle, texture, police et son doit être inclus dans le zip.
• Pas d’appels analytics, de configuration distante ni de backend multijoueur en ligne.
• La progression doit être sauvegardée via la fonction Storage de la Web Lens API.

La Web Lens API : classements, Bitmoji et stockage

L’API de Snap (paquet npm @snap/web-lens-api) relie votre jeu à Snapchat. Vous appelez init() une fois au démarrage et vérifiez isSupported() avant d’utiliser une fonction. Hors de Snapchat, sur votre ordinateur ou votre serveur de développement local, l’API répond via un stub intégré avec des données d’exemple : vous pouvez donc développer sans téléphone, à condition que le jeu reste jouable si une fonction manque.

Fonction	Ce qu’elle fait	À savoir
Leaderboards (classements)	Envoie un score et ouvre le panneau de classement de Snapchat	Les scores doivent être des entiers ; utilisez l’ordre croissant pour les contre-la-montre ; les amis peuvent être notifiés quand leur score est battu
Bitmoji	Charge le Bitmoji du joueur en GLB 3D riggé ou en image 2D tête et épaules	L’URL expire au bout de cinq minutes environ ; les Bitmoji sont livrés sans animations ; incluez toujours un personnage par défaut
Storage (stockage)	Un petit stockage clé-valeur lié au compte du joueur	Chaque valeur est du JSON de 32 KiB maximum, 100 KiB au total par Lens et par joueur ; sauvegardez quand la progression change et quand la page est masquée

Un bon classement récompense quelque chose que les joueurs veulent améliorer — précision, vitesse ou survie — et met une nouvelle tentative à un tap. La sauvegarde mérite la même réflexion : décidez ce qui doit survivre à une session (meilleur score, niveau débloqué) et ce qui peut être remis à zéro sans risque.

Du build web à la Lens publiée en 5 étapes

1. Choisissez un workflow. Soit le PlayCanvas Engine dans un projet JavaScript classique (idéal avec un assistant de code IA), généré avec npm create playcanvas@latest my-lens -- --starter web-lens, soit le PlayCanvas Editor dans le navigateur, qui peut se connecter à des assistants IA via son Editor MCP Server. Le starter configure déjà la mise en page portrait, la zone de sécurité, les chemins relatifs, l’empaquetage et la Web Lens API.
2. Ajoutez les PlayCanvas Skills (facultatif). npx skills add playcanvas/skills apprend aux agents de code IA compatibles à mettre en place scènes, animations, HUD et effets dans PlayCanvas.
3. Construisez pour le téléphone. Gardez le HUD dans env(safe-area-inset-*), car Snapchat dessine son propre bouton de fermeture près du haut ; calez les mouvements sur le temps écoulé (beaucoup de téléphones tournent à 120 Hz) ; lancez l’audio après un geste de l’utilisateur et mettez en pause quand la Lens est masquée. Importez les classes du moteur par leur nom pour que le bundler supprime le code inutilisé, compressez les textures et ne générez pas de source maps.
4. Intégrez l’API. Envoyez les scores à la fin de la partie, chargez un Bitmoji si vous en voulez un et sauvegardez la progression avec Storage.
5. Empaquetez, envoyez et soumettez. Dans un projet starter, npm run package construit le zip et le vérifie selon les règles de Snap. Connectez-vous ensuite à My Lenses, créez une Web Lens, envoyez le zip et ajoutez un nom, une icône PNG de 512 × 512 et une vidéo d’aperçu de 5 secondes en 720 × 1280. Après validation, les joueurs trouvent le jeu par son nom ou par Snapcode.

Vous préférez ne pas coder du tout ? Easy Lens, le créateur de Lens par IA de Snap, peut désormais générer des jeux Web Lens propulsés par PlayCanvas à partir d’un simple prompt texte ; il est accessible aux abonnés Lens+ sur Easy Lens web.

Quels jeux conviennent le mieux à une Web Lens ?

Bon choix	Mauvais choix
Arcade, puzzle et jeux de score à un pouce	Jeux en paysage ou au clavier et à la souris
Sessions courtes avec relance instantanée	Longues sessions qui dépendent d’un serveur
Assets légers et compressés	Gros téléchargements d’assets à l’exécution
Compétition autour des classements	Multijoueur en ligne en temps réel

Commencez par un petit projet où l’on passe vite du lancement au jeu. Testez les contrôles tactiles, les bords de l’écran, l’audio, la pause et la relance sur un vrai téléphone (npx vite preview --host permet d’ouvrir le build dans le navigateur de votre téléphone), et notez chaque modification propre à la plateforme pour que les mises à jour suivantes ne les annulent pas.

Pour les détails officiels, consultez la documentation Web Lenses de Snap, les exigences de la plateforme et l’annonce de PlayCanvas.

FAQ

Qu’est-ce qu’une Snapchat Web Lens ?

Une Web Lens est une application web qui tourne dans Snapchat sous forme de Lens. Vous la créez avec des technologies web, compressez le build en zip et l’envoyez via My Lenses, sans Lens Studio.

Faut-il obligatoirement utiliser PlayCanvas ?

Non. N’importe quel framework web peut être utilisé, mais Snap recommande PlayCanvas et sa documentation utilise PlayCanvas avec Vite.

Quelle taille peut faire un jeu Web Lens ?

Le zip compressé peut atteindre 8 MB, et index.html à sa racine 1 MB. Ce sont des limites de la bêta : vérifiez les exigences actuelles avant d’envoyer votre jeu.

Une Web Lens peut-elle utiliser Internet ou des serveurs multijoueurs ?

Non. Une Web Lens ne peut pas accéder au réseau : tous les assets doivent être inclus et les backends multijoueurs en ligne ne sont pas envisageables. Les classements passent par la Web Lens API.

Comment sauvegarder la progression du joueur ?

Utilisez la fonction Storage de la Web Lens API. Le stockage classique du navigateur est vide à chaque ouverture de la Lens.

Peut-on gagner de l’argent avec un jeu Web Lens ?

Les créateurs éligibles peuvent rejoindre Lens+ Payouts, qui reverse une part des revenus pour les Lenses réservées aux abonnés Lens+ et Platinum, et Snap accepte des propositions de jeux à financer.