Вместо предисловия

Добрый день, коллеги! Меня зовут Алексей и я занимаюсь телевизорами, а именно, разработкой Smart TV приложений («давайте похлопаем Алексею»).

Но что такое Smart TV? Какое оно, сферическое Smart TV приложение в вакууме?

Не буду томить вас ожиданием: в основном такого рода приложения предназначены для показа видео-контента. В любых вариациях. Записанное, живое вещание, телепередачи, фильмы, мультфильмы, рекламные ролики, и прочая, и прочая… Тысячи их!

Но разве Smart TV только для этого?

Да, безусловно, телевизор лучше всего показывает именно видео-контент, и с этим он хорошо справляется, но только ли для этого мы можем его использовать?

(Сейчас все счастливые владельцы приставок и HDMI-кабелей кинут в меня свои тухлые помидоры, скажут «Отписка!» и счастливые уйдут, а мы продолжим.)

Действительно, абсолютное большинство приложений, которые нам приходилось разрабатывать, в первую очередь предназначаются для показа видео, но были среди них и замечательные исключения. Кроме того, страдая известным заболеванием «Шило в месте чуть пониже спины», мне хотелось выжать из телевизоров нечто большее, чем все от них ожидают.

О моих (и не только) скромных потугах речь и пойдет ниже.

ТВ — Игра?

Действительно, первое, что приходит на ум — игра! Большой экран, возможность кроссдоменных запросов (так как Smart TV приложение, по сути, локальная HTML страница), и худо-бедно стандартное управление (пульт) позволяют нам реализовать игровой сценарий.

В большинстве своем это казуальные игры типа «1024», либо вариации на тему «Tower Defence». Негусто. К сожалению, накрутить супер 3D с шейдерами, тенями и динамическим освещением, получится разве что только на самых последних моделях… следующего года. Ибо в ТВ обычно размещена не самая совершенная версия браузера и, что хуже всего, она или обновляется крайне редко или не обновляется вовсе. Кроме того, разница между мощностью ТВ даже прошлогодними и текущими может быть кратной.

Поэтому, если вы хотите охватить максимальное количество моделей, готовьтесь к кровавой оптимизации всего и вся. Чистый, нативный Canvas станет вашим лучшим другом. Обертки над ним работают, но крайне прожорливо. Особенно удручает неудовлетворительная работа методов rotate и transform, поэтому анимацию планируйте спрайтовую и повороты спрайтов реализуйте только в самом крайнем случае.

Однажды мы делали игру на Ночь Карьеры. С ней удалось съездить к замечательным коллегам из Web Standarts Days и выступить с докладом.

Визуально игра представляет из себя игровое поле, вмещенное в размер экрана, не скролла, без преград. Задний фон разделен на несколько слоев, чтобы реализовать эффект 3d. На сцене генерируются летающие мишени (утки), по которым пользователь может стрелять.

Рис. 1. Общий вид приложения.

Главная задача состояла в том, чтобы дать возможность играть в игру кому угодно и как угодно, что сразу исключало взаимодействие с пультом. Пульт один, а игроков много. Управление реализовали с помощью телефона, а для максимального охвата мобильных устройств было решено реализовать клиент в виде адаптивного сайта. Реализовали мы его на WebSockets, и добавили фишку — управление через изменение положения телефона.

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

Мораль: используйте датчики ориентации в браузерах телефонов как можно реже.

Рис. 2. Убийцы уток за работой

В приложении используется анимация посредством замены спрайтов. Такой способ оказался достаточно производительным. Мы тестировали приложение с сотней и более летающих уток. В реальности в игре их было всего 10. Проблемы с производительностью возникли, когда прибежала дизайнер с возопила: «Хочу, чтобы планета крутилась»!

Закрутить спрайт проблем не составило. Проблема случилась, когда мы запустили приложение на относительно старом ТВ. Оказалось, что поворот спрайта 900×900 пикселей он не вывозит чуть более, чем никак. В итоге, самый глазастый пользователь может заметить, что планета на заднем фоне разрезана на 9 частей, которые вращаются вокруг одного центра. Это решило проблему с производительностью.

Отсюда другая мораль: не вращайте большие спрайты.

Ещё одна фишка проекта заключалась в том, что игровая логика обсчитывается… на ТВ. В этом случае сервер выступает выступает просто в роли передатчика данных между клиентами и ТВ. Сделали мы это для того, чтобы даже в случае потери соединения, утки продолжали летать по экрану, и после восстановления Интернета не требовалось перезапускать приложение. Любопытный кейс, но все же, необязательный.

ТВ — Экран?

Казалось бы, это уже банально, но нет. Как обычно всё скрывается в деталях. Экран для чего? Какую функцию несёт? Для чего предназначен?

Приведу лишь несколько примеров.

Поздравлялка.

Однажды мы решили на день святого Валентина запилить онлайн поздравлялку в компании, и использовать имеющиеся телевизоры в качестве трансляторов поздравлений. Приложение было реализовано в минималистичном варианте с одним запросом к серверу, возвращающим список поздравлений. Главная проблема заключалась в неприятной особенности телевизоров уходить в спящий режим. Если Samsung разрешает отключать эту функцию с помощью метода setScreenSaver, то остальные платформы не особо позволяют это делать. Как вариант, можно запускать в фоновом режиме любое зацикленное видео — ТВ в режиме показа видео выключается намного реже. В итоге приложение свою функцию выполнило: во всех частях офиса на нескольких этажах онлайн транслировались поздравления сотрудников.

Карта.

Если быть совсем точным — карта боевых действий со списком лучших игроков.

Мы снова делали игру на Ночь Карьеры и в этот раз решили совместить телевизоры, телефоны и VR. Суть заключалась в том, что игрок в VR-шлеме летает на драконе и отстреливает принцесс, которыми управляют игроки с телефонов. Кто убил дракона — надевает шлем. И так по кругу. Скромно замечу, что со своей функцией (собрать максимальное количество народа у нашего стенда и удерживать их максимально долго) приложение справилось. О чем красноречиво говорят цифры статистики.

Более подробно о драконах, истребляющих принцесс, можно узнать тут.

Рис. 3. Общий вид стенда.

Приложение для ТВ обеспечивало демонстрацию общей сцены боя для всех желающих .

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

• уменьшение объема передаваемой информации с сервера на клиенты и с клиентов на сервер;
• минимизация создания новых объектов в приложении.

Создание каждого нового экземпляра класса заметно глазу, поэтому все экземпляры должны быть созданы заранее и показываться пользователю по мере необходимости.

На ТВ слева — вид из VR-очков, на ТВ по центру — карта сцены.

Рис. 4. Игровой процесс. На ТВ слева — вид из VR-очков, на ТВ по центру — карта сцены.

Интерактивный задний фон.

Вы совершенно справедливо можете спросить: «Ты там вообще работаешь, не?!». На что я с искренним недосыпом на лице отвечу: «Конечно, работаю!». Но об этом чуть позже. А пока нам снова не сиделось и захотелось реализовать интерактивный задний фон для квадрокоптера. Подробнее с проектом можно ознакомиться тут.

Рис. 5. Сцена, растянутая на три телевизора.

Идея была в том, чтобы показывать в телевизоре саму усадьбу деда Мороза, которая бы реагировала на отлет/прилет квадрокоптера.

Основной интерес был в том, чтобы «растянуть» картинку на три телевизора. Разных производителей.

Сделали мы это путем разбиения всей сцены на «комнаты». Каждый телевизор показывал «комнату» со своим номером. Номера «комнат» можно было менять, таким образом, телевизоры, в принципе, могли показывать одинаковые части одной сцены, но мы показывали всю сцену последовательно. Команды на перемещение окружения сцен (зверушек, движение Луны и дым из труб) передавались с сервера по любимым WebSockets.

Да, мы знаем, что гифка маленькая. Другой не будет.

Поскольку мы знали время прилета/отлета квадрокоптера, появилась идея сделать «ветер» в телевизорах, который бы «сдувал» дым из труб при близкой работе винтов.

Опять-таки команда на взлет с квадрокоптера через сервер спускалась на клиенты.

И тут тоже у нас возникли сложности с производительностью. «Старый» webOS 2013 года крайне тяжело рендерил большую картинку (5760×1080). Пришлось специально для него нарезать задник в размер экрана и подставлять строго его.

Мораль: не пытайтесь рисовать картинки существенно большего размера, нежели экран телевизора. Он этого не переживет.

Тем не менее, все что относилось к Smart TV и бекенду, мы успешно реализовали.

ТВ — Охранник?

Однако самый интересный проект был совершенно неигровой, а что ни на есть, полезный.

Приложение занималось охраной дома. Да, именно телевизор. Да, именно охранял.

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

• громко орёт;
• посылает пользователю СМС;
• пишет письмо с приложенными фотками инцидента;
• пишет сообщение в FB тоже с фотками;
• делает всё это сразу или в любых вариациях.

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

Установило его себе несколько десятков тысяч человек.

Но и тут было не всё просто.

При подключении камеры и попытке получения в браузере стрима с неё, как известно, вываливается системный попап с подтверждением действия. Особенность в том, что ТВ блокируют все всплывающие окна. Поэтому приложение наше было реализовано только на платформе Samsung с использованием либо встроенной в ТВ камеры, либо специальной камеры, поставляемой тем же самсунгом.

Ещё одним минусом стала, опять же, производительность ТВ. На относительно старых телевизорах (2013 года) можно было м-е-е-е-е-е-е-дленно прокрасться мимо камеры и телевизор бы «прохлопал» этот момент.

Но в целом идея просто блестящая.

Вывод

Телевизоры уже давно переросли свою основную функцию — показывать картинку с канала, показывать видосики или быть вторым монитором.

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

Всем телеки!

З.Ы. Может быть у тебя, читатель, были необычные задачи для Smart TV, когда ТВ приходилось использовать в несвойственной для него роли? Поделись! Расскажи!