Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Из чего же, из чего же…Графика	           Программинг	       Геймдизайн	  
Что первым увидит игрок?
Чего НЕ увидит игрок?
Что такое Осада!
Про что наша игра?
Задачи, которые стоят перед графикой• 	  Зрелищность	  • 	  Оригинальность	  • 	  Концептуальность	  
Вдохновленный сценарист
Безумно крутой художник
Суровый продюсер
Каков наш план, господа?
Гайд по материалам и палитре цветов
Гайд по созданию персонажей
Гайд по созданию архитектуры
Гайд по созданию объектов антуража
Гайд по созданию ландшафта
Что дальше?
Схема создания графикиКонцептим	                  Моделим	                                Текстурим	                      ...
Ловушки это…
Реальная логика
Реальный опыт
Эффектный урон
Враги это…
Мясо с характером
Красивая смерть
Что дальше?
Графика игры с технической точки зренияС	  технической	  точки	  зрения	  графика	  игры	  «Осада!»	  это	  –	  	  2D	  ра...
Технические ограниченияПодобный	  формат	  графики	  накладывает	  ряд	  ограничений	  на	  объем	  графических	  файлов	 ...
Технические ограничения«Большой	  фрейм»	  анимации	  помимо	  негативного	  эффекта	  на	  объем	  конечного	  файла,	  у...
Технические ограничения15	  FPS	  30	  FPS	  60	  FPS	         Анимация	  на	  основе	  спрайтлиста	  с	  высокой	  частот...
Технические ограниченияЗначительные	  ограничения	  на	  количество	  «стейтов»	  анимации.	  Сложный	  выбор	  -­‐	  «дол...
Требования предъявляемые к «картинке»Основная	  задача	  –	  сделать	  картинку	  максимально	  эффектной,	  а	  это	  зна...
«Плавность» картинкиВопрос	  «плавности»	  картинки	  напрямую	  связан	  с	  частотой	  кадров	  в	  секунду.	  	  	  • 	...
«Плавность» картинкиИспользуем	  несколько	  фреймрейтов.	                     60	  FPS	                           30	  FP...
Анимация игровых объектовВ	  игре	  можно	  выделить	  две	  основные	  группы	  анимированных	  объектов:	  	  • 	  Объек...
Анимация объектов архитектурыОптимизация:	  • 	  Двухслойная	  анимация	  (слой	  фона	  +	  слой	  анимированных	  объект...
Анимация объектов архитектурыОсобенности:	  • 	  Большое	  количество	  стейтов	  анимации	  • 	  8	  «направлений»	  аним...
Формат анимационных файловФормат	  на	  основе	  текстурных	  атласов	  vs.	  старый	  добрый	  MovieClip	  	  Выбор	  был...
Структура анимационных файловДля	  каждого	  анимационного	  ресурса	  определен	  фиксированный	  набор	  возможных	  «ст...
Инструмент для сборки анимацийТребования	  к	  инструменту:	  • 	  Возможность	  работы	  с	  файловой	  системой	  и	  Fl...
Анимация эффектовЗадачи:	  • 	  Создание	  яркой	  и	  насыщенной	  картинки	  • 	  Смещение	  акцентов	  с	  погрешностей...
Примеры анимации эффектовЭффект	  взрыва	  для	  ловушек	  «Бочка	  с	  порохом»	  и	  «Колыбель	  огня»	  
Примеры анимации эффектов   Эффект	  для	  заклинания	  «Ледяные	  иглы»	  Итог:	  • 	  Получили	  увеличение	  общей	  пл...
Гоу Rocket Jump,    Я создал!                	  Делайте	  хорошие	  игры	  с	  нами	     wanted@rocketjump.ru	  
 Rocket Jump: Рецепты игровой графики Rocket Jump
Upcoming SlideShare
Loading in …5
×

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

4,523 views

Published on

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

  • Be the first to comment

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

  1. 1. Из чего же, из чего же…Графика   Программинг   Геймдизайн  
  2. 2. Что первым увидит игрок?
  3. 3. Чего НЕ увидит игрок?
  4. 4. Что такое Осада!
  5. 5. Про что наша игра?
  6. 6. Задачи, которые стоят перед графикой•   Зрелищность  •   Оригинальность  •   Концептуальность  
  7. 7. Вдохновленный сценарист
  8. 8. Безумно крутой художник
  9. 9. Суровый продюсер
  10. 10. Каков наш план, господа?
  11. 11. Гайд по материалам и палитре цветов
  12. 12. Гайд по созданию персонажей
  13. 13. Гайд по созданию архитектуры
  14. 14. Гайд по созданию объектов антуража
  15. 15. Гайд по созданию ландшафта
  16. 16. Что дальше?
  17. 17. Схема создания графикиКонцептим   Моделим   Текстурим   Анимируем   Рендерим  и   добавляем  эффекты  
  18. 18. Ловушки это…
  19. 19. Реальная логика
  20. 20. Реальный опыт
  21. 21. Эффектный урон
  22. 22. Враги это…
  23. 23. Мясо с характером
  24. 24. Красивая смерть
  25. 25. Что дальше?
  26. 26. Графика игры с технической точки зренияС  технической  точки  зрения  графика  игры  «Осада!»  это  –    2D  растровая  графика,  с  большим  количеством  анимированных  на  спрайтлистах  объектов.  
  27. 27. Технические ограниченияПодобный  формат  графики  накладывает  ряд  ограничений  на  объем  графических  файлов  и  производительность:    •   Размер  фрейма  анимации  •   Количество  кадров  для  анимации  на  спрайтлистах  •   Количество  «стейтов»  анимации    
  28. 28. Технические ограничения«Большой  фрейм»  анимации  помимо  негативного  эффекта  на  объем  конечного  файла,  увеличивает  количество  «перекрываемых»  областей,  что  в  конечном  итоге  отрицательно  сказывается  на  производительности.  
  29. 29. Технические ограничения15  FPS  30  FPS  60  FPS   Анимация  на  основе  спрайтлиста  с  высокой  частотой  кадров  в  секунду   выглядит  отлично,  но  существенно  увеличивает  объем  файлов  анимации  
  30. 30. Технические ограниченияЗначительные  ограничения  на  количество  «стейтов»  анимации.  Сложный  выбор  -­‐  «долгозагружаемая»  разнообразная  или  «легкая»  и  однотипная  картинка.  
  31. 31. Требования предъявляемые к «картинке»Основная  задача  –  сделать  картинку  максимально  эффектной,  а  это  значит  что  она  должна  удовлетворять  следующим  требованиям:    •   Плавная  анимация  •   Богатый  набор  анимаций  •   Выразительные  эффекты  •   Малый  объем  загружаемой  графики  
  32. 32. «Плавность» картинкиВопрос  «плавности»  картинки  напрямую  связан  с  частотой  кадров  в  секунду.      •   С  одной  стороны,  чем  выше  частота  кадров,  тем  более  плавным  выглядит  происходящее  все  на  экране.  •   С  другой  стороны,  увеличение  частоты  кадров  существенно  сказывается  на  объеме  файлов  анимации.  
  33. 33. «Плавность» картинкиИспользуем  несколько  фреймрейтов.   60  FPS   30  FPS  •   60  FPS  основной  фреймрейт  приложения,  используется  для  программной  анимации:  анимация  элементов  интерфейса,  перемещение  персонажей  в  сцене  и  т.д.  •   30  FPS  используется  для  анимации  спрайтлистов  •   15  FPS  используется  в  особых  случаях  
  34. 34. Анимация игровых объектовВ  игре  можно  выделить  две  основные  группы  анимированных  объектов:    •   Объекты  архитектуры  и  окружения  •   Анимация  персонажей  
  35. 35. Анимация объектов архитектурыОптимизация:  •   Двухслойная  анимация  (слой  фона  +  слой  анимированных  объектов)  •   Дополнительная  разбивка  слоя  анимации  на  несколько  слоев  на  этапе  сборки  ресурсов  •   Каждое  «направление»  выделяется  в  отдельный  файл  
  36. 36. Анимация объектов архитектурыОсобенности:  •   Большое  количество  стейтов  анимации  •   8  «направлений»  анимации  •   Неудобство  разбиения  ресурса  на  отдельные  файлы  Оптимизируем  ресурс:  •   Обрезка  кадра  до  минимальных  размеров  •   «Зеркалирование»  направлений  •   «Ручной»  подбор  анимаций  в  каждом  конкретном  случае,  без  потери  общего  богатства  картинки  
  37. 37. Формат анимационных файловФормат  на  основе  текстурных  атласов  vs.  старый  добрый  MovieClip    Выбор  был  сделан  в  сторону  MovieClip:  •   fla-­‐файл  позволяет  «ручной  тюннинг»  объекта  анимации  •   MovieClip  уже  представляет  удобный  API  для  проигрывания  последовательности  кадров  
  38. 38. Структура анимационных файловДля  каждого  анимационного  ресурса  определен  фиксированный  набор  возможных  «стейтов»,  при  этом  при  необходимости  для  двух  и  более  стейтов  могут  быть  использованы  одни  и  те  же  ресурсы    Примеры  повторного  использования  ресурсов:  •   Анимация  врагов  для  туториала  •   Анимация  «редких»  врагов  
  39. 39. Инструмент для сборки анимацийТребования  к  инструменту:  •   Возможность  работы  с  файловой  системой  и  Flash  IDE  •   Удобство  и  скорость  сборки  анимационных  файлов  •   Возможность  на  этапе  сборки  просмотреть,  что  получиться  в  итоге  •   Желательно  «все  в  одном»  Решение  -­‐  air-­‐приложение  с  экспортом  ресурса  в  xfl-­‐формат,  с  последующей  компиляцией  посредством  запуска  jsfl  через  командную  строку  
  40. 40. Анимация эффектовЗадачи:  •   Создание  яркой  и  насыщенной  картинки  •   Смещение  акцентов  с  погрешностей  «движка»  и  анимации  Особое  внимание  уделялось  эффектам  магии,  которую  использует  игрок.  Важно,  чтобы  эффекты  были  «эффектными»,  поэтому  анимация  эффектов  включает  в  себя  как  анимацию  на  спрайтлистах,  так  и  программную  составляющую.    Очень  важно,  чтобы  эффекты  не  приводили  к  деградации  производительности  
  41. 41. Примеры анимации эффектовЭффект  взрыва  для  ловушек  «Бочка  с  порохом»  и  «Колыбель  огня»  
  42. 42. Примеры анимации эффектов Эффект  для  заклинания  «Ледяные  иглы»  Итог:  •   Получили  увеличение  общей  площади  эффекта,  что  повысило  внешнюю  привлекательность,  при  этом  не  получили  увеличения  объема  анимационного  файла  •   Скрыли  резкий  переход  анимации  с  одного  слоя  на  другой    
  43. 43. Гоу Rocket Jump, Я создал!  Делайте  хорошие  игры  с  нами   wanted@rocketjump.ru  

×