Хакатон Сбер · Создаем эмоции

Треки и потребности

Команда выбирает один трек и заявляет его при регистрации. Менять трек после начала нельзя: критерии приёмки у треков разные. Выберите свой — внутри потребность, что уже умеет приложение, направления для идей и границы.

Потребность

Разбавить функциональность приложения простыми интерактивными элементами.

Главное свойство: прикол не должен блокировать прохождение сценариев. Это слой поверх, а не ещё один экран на пути пользователя.

Необязательно, но большой плюс — возможность менять такой интерактив через CDN, чтобы поставлять новый контент без релиза приложения.

Хороший пример: сезонные осадки

Анимация, которую пользователь вызывает сам — например тряской. Она не мешает в этот же момент уйти в платежи или другой сервис, а сам набор осадков лежит на CDN и меняется без релиза.

Тряска запускает эффект поверх экрана

Менее удачный пример: прокрутка аватара

Работает, но заметно хуже: эффект мало кто обнаружит, и наполнение не меняется с бэкенда — каждая правка требует релиза.

Аватар прокручивается при свайпе

Не хватает макетов

Если для реализации нужны экраны, которых нет в макетах, — напишите @MooonLoone в телеграме.

Референс

Игра, которая нравится бизнесу как ориентир по духу.

Направления для идей

НаправлениеИдея
Другие сенсоры и жестыПоворот, наклон, резкое приближение к лицу, долгое нажатие, многократный тап, «потрясти не телефон, а элемент на экране»
Реакция на событиеПополнение, выполненное дело, достижение, первый вход за день, «красивое» число в балансе или дате
Сезонность и календарьНабор эффектов и расписание задаются контентом, без релиза
ПерсонализацияАватар, выбранная тема, иконка приложения
Звук и тактильностьГотовые звуки и вибрация в приложении уже есть, нужен только контент
Скрытые местаСекретный экран по последовательности действий, «комната» за аватаром

Можно

  • Оверлей поверх любого некритичного экрана
  • Контент эффектов, который подгружается и кэшируется
  • Сенсоры устройства
  • Поведение, управляемое настройками и весами

Нельзя

  • Перекрывать экраны оплаты, перевода, реквизитов, лимитов
  • Блокировать ввод дольше, чем длится эффект
  • Замедлять запуск приложения и главный экран

Потребность

В приложении уже есть действующие игры, и детям они нравятся. Потребность в играх при этом никуда не делась. Игра должна не только развлекать, но и учить. Три приоритетных домена:

Финансовая грамотность

Цена и ценность, копить или потратить, планирование, «хватит ли денег», понятия инвестиции, вклад, кредит.

Мягкие навыки

Умение распознать эмоцию, навык дружбы, урегулирование конфликтов, критическое мышление, тайм-менеджмент.

Безопасность

Мошенничество и социальная инженерия, «не говори код», подозрительная ссылка, незнакомец в переписке, давление срочностью, скам, дропперство, бытовая безопасность для детей 6–7 лет.

Формат

Игра — HTML5-страница, которая открывается внутри приложения. Технические требования — на странице Ограничения.

Нативная игра может быть оценена в треке «Приколы». Но учитывайте: стоимость интеграции такого функционала значительно выше, а значит и спрос на защите будет жёстче.

Референсы

Это то, что уже есть. Можно сделать похожее, можно совсем другое. Откройте на телефоне — это ровно тот жанр и объём, который мы ждём.

Ещё примеры игр

Визуальные референсы

Что уже умеет приложение

Что естьКак работает
Экран игры в WebView
эталон трека
Загрузка игры, канал сообщений между страницей и приложением, отметка прохождения в прогрессе курса, шаринг результата, обработка ошибок
Канал «страница → приложение»Пять событий: закрыть, завершить, вибрация, поделиться, «игра пройдена». Контракт — в Ограничениях
Функции раздела «Контент»Курс, видео, тест с результатом, сторис, игра, партнёрский блок, диплом за курс, лайки, рекомендации, прогресс курса

Бизнес-требования

  1. Сформулируйте задачу обучения одной фразой в презентации: «после игры ребёнок умеет / знает / различает…».
  2. Механика — способ применить знание, а не обёртка вокруг викторины. Если игру можно пройти, не поняв тему, — это тест с картинками.
  3. Обратная связь на ошибку: ребёнок понимает, почему неправильно, и пробует снова. Мы не ругаем, а показываем, почему ответ неверный.
  4. Сессия 3–5 минут и возможность переиграть.
  5. Как понять, что научились — какое наблюдаемое действие это показывает.
  6. Потеря прогресса не должна расстраивать. Если уровень не сохранится, это не вызовет фрустрации: один вход в игру ведёт к результату, который можно считать финальным для этого входа.
  7. Звук не запускается сам и имеет переключатель.

Бизнес-ограничения — общие для всего хакатона, они на странице Ограничения.

Технические ограничения

Прототип вы делаете на чём хотите — стек свободный. Ограничения ниже описывают не ваш прототип, а внедрение идеи в СберKids: по ним жюри оценивает, поедет ли это в приложение и какой ценой. Исключение — трек B: игра попадает в приложение как есть, поэтому к ней ограничения применяются сразу.

01Бизнес-ограничения

Общие для обоих треков. По ним же оценивается критерий «Соответствие бизнес-требованиям и ограничениям».

Механики

  1. Не использовать механики и образы лотереи, рулеток, ставок.
  2. Любая гача-механика должна иметь математическую модель, прилагаемую к самой игре.
  3. Нет авторизации на данном этапе.
  4. Нет материального вознаграждения. Эмоциональное или цифровое, не требующее бюджета на закупку, — можно.
  5. Социальные и многопользовательские функции ограничены Bluetooth.

Контент

  1. Никаких действующих ссылок и QR-кодов на внешние ресурсы — строго.
  2. Нельзя упоминать бренды вне экосистемы Сбера и конкурентов, использовать их узнаваемые образы.
  3. Нельзя использовать объекты поп-культуры, являющиеся интеллектуальной собственностью: игры, персонажей, известных личностей, запатентованные товарные знаки и слоганы.
  4. Нельзя использовать образы реального оружия — пистолеты, танки, ножи. Допускаются мечи, луки и предметы для бросания, но не направленные на реалистичные живые объекты: людей и животных.
  5. Руководствуйтесь Федеральным законом от 29.12.2010 № 436-ФЗ «О защите детей от информации, причиняющей вред их здоровью и развитию». Возрастная категория — 0+ или 6+.

02Работа без Backend

Разрешено

  • Новый ключ в CMS. Приложение умеет запрашивать произвольный JSON по именованному ключу. Новый ключ — настройка контента, а не разработка бэкенда.
  • Статические файлы по https: видео, анимации, картинки, JSON.
  • Ресурсы внутри сборки: звуки, изображения, анимации.
  • Локальное хранилище на устройстве.
  • Локальное соединение между устройствами по Bluetooth. Сервер в этом не участвует.
  • Существующие возможности приложения без изменения контрактов.

Запрещено

  • Новый эндпоинт или новый контракт
  • Изменение формата существующих ответов
  • Своё серверное хранилище, база, очередь
  • Серверный матчмейкинг, рейтинги, лидерборды
  • Пуш по событию другого пользователя
  • Сторонний бэкенд или облачный сервис как часть механики

Про локальные соединения

Bluetooth работает без сервера, но требует новых разрешений у пользователя и отдельного согласования безопасности. Это не запрет: это цена внедрения, и она учитывается в критерии «Реализуемость». Если механика без этого не живёт — берите и скажите об этом на защите.

Следствия, которые надо принять на старте

  • Честного онлайн-мультиплеера не будет. Совместность — только локальная, между устройствами рядом, по Bluetooth.
  • Рейтингов «среди всех» не будет. Сравнение — с собой или с эталоном из контента.
  • Состояние живёт на устройстве: переустановил приложение — потерял, если механика не опирается на уже существующие серверные сущности.

03Игры трек B

Что можно загружать наружу, а что нельзя

Можно

  • Ресурсы: картинки, звуки, анимации, уровни как данные
  • Класть их рядом с игрой и подключать относительными путями
  • Загружать их с нашего CDN — так наполнение меняется без релиза

Нельзя

  • Любые библиотеки и фреймворки — в коде, стилях и разметке, и с CDN, и свои копии
  • Сторонние сервисы и API
  • Аналитика, пиксели, трекеры
  • Шрифты с чужих хостов
  • Ссылки наружу, iframe, новые окна

Формат игры

  • Ссылки между файлами — относительные. Мы положим игру на свой сервер, и она должна там заработать как есть, без правок путей.
  • Выкладывать игру в продакшен будем мы — размещать её где-то специально для нас не нужно.
  • Но показать работающую игру на защите нужно в любом случае. Если вы захостите её сами — это плюс: жюри откроет её у себя на телефоне и поиграет вживую.
  • Состояние игры — в хранилище самой страницы: localStorage, sessionStorage, IndexedDB. Оно живёт, пока открыт экран игры, и очищается при выходе из WebView — рассчитывайте на одну сессию, а не на долгую память.
  • Вибрация и шаринг — через канал сообщений ниже, а не через браузерные API.

Только чистый HTML, CSS и JavaScript

Никаких библиотек и фреймворков — вообще. Это касается всех трёх слоёв: ни React, Vue, Phaser, Three.js, jQuery и игровых движков в коде, ни Tailwind, Bootstrap и прочих CSS-фреймворков в стилях, ни шаблонизаторов в разметке. Ни со стороннего CDN, ни своей копией внутри проекта.

Весь код игры вы пишете сами, графику рисуете через Canvas, WebGL или DOM. Сборщик для разработки использовать можно — на сервер уезжает результат, и в нём не должно быть чужого кода.

Игра живёт в изоляции

Это главное требование. Мы кладём игру на свой сервер, и она обязана работать там сама по себе. Ни одного обращения во внешний мир: ни к чужим API, ни к CDN, ни к шрифтам, ни к аналитике. Любая такая зависимость в продакшене не ответит — и игра сломается на ровном месте.

Кэша на уровне приложения нет

Сейчас WebView открывает игру без кэша вообще — ни на диске, ни в памяти. Каждый запуск скачивает все файлы заново, по мобильной сети. Поэтому вес критичен, и считается он по всему набору файлов, а не по одному HTML. Закладывайтесь на это сразу.

Хранить состояние внутри самой страницы это не мешает: web storage работает, просто очищается на выходе из WebView. Речь именно про кэш приложения: нативная загрузка картинок и анимаций для приколов кэшируется своим загрузчиком, игры это не касается.

Если механике нужен именно кэш уровня приложения — это не запрет, но скажите об этом отдельно и объясните, зачем. Включение кэша согласуется с безопасностью, что скажется на цене внедрения.

Проверка в WebView

Проверить игру на телефоне — обязательно

Игра запускается не в браузере, а внутри приложения: Android WebView и iOS WKWebView. Браузер на компьютере умеет больше, поэтому «работает в Chrome на ноутбуке» ничего не доказывает — часть кода на телефоне просто не запустится. Проверьте игру в WebView на обеих платформах до защиты.

Пример: Web Bluetooth в браузере на компьютере ответит, а в WebView его нет — ни на Android, ни на iOS.

Контракт канала «страница → приложение»

Один контракт на обе платформы. Страница отправляет обычный window.postMessage, приложение само подписывается и разбирает сообщение.

window.postMessage({
  type: "COMPLETED_EVENT"        // один из пяти типов ниже
}, "*");
ТипЧто делает приложение
CLOSE_EVENTЗакрывает экран игры
FINISH_EVENTИгра завершена, не обязательно успешно
COMPLETED_EVENTИгра пройдена: засчитывается прогресс курса. Отправлять один раз
VIBRATION_EVENTТактильный отклик средствами платформы
SHARING_EVENTПоднимает системное «поделиться» с текстом и картинкой

Можно ли добавить своё событие

Небольшие расширения набора допустимы, но не рекомендуются. Каждое новое событие — доработка на обеих платформах, а значит срок и стоимость. Если новое событие и есть суть вашей механики — берите и объясните это на защите. Если оно нужно ради удобства или мелкой детали — уложитесь в существующие пять.

Чего канал не умеет

Нет: запроса данных из приложения в игру, авторизации, платежей, работы с картами, открытия произвольных ссылок, доступа к файлам устройства. Канал односторонний: игра сообщает о событиях, приложение решает, что с ними делать.

04Стек и библиотеки

Прототип — на чём угодно. Но внедрение не должно тянуть за собой новые зависимости: каждая проходит проверку открытого кода и согласование безопасности, а это недели. Идея, которая ложится на текущий стек, выигрывает у идеи, требующей нового движка.

Два нативных приложения

СберKids — это два отдельных нативных приложения, Android и iOS. Единственный способ написать код один раз — игра в WebView.

Базовый стек

AndroidiOS
Минимальная версия ОСAndroid 8 (API 26)iOS 15
ЯзыкKotlin 2.2.21Swift 6, Strict Concurrency
ИнструментыAndroid Studio, Gradle, JDK 21Xcode 26.2
ИнтерфейсJetpack ComposeSwiftUI, местами UIKit
АнимацияLottieLottie
МедиаMedia3 / ExoPlayerAVFoundation
ВебWebViewWKWebView
Изображения и их кэшCoilСобственный загрузчик с кэшем, сторонней библиотеки нет
Низкоуровневая графикаOpenGL ESMetal

Список неполный: это то, что чаще всего нужно для механик по нашим трекам. Сомневаетесь, реализуемо ли что-то, — напишите @MooonLoone в телеграме или спросите на консультации 17 октября.

iOS: только фреймворки Apple

Внешние библиотеки не от Apple запрещены. Из двух способов собрать интерфейс приоритет у SwiftUI — UIKit только там, где на SwiftUI это не делается. Используется Strict Concurrency.

Если без новой технологии идея не живёт

Так бывает, и это не отказ. Скажите прямо на защите: что именно нужно, чем нельзя заменить, какой выигрыш. Жюри оценит это как стоимость внедрения.

05Безопасность

СберKids — банковское приложение с детской аудиторией. Эти пункты не компенсируются качеством идеи.

Данные

  • За пределы устройства не уходят никакие персональные данные.
  • Никаких токенов, сессий и реквизитов внутрь веб-страницы.

Платформа

  • Новые разрешения у пользователя — только если без них механика не существует. Каждое разрешение требует согласования и снижает оценку реализуемости.
  • Никаких сторонних SDK, трекеров и чужой аналитики.
  • Пустой или битый конфиг не должен ломать приложение.

Детская аудитория

  • Ничего, что подталкивает тратить деньги.
  • Никаких тёмных паттернов: ложной срочности, обратного отсчёта, «ещё одна попытка за…».
  • Тон — доброжелательный, без запугивания. Тема мошенничества подаётся как навык, а не как угроза.

06Платформа и устройства

ОграничениеДетали
УстройстваТелефоны, не планшеты. Android 8 и выше, iPhone на iOS 15 и выше
ОриентацияОсновной режим портретный, но горизонтальные сценарии тоже поддерживаются
ЯзыкРусский
Две платформыМеханика должна быть реализуема на обеих. Трюк, возможный только на одной, — минус к реализуемости
ДизайнМежду платформами не различается: один макет на Android и iOS
Размер экранаОриентируйтесь на логическую ширину 360–430 точек и соотношение около 9:19,5 — это телефоны, на которых играет большинство

07Бюджеты

Это не жёсткие требования, а ориентиры, к которым стоит стремиться. Выход за цифру не снимает работу с оценки — но чем сильнее промах, тем дороже внедрение и тем ниже балл за реализуемость.

ПоказательБюджетПочему
Запуск приложения и главный экранбез замедленияЗамеряется автоматически, регресс видно сразу
Плавность анимации60 кадров в секундуДети замечают рывки раньше взрослых
Вес файлов для приколов≤ 6 МБКачается по мобильной сети и кэшируется
Вес игры целиком≤ 5 МБКэша на уровне приложения нет: качается заново при каждом запуске. Считается весь набор файлов — код, графика, звук
Первый играбельный экран≤ 3 с на мобильной сетиДальше ребёнок уходит
Прирост размера приложения≤ 3 МБРесурсы внутри сборки

Потребление ресурсов устройства

У многих детей телефоны слабые. Это особенно важно для приколов: они живут поверх обычных сценариев, то есть работают тогда, когда ребёнок пришёл в приложение за другим. Эффект, который греет телефон, съедает батарею или занимает много памяти, формально ни одного требования не нарушает — но на защите про это спросят, если в решении видно что-то тяжёлое: постоянную анимацию в фоне, видеослой, сотни частиц на каждом кадре, картинки в разрешении больше экрана.

Что помогает: ограничить время жизни эффекта, остановить анимацию и таймеры, когда эффект уже не видно, не держать цикл отрисовки после завершения, обойтись сдвигом и прозрачностью вместо перерисовки, готовить графику под реальный размер экрана.

Критерии оценки

Пять критериев, 100 баллов. Каждый оценивается по шкале 0–5. Жюри оценивает независимо, итог команды — среднее по жюри.

Что мы ждём на выходе

Рабочий прототип, а не готовую фичу. Демо должно крутиться на реальном устройстве и показывать механику целиком.

КритерийВесЧто смотрим0 / 3 / 5
Виральность 30 Хочется ли ребёнку показать это другому, переиграть, рассказать словами. Реакция человека, который видит решение впервые 0 — ноль реакции · 3 — «прикольно» · 5 — зовут посмотреть остальных
Соответствие бизнес-требованиям и ограничениям 25 Насколько решение ложится в бриф: требования трека и бизнес-ограничения. Для игр — ещё и доказуемая обучающая ценность 0 — бриф проигнорирован · 3 — попадает частично · 5 — точно в бриф
Реализуемость 25 Ляжет ли это в приложение: без Backend, на текущем стеке, на обеих платформах, без лишних разрешений. Опирается ли механика на то, что в приложении уже есть. Понятен ли объём работ 0 — невозможно внутри продукта · 3 — возможно, но дорого · 5 — ясный путь внедрения
Управляемость контентом 10 Что можно изменить без релиза: контент, частоту, расписание, тексты 0 — всё зашито в код · 3 — тексты и флаги · 5 — контент-менеджер управляет сам
Подача 10 Понятно за 5 минут: проблема, решение, как работает, что дальше 0 — непонятно · 3 — понятно после вопросов · 5 — понятно сразу
Как считается балл

Оценка 0–5 — это не баллы, а доля от веса критерия. Поэтому максимум по критерию равен его весу, а сумма максимумов даёт ровно 100.

баллы за критерий = оценка ÷ 5 × вес
  балл от одного члена жюри = сумма по пяти критериям   // максимум 100
  итог команды = среднее по всем членам жюри

Пример расчёта

КритерийВесОценкаБаллы
Виральность3055 ÷ 5 × 30 = 30
Соответствие бизнес-требованиям2533 ÷ 5 × 25 = 15
Реализуемость2522 ÷ 5 × 25 = 10
Управляемость контентом1044 ÷ 5 × 10 = 8
Подача1044 ÷ 5 × 10 = 8
Итого100—71

Так считает каждый член жюри по отдельности. Если второй поставит 65, а третий 74, итог команды — 70.

Из-за весов одна и та же разница в оценке стоит по-разному: упасть с 5 на 3 по виральности — это минус 12 баллов, по подаче — минус 4.

Критерии приёмки

01Обязательно

Нет любого из трёх — работа не оценивается.

02Что снижает баллы

Приёмку не блокирует, но жюри это видит и учитывает.

Общее

Трек A · Приколы

Трек B · Игры

03Что повышает баллы

Плюс к оценке

Опора на принципы педагогики и детской психологии: если вы можете объяснить, почему механика устроена так, а не иначе, и на что вы опирались, — это слышно на защите и идёт в плюс.

Формат сдачи

Три вещи: публичный репозиторий с кодом, презентация, показ прототипа на защите.

Что сдаёмТребование
КодПубличный репозиторий. Ссылку команда добавляет в общую таблицу в последний день хакатона, 18.10, до сдачи
ПрезентацияЧто за решение, как работает, что переиспользуется из приложения, что нужно построить
Показ на защитеПрототип на реальном устройстве. Демо, а не слайды

Как сдать код

В последний день хакатона, 18 октября, до сдачи каждая команда добавляет ссылку на свой репозиторий в строку своей команды в общую таблицу.

Репозиторий должен быть публичным и оставаться доступным организаторам во время защиты. Закрытый репозиторий или ссылка, которая не открывается, равны отсутствию кода.

Регламент

  • Старт — 16 октября
  • Дедлайн загрузки кода — 18 октября, 14:00

Материалы

МатериалГде
Макеты основных экрановFigma
Видео основных сценариевПапка с видео-демо на СберДиске
Референс по приколам трек A Blackbox — play without touch
Игры в приложении трек B Один дома
Созвездие светлячков
Змейка
Ещё примеры игр трек B Game Lab
Визуальные референсы Доска со стилем и настроением в Pinterest

Частые вопросы

ВопросОтвет
На чём делать прототип?На чём угодно. Требование одно: демо крутится на устройстве и показывает механику целиком
Дадут ли код приложения?Нет. Есть макеты, видео сценариев и этот документ
Где выкладывать решение?В любом публичном репозитории. Ссылку 18.10 нужно добавить в общую таблицу — подробности в разделе «Сдача»
В каком виде сдавать игру?Набором статических файлов с относительными путями. Один файл делать не обязательно
А нативную игру можно?В треке «Игры» — нет. Нативную механику можно принести в трек «Приколы», но интегрировать её значительно дороже, и спрашивать на защите будут жёстче
Можно взять Phaser, React, Tailwind или другой фреймворк?Нет. Только чистый HTML, CSS и JavaScript — ни с CDN, ни своей копией в проекте. Это касается и кода, и стилей, и разметки
Где хостить игру?В продакшен выкладываем мы. Но показать работающую игру на защите нужно, и если вы захостите её сами — жюри откроет её на своём телефоне, это плюс
Можно подгружать картинки и звуки?Да, ресурсы — можно и нужно: так наполнение меняется без релиза. Нельзя сторонние сервисы, аналитику, библиотеки и шрифты с чужих CDN
Хватит ли проверки в браузере на компьютере?Нет, запустите игру в WebView на телефоне — это обязательный шаг перед сдачей. Часть веб-API в WebView недоступна: например, Web Bluetooth не работает ни на Android, ни на iOS
Игра на Unity WebGLНет: это движок, и в вес она тоже не укладывается
Нужно своё событие в канале «страница → приложение»Можно, если это суть механики. Ради удобства — лучше уложиться в существующие пять
Горизонтальная игра — можно?Да. Основной режим портретный, но горизонтальные сценарии мы поддерживаем
Хочу лидерборд «кто больше накопил»Нет: это сервер. Сравнение — с собой или с эталоном из контента. Либо снимок результата в ссылке
Хочу чат или комментарииНет. Любая переписка между детьми не проходит безопасность
Можно связать два телефона напрямую?Да, по Bluetooth — это не Backend. Бизнес ограничил совместные механики именно этой технологией. Потребует новых разрешений, и это учитывается в реализуемости
Можно использовать бонусы «Спасибо»?Нет: это требует авторизации и бюджетов, а значит не попадает в бриф
Можно использовать Сберкота или свинку — любую?Нет
Идея хорошая, но в ограничения не влезаетПриносите до старта. Либо найдём, как уложить, либо она уйдёт в продуктовый бэклог, а на хакатон возьмёте другую