Slides of presentation performed at Ciklum Games Saturday conference

1. SVG в разработке
компьютерных игр: быть или
не быть
Юрийчук Павел
BoosterMedia
Ciklum

2. О себе
В Сиклуме с 2011 года в качестве Front end Mobile
games developer
Опыт разработки: Flex/Actionscript/Javascript
Прошлое: Casino games
Текущее: Casual Games
Контакты:
Skype: pavlo.yuriychuck
Email: pluccky@gmail.com
Facebook
Twitter

3. Теперешнее - Casual Games

4. Прошлое - Casino games

5. О чем наше
представление
●
Игрушка
●
Примеры того что можно сделать
●
Какие есть альтернативы
●
О ролях в проекте: действующие лица
марлезонского балета
●
О надеждах поговорим или почему же SVG
●
А что же может он
●

6. И еще немного
●
О граблях
●
О кросс-платформенности
●
О скорости
●
О природе R&D
●
О бытие, или где стоит использовать
SVG

7. Вступление. Задача
●
Dress-up игра с большим количеством экранов и
элементов user interface
Много графики
●
●
Хорошо бы сократить время и трудоресурсы на
обработку графических ресурсов
Есть версия игры на flash
●
Мало времени на подгонку элементов и верстку
●
HTML5 – целевая платформа iOS & Android
●

8. Как он выглядит
●
Игрушки!
– Стрелялка
– Логика
– ТворениеСергеяПажинтова
– Пасьянс
– УчимгеографиюСША

9. Альтернативы
●
Рендерить FXG в Canvas
●
Bitmap graphics
●
Велосипеды

10. Вступление.
Действующие лица
Художник “золотые руки”
●
Флешер тимлид
●
Менеджер. Просто менеджер.
●
●
Программист с флексовым прошлым и
джаваскриптовым настоящим

11. Акт первый. Надежды
●
SVG Создан в 2001 году
●
Поддерживается почти всеми браузерами
●
Экспорт поддерживается многими
редакторами векторной графики
●
Хорошая интеграция с ECMAScript /
JavaScript
●
Пользовательский интерфейс можно
использовать сразу после того, как его
нарисовал художник!

12. Акт второй. Поиски
●
Как встроить SVG в DOM:
HTML5 Canvas Object
−
In-line SVG
−
●
Как загрузить сам SVG:
AJAX request, response type == xml
−
●
Как пользоваться:
Интерактивность, игра жеж
−
−Прогулки по воде или как найти нужный тег
документе

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. Акт третий. Грабли
AdoptNode
●
GetElementById
●
CANVG
●
Анимацияивстроенныескрипты
●
Inkscape
●

15. Акт четвертый. Кросс-
платформенность
●
Не все операции внедрены
одинаково, некторых вообще нет,
смотри акт грабли.
●
Inline SVG только в андроиде и в
десктоп-браузерах
●
IOS хорошо работает с Canvas
●

16. Акт пятый. Быстрее
●
Пробовали сжимать SVG в ZIP и
распаковывать JavaScript
– Удобно
– Канонично
●
Грузить все элементы одним SVG а потом
резать на мелкие кусочки
●
Сжимать SVG на стороне сервера
mod_deflateилиmod_gzip

17. Акт шестой.
Прерванный полет R&D
●
Bitmap быстрее
●
CANVG поддерживает ограниченный набор
SVG инструкций, сложные рисунки с
трансформациями градиентов – не рисует
●
IOS крешится при попытке распаковать 20kb
zip, андроид и десктопные браузеры – как
часы

18. Заключение. Где же все таки
стоит использовать SVG
●
Интерактивные карты, не флеш, но кое что может
●
Карточные игры
●
Тетрис
●
Настольные игры – монополия
●
Общеедлянихвсех:
– Мало анимации и она не интенсивная
– Не мобильные браузеры – медленная
отрисовка и грузит процессор
– Не критично время загрузки ресурсов
●