Lime.JS
0 likes688 views
Документ описывает фреймворк LimeJS, предназначенный для разработки кроссплатформенных HTML5 игр с использованием Javascript и Google Closure Library. Он включает детали архитектуры, поддержки различных типов рендеринга, таких как DOM и Canvas, и описывает основные инструменты для инициализации и работы с проектом. Также обсуждаются интеграция сторонних библиотек, таких как Box2D, и особенности событийной обработки.
![Пользовательский интерфейс
●
Структура UI отделена от фактического
представления, навигация по ней:
● AppendChild()
● RemoveChild()
● RemoveChildAt()
● Children_[]/getParent()
●
Добавление и удаление слушателей событий:
● Goog.events.listen/goog.events.unlisten
● AddEventListener/removeEventListener](https://image.slidesharecdn.com/presentation-130120084341-phpapp02/85/Lime-JS-7-320.jpg)
![События
●
Один и тот же обработчик на много событий сразу
['touchstart','touchend','touchcancel','touchmove']
●
По умолчанию this установлен на event.target
●
При использовании Canvas не надо менять код !](https://image.slidesharecdn.com/presentation-130120084341-phpapp02/85/Lime-JS-13-320.jpg)
![Примеры
● goog.events.listen(heroesContainer,
['touchstart','mousedown'],this.handleHero
Click_,false,this)
● heroesContainer.addEventListener('mousedow
n', this.handleHeroClick_,false,this)](https://image.slidesharecdn.com/presentation-130120084341-phpapp02/85/Lime-JS-14-320.jpg)
Lime.JS
- 1. LimeJS — фреймворк для разработки HTML5 игр Юрийчук Павел Ciklum Проект BoosterMedia
- 2. О себе ● Flex/Flash developer, Сasino games framework в 2k-group ● Mobile games developer, Сasual games в Ciklum ● Как найти : ● Facebook ● Twitter ● gmail
- 3. Плюшки ● Архитектура ● Обьекты на сцене и взаимодействие между ними ● Renderers и как они работают ● События ● Инструментарий ● Кое что еще ;)
- 4. LimeJS ● JavaScript framework для разработки кросс- платформенных игр на основе google closures library ● Разработчик — компания DigitalFruit ● Первый публичный коммит в github — 19 января 2011 ● https://github.com/digitalfruit/limejs ● http://www.limejs.com/ ● API Docs
- 5. Архитектура ● Легко расширяемая функциональность ● Кросс-платформенность ● Отделена отрисовка обьектов ● Эффективность работы отрисовщика
- 7. Пользовательский интерфейс ● Структура UI отделена от фактического представления, навигация по ней: ● AppendChild() ● RemoveChild() ● RemoveChildAt() ● Children_[]/getParent() ● Добавление и удаление слушателей событий: ● Goog.events.listen/goog.events.unlisten ● AddEventListener/removeEventListener
- 8. Отрисовка объектов ● Поддерживаются следующие типы отрисовщиков UI: ● DOM = HTML + CSS3 ● Canvas = все отрисовываем в объектах Сanvas ● WebGL - на стадии разработки и не стабилен ● При изменении свойств объекта он помечается как “dirty” что приводит к его перерисовке
- 11. Profit! ● Отрисовывается только то, что было изменено ● Одинаковый подход как для простых так и для сложных обьектов ● Независимость от выбранного отрисовщика
- 12. Profit! ● Отрисовывается только то, что было изменено ● Одинаковый подход как для простых так и для сложных обьектов ● Независимость от выбранного отрисовщика
- 13. События ● Один и тот же обработчик на много событий сразу ['touchstart','touchend','touchcancel','touchmove'] ● По умолчанию this установлен на event.target ● При использовании Canvas не надо менять код !
- 14. Примеры ● goog.events.listen(heroesContainer, ['touchstart','mousedown'],this.handleHero Click_,false,this) ● heroesContainer.addEventListener('mousedow n', this.handleHeroClick_,false,this)
- 15. Еще раз о Rendering'e ● Для чего лучше DOM: ● Качественный scale и другие транфсормации ● IOS - скорость СSS3 трансформаций выше чем js code + style ● Нет ограничений на размер области отрисовки ● Для чего Canvas: ● Быстрее scaling, но его качество хуже ● Быстрее отрисовка большого множества обьектов ● Есть ограниченя на размер области отрисовки
- 16. Примеры ● Пользовательский интерфейс лучше рисовать через DOM — почти наверняка будут слайдеры, эффекты ● Отрисовка сцены игры — лучше в Canvas, если вас устраивает скорость ● Canvas — позволяет сделять скриншот на стороне клиента!
- 17. Инструменты ● Скрипт lime.py ● Init — инициализация фреймворка, скачивает зависимости ● Create — создать новый проект ● Update — обновление зависимостей внутри проекта ● Compile — компиляция существующего, можно создавать динамический прелоадер ● Gensoy — внедрение json & css в проект, меньше файлов
- 18. 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
- 19. Box2D::JS::Features ● C++ полный список здесь ● Коллизии и контакт объектов ● Системы частиц ● Моделирование механики в играх
- 20. 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
- 21. Что надо будет добавлять самому ● Загрузка ресурсов и их обработка ● Обработку Spritesheet если у вас не поддерживаемый генератор ● Навигация а-ля getChildById/getElementById и прочее ● Компонент lime.ui.Scroller, lime.Layer и lime.Label— подлежат доработке напильником ● Звук для iOS — таблетка тут