LimeJS — фреймворк для разработки HTML5 игр

Юрийчук ПавелCiklum

Проект BoosterMedia

О себе

● Flex/Flash developer, Сasino games framework в 2k-group

● Mobile games developer, Сasual games в Ciklum

● Как найти :● Facebook● Twitter● gmail

Плюшки

● Архитектура● Обьекты на сцене и взаимодействие между

ними● Renderers и как они работают● События● Инструментарий● Кое что еще ;)

LimeJS

● JavaScript framework для разработки кросс-платформенных игр на основе google closures library

● Разработчик — компания DigitalFruit ● Первый публичный коммит в github —

19 января 2011● https://github.com/digitalfruit/limejs● http://www.limejs.com/● API Docs

Архитектура

● Легко расширяемая функциональность● Кросс-платформенность● Отделена отрисовка обьектов● Эффективность работы отрисовщика

Пользовательский интерфейс

● Структура UI отделена от фактического представления, навигация по ней:● AppendChild()● RemoveChild()● RemoveChildAt()● Children_[]/getParent()

● Добавление и удаление слушателей событий:● Goog.events.listen/goog.events.unlisten● AddEventListener/removeEventListener

Отрисовка объектов

● Поддерживаются следующие типы отрисовщиков UI:● DOM = HTML + CSS3● Canvas = все отрисовываем в объектах Сanvas● WebGL - на стадии разработки и не стабилен

● При изменении свойств объекта он помечается как “dirty” что приводит к его перерисовке

Пример: Казаки

Как работает отрисовка

Profit!

● Отрисовывается только то, что было изменено

● Одинаковый подход как для простых так и для сложных обьектов

● Независимость от выбранного отрисовщика

Profit!

● Отрисовывается только то, что было изменено

● Одинаковый подход как для простых так и для сложных обьектов

● Независимость от выбранного отрисовщика

События

● Один и тот же обработчик на много событий сразу ['touchstart','touchend','touchcancel','touchmove']

● По умолчанию this установлен на event.target● При использовании Canvas не надо менять код !

Примеры

● goog.events.listen(heroesContainer,['touchstart','mousedown'],this.handleHeroClick_,false,this)

● heroesContainer.addEventListener('mousedown', this.handleHeroClick_,false,this)

Еще раз о Rendering'e

● Для чего лучше DOM:● Качественный scale и другие транфсормации● IOS - скорость СSS3 трансформаций выше чем js code +

style● Нет ограничений на размер области отрисовки

● Для чего Canvas:● Быстрее scaling, но его качество хуже● Быстрее отрисовка большого множества обьектов● Есть ограниченя на размер области отрисовки

Примеры

● Пользовательский интерфейс лучше рисовать через DOM — почти наверняка будут слайдеры, эффекты

● Отрисовка сцены игры — лучше в Canvas, если вас устраивает скорость

● Canvas — позволяет сделять скриншот на стороне клиента!

Инструменты

● Скрипт lime.py● Init — инициализация фреймворка, скачивает

зависимости● Create — создать новый проект● Update — обновление зависимостей внутри

проекта● Compile — компиляция существующего, можно

создавать динамический прелоадер● Gensoy — внедрение json & css в проект, меньше

файлов

Box2D

● Порт С++ проекта http://box2d.org/ на JavaScript

● Исходники здесь● Интегрирован в LimeJS как third-party library,

скачивается на этапе инициализации● http://sourceforge.net/projects/box2d-js/ 2008

● https://github.com/thinkpixellab/pl/tree/master/src/box2d/collision

Box2D::JS::Features

● C++ полный список здесь● Коллизии и контакт объектов● Системы частиц● Моделирование механики в играх

Google closures library

● Автоматизированное управление завимостями

● XML — XPath, AJAX — xhrIo, JSON — native / json parser

● DataStructures● Array, Vector, Size, Coordinate

● Map, AVL-tree, Pool, Queue, Heap, Collection

● Templates

● Storage

● Cryptogrpahy

● Graphics

● i18n - internationalization

Что надо будет добавлять самому

● Загрузка ресурсов и их обработка● Обработку Spritesheet если у вас не

поддерживаемый генератор● Навигация а-ля getChildById/getElementById

и прочее● Компонент lime.ui.Scroller, lime.Layer и lime.Label— подлежат доработке напильником

● Звук для iOS — таблетка тут