Всем привет. Я по долгу службы занимаюсь разработкой для 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 и сейчас нахожусь в Южной Корее. Если кому интересно как я сюда попал, пишите комменты — подготовлю еще один пост.
Это мой первый пост, поэтому любая конструктивная критика приветствуется,
Автор: viru0
