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