[Перевод] Как делать простые анимации строительства в стратегических играх

Во многих типах игр, не только стратегических, у вас есть участок земли, и на нём нужно что-то строить. Знакомая схема, не правда ли? image

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

Но что, если вы хотите более тонкие анимации, чтобы было видно, как здание постепенно растёт к небу? Сейчас большинство аксонометрических[1] зданий — картинки, предварительно отрендеренные из 3D. Если, например, нам нужны 5 кадров анимации, значит, надо смоделировать пять стадий готовности, а затем отрендерить. Да, таким способом затратно.

Наша компания сделала для клиента около 40 таких пятикадровых анимаций. Мы поступили проще, потратив несколько дней на всё. Затраты совсем небольшие, и качество не страдает. Давайте посмотрим, как это у нас получилось.

Шаг первый. Делаем стройматериалы.Сначала надо сделать в 3D много разных стройматериалов — самых разных, какие можно придумать. Стены, колонны, балки, плиты — как на этой картинке.image

Эти стройматериалы надо отрендерить в 2D-картинку. Нечего и говорить: их надо рендерить с тем же углом камеры и освещением, что и готовые здания.

Всё должно быть в двух экземплярах — по осям нашей аксонометрической карты.

image

А теперь соберём все стройматериалы в один большой PSD, по предмету на слой.

Шаг второй. Делаем анимацию. Допустим, нам нужно построить небольшую гостиницу. Для начала рендерим гостиницу обычным образом.image

Дальнейшую работу ведём в Photoshop«е. Нам нужна анимация на 5 кадров. Значит, на каждом кадре стираем часть здания в соответствии со степенью готовности.

03df3ea4cc96473391c9a2832317deee.jpg

То, что мы стёрли, заполняем стройматериалами, полученными на первом шаге.

8948a2ddccbb4337b048fc2ebeb5fbf8.jpg

Расставляйте стройматериалы в соответствии с устройством здания, чтобы смотрелось правдоподобно. Например, если строится кинотеатр, в середине надо сделать большой зал.

75f9a0befabd4f6b8570b8027f6f8e53.jpg

Первый кадр — это просто план на земле. Последний — собственно здание. Готово!

image

Это решение можно приспособить к постройкам любой формы, не только к прямоугольным. Надо только немного искривить стройматериалы.

image

Знаю, получилось немного мультяшно, но это же для игр, верно?

image

[1] В оригинале «изометрических». Но мы-то видим не изометрию, а нечто другое — поэтому пишу «аксонометрия».

© Habrahabr.ru