Пользователь
0,1
рейтинг
16 октября 2012 в 19:01

Разработка → Пишем игру для Samsung SmartTV на JS

Всем привет. Я по долгу службы занимаюсь разработкой для Samsung SmartTV. В силу того, что на хабре мало статей на эту тему, я решил это исправить. Кому интересна пошаговая инструкция как сделать свой пинг-понг на «умный телик» с распознованием жестов — милости прошу под кат.

Подготовка ящика с инструментами

  • Для начала нам понадобится компьютер с Windows (cам тестировал на виртуальной машине на Маке).
  • Теперь идем на samsungdforum.com и скачиваем SDK
    я качал версии 2.5.1 с целью покрыть как можно больше моделей.
  • К сожалению, для коммерческой разработки сам телевизор просто необходим, потому что по факту эмулятор и реальное устройство порой сильно отличаются по поведению (ну и распознование жестов на эмуляторе не оттестировать). Я использовал модель 2012 года.
  • В качестве JS движка для разработки игр я выбрал для себя 2 альтернативы это Ivank Lib и  CraftyJS. Результаты тестов на fps показали что crafty в два раза быстрее, поэтому я остановился на ней. Связанно это с тем, что Ivank использует canvas, который аппаратно не ускоряется на SmartTV. Чуть-чуть инсайда: коллеги сказали что скоро предстоит много работы в связи с переписыванием всего на HTML5 т.к., скорее всего, в модели 2013 года весь HTML5 будет сделан «с преферансом и поэтессами».

Дебаг

В целом, процесс дебага достаточно точно описан на samsungdforum.com.
(Guide->Topic->Getting started->Testing Your Application on a TV) В двух словах: для запуска на эмуляторе достаточно нажать одну кнопку в ИДЕ, для запуска на ТВ нужно сделать пакет, залить его на веб сервер (все делается в ИДЕ) и синхронизировать приложения со SmartTV (несколько нажатий кнопок на пульте).

Разработка

  • Итак мы скачали SDK и dev версию CraftyJS. Ну что ж, поехали.
  • Запускаем ИДЕ в поставке SDK, так называемый, Samsung SDK TV Editor. Создаем дефолтный JavaScript проект.
  • При создании проекта редактируем свойство «widgetname» и добавляем свойство по имени «mouse» со значением «y» (это свойство позволит нам использовать фишку SmartTV — управление жестами). Все остальные свойства можно оставить «по умолчанию».
  • IDE создаст для нас дефолтный проект. Он, в целом, не нужен и его можно полностью очистить и оставить только 2 файла widget.info и config.xml.

Файл index.html

Добавляем в проект index.html следующего содержания:
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title>PongTv</title>

</head>
<body style="margin:0px;padding:0px;">


<script type="text/javascript" src="crafty.js"></script>
<script type="text/javascript" src="pong.js"></script>


</body>
</html>

Комментировать особо нечего, тут все понятно.
Соответственно нам нужно добавить еще 2 файла: сама библиотека CraftyJS и код игры.
Код игры pong.js

if (window.curWidget) {
    curWidget.setPreference('ready', 'true');
}

var wdth = 960;
var hght = 540;

var margin = 20;

var back_color = 'rgb(0,0,0)';
var act_color = 'rgb(255,255,255)';

var ppdl_w = 20;
var ppdl_h = 100;

var ball_s = 10;

Crafty.init(wdth, hght);
Crafty.background(back_color);

//Paddles
Crafty.e("Paddle, 2D, DOM, Color, Multiway, Mouse")
    .color(act_color)
    .attr({ x:margin, y:(hght-ppdl_h)/2, w:ppdl_w, h:ppdl_h })
    .multiway(4, { W:-90, S:90, REMOTE_UP:-90, REMOTE_DOWN:90 });
	
Crafty.e("Paddle, 2D, DOM, Color, Multiway, Mouse")
    .color(act_color)
    .attr({ x:wdth-margin-ppdl_w, y:(hght-ppdl_h)/2, w:ppdl_w, h:ppdl_h })
    .multiway(4, { UP_ARROW:-90, DOWN_ARROW:90})
    .bind('MouseMove', function (e) {
        this.y = e.y-ppdl_h/2;
    });

//Ball
Crafty.e("2D, DOM, Color, Collision")
    .color(act_color)
    .attr({ x:wdth/2, y:hght/2, w:ball_s, h:ball_s,
        dX:Crafty.math.randomInt(2, 5),
        dY:Crafty.math.randomInt(2, 5) })
    .bind('EnterFrame', function () {
        //hit floor or roof
        if (this.y <= 0 || this.y >= hght)
            this.dY *= -1;

        if (this.x > wdth-margin) {
            this.x = wdth/2;
            Crafty("LeftPoints").each(function () {
                this.text(++this.points + " Points")
            });
        }
        if (this.x < margin) {
            this.x = wdth/2;
            Crafty("RightPoints").each(function () {
                this.text(++this.points + " Points")
            });
        }

        this.x += this.dX;
        this.y += this.dY;
    })
    .onHit('Paddle', function () {
        this.dX *= -1;
    });

//Score boards
Crafty.e("LeftPoints, DOM, 2D, Text")
    .attr({ x:margin, y:margin, w:100, h:20, points:0 })
	.textColor('#FFFFFF')
    .text("0 Points");
Crafty.e("RightPoints, DOM, 2D, Text")
    .attr({ x:wdth -100, y:margin, w:100, h:20, points:0 })
	.textColor('#FFFFFF')
    .text("0 Points");

Первые несколько строк кода сообщают телевизору, что приложение готово и его можно показать на экран.
Далее вполне себе стандартный код на Crafty. Сразу можно задать вопрос: «Ну а где же жесты?». Отвечаю: жесты в Samsung SmartTV ни что иное как обычная мышка. Соответственно, если в браузере ваш код реагирует на мышь, то телевезор будет ловить жесты (вы, как бы, будете управлять курсором с помощью руки, а кликать жестом)
Запуск

Запускаем все на эмуляторе и ничего не работает. Почему? Все просто: CraftyJS знать не знает ни о каких пультах.
Находим в коде CraftyJS массив кодов клавиатуры(«keys: {») и добавляем следующее:
...
'REMOTE_UP': 29460, 
'REMOTE_DOWN':29461, 

Я отправил pull-реквест авторам craftyJS и его приняли, поэтому есть вероятность что в вашей версии CraftyJS это уже будет присутствовать.

Поменяли, запускаем на эмуляторе и снова ничего не работает. Тут опять все просто: эмулятор в моей версии мышку не поддерживает, а для клавиш ждет специального JS блока, который для работы на реальном телевизоре не нужен, поэтому я его опустил. В целом, его можно подглядеть в дефолтном проекте, который создает ИДЕ.
Для тестов игру можно запустить в Chrome, если там все работает, значит и на телевизоре заведется.
Устанавливаем приложение на телевизор, берем пиво и товарища, и режемся в казуальный пинг-понг на огромном экране с использованием жестов. Красота.
Заключение

Как вы уже догадались я работаю в компании Samsung и сейчас нахожусь в Южной Корее. Если кому интересно как я сюда попал, пишите комменты — подготовлю еще один пост.
Это мой первый пост, поэтому любая конструктивная критика приветствуется,
Anatoly Shikolay @viru0
карма
10,0
рейтинг 0,1
Реклама помогает поддерживать и развивать наши сервисы

Подробнее
Реклама

Самое читаемое Разработка

Комментарии (30)

  • НЛО прилетело и опубликовало эту надпись здесь
    • +1
      как же вы туда попали?!
      • +9
        Попал туда автор темы, а автор кАмента не умеет пользоваться цитатами.
  • 0
    Каменты каменты каменты
  • +4
    На данный момент ваша основная деятельность SmartTV? Если да, то под какую модель пишите?
    Сам пишу под линейку SmartTV 2011, крайне отвратительные впечатления от производительности и API девайса. А интерфейс у API, мягко сказать — бездарный.
    Моё приложение занимается показом оцифрованной прессы (т.е. работа с большими количеством больших изображений), и проигрыванием подкастов. В один момент приложению просто перестало хватать памяти для отображения получаемых изображений. Это при том что я провел тщательный профайлинг JS и даже написал свой garbage collector следящий чтобы все невидимые изображения уничтожались и не оставалось на них ссылок, слабо помогло. Использую vanillaJS. До меня, в компании над этим приложением посадили работать какого-то фронтэндчика, парень уже на подсознательном уровне подключил Jquery и начал писать приложение в стиле DOM Driven Design, в итоге приложение уже было нестабильно еще даже не успев достигнуть ни одного acceptance criteria. Пришлось всё переписывать с нуля.
    Причем девайс ложился и на более простых моментах, например при парсинге (относительно) больших XML.
    В итоге пришлось часть приложения писать на ActionsScript, причем в 2011 в JS приложениях можно использовать только Flash 8 и AS2, чему я был несказанно рад. Про FPS а флеше можно узнать о отзывах на форуме.
    Считайте этот комент криком души, не могу больше молчать.

    В общем, очень интересно, какие у вас впечатления от работы с SmartTV.
    • 0
      Со старыми платформами (я писал для LG и чуть не влип в Samsung :) куча проблем и тормозов. Говорят, новые лучше.
    • 0
      Моя основная деятельность писать API как раз.
      Конкретной модели нет, версии API привязанны к году.
      Почему API, именно такой? Не знаю. Я тут еще «новенький»
      • +2
        Ну вот по поводу API, а конкретнее по поводу IMEShell, я уже писал на вашем форуме в этой теме.
        Пользуясь случаем, хочу сказать что API выполнено отвратительно в плане юзабилити, а судя по примерам в документации, оно еще и реализовано так-же. Глобальные переменные, структурный код, отсутствие какой-либо абстракции.
        Ребята из самсунг только проснулись? Они в курсе, что в RIA/SinglePageApp's обычно javascript генерирует весь интерфейс? Поэтому все ссылки на элементы уже есть в программном скопе, а их API не рассчитано, чтобы передавали линку на элемент, им нужен только ID элемента, и обязательно, чтобы он УЖЕ был в DOM, иначе всё.
        Кажется, что консультантами у них были не Javascript-programmers а Frontend-Guys которые дальше jquery и сайтиков в лес не ходят.
        То как ime2.js втупую добавляет свой html код в приложение это вообще сказка, мало того что я потратил кучу времени не понимая почему он у меня не работает, т.к. у моих сцен свои конструкторы и деструкторы которые чистят за собой дом. Ребята, нельзя что ли сгенерировать DOM менюшки и делать appendChild/removeChild по необходимости? Или нужно тупо инъецировать third party code в DOM структуру приложения? Так они еще не упомянули об этом в гайде, или упомянули где-то далеко.
        На счет гайда тоже прикольно, вот пример ляпа с мана по тому же IME:
        var widgetAPI = new Common.API.Widget(); // объявление сущности
        widgetAPI.registIMEKey();//Использование ее метода
        Только в коде который я скачал видно что registIMEKey является методом другого (Common.API.Plugin) API, а так мне пришлось убить еще времени для того чтобы понять в чем дело. А за моё время платит клиент. И будет ли он доволен за кучу потраченного впустую времени? Потом он просто откажется от вашей платформы, как не актуальной. Вместо того чтобы дать девам мощные инструменты, дать возможность сделать или портировать что-то вроде angry-birds, тем самым подняв популярность девайса и рубить процент с продаж, самсунг тупо забил на девов. Я конечно заделиверил приложение клиенту, но ощущения после работы с вашим девайсом (2011), просто отвратительные.
        Спасибо за внимание.

        И вот таких мелочей у вас в каждом компоненте по пачке.

        ps: Извините если пост оказался немного резким. То был очень длинный и сложный день.
        • 0
          Angry Birds есть. (Правда он на ActionScript)
          Немцы даже соревнование по нему проводили.
          Video

          Парни, я пока не отвечаю за арxетектуру API, но так как я терпеть не могу увиливание от ответственности и коли я имею доступ к части кода, то давайте сделаем так
          вот ссылка
          Голос программера
          Пишите туда в свободной форме ваши замечания + пути исправления ваших замечаний, которые кажутся вам оптимальными

          Обещать что в следующей версии все будет исправлено я не могу.
          Но то, что я сам попробую косяк, попробою решение, сформирую письмо начальству + пример по улучшению, напишу патч и закомичу его в продакшн, это я обещать могу.

          • 0
            Ок. Спасибо.
            И уделяйте по больше внимания JS, второй раз сталкиваюсь с тем, что заказчик хочет чтобы было написано именно на JS а не AS. У них предрассудки (вполне оправданные) что флеш теперь будет ограничен только десктопными платформами, и будущего для остальных платформ него нет.
            Angry Birds есть. (Правда он на ActionScript)
            Да, я читал на форуме про разницу в производительности флеша в 2011 и 2012 платформах. Невольно сложилось впечатление что самсунг просто забил на предыдущие платформы, начав реальную поддержку с 2012 версии (производительность, webkit, etc.)
            • +2
              > Невольно сложилось впечатление что самсунг просто забил на предыдущие платформы, начав реальную поддержку с 2012 версии (производительность, webkit, etc.)
              Как это похоже на Samsung…
  • 0
    Я какое-то время назад делал NetPlayerB для B серии ТВ (2009 года выпуска). Почему-то SDK для этой серии настолько засекречено, что куда я не обращался — нигде мне его не дали. А вот для C серии и старших — в открытом доступе лежит. И почему-то для старых серий ТВ SmartTV от новых серий не поставить.

    В общем, Samsung меня разочаровал.
  • +3
    >> Я качал версии 2.5.1 с целью покрыть как можно больше моделей.
    В каждой новой версии SDK лежат все прошлые эмуляторы (загляните на рабочий стол). Т.е. не имеет смысла качать старые версии SDK, этим вы наоборот покроете меньшее количество моделей, при этом в новых закрывают некоторые старые баги (хотя далеко не все, и при этом появляются новые).

    >> Я использовал модель 2012 года
    У всех устройств на этой платформе разная производительность. Нужно иметь как минимум по одному blu-ray плееру и одному телевизору 2011 и 2012 годов (при этом в моём случае, телевизор 2011 года был намного быстрее устройств 2012 года).

    Впечатления от этой платформы просто ужасные. Для каждого апдейта приложения нужно перезапускать телевизор. Постоянные глюки, очень кривой samsungdforum (пример сайта, где аякс портит абсолютно всё), отвратительная система валидации приложения. Одни и те-же тикеты на все модели телевизоров продублированы 12 раз (кол-во модификаций телевизоров 11-12 годов), при этом закрывать их надо по одному. Теперь представьте, что тестировщикам не понравилось 10 моментов в вашем приложении. А 20? Хотя обычно большинство моментов совсем мелочные и не критичные.

    В общем, я безумно рад, что теперь не разрабатываю под этот ужас.
    • 0
      Честно у меня не стоковая версия телика. Поэтому несколько накосячил с SDK. По факту использовал внутренний инструментарий, который отличается от паблика(в силу секьюрности).

      Поэтому впечатления у меня несколько другие.
  • +8
    Этот комментарий подготовлен мной специально для мотивации автора написать пост про Южную Корею.
  • +2
    Этот комментарий подготовлен мной специально для мотивации автора написать пост про Южную Корею.
  • 0
    Ок. Добавил к своим таскам «Написать статью о трудоустройстве в самсунг»
    • 0
      недавно на hh проскакивала куча вакансий от самсунга в городе Сувон, вы там?
      • 0
        Угу
        • 0
          А какой до этого был опыт разработки?
          • 0
          • 0
            Но на самом деле не пытайтесь сравнивать резюме и требования на ХХ
            У меня была несколько иная ситуация.

            Я еше будучи студентом учавствовал в их бада конкурсе
            И получил оффер как только засветился в призерах локалтного тура

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

  • –2
    Правильные мои догадки были насчет самсунга, что там студенты или уже выпускники из РФ практикуются )), а предпосылки были участие в самсунг смарт челендж… (http://www.smartappchallenge.com/) всю кухню от и до прошли поэтому такие выводы…
    • 0
      Какая практика вы о чем? Не понял, какую мысль вы хотели донести.
      Отправлял реземю как опытный работник.
      Далеко не последнюю роль сыграло участие в bada developer challenge 1
      • +1
        «Я еше будучи студентом учавствовал в их бада конкурсе» вот тото и оно!
        Мне вот интересно, почему такая мега корпорация берет к себе на работу таких людей !?
        Даже судя по тому что у них в стране творится, напоминает фантастические фильмы, где трудятся местные специалисты !?
        Поясню откуда такие выводы,
        — АппСтор самсунговский это просто ужас, кто его делал? не верится что его делали крутые корейские ребята…
        — форум для девелоперов на томже самсунге, один из сторонних разработчиков софта под самсунг задавал вопрос на форуме по использованию SDK, ответ получил от разработчиков SDK через ГОД!
        Выводы сами напрашиваются.
        • 0
          1)Учавствовать в программистких конкурсах будучи студентом по вашему плохо?
          2)«таких людей» позвольте поинтересоваться каких таких?
          3)Самсунг компания Корейская, здесь большинство корейцев.
          АппСтор самсунговский это просто ужас
          аргументы?
          4)Форум не официальная поддержка, на форумах вообще нигде гарантий не дают, что вам ответят.

          Опять не пойму про какие выводы вы все пишите?

          Что не так то? Ну был я студентом (как наверно и вы), выпустился, поработал в Москве на стартовой позиции, поехал в Корею на среднюю позицию. А вы что хотите чтобы на средние и стартовые позиции брались звезды?

          Вообщем не понимаю я вас.
          • +1
            Я не имел опыта работы с sdk самсунга, но имел с некоторыми другими брендами (не телевизионными). И в принципе я человека понимаю. Такие компании тупо плюют забивают на мелких разработчиков, выпросить что-либо не реально. Складывается впечатление, что им не нужно продвижении платформы. Или бюрократия совдеповская или еще что…
            Даже Ваш комментарий
            По факту использовал внутренний инструментарий, который отличается от паблика(в силу секьюрности).
            Поэтому впечатления у меня несколько другие.

            мне это подтвердил
  • 0
    ну а ссылочку на версию для гугл хрома, чтобы мышкой пинг понг погонять
  • +1
    Немного обо всём.
    Уже пол года работаю с данной платформой. И фактически наткнулся с командой на пачку иногда ни разу не видных камней.
    Работаем только на js

    * SDK — никто его не использует. даже с учетом возможности интеграции с eclipse. Причина одна — не юзер френдли и тормозит в придачу(скажем на видеопотоках и тд)
    * Комьюнити никакое, завели русский форум а ответы (в тч и от автора поста) как вилами по воде(не надо сливать на бюрократию, сами разработчики плавают в мат части. До сих пор бьёмся правды как работает DRM + SDI)
    * Эмуляторы не соответствуют реальным устройствам, держем 4-5 единиц техники для проверки. Разработку перенесли силами нашего js-программиста в FF. А под разные модели придумываем разные костыли фасады :)
    * Не используем API samsung (кроме видео плееров и прочего), даже от сцен отказались.
    * Сертификация приложения происходит долго и нудно. Ребята заботятся о качестве приложений.
    * Бывали случае когда после обновления смартХаба приложение меняло своё поведение

    Однако я считаю направление очень перспективным и при должной конкуренции встанет на рельсы.

    • 0
      У меня процесс разработки совпадает с вашим почти во всем пунктам. И самое интересное, при всех этих подводных камнях, тоже остается впечатление в перспективности платформы
      Разработку перенесли силами нашего js-программиста в FF
      Вот меня избили в карму за статью о DI в JS. Но благодаря этому подходу, перенос приложения в chrome у меня занял меньше 10 минут, путем замены четырех строчек в файлах с зависимостями. Ни одной строки в коде приложения изменено не было.

Только зарегистрированные пользователи могут оставлять комментарии. Войдите, пожалуйста.