Lime.JS

726 views

Published on

My presenation about Lime.JS framework, it's architecture and internals

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
726
On SlideShare
0
From Embeds
0
Number of Embeds
9
Actions
Shares
0
Downloads
6
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Lime.JS

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

×