44

Rocket Jump: Рецепты игровой графики Rocket Jump

Embed Size (px)

DESCRIPTION

Визитной карточкой наших игр является превосходная графика. Мы с большим вниманием относимся к этой составляющей игры и готовы поделиться своим опытом, рассказав обо всех этапах изготовления спрайтовой графики. Мы затронем все аспекты – от концепта и анимации до вставки графики в игру. Поговорим о технических особенностях и способах оптимизации графического контента, расскажем об инструментарии, а также об отличиях в работе над различными типами объектов, над персонажами и игровыми локациями. В основе доклада лежит опыт создания проекта “Осада!”.

Citation preview

Page 1: Rocket Jump: Рецепты игровой графики Rocket Jump
Page 2: Rocket Jump: Рецепты игровой графики Rocket Jump

Из чего же, из чего же…

Графика   Программинг   Геймдизайн  

Page 3: Rocket Jump: Рецепты игровой графики Rocket Jump

Что первым увидит игрок?

Page 4: Rocket Jump: Рецепты игровой графики Rocket Jump

Чего НЕ увидит игрок?

Page 5: Rocket Jump: Рецепты игровой графики Rocket Jump

Что такое Осада!

Page 6: Rocket Jump: Рецепты игровой графики Rocket Jump

Про что наша игра?

Page 7: Rocket Jump: Рецепты игровой графики Rocket Jump

Задачи, которые стоят перед графикой

•   Зрелищность  •   Оригинальность  •   Концептуальность  

Page 8: Rocket Jump: Рецепты игровой графики Rocket Jump

Вдохновленный сценарист

Page 9: Rocket Jump: Рецепты игровой графики Rocket Jump

Безумно крутой художник

Page 10: Rocket Jump: Рецепты игровой графики Rocket Jump

Суровый продюсер

Page 11: Rocket Jump: Рецепты игровой графики Rocket Jump

Каков наш план, господа?

Page 12: Rocket Jump: Рецепты игровой графики Rocket Jump

Гайд по материалам и палитре цветов

Page 13: Rocket Jump: Рецепты игровой графики Rocket Jump

Гайд по созданию персонажей

Page 14: Rocket Jump: Рецепты игровой графики Rocket Jump

Гайд по созданию архитектуры

Page 15: Rocket Jump: Рецепты игровой графики Rocket Jump

Гайд по созданию объектов антуража

Page 16: Rocket Jump: Рецепты игровой графики Rocket Jump

Гайд по созданию ландшафта

Page 17: Rocket Jump: Рецепты игровой графики Rocket Jump

Что дальше?

Page 18: Rocket Jump: Рецепты игровой графики Rocket Jump

Схема создания графики

Концептим  

Моделим  

Текстурим  

Анимируем  

Рендерим  и  добавляем  эффекты  

Page 19: Rocket Jump: Рецепты игровой графики Rocket Jump

Ловушки это…

Page 20: Rocket Jump: Рецепты игровой графики Rocket Jump

Реальная логика

Page 21: Rocket Jump: Рецепты игровой графики Rocket Jump

Реальный опыт

Page 22: Rocket Jump: Рецепты игровой графики Rocket Jump

Эффектный урон

Page 23: Rocket Jump: Рецепты игровой графики Rocket Jump

Враги это…

Page 24: Rocket Jump: Рецепты игровой графики Rocket Jump

Мясо с характером

Page 25: Rocket Jump: Рецепты игровой графики Rocket Jump

Красивая смерть

Page 26: Rocket Jump: Рецепты игровой графики Rocket Jump

Что дальше?

Page 27: Rocket Jump: Рецепты игровой графики Rocket Jump

Графика игры с технической точки зрения

С  технической  точки  зрения  графика  игры  «Осада!»  это  –    2D  растровая  графика,  с  большим  количеством  анимированных  на  спрайтлистах  объектов.  

Page 28: Rocket Jump: Рецепты игровой графики Rocket Jump

Технические ограничения

Подобный  формат  графики  накладывает  ряд  ограничений  на  объем  графических  файлов  и  производительность:    •   Размер  фрейма  анимации  •   Количество  кадров  для  анимации  на  спрайтлистах  •   Количество  «стейтов»  анимации    

Page 29: Rocket Jump: Рецепты игровой графики Rocket Jump

Технические ограничения

«Большой  фрейм»  анимации  помимо  негативного  эффекта  на  объем  конечного  файла,  увеличивает  количество  «перекрываемых»  областей,  что  в  конечном  итоге  отрицательно  сказывается  на  производительности.  

Page 30: Rocket Jump: Рецепты игровой графики Rocket Jump

Технические ограничения

Анимация  на  основе  спрайтлиста  с  высокой  частотой  кадров  в  секунду  выглядит  отлично,  но  существенно  увеличивает  объем  файлов  анимации  

15  FPS  

30  FPS  

60  FPS  

Page 31: Rocket Jump: Рецепты игровой графики Rocket Jump

Технические ограничения

Значительные  ограничения  на  количество  «стейтов»  анимации.  Сложный  выбор  -­‐  «долгозагружаемая»  разнообразная  или  «легкая»  и  однотипная  картинка.  

Page 32: Rocket Jump: Рецепты игровой графики Rocket Jump

Требования предъявляемые к «картинке»

Основная  задача  –  сделать  картинку  максимально  эффектной,  а  это  значит  что  она  должна  удовлетворять  следующим  требованиям:    •   Плавная  анимация  •   Богатый  набор  анимаций  •   Выразительные  эффекты  •   Малый  объем  загружаемой  графики  

Page 33: Rocket Jump: Рецепты игровой графики Rocket Jump

«Плавность» картинки

Вопрос  «плавности»  картинки  напрямую  связан  с  частотой  кадров  в  секунду.      •   С  одной  стороны,  чем  выше  частота  кадров,  тем  более  плавным  выглядит  происходящее  все  на  экране.  •   С  другой  стороны,  увеличение  частоты  кадров  существенно  сказывается  на  объеме  файлов  анимации.  

Page 34: Rocket Jump: Рецепты игровой графики Rocket Jump

«Плавность» картинки

Используем  несколько  фреймрейтов.  

•   60  FPS  основной  фреймрейт  приложения,  используется  для  программной  анимации:  анимация  элементов  интерфейса,  перемещение  персонажей  в  сцене  и  т.д.  •   30  FPS  используется  для  анимации  спрайтлистов  •   15  FPS  используется  в  особых  случаях  

30  FPS  60  FPS  

Page 35: Rocket Jump: Рецепты игровой графики Rocket Jump

Анимация игровых объектов

В  игре  можно  выделить  две  основные  группы  анимированных  объектов:    •   Объекты  архитектуры  и  окружения  •   Анимация  персонажей  

Page 36: Rocket Jump: Рецепты игровой графики Rocket Jump

Анимация объектов архитектуры

Оптимизация:  •   Двухслойная  анимация  (слой  фона  +  слой  анимированных  объектов)  •   Дополнительная  разбивка  слоя  анимации  на  несколько  слоев  на  этапе  сборки  ресурсов  •   Каждое  «направление»  выделяется  в  отдельный  файл  

Page 37: Rocket Jump: Рецепты игровой графики Rocket Jump

Анимация объектов архитектуры

Особенности:  •   Большое  количество  стейтов  анимации  •   8  «направлений»  анимации  •   Неудобство  разбиения  ресурса  на  отдельные  файлы  

Оптимизируем  ресурс:  •   Обрезка  кадра  до  минимальных  размеров  •   «Зеркалирование»  направлений  •   «Ручной»  подбор  анимаций  в  каждом  конкретном  случае,  без  потери  общего  богатства  картинки  

Page 38: Rocket Jump: Рецепты игровой графики Rocket Jump

Формат анимационных файлов

Формат  на  основе  текстурных  атласов  vs.  старый  добрый  MovieClip    Выбор  был  сделан  в  сторону  MovieClip:  •   fla-­‐файл  позволяет  «ручной  тюннинг»  объекта  анимации  •   MovieClip  уже  представляет  удобный  API  для  проигрывания  последовательности  кадров  

Page 39: Rocket Jump: Рецепты игровой графики Rocket Jump

Структура анимационных файлов

Для  каждого  анимационного  ресурса  определен  фиксированный  набор  возможных  «стейтов»,  при  этом  при  необходимости  для  двух  и  более  стейтов  могут  быть  использованы  одни  и  те  же  ресурсы    Примеры  повторного  использования  ресурсов:  •   Анимация  врагов  для  туториала  •   Анимация  «редких»  врагов  

Page 40: Rocket Jump: Рецепты игровой графики Rocket Jump

Инструмент для сборки анимаций

Требования  к  инструменту:  •   Возможность  работы  с  файловой  системой  и  Flash  IDE  •   Удобство  и  скорость  сборки  анимационных  файлов  •   Возможность  на  этапе  сборки  просмотреть,  что  получиться  в  итоге  •   Желательно  «все  в  одном»  

Решение  -­‐  air-­‐приложение  с  экспортом  ресурса  в  xfl-­‐формат,  с  последующей  компиляцией  посредством  запуска  jsfl  через  командную  строку  

Page 41: Rocket Jump: Рецепты игровой графики Rocket Jump

Анимация эффектов

Задачи:  •   Создание  яркой  и  насыщенной  картинки  •   Смещение  акцентов  с  погрешностей  «движка»  и  анимации  

Особое  внимание  уделялось  эффектам  магии,  которую  использует  игрок.  Важно,  чтобы  эффекты  были  «эффектными»,  поэтому  анимация  эффектов  включает  в  себя  как  анимацию  на  спрайтлистах,  так  и  программную  составляющую.    Очень  важно,  чтобы  эффекты  не  приводили  к  деградации  производительности  

Page 42: Rocket Jump: Рецепты игровой графики Rocket Jump

Примеры анимации эффектов

Эффект  взрыва  для  ловушек  «Бочка  с  порохом»  и  «Колыбель  огня»  

Page 43: Rocket Jump: Рецепты игровой графики Rocket Jump

Примеры анимации эффектов

Эффект  для  заклинания  «Ледяные  иглы»  

Итог:  •   Получили  увеличение  общей  площади  эффекта,  что  повысило  внешнюю  привлекательность,  при  этом  не  получили  увеличения  объема  анимационного  файла  •   Скрыли  резкий  переход  анимации  с  одного  слоя  на  другой    

Page 44: Rocket Jump: Рецепты игровой графики Rocket Jump

Гоу Rocket Jump, Я создал!

 Делайте  хорошие  игры  с  нами  

[email protected]