И чего люди только для варкрафта не придумают, лишь бы не делать игры на Unreal Engine(C)
Обзор возможностей
Всем привет, с вами кото-пеон Берги и сегодня мы украдём все анимированные рамки для аватарок из стима и будем использовать их как рамки для фреймов в нашем любимом варкрафте. Примерно, это будет похоже на вот это , но сначала посмотрим на сами рамки, красота?
Кросивое? тогда переходим дальше...
Приступаем к работе
После того как определились с выбором, скачиваем нужную гифку себе на или же просто копируем её URL
https://cdn.cloudflare.steamstatic.com/steamcommunity/public/images/items/967250/e569336754a329c7532c0aff0a8b961689a9d60c.png
И переходим на сервис
После загрузки изображения на сайт, его необходимо преобразовать в лист спрайтов, тут внимание, смотрим на количество кадров Frame
Если их количество <= 49 то есть меньше чем сетка 7 на 7, то используем Шаблон №1, что за шаблоны я расскажу дальше, если же >49, то используем Шаблон №2 и сетку ставим 10 на 10. В данном примере у нас всего 13 кадров поэтому используем сетку 7 на 7. И нажимает Convert to Sprite Sheet. Есть еще вариант с сеткой 13х13, она подходит когда кадров больше чем 100, но не больше 169, что покрывает подавляющее большинство рамок.
Если есть вот такое сообщение об ошибке - ничего страшного, жмём кнопку ещё раз, если вообще вам не нравится этот сервис можете хоть вручную в paint раскадровать гифку на 1 лист.
Получится примерно вот так вот
Получится примерно вот так вот
нажимаем сохранить, далее пока у нас картинка всё ещё в пнг формате, нужно привести её к виду, равному степени двойки, а то получилось 1568 на 448, увеличиваем размер полотна до 1568 на 1568, и масштабируем изображение до 512 на 512, или до 1024 на 1024, должно получится вот так
После сохранения, конвертируем текстуру в DDS или BLP, для статьи я буду конвертировать в BLP, чтобы материалы можно было использовать не только в рефордже, конечная текстура весит 105 килобайт, можно ещё меньше если сильнее сжать, но это уже на ваше усмотрение я бы сделал 1к текстуру dds и она бы весила 2 мегабайта, останется лишь настроить текстуру в шаблоне...
Шаблоны
№1 xgm.guru/files/100/280236/7x7sprite.mdx
№2 xgm.guru/files/100/280236/10x10sprite.mdx
№3 xgm.guru/files/100/280236/aganim_sprite.mdx и текстура xgm.guru/files/100/280236/aganim_13x13_sprite.blp (13х13)
№2 xgm.guru/files/100/280236/10x10sprite.mdx
№3 xgm.guru/files/100/280236/aganim_sprite.mdx и текстура xgm.guru/files/100/280236/aganim_13x13_sprite.blp (13х13)
Ставим в модели свою текстуру в одном единственном материале.
Шаблон номер 1 использует период кадров 100, значит нужно умножить количество кадров уменьшенное на 1 на 100
Получится 12 * 100 = 1200, ставим длительность анимации 1200 в модел эдиторе или мдлвисе
Получится 12 * 100 = 1200, ставим длительность анимации 1200 в модел эдиторе или мдлвисе
Если использовать шаблон номер 2, то период каждого кадра будет уже 75, соответственно нужно умножать количество кадров уменьшенное на один на 75,
а значит тогда будет 12 * 75
а значит тогда будет 12 * 75
от этих периодов зависит скорость воспроизведения анимации
в общем добиваемся плавной зацикленности
Важное примечание: иногда переход будет выглядеть немного с рывком, а это значит, что скорее всего анимации нужно быть на один кадр больше. Что бы вышла идеальная (насколько это возможно) плавность, необходимо сделать анимацию длиннее на один промежуток (допустим у нас смена кадра раз в 75 секунд и длительность анимации 2400, значит нужно сделать длительность анимации 2475) и скопировать самый первый кадр в самый последний. Так выйдет идеальный переход.
Как менять скорость анимации?
Для этого я ( Hate) сделал небольшую таблицу в экселе. Для начала выберите нужный формат во вкладке, а затем в строчку справа от "промежуток" поставьте цифру которая обозначает период смены кадров. 50 означает что кадры будут меняться каждые 50 милисекунд, 100 = 100 мсек или 0.1 секунды. 1000 = 1 секунда. чем меньше тем быстрее будет визуальная анимация. Все остальное менять не нужно. Затем копируете столько ячеек слева, сколько у вас кадров. В данном случае у нас 13 кадров, значит копируем все строчки с 1 по 13. Открываем магос модел эдитор, открываем менеджер анимаций текстур (texture animation) и заходим в "Перенос", удаляем все что было до этого и вставляем туда что бы там было так
жмем ок и балдеем
Файлик с формулами
Использование в игре
Как использовать? да как обычный стандартный спрайт. Примерно вот этим кодом
---@param model string
---@param scale real
---@param relative_to_frame framehandle
---@param relative_point_from framepointtype
---@param relative_point_to framepointtype
---@param offset_x real
---@param offset_y real
---@param parent framehandle
---@return framehandle
function CreateSprite(model, scale, relative_to_frame, relative_point_from, relative_point_to, offset_x, offset_y, parent)
local new_Frame = BlzCreateFrameByType("SPRITE", "justAName", parent, "WarCraftIIILogo", 0)
BlzFrameSetPoint(new_Frame, relative_point_from, relative_to_frame, relative_point_to, offset_x, offset_y)
BlzFrameSetSize(new_Frame, 1., 1.)
BlzFrameSetScale(new_Frame, scale)
BlzFrameSetModel(new_Frame, model, 0)
return new_Frame
end
Вот видосик, чтобы показать, что всё работает
Ред. Makeba
Ред. nazarpunk