Snapchat Web Lenses позволяют взять обычную HTML5-игру, упаковать сборку в zip и опубликовать её внутри Snapchat как линзу (Lens). Игры — первый сценарий использования, функция находится в бете, и хотя подойдёт любой веб-фреймворк, Snap рекомендует PlayCanvas и использует его во всей документации. Открывать Lens Studio при этом не нужно вообще.
PlayCanvas объявил о поддержке 23.10.2026 — сразу вместе с четырьмя первыми играми, которые уже доступны. В этом руководстве разберём, что такое Web Lens, какие жёсткие ограничения должна соблюдать сборка, что даёт Web Lens API, и пройдём практический путь из пяти шагов: от веб-сборки до игры, которую игроки находят по названию или Snapcode.
Snapchat Web Lenses в двух словах
| Что это | Веб-приложение, упакованное в zip и опубликованное как линза Snapchat |
| Платформы | Snapchat для iOS и Android |
| Экран | Полноэкранный портретный режим 9:16 (альбомный не поддерживается) |
| Движок | Любой веб-фреймворк; Snap рекомендует PlayCanvas |
| Размер пакета | Zip до 8 MB, index.html до 1 MB в корне архива |
| Среда выполнения | Поддерживаются WebAssembly (в том числе многопоточный), Web Workers и eval() |
| Песочница | Нет доступа к сети, камере, микрофону и датчикам движения |
| Функции Snapchat | Таблицы лидеров, Bitmoji и хранилище через Web Lens API |
| Статус | Бета; детали могут меняться |
Почему это важно для разработчиков веб-игр
По данным отчёта Snap за второй квартал 2026 года, Snapchat ежемесячно пользуются 971 миллион человек, а игровые линзы Game Lenses, по словам Snap, охватывают более 175 миллионов человек в месяц. Web Lenses открывают эту аудиторию веб-разработчикам без страницы в магазине приложений и без установки: игрок запускает игру так же, как пробует любую другую линзу.
Первые цифры от разработчиков показывают, на что можно рассчитывать:
| Игра | Студия | Жанр | Что сообщил разработчик |
|---|---|---|---|
| Bloom | NOWWA | Уютная садовая головоломка | В среднем около 260 секунд за сессию, почти 30% возвращаются на следующий день |
| Ball Smasher | MetaM | Уличный баскетбольный шутер | Прототип за несколько часов, миллионы запусков за несколько дней |
| Snake Showdown | Elanra Studios | Битва змеек | 7 миллионов запусков от 1,8 миллиона игроков за первые четыре недели |
| Bitmoji Ski | Snap | Лыжная аркада | Сделана за один день, 6 миллионов показов в день |
Что касается монетизации, программа Lens+ Payouts позволяет подходящим авторам (от 18 лет, в поддерживаемых странах) сделать линзу эксклюзивной для подписчиков Lens+ и Platinum и получать долю дохода в зависимости от вовлечённости. Кроме того, Snap приглашает разработчиков присылать идеи оригинальных игр для Web Lenses, чтобы получить финансирование на разработку; в приоритете игры с социальной механикой вроде таблиц лидеров.
Правила, которым должна соответствовать сборка
Большинство отклонённых загрузок — следствие нескольких типичных ошибок упаковки, поэтому разберитесь с ними до того, как напишете хоть строчку игрового кода.
- Только портретный режим. Линзы работают на весь экран в формате 9:16. С самого начала проектируйте камеру, HUD и кнопки под одну руку.
- Zip не больше 8 MB. Ограничение касается сжатого загружаемого архива. Считайте это потолком, а не целью: чем меньше zip, тем быстрее загрузка, а время до начала игры важнее всего.
index.htmlв корне, не больше 1 MB. Упаковывайте содержимое папки сборки, а не саму папку. Пустьindex.htmlбудет тонкой точкой входа: не встраивайте в него весь бандл или большиеdata:URL.- Только относительные пути. Пишите
./a/game.js, а не/a/game.js— и в HTML, и в вызовахfetch()во время работы. В Vite задайтеbase: './'. - Прямые слеши внутри zip. В Windows команда PowerShell
Compress-Archiveзаписывает обратные слеши и ломает пути. Используйте пункт Проводника «Сжатая ZIP-папка»,zip -rили Node-скрипт с пакетомarchiver, а затем проверьте результат черезunzip -l.
Песочница: чего Web Lens не умеет
Web Lens полностью автономна. Она не может выходить в сеть, пользоваться камерой и микрофоном или читать датчики движения, а localStorage и IndexedDB очищаются при каждом запуске. На практике это значит:
- Все скрипты, модели, текстуры, шрифты и звуки должны лежать внутри zip.
- Никакой аналитики, удалённой конфигурации и онлайн-бэкенда для мультиплеера.
- Прогресс нужно сохранять через функцию Storage в Web Lens API.
Web Lens API: таблицы лидеров, Bitmoji и хранилище
API от Snap (npm-пакет @snap/web-lens-api) связывает вашу игру со Snapchat. Вызовите init() один раз при старте и проверяйте isSupported() перед использованием каждой функции. Вне Snapchat — на компьютере или локальном dev-сервере — API отвечает встроенной заглушкой с тестовыми данными, так что разрабатывать можно без телефона. Главное, чтобы игра оставалась играбельной, если какой-то функции нет.
| Функция | Что делает | Что важно знать |
|---|---|---|
| Leaderboards (таблицы лидеров) | Отправляет счёт и открывает фирменную панель рейтинга Snapchat | Счёт — только целое число; для забегов на время используйте сортировку по возрастанию; друзья могут получить уведомление, когда их рекорд побит |
| Bitmoji | Загружает Bitmoji игрока как 3D-модель GLB со скелетом или как 2D-изображение по плечи | URL истекает примерно через пять минут; Bitmoji приходят без анимаций; всегда добавляйте в сборку персонажа по умолчанию |
| Storage (хранилище) | Небольшое хранилище «ключ — значение», привязанное к аккаунту игрока | Каждое значение — JSON до 32 KiB, всего 100 KiB на линзу на игрока; сохраняйте при изменении прогресса и когда страница скрывается |
Хорошая таблица лидеров награждает то, что игрокам хочется улучшать, — точность, скорость или выживание — и делает новую попытку доступной в один тап. Сохранению прогресса стоит уделить столько же внимания: решите, что должно пережить сессию (лучший счёт, открытый уровень), а что можно спокойно сбрасывать.
От веб-сборки до опубликованной линзы за 5 шагов
- Выберите рабочий процесс. Либо PlayCanvas Engine в обычном JavaScript-проекте (идеально для работы с ИИ-ассистентом для кода), созданном командой
npm create playcanvas@latest my-lens -- --starter web-lens, либо браузерный PlayCanvas Editor, который подключается к ИИ-ассистентам через свой Editor MCP Server. Стартовый шаблон уже настраивает портретную раскладку, безопасную зону, относительные пути, упаковку и Web Lens API. - Добавьте PlayCanvas Skills (по желанию). Команда
npx skills add playcanvas/skillsучит совместимых ИИ-агентов для кода настраивать в PlayCanvas сцены, анимацию, HUD и эффекты. - Собирайте под телефон. Держите HUD внутри
env(safe-area-inset-*), потому что Snapchat рисует свою кнопку закрытия у верхнего края; масштабируйте движение по прошедшему времени (многие телефоны работают на 120 Hz); запускайте звук только после жеста пользователя и ставьте игру на паузу, когда линза скрыта. Импортируйте классы движка по имени, чтобы бандлер мог выбросить неиспользуемый код, сжимайте текстуры и не включайте source maps. - Интегрируйте API. Отправляйте счёт в конце игры, загружайте Bitmoji, если он нужен, и сохраняйте прогресс через Storage.
- Упакуйте, загрузите и отправьте на проверку. В проекте на стартовом шаблоне
npm run packageсобирает zip и проверяет его по правилам Snap. Затем войдите в My Lenses, создайте Web Lens, загрузите zip и добавьте название, иконку PNG 512 × 512 и 5-секундное превью-видео 720 × 1280. После проверки игроки смогут найти игру по названию или Snapcode.
Не хотите писать код совсем? Easy Lens, ИИ-конструктор линз от Snap, теперь умеет создавать игры Web Lens на PlayCanvas по текстовому запросу; он доступен подписчикам Lens+ в веб-версии Easy Lens.
Какие игры лучше всего подходят для Web Lens?
| Подходит | Не подходит |
|---|---|
| Аркады, головоломки и игры на рекорд под один палец | Игры в альбомной ориентации или под клавиатуру и мышь |
| Короткие сессии с мгновенным перезапуском | Длинные сессии, зависящие от сервера |
| Небольшие сжатые ассеты | Загрузка тяжёлых ассетов во время игры |
| Соревнование через таблицы лидеров | Онлайн-мультиплеер в реальном времени |
Начните с небольшого проекта, где путь от запуска до игры короткий. Проверьте сенсорное управление, края экрана, звук, паузу и перезапуск на реальном телефоне (npx vite preview --host позволяет открыть сборку в браузере телефона) и записывайте каждое изменение под платформу, чтобы будущие обновления их не затёрли.
Официальные подробности — в документации Web Lenses от Snap, в требованиях платформы и в анонсе PlayCanvas.
Частые вопросы
Что такое Snapchat Web Lens?
Web Lens — это веб-приложение, которое работает внутри Snapchat как линза. Вы делаете его на веб-технологиях, упаковываете сборку в zip и загружаете через My Lenses без Lens Studio.
Обязательно ли использовать PlayCanvas?
Нет. Подойдёт любой веб-фреймворк, но Snap рекомендует PlayCanvas, и в его документации используется PlayCanvas вместе с Vite.
Какого размера может быть игра Web Lens?
Сжатый zip — до 8 MB, а index.html в его корне — до 1 MB. Это ограничения беты, поэтому перед загрузкой проверьте актуальные требования.
Может ли Web Lens пользоваться интернетом или мультиплеерными серверами?
Нет. Web Lens не может выходить в сеть, поэтому все ассеты должны быть упакованы в сборку, а онлайн-бэкенды для мультиплеера не подходят. Таблицы лидеров работают через Web Lens API.
Как сохранять прогресс игрока?
Используйте функцию Storage в Web Lens API. Обычное хранилище браузера при каждом открытии линзы пустое.
Можно ли заработать на игре Web Lens?
Подходящие авторы могут участвовать в Lens+ Payouts — программе, которая делится доходом с линз, эксклюзивных для подписчиков Lens+ и Platinum. Кроме того, Snap принимает заявки на финансирование игр.
