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

2. Из чего же, из чего же…
Графика
Программинг
Геймдизайн

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

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

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

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

7. Задачи, которые стоят перед графикой
•
Зрелищность
•
Оригинальность
•
Концептуальность

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

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

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

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

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

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

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

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

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

17. Что дальше?

18. Схема создания графики
Концептим
Моделим
Текстурим
Анимируем
Рендерим
и
добавляем
эффекты

19. Ловушки это…

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

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

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

23. Враги это…

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

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

26. Что дальше?

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

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

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

30. Технические ограничения
15
FPS
30
FPS
60
FPS
Анимация
на
основе
спрайтлиста
с
высокой
частотой
кадров
в
секунду
выглядит
отлично,
но
существенно
увеличивает
объем
файлов
анимации

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

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

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

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

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

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

37. Анимация объектов архитектуры
Особенности:
•
Большое
количество
стейтов
анимации
•
8
«направлений»
анимации
•
Неудобство
разбиения
ресурса
на
отдельные
файлы
Оптимизируем
ресурс:
•
Обрезка
кадра
до
минимальных
размеров
•
«Зеркалирование»
направлений
•
«Ручной»
подбор
анимаций
в
каждом
конкретном
случае,
без
потери
общего
богатства
картинки

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

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

40. Инструмент для сборки анимаций
Требования
к
инструменту:
•
Возможность
работы
с
файловой
системой
и
Flash
IDE
•
Удобство
и
скорость
сборки
анимационных
файлов
•
Возможность
на
этапе
сборки
просмотреть,
что
получиться
в
итоге
•
Желательно
«все
в
одном»
Решение
-­‐
air-­‐приложение
с
экспортом
ресурса
в
xfl-­‐формат,
с
последующей
компиляцией
посредством
запуска
jsfl
через
командную
строку

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

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

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

44. Гоу Rocket Jump,
Я создал!
Делайте
хорошие
игры
с
нами
wanted@rocketjump.ru