SVG in game development

SVG в разработке
компьютерных игр: быть или
не быть

Юрийчук Павел
BoosterMedia
Ciklum

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

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

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

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

Вступление. Задача

●
Dress-up игра с большим количеством экранов и
элементов user interface
Много графики
●

●
Хорошо бы сократить время и трудоресурсы на
обработку графических ресурсов
Есть версия игры на flash
●

Мало времени на подгонку элементов и верстку
●

HTML5 – целевая платформа iOS & Android
●

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

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

Вступление.
Действующие лица
Художник “золотые руки”
●

Флешер тимлид
●

Менеджер. Просто менеджер.
●

●
Программист с флексовым прошлым и
джаваскриптовым настоящим

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

Акт второй. Поиски
●
Как встроить SVG в DOM:
HTML5 Canvas Object
−

In-line SVG
−

●
Как загрузить сам SVG:
AJAX request, response type == xml
−

●
Как пользоваться:
Интерактивность, игра жеж
−

−Прогулки по воде или как найти нужный тег
документе

Лирическое
отступление #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 ;)

Акт третий. Грабли
AdoptNode
●

GetElementById
●

CANVG
●

Анимацияивстроенныескрипты
●

Inkscape
●

Акт четвертый. Кросс-
платформенность

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

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

Акт шестой.
Прерванный полет R&D

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

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

SVG in game development

More Related Content

SVG in game development