Задача: много платформ и много игр…

Нас часто спрашивают, какие технологии мы используем для разработки мультиплатформенных игр Connected TV для:

  1. Smart TV (Samsung Tizen и Orsay, LG webOS и NetCast, Hisense, VESTEL, Vizio, Panasonic, NetRange, Foxxum, Chromecast и т. д.)
  2. IPTV/кабельные приставки (Arris, Albis и др.)
  3. Несколько версий стандарта HbbTV

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

  1. Автоматическое создание и развертывание игр
  2. Создание игр из одного источника для всех платформ
  3. Унификация структуры исходного кода (до определенной степени) для всех игр.
  4. Технология обработки и ограничения производительности телевизоров

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

Мы также поняли, что очень сложно создать настоящую мультиплатформенную телевизионную игру с нуля, не имея:

  1. Хороший опыт разработки ТВ (мы разрабатываем ТВ приложения более 7 лет)
  2. Большое количество тестовых устройств (у нас на тестировании более 200 телевизоров, а ежедневно мы используем около пятидесяти из них).

Добро пожаловать в реальность…

Наш подход

Для автоматической сборки мы используем Jenkins и webpack — мы собираем игровые пакеты и автоматически развертываем их на исходном хост-сервере (все игры размещаются аналогично веб-страницам). Автоматизация имеет решающее значение: представьте, что вам нужно предоставить обновление для 20 игр и 10 платформ — всего 200 пакетов, поэтому все нужно автоматизировать.

Все наши игры построены на вершине крошечного слоя абстракции, который скрывает различия между особенностями различных телевизоров и промежуточного программного обеспечения и их API. Когда необходимо поддерживать новую телевизионную платформу, мы обновляем уровень абстракции, добавляем новую платформу в процесс автоматической сборки и начинаем тестирование. Процесс переноса на новую платформу занимает около 1 недели.

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

Pixi.js

Однако самое сложное — это рендеринг и производительность — некоторые телевизоры не поддерживают холст HTML5, некоторые имеют проблемы с WebGL, некоторые платформы не могут использовать ни один из них, и поэтому мы вынуждены напрямую изменять элементы DOM… Итак. все игры должны иметь возможность рендеринга всеми тремя способами, чтобы работать везде. Перепробовав множество фреймворков, мы остановились на Pixi.js — облегченной библиотеке рендеринга, которая позволяет нам иметь WebGL и Canvas одновременно. Это очень важно в нашей многоплатформенной телевизионной среде. Удивительно, но Pixi.js работает почти на всех платформах, кроме некоторых старых устаревших устройств.

В настоящее время мы запускаем более миллиона игр в день на 10 платформах, и все они работают на Pixi.js.

Наш полный стек разработки содержит: JavaScript ES6, HTML5, pixi.js, flow, babel, webpack, jest, sass и node.

Мы любим разработку ТВ-игр, но, как видите, на пути много неприятностей…