Когда мне поставили задачу написать игру для Smart TV я был рад. Я сам контролировал ход процесса, выбирал необходимые технологии, читал официальную документацию, использовал SDK. Почти все было создано чтобы я написал классную игру. Уже через 3 недели я показывал рабочий прототип на официальном эмуляторе от Samsung. Оставалась неделя прежде чем подвезут физическое устройство и я пойму что где-то очень сильно ошибся…
Покурив с приятелем гик ресурсы посвященные разработке браузерных игр мне предстояло сделать сложный выбор между широким спектром различных игровых фреймворков и web-draw либ, которые вы можете посмотреть, например, здесь. Читая stackoverflow и reddit, пристально следя за популярностью и временем последних коммитов на гитхабе, слушая трексфлоу и выпивая по чашке содовой, был сделан мой первый неудачный выбор — я начал использовать kinetic.js.
Знакомство с KineticJS
KineticJS это замечательная либа для HTML5 разработки под canvas. Либа уже содержит в себе необходимый функционал для разработки 2D игр любой сложности. Здесь есть и встроенная коллизийная обертка, собственые события, анимационная модель и графические эффекты. К тому же она полностью бесплатна и ее репозиторий хостится на гитхабе.
Я начал пилить, разбирать документацию kineticjs и собирать потихоньку проект. Для разработки Smart TV, самсунг предлагает использовать свою собственную модифицированную IDE Eclipse, а также эмулятор под управлением Linux Ubuntu. Как итог: детище Oracle считает минификацию многих либ, kineticjs в том числе, большим злом и не дает зазипить проект. В общем, стандартное начало большинства моих проектов.
Неожиданные проблемы
Когда привезли устройство SmartTV 2012 года, встречный восторг превратился в сухое разочарование. Залить проект оказалось очень сложно. Курение доков и пляска с бубном не особо помогли. RTFM для каждой версии различался, русскоязычный форум был мертв и т.д. Лишь с чудом запустив проект пришла глубокая досада. Их виртуальный эмулятор совершенно не соответствует реальному железу! То что летало в эмуляторе безбожно висло на реальном устройстве. Уж таковы самсунговноцы.
Спонтанное безумие
К тому времени я уже юзал несколько тяжелых либ. Не считая kinetic, были require и jquery. Казалось, если я выпилю из проекта их все будет летать. Поэтому я выбросил за борт jquery перепилив под vanillajs. Это не помогло, скорость отрисовки была самым узким местом в ТВ. Я решил переписать под canvas native. Благо, kinetic уж очень похож на canvas api.
К этому времени мне принесли бюджетный Smart TV 2013 года. Мой проект при запуске превращал в черный экран. Удаление require не помогло. Все мои попытки свалить вину на компоновщик require оказались напрасны — новый ТВ не запускал даже тестовые kinetic.js проекты.
Метод прогерского тыка
Перенос функционала стоял очень остро. Заказчик злился, менеджер онлайнился с ним по скайпу я ругался на гравитацию и пр. Но даже переписав под native canvas сцену с парой эффектов скорость очень проседала на обоих ТВ. EPIC FAIL.
Охладив свое трахание я перешел на темную сторону силы HTML5 без canvas-тега. Предыдущий опыт верстания мне оказался очень полезен и я переделал все анимации вращения, перемещения и прочее на CSS3 опять используя связку jquery и прицепив move.js. Большой плюс — обе библиотеки работают с require, поэтому всю созданную архитектуру переписывать не пришлось.
Но и тут меня ждало разочарование. Главная фишка либы, плавность перехода, не поддерживается на ТВ ниже 2014 года. Facepalm.
Экстренный выход
Совсем отчаявшись в своей жизни Smart TV нашел единственную нормальную альтернативу — игровой фреймворк crafty.js. Эта незнакомая либа, как ни странно, обновляется и имеет довольно неплохой функционал.
Crafty.js
CraftyJS это не просто web-draw либа для отрисовки. Это полноценный игровой фреймворк и его размер сам говорит за себя. Почти 100kb в минифицированном виде. Но сколько всего она в себе содержит: собственная модульная структура и даже выбор отрисовки: canvas или dom элементов! Используя DOM-элементы и благодаря crafty скорость наконец удалось повысить до приемлемых величин!
Итог
Остановился на Craftyjs и jQuery. Последний пусть будет на всякий случай.
Вот мои советы для тех кто только начинает вести разработку Smart Hub приложений на javascript:
- Нужно запастись физическим устройством. Хотя бы одним. Фишка с эмулятором не пройдет.
- Работать в Eclipse невозможно, но придется. Сам веду разработку на WebStorm и лишь публикую используя Eclipse.
- Надо разворачивать свой ftp-сервак. Бегать с флешкой туда-сюда очень скоро надоест. Установка приложений довольно нудная, но простая. Получить developer доступ очень просто.
- Документация на ТВ может не соответствовать реалиям, а также прививает плохой тон программирования (глобальных переменные и унылые привязки событий). Пишите костыли код сами.
- ТВ придется перезагружать. Снова включать. Подключать developer-аккаунт. Потому что тупой умный ТВ может не обновить только что залитые данные. Я так потратил пару часов не имея никакого представления о том что один скрипт вдруг закешировался. Помог только хард резет.
Главное не сдаваться и у вас всё получится. У меня же получилось 😉
