Las Snapchat Web Lenses (lentes web de Snapchat) te permiten coger un juego HTML5 normal, comprimir la build en un zip y publicarlo dentro de Snapchat como una Lens. Los juegos son el primer caso de uso, la función está en beta y, aunque puedes usar cualquier framework web, Snap recomienda PlayCanvas y lo utiliza en toda su documentación. En ningún momento tienes que abrir Lens Studio.
PlayCanvas anunció la compatibilidad el 23 de octubre de 2026, junto con cuatro de los primeros juegos ya publicados. Esta guía explica qué es una Web Lens, los límites estrictos que debe cumplir tu build, lo que te ofrece la Web Lens API y un camino práctico en cinco pasos desde una build web hasta un juego que los jugadores pueden encontrar por su nombre o por Snapcode.
Snapchat Web Lenses de un vistazo
| Qué es | Una app web empaquetada en un zip y publicada como Lens de Snapchat |
| Plataformas | Snapchat para iOS y Android |
| Pantalla | Pantalla completa en vertical, 9:16 (no admite horizontal) |
| Motor | Cualquier framework web; Snap recomienda PlayCanvas |
| Tamaño del paquete | Zip de hasta 8 MB, index.html de hasta 1 MB en la raíz del zip |
| Entorno de ejecución | Admite WebAssembly (también multihilo), Web Workers y eval() |
| Sandbox | Sin red, cámara, micrófono ni sensores de movimiento |
| Funciones de Snapchat | Clasificaciones, Bitmoji y almacenamiento a través de la Web Lens API |
| Estado | Beta; los detalles pueden cambiar |
Por qué debería importarles a los desarrolladores de juegos web
Snapchat lo usan 971 millones de personas cada mes, según los resultados del segundo trimestre de 2026 de Snap, y la compañía afirma que sus Game Lenses atraen a más de 175 millones de personas al mes. Las Web Lenses abren esa audiencia a los desarrolladores web sin ficha en una tienda de apps y sin instalación: los jugadores abren un juego igual que prueban cualquier Lens.
Las primeras cifras compartidas por los desarrolladores pioneros dan una idea de lo que se puede conseguir:
| Juego | Estudio | Género | Lo que contó el desarrollador |
|---|---|---|---|
| Bloom | NOWWA | Puzle relajante de jardín | Unos 260 segundos por sesión de media, casi un 30% vuelve al día siguiente |
| Ball Smasher | MetaM | Tiros de baloncesto callejero | Prototipo en horas, millones de partidas en días |
| Snake Showdown | Elanra Studios | Batalla de serpientes | 7 millones de partidas de 1,8 millones de jugadores en las primeras cuatro semanas |
| Bitmoji Ski | Snap | Arcade de esquí | Creado en un día, 6 millones de impresiones al día |
Para monetizar, el programa Lens+ Payouts de Snap permite a los creadores que cumplan los requisitos (mayores de 18 años y en países elegibles) marcar una Lens como exclusiva para suscriptores de Lens+ y Platinum y recibir una parte de los ingresos según la interacción. Snap también invita a los desarrolladores a presentar propuestas de juegos originales para Web Lenses y optar a financiación para desarrollarlos, con prioridad para juegos construidos en torno a un componente social como las clasificaciones.
Las reglas que tu build tiene que cumplir
La mayoría de las subidas rechazadas se deben a unos pocos errores de empaquetado, así que apréndete esto antes de escribir una sola línea del juego.
- Solo vertical. Las Lenses se ejecutan a pantalla completa en 9:16. Diseña la cámara, el HUD y los botones para una sola mano desde el principio.
- Zip de 8 MB o menos. El límite se aplica a la subida comprimida. Tómalo como un techo, no como un objetivo: un zip más pequeño carga antes, y el tiempo hasta empezar a jugar es lo que más importa.
index.htmlen la raíz, de 1 MB o menos. Comprime el contenido de la carpeta de la build, no la carpeta en sí. Manténindex.htmlcomo un punto de entrada ligero y no metas dentro todo el bundle ni URLsdata:grandes.- Rutas relativas en todas partes. Usa
./a/game.js, nunca/a/game.js, tanto en el HTML como en las llamadasfetch()en tiempo de ejecución. Con Vite, configurabase: './'. - Barras normales en el zip. En Windows,
Compress-Archivede PowerShell escribe barras invertidas y rompe las rutas. Usa “Comprimir en archivo ZIP” del Explorador,zip -ro un script de Node con el paquetearchiver, y compruébalo después conunzip -l.
El sandbox: lo que una Web Lens no puede hacer
Una Web Lens es autónoma. No puede acceder a la red, usar la cámara ni el micrófono ni leer los sensores de movimiento, y localStorage e IndexedDB empiezan vacíos en cada arranque. En la práctica, eso significa que:
- Cada script, modelo, textura, fuente y sonido debe ir dentro del zip.
- No hay llamadas de analítica, configuración remota ni backend para multijugador online.
- El progreso debe guardarse con la función Storage de la Web Lens API.
La Web Lens API: clasificaciones, Bitmoji y almacenamiento
La API de Snap (paquete npm @snap/web-lens-api) conecta tu juego con Snapchat. Llamas a init() una vez al arrancar y compruebas isSupported() antes de usar cada función. Fuera de Snapchat, en tu escritorio o en tu servidor de desarrollo local, la API responde con un stub integrado con datos de ejemplo, así que puedes desarrollar sin móvil; eso sí, mantén el juego jugable si falta alguna función.
| Función | Qué hace | Lo que conviene saber |
|---|---|---|
| Leaderboards (clasificaciones) | Envía una puntuación y abre el panel de clasificación propio de Snapchat | Las puntuaciones deben ser enteros; usa orden ascendente para contrarrelojes; los amigos pueden recibir un aviso cuando superas su puntuación |
| Bitmoji | Carga el Bitmoji del jugador como un GLB 3D con rig o como imagen 2D de cabeza y hombros | La URL caduca a los cinco minutos aproximadamente; los Bitmoji llegan sin animaciones; incluye siempre un personaje por defecto |
| Storage (almacenamiento) | Un pequeño almacén clave-valor vinculado a la cuenta del jugador | Cada valor es JSON de hasta 32 KiB, 100 KiB en total por Lens y jugador; guarda cuando cambie el progreso y cuando la página quede oculta |
Una buena clasificación premia algo que los jugadores quieren mejorar (precisión, velocidad o supervivencia) y deja el siguiente intento a un toque de distancia. El progreso guardado merece la misma reflexión: decide qué tiene que sobrevivir a una sesión (mejor puntuación, nivel desbloqueado) y qué se puede reiniciar sin problema.
De la build web a la Lens publicada en 5 pasos
- Elige un flujo de trabajo. O bien PlayCanvas Engine como un proyecto JavaScript normal (ideal con un asistente de programación con IA), creado con
npm create playcanvas@latest my-lens -- --starter web-lens, o bien el PlayCanvas Editor en el navegador, que puede conectarse a asistentes de IA mediante su Editor MCP Server. La plantilla inicial ya deja preparados el diseño vertical, el área segura, las rutas relativas, el empaquetado y la Web Lens API. - Añade las PlayCanvas Skills (opcional).
npx skills add playcanvas/skillsenseña a los agentes de programación con IA compatibles a montar escenas, animaciones, HUD y efectos en PlayCanvas. - Desarrolla pensando en el móvil. Mantén el HUD dentro de
env(safe-area-inset-*), porque Snapchat dibuja su propio botón de cerrar cerca de la parte superior; escala el movimiento según el tiempo transcurrido (muchos móviles van a 120 Hz); inicia el audio a partir de un gesto del usuario y pausa cuando la Lens quede oculta. Importa las clases del motor por nombre para que el bundler pueda descartar el código que no se usa, comprime las texturas y prescinde de los source maps. - Integra la API. Envía las puntuaciones al terminar la partida, carga un Bitmoji si lo quieres y guarda el progreso con Storage.
- Empaqueta, sube y envía. En un proyecto creado con la plantilla,
npm run packagegenera el zip y lo comprueba según las reglas de Snap. Después inicia sesión en My Lenses, crea una Web Lens, sube el zip y añade un nombre, un icono PNG de 512 × 512 y un vídeo de vista previa de 5 segundos a 720 × 1280. Tras la revisión, los jugadores podrán encontrar el juego por su nombre o por Snapcode.
¿Prefieres no programar nada? Easy Lens, el creador de Lenses con IA de Snap, ya puede crear juegos Web Lens basados en PlayCanvas a partir de una descripción de texto; está disponible para suscriptores de Lens+ en Easy Lens web.
¿Qué juegos encajan mejor en una Web Lens?
| Encajan bien | Encajan mal |
|---|---|
| Arcade, puzles y juegos de batir puntuaciones con un solo pulgar | Juegos en horizontal o con teclado y ratón |
| Sesiones cortas con reinicio instantáneo | Sesiones largas que dependen de un servidor |
| Recursos pequeños y comprimidos | Descargas grandes de recursos en tiempo de ejecución |
| Competición basada en clasificaciones | Multijugador online en tiempo real |
Empieza con un proyecto pequeño en el que se tarde poco desde que se abre hasta que se juega. Prueba en un móvil real los controles táctiles, los bordes de la pantalla, el audio, la pausa y el reinicio (npx vite preview --host te permite abrir la build en el navegador del móvil), y apunta cada cambio específico de la plataforma para que las actualizaciones posteriores no los deshagan.
Para los detalles oficiales, consulta la documentación de Web Lenses de Snap, los requisitos de la plataforma y el anuncio de PlayCanvas.
Preguntas frecuentes
¿Qué es una Snapchat Web Lens?
Una Web Lens es una app web que se ejecuta dentro de Snapchat como una Lens. La creas con tecnologías web, comprimes la build en un zip y la subes a través de My Lenses, sin Lens Studio.
¿Tengo que usar PlayCanvas?
No. Puedes usar cualquier framework web, pero Snap recomienda PlayCanvas y su documentación usa PlayCanvas con Vite.
¿Cuánto puede ocupar un juego Web Lens?
El zip comprimido puede ocupar hasta 8 MB, y el index.html de su raíz, hasta 1 MB. Son límites de la beta, así que revisa los requisitos actuales antes de subirlo.
¿Puede una Web Lens usar internet o servidores multijugador?
No. Una Web Lens no puede acceder a la red, así que todos los recursos deben ir incluidos y los backends de multijugador online no son una opción. Las clasificaciones llegan a través de la Web Lens API.
¿Cómo guardo el progreso del jugador?
Con la función Storage de la Web Lens API. El almacenamiento normal del navegador empieza vacío cada vez que se abre la Lens.
¿Puedo ganar dinero con un juego Web Lens?
Los creadores que cumplan los requisitos pueden unirse a Lens+ Payouts, que reparte ingresos por las Lenses marcadas como exclusivas para suscriptores de Lens+ y Platinum, y Snap acepta propuestas de juegos para financiarlos.
