SVG в разработке компьютерных игр : быть или не быть Юрийчук Павел BoosterMedia Ciklum
О себе В Сиклуме с 2011 года в качестве Front end Mobile games developer Опыт разработки : Flex/ Actionscript / Javascript...
Теперешнее - Casual Games
Прошлое - Casino games
О чем наше представление <ul><li>Игрушка </li></ul><ul><li>Примеры того что можно сделать </li></ul><ul><li>Какие есть аль...
И еще немного <ul><li>О граблях </li></ul><ul><li>О кросс-платформенности </li></ul><ul><li>О скорости </li></ul><ul><li>О...
Вступление . Задача <ul><li>Dress-up игра с большим количеством экранов и элементов user interface </li></ul><ul><li>Много...
Как он выглядит <ul><li>Игрушки ! </li></ul><ul><ul><li>Стрелялка </li></ul></ul><ul><ul><li>Логика </li></ul></ul><ul><ul...
Альтернативы <ul><li>Рендерить FXG в Canvas </li></ul><ul><li>Bitmap graphics </li></ul><ul><li>Велосипеды </li></ul>
Вступление. Действующие лица <ul><li>Художник “золотые руки” </li></ul><ul><li>Флешер тимлид </li></ul><ul><li>Менеджер. П...
Акт первый . Надежды <ul><li>SVG Создан в 2001 году </li></ul><ul><li>Поддерживается почти всеми браузерами </li></ul><ul>...
Акт второй. Поиски <ul><li>Как встроить SVG в DOM: </li></ul><ul><ul><ul><li>HTML5  Canvas Object </li></ul></ul></ul><ul>...
Лирическое отступление #1 <ul><li>Что предлагает SVG </li></ul><ul><ul><ul><li>DOM GetElementByTagName , GetElementById (?...
Акт третий. Грабли <ul><li>AdoptNode </li></ul><ul><li>GetElementById </li></ul><ul><li>CANVG </li></ul><ul><li>Анимация и...
Акт четвертый. Кросс-платформенность <ul><li>Не все операции внедрены одинаково , некторых вообще нет , смотри акт грабли ...
Акт пятый. Быстрее <ul><li>Пробовали сжимать SVG в ZIP и распаковывать JavaScript </li></ul><ul><ul><li>Удобно </li></ul><...
Акт шестой . Прерванный полет R&D <ul><li>Bitmap быстрее </li></ul><ul><li>CANVG поддерживает ограниченный набор SVG инстр...
Заключение. Где же все таки стоит использовать SVG <ul><li>Интерактивные карты , не флеш , но кое что может </li></ul><ul>...
Upcoming SlideShare
Loading in...5
×

Pavel yuriychuk svg in game development

560

Published on

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

  • Be the first to like this

No Downloads
Views
Total Views
560
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
5
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Pavel yuriychuk svg in game development

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

    Clipping is a handy way to collect important slides you want to go back to later.

×