Реклама показывается только незарегистрированным пользователям. Вход или Регистрация

Пишем Тетрис под webOS

Здесь выкладываются готовые статьи и рабочие исходники, решения каких-либо задач или советы

Пишем Тетрис под webOS

Сообщение moggiozzi » 10 июн 2015, 19:18

Приветствую, уважаемые разработчики и просто интересующиеся. Недавно прошла проверку и появилась в маркете моя игра для телевизоров с webOS.

Предыстория

Приобрел я себе TV LG lb671v и по старой традиции писать что-нибудь под каждую новую железку решил написать игру, тем более что у LG уже есть свой интернет-магазин приложений и открытая SDK для сторонних разработчиков. Захожу в интернет магазин и, что вы думаете, не нахожу там своего любимого старого доброго лампового… (подставить свое) тетриса. Надо исправить.

Инструменты

Идем на сайт разработчиков в раздел для SmartTV и скачиваем SDK. В пакет средств разработки входят: инструменты командной строки, эмулятор, среда разработки (используется eclipse). Если возникают проблемы с установкой, то смотрим раздел «Troubleshooting» на странице SDK. Установка особых сложностей вызвать не должна.

Платформа webOS поддерживает несколько типов приложений: Web, Native, Unity, Flash и др. Некоторые из них не доступны для сторонних разработчиков. В моем случае приложение имеет тип web (html5).

Код

Canvas на всю страницу. Найдено на просторах stackoverflow.
Код: Выделить всё
<html>
<head>
    <title>Tetris</title>
    <meta charset='utf-8' />
        <style>
        html,
        body {
            width: 100%;
            height: 100%;
            margin: 0;
        }
        canvas {
            display: block;
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            width: 100%;
            height: 100%;
        }
    </style>
</head>
<body onload="initGame()"
    <canvas id='myCanvas' height='1080' width='1920'>Not support</canvas>
    <script>…</script>
</body>
</html>


Игра

Описывать реализацию тетриса не вижу смысла. Каждый уважающий себя программист в своей жизни должен написать пятнашки, змейку и тетрис. Приведу скриншот:

tetris


Сборка

1) Кладем все файлы в отдельную папку;
2) Создаем JSON файл с описанием приложения:

Пример
Код: Выделить всё
{
    "id": "myapp",
    "version": "1.0.0",
    "vendor": "mycompany",
    "type": "web",
    "main": "index.html",
    "title": "Tetris",
    "icon": "icon80.png",
    "largeIcon": "icon130.png",
    "appDescription": "Classic Tetris game. Enjoy it!",
    "splashBackground": "splashScreen.png",
    "bgImage": "bgImage.png",
    "bgColor": "#d0dbbd",
    "iconColor": "#343829"
}


3) В командной строке переходим в эту папку и запускаем скрипт сборки из SDK: 'ares-package'. После этого, если нет ошибок, то создается файл с расширением *.ipk;
4) Если хотим запустить на эмуляторе, то запускаем эмулятор и выполняем команду: 'ares-install file_name.ipk';
5) Если хотим запустить на TV, то надо:
5.1) подписать приложение на сайте lg (загрузить наш *.ipk и скачать подписанное приложение в виде архива);
5.2) создать директорию на флешке /developer/apps/usr/palm/applications/;
5.4) распаковать в эту директорию скачанный с сайта архив;
5.5) после подключения флешки к TV в списке приложений должно появиться ваше. При этом для запуска обязательно наличие доступа в интернет на TV.

Грабли

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

QA

Были такие замечания: заполнить корректно/полностью описание и результат тестирования, убрать прозрачность иконки, обрабатывать кнопки назад/домой, добавить splashScreen, добавить кнопки в UI. По поводу последнего: у LG к приложениям для TV есть требование — для управления телевизором должно быть достаточно курсора MRCU (мыши). Magic Remote Control Unit — это специальный пульт, аналог геймпада Nintendo Wii.

Несколько камней в огород LG

1) Авторизация на сайтах сбрасывается уже через 30 мин (довольно часто приходится выполнять повторный вход, галочка Remember my ID ни на что не влияет). При этом на сайте разработчиков и в магазине надо регистрироваться по отдельности.
2) Воспроизведение sfx звуков запаздывает на 0.5 секунды, что затрудняет использование звуковых эффектов в играх. Официальная позиция LG: мы работает над этой проблемой (работают уже больше года), используйте графические спецэффекты вместо звуковых. Пришлось от звука отказаться.
3) Не знаю, как обстоят дела с этим в других интернет магазинах, но заполнение описания и результатов тестирования утомляют. Большинство пунктов в тест-плане выглядят так: «Приложение описано должным образом», «Приложение не содержит вредоносного кода», «Нет призывов к насилию и расовой дискриминации», «Приложение работает нормально, без сообщений об ошибках» и т.д.

Поддержка

Порадовала поддержка. Не мог понять замечание от QA: «UI must be navigable with MRCU (Cursor + OK + Back)». Отправил письмо в поддержку на английском, но ответили мне на русском. То ли определили по моему местоположению, то ли по кривому английском.

Немного цифр

2 вечера на разработку прототипа;
1 месяц на доработку;
5 месяцев, чтобы выложить в маркет, т.к. интересная часть работы (кодирование) закончилась, а отказы QA воодушевления не добавляли.

Закон Парето: 20% проекта занимают 80% времени.

[ исходники ]

P.S. Я провожу вебинары по разработке игр https://vk.com/divetogamedev. Тем, кому тема интересна - добавляйтесь в друзья и подписывайтесь на мою рассылку prog2.ru.

P.P.S: Если наберется народ, то можем провести вебинар про разработку под webOS.
moggiozzi

 
Сообщения: 1
Зарегистрирован: 10 июн 2015, 19:04
Благодарил (а): 0 раз.
Поблагодарили: 0 раз.
Телевизор: 47LB671V

Вернуться в Статьи, исходники и примеры



 


  • Похожие темы
    Ответы
    Просмотры
    Последнее сообщение