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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Что дальше?

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

Концептим  

Моделим  

Текстурим  

Анимируем  

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

Ловушки это…

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

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

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

Враги это…

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

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

Что дальше?

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

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

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

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

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

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

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

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

15  FPS  

30  FPS  

60  FPS  

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

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

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

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

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

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

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

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

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

30  FPS  60  FPS  

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

wanted@rocketjump.ru