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

Original author: Junxue Li / Цзюньсюэ Ли
  • Translation
  • Tutorial
Во многих типах игр, не только стратегических, у вас есть участок земли, и на нём нужно что-то строить. Знакомая схема, не правда ли?

image

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

Но что, если вы хотите более тонкие анимации, чтобы было видно, как здание постепенно растёт к небу?

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

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

Шаг первый. Делаем стройматериалы.


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

image

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

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

image

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

Шаг второй. Делаем анимацию.


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

image

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



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



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



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

image

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

image

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

image



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

Similar posts

Ads
AdBlock has stolen the banner, but banners are not teeth — they will be back

More

Comments 19

    +22
    Ну да, проще простого! :)
      +55
      «Как нарисовать сову» :)
        +15
        осциллограф
        +6
        Так просто, пойду нарисую, чо.
          +2
          Теперь ко всем 5-и стадиям надо прикрутить анимацию)) чтобы не выглядело статичной картинкой, а было какое-то движение
            +4
            Ну да. Хотя бы КСМ, тыкающий туда-сюда сварочным аппаратом.
              +3
              Именно КСМ, безотносительно к сеттингу игры. Сделать его не тким заментым, поменьше – будет пасхалочка.
            +28
            <занудамод on>
            
            Уберите и элементы фасада со строящихся зданий, никто никогда так не строит и очень режет по глазам когда здание на начальном этапе уже окрашено, остаклено и даже имеет часть букв в названии, очень хорошо видно на примере отеля, там где на предпоследнем этапе даже куски пальм видны.
            <занудамод off>
            
              +9
              Из-за отсутствия кармы не могу вам плюс поставить, но не понимаю за что вас минусуют, с вами полностью согласен, наличие фасада не только выглядит нереалистично, но это само по себе не страшно, игра все же, но фасад также на даёт отличить строящиеся здание от готового, на последним этапе строительства здание в процессе строительства визуально мало чем отличается готово, что здорово может путать игрока.
                +5
                В тоже время 2 одновременно строящихся рядом здания без фасада будет крайне сложно отличить друг-от друга
                  +1
                  Извечная иллюстрация наглядности свойственная казуальным проектам, которая надо сказать, заметно уменьшает количество затрат при изготовлении.
                +1
                Пост называется «как делать простые анимации строительства». Перечисленное вами должно присутствовать в серьёзных проектах. Способ из поста подойдёт для начального этапа разработки, а потом уже эти анимации можно заменить с учётом всех деталей. Или оставить так, если разрабатывается мелкая игра.
                  +1
                  Это перевод=) Но с вами согласен, убрать бы хорошо. Наверное, в настоящих проектах автор так и делает, а эти картинки — только для статьи.
                  +7
                  Когда-то делал похожую штуку.
                  Gif-ка

                    +19
                    Эти ребята умели экономить на анимации строительства:

                    image
                      +27
                      <оффтоп>
                      Как же задолбали «книжные» сноски[1] в вебе. Веб-сайт это не страница книги, где сноска всегда в самом низу на одном и том же месте. Серьезно, прокрутить три экрана, чтоб увидеть одну строку текста? Что мешало вместо сноски вписать этот текст там же в скобках?.. И ладно в этой статье одна сноска, а если их 15? Заставлять читателя крутить страницу туда-сюда — издевательство. Это не книга, где достаточно просто перевести взгляд.
                      Простите, вроде бы мелочь, но когда такие сноски в вебе всюду — лично меня это порядочно раздражает.
                      Важная информация
                       
                       
                       
                       
                       
                       
                       
                        
                       
                       
                        
                       
                       
                        
                       
                       
                        
                       
                       
                        
                       
                       
                        
                       
                       
                        
                       
                       
                        
                       
                       
                        
                       
                       
                        
                       
                       
                        
                       
                       
                        
                       
                       
                        
                       
                       
                        
                       
                       
                       
                       
                       
                       
                        
                       
                       
                        
                       
                       
                        
                       
                       
                        
                       
                       
                        
                       
                       
                        
                       
                       
                        
                       
                       
                        
                       
                       
                        
                       
                       
                        
                       
                       
                        
                       
                       
                        
                       
                       
                        
                       
                       
                        
                       
                       
                        
                       
                       
                        
                       
                       
                        
                       
                       
                        
                       
                       
                        
                       
                       
                        
                       
                       
                        
                       
                       
                        
                       
                       
                       
                      Сноска — примечание, помещаемое внизу полосы или в конце текста.

                      </оффтоп>
                        0
                        У Вас у гостиницы левая колонна меняет угол во время анимации.

                        Я так понимаю, что лучше всего делать такие рендеры без перспективы в строгой изометрической проекции, тогда этого можно будет избежать.
                          +1
                          Жалко, что больше никто как в Knights & Merchants не делает… (собственно строительство с 2:30, специально видео не искал, так что сильно не пинайте)
                            +2
                            Ну почему? В Settlers делают. И что характерно, делали задолго до K&M.

                          Only users with full accounts can post comments. Log in, please.