SVG in game development

567 views

Published on

Slides of presentation performed at Ciklum Games Saturday conference

Published in: Education
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
567
On SlideShare
0
From Embeds
0
Number of Embeds
80
Actions
Shares
0
Downloads
3
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

SVG in game development

  1. 1. SVG в разработкекомпьютерных игр: быть или не быть Юрийчук Павел BoosterMedia Ciklum
  2. 2. О себеВ Сиклуме с 2011 года в качестве Front end Mobilegames developerОпыт разработки: Flex/Actionscript/JavascriptПрошлое: Casino gamesТекущее: Casual GamesКонтакты:Skype: pavlo.yuriychuckEmail: pluccky@gmail.comFacebookTwitter
  3. 3. Теперешнее - Casual Games
  4. 4. Прошлое - Casino games
  5. 5. О чем наше представление● Игрушка● Примеры того что можно сделать● Какие есть альтернативы● О ролях в проекте: действующие лица марлезонского балета● О надеждах поговорим или почему же SVG● А что же может он●
  6. 6. И еще немного● О граблях● О кросс-платформенности● О скорости● О природе R&D● О бытие, или где стоит использовать SVG
  7. 7. Вступление. Задача● Dress-up игра с большим количеством экранов иэлементов user interfaceМного графики●● Хорошо бы сократить время и трудоресурсы наобработку графических ресурсовЕсть версия игры на flash●Мало времени на подгонку элементов и верстку●HTML5 – целевая платформа iOS & Android●
  8. 8. Как он выглядит● Игрушки! – Стрелялка – Логика – ТворениеСергеяПажинтова – Пасьянс – УчимгеографиюСША
  9. 9. Альтернативы● Рендерить FXG в Canvas● Bitmap graphics● Велосипеды
  10. 10. Вступление. Действующие лицаХудожник “золотые руки”●Флешер тимлид●Менеджер. Просто менеджер.●● Программист с флексовым прошлым иджаваскриптовым настоящим
  11. 11. Акт первый. Надежды● SVG Создан в 2001 году● Поддерживается почти всеми браузерами● Экспорт поддерживается многимиредакторами векторной графики● Хорошая интеграция с ECMAScript /JavaScript● Пользовательский интерфейс можноиспользовать сразу после того, как егонарисовал художник!
  12. 12. Акт второй. Поиски● Как встроить SVG в DOM:HTML5 Canvas Object−In-line SVG−● Как загрузить сам SVG:AJAX request, response type == xml−● Как пользоваться:Интерактивность, игра жеж−−Прогулки по воде или как найти нужный тегдокументе
  13. 13. Лирическое отступление #1● Что предлагает SVG – DOM GetElementByTagName, GetElementById(?), getAttrbuteNS/setAttrbuteNS, childNodes – JavaScript events – SMIL, JS animation, – CSS ;)● Что есть в Flash – UI tree, SetProperty/getProperty – Flash Events – Animation, keyFrames, transitions, paths, movie clip – CSS, Flex only ;)
  14. 14. Акт третий. ГраблиAdoptNode●GetElementById●CANVG●Анимацияивстроенныескрипты●Inkscape●
  15. 15. Акт четвертый. Кросс- платформенность● Не все операции внедрены одинаково, некторых вообще нет, смотри акт грабли.● Inline SVG только в андроиде и в десктоп-браузерах● IOS хорошо работает с Canvas●
  16. 16. Акт пятый. Быстрее● Пробовали сжимать SVG в ZIP и распаковывать JavaScript – Удобно – Канонично● Грузить все элементы одним SVG а потом резать на мелкие кусочки● Сжимать SVG на стороне сервера mod_deflateилиmod_gzip
  17. 17. Акт шестой.Прерванный полет R&D ● Bitmap быстрее ● CANVG поддерживает ограниченный набор SVG инструкций, сложные рисунки с трансформациями градиентов – не рисует ● IOS крешится при попытке распаковать 20kb zip, андроид и десктопные браузеры – как часы
  18. 18. Заключение. Где же все таки стоит использовать SVG● Интерактивные карты, не флеш, но кое что может● Карточные игры● Тетрис● Настольные игры – монополия● Общеедлянихвсех: – Мало анимации и она не интенсивная – Не мобильные браузеры – медленная отрисовка и грузит процессор – Не критично время загрузки ресурсов●

×