Из чего же, из чего же…
Графика Программинг Геймдизайн
Что первым увидит игрок?
Чего НЕ увидит игрок?
Что такое Осада!
Про что наша игра?
Задачи, которые стоят перед графикой
• Зрелищность • Оригинальность • Концептуальность
Вдохновленный сценарист
Безумно крутой художник
Суровый продюсер
Каков наш план, господа?
Гайд по материалам и палитре цветов
Гайд по созданию персонажей
Гайд по созданию архитектуры
Гайд по созданию объектов антуража
Гайд по созданию ландшафта
Что дальше?
Схема создания графики
Концептим
Моделим
Текстурим
Анимируем
Рендерим и добавляем эффекты
Ловушки это…
Реальная логика
Реальный опыт
Эффектный урон
Враги это…
Мясо с характером
Красивая смерть
Что дальше?
Графика игры с технической точки зрения
С технической точки зрения графика игры «Осада!» это – 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 через командную строку
Анимация эффектов
Задачи: • Создание яркой и насыщенной картинки • Смещение акцентов с погрешностей «движка» и анимации
Особое внимание уделялось эффектам магии, которую использует игрок. Важно, чтобы эффекты были «эффектными», поэтому анимация эффектов включает в себя как анимацию на спрайтлистах, так и программную составляющую. Очень важно, чтобы эффекты не приводили к деградации производительности
Примеры анимации эффектов
Эффект взрыва для ловушек «Бочка с порохом» и «Колыбель огня»
Примеры анимации эффектов
Эффект для заклинания «Ледяные иглы»
Итог: • Получили увеличение общей площади эффекта, что повысило внешнюю привлекательность, при этом не получили увеличения объема анимационного файла • Скрыли резкий переход анимации с одного слоя на другой