1. http://www.hearthhead.com/card=281/argent-commander
  2. http://www.hearthhead.com/card=469/blood-imp

Кажется, анимация состоит из нескольких эффектов:

  • Системы частиц.
  • Затухание спрайтов внутри и снаружи / их вращение
  • Простая прокрутка текстур
  • Эффект искажения, очень заметный на мысе и волосах примера 1.
  • Вихревые эффекты дыма, свет в примере 1 и зелено-пурпурное свечение в примере 2.

Первые три элемента тривиальны, я хотел бы знать, как можно сделать последние два элемента. Может ли это быть сделано в реальном времени в игре, или это анимация с предварительной визуализацией?

Это, вероятно, предварительно записанные анимации, играемые в карты ..

У вас может быть больше шансов на сайте graphicdesign.stackexchange.com, который выглядит как Photoshop или AfterEffects, а не как рендер.

Меня больше всего интересует, можно ли достичь этих эффектов с помощью рендеринга в реальном времени. Таким образом, меня больше всего интересует код. Похоже, что консенсус заключается в том, что сам Hearthstone использует предварительно записанную анимацию. Что касается вашего второго вопроса, я не собираюсь реализовывать это в браузерной игре, но в iOS.

Я не знаю, насколько это актуально, но Даг ответил правильно

Я просто хотел добавить, что мне самому удалось воссоздать анимацию в точности так, как она встроена в игру, используя те же ресурсы, посмотрите здесь

precision highp float; uniform float uTime; uniform sampler2D uSampler0; uniform sampler2D uSampler1; uniform sampler2D uSampler2; uniform sampler2D uSampler3; uniform sampler2D uSampler4; uniform sampler2D uSampler5; varying vec2 texCoords; void main(void) float t = uTime; vec3 mask = texture2D(uSampler1,texCoords).rgb; vec4 img = texture2D(uSampler0,texCoords); img.rg*=1.1; vec2 flow = texture2D(uSampler3,texCoords).

gr; flow.y+=t*3.; vec4 plas = texture2D(uSampler2,flow*1.2) * mask.r; plas *= 15.5; plas *= vec4(0.239, 0.224,0.488,1.

Как создать свою карту для Хартстоуна.

); vec2 ct = texCoords; ct.y -=t*0.5; vec4 clouds = texture2D(uSampler4,ct*2.); float clouds_a = clouds.a; clouds *= 4.5; clouds *= vec4(0.275,0.23,0.161,1.

Читайте также:  Что такое таунт в Хартстоун

); clouds_a *= mask.b; img += clouds * mask.b; img += plas * mask.r ; img += (sin(t*15.)+1.

) * mask.g * vec4(0.239, 0.224,0.488,1.)*2.

; ct.x += t * 0.5; vec4 clouds_overall = texture2D(uSampler5,ct * 0.5); clouds_overall *= vec4(0.275,0.23,0.161,1.); gl_FragColor = img +clouds_overall; >

precision highp float; uniform float uTime; uniform sampler2D uSampler0; uniform sampler2D uSampler1; uniform sampler2D uSampler2; uniform sampler2D uSampler3; uniform sampler2D uSampler4; uniform sampler2D uSampler5; varying vec2 texCoords; void main(void) float t = uTime; vec2 tc = texCoords; tc.x-=t*2.; vec4 mask = texture2D(uSampler1,texCoords); float bump = texture2D(uSampler4,tc*0.5).

r; vec4 img = texture2D(uSampler0,vec2(texCoords.x,texCoords.y+bump* 0.055 * mask.g)); tc = texCoords; tc.x-=0.05; tc.y+= 0.05; vec2 flow = texture2D(uSampler3,tc).rg; flow.y+=t; flow.y*=2.

; vec4 plasma = texture2D(uSampler2,flow*1.5); plasma.rgb *= vec3(0.52,0.26,0.54); plasma *= 3.; flow = texture2D(uSampler5,texCoords).

rg; flow.g+=t; vec4 plasma2 = texture2D(uSampler2,flow); plasma2 *= 4.; plasma2.rgb *= vec3(0.52,0.26,0.54); gl_FragColor =img+plasma*mask.r+bump*mask.a*0.35+plasma2*mask.b; >

Это именно то, что я искал, спасибо! Где вы изучили эту технику, как она называется (плазма?) И есть ли какие-либо дополнительные ресурсы по ней (книги / статьи)?

Я на самом деле понял это сам, это похоже на морфинг вершин в 3D-рендеринге, но вместо этого вы играете сами с пикселями. В игре есть несколько различных техник, большинство из которых являются базовыми, и я думаю, что вы ищете, это называется Displacement Mapping, в основном это известно как использование текстуры для перемещения / смещения вершин, но здесь я использовал текстуру для сместите другую текстуру, чтобы получить эффект ветра.

Эй, Дэн! У вас есть исходные материалы, которые вы использовали, где-либо размещены? Ваши демонстрационные ссылки теперь неактивны, и машина обратного хода, похоже, не кэширует изображения. Я довольно долго писал ваш ответ, но никогда не тратил время на его изучение.

Woot! Я использовал httrack для сохранения файлов, те годы назад. Нашел их! С вашего разрешения я их где-нибудь опубликую или могу передать файлы, если у вас их больше нет, и вы можете сохранить их в репозитории или что-то в этом роде.

Читайте также:  Hearthstone сколько весит на ПК

Некоторые идеи приходят на ум, и их реализация будет полностью зависеть от движка, инструментов и, наконец, от работы и конвейера контента.

Спрайт анимация

  1. Создайте анимацию с помощью таких инструментов, как Photoshop и After Effects.
  2. Отобразить кадр за кадром в атлас (спрайт лист)
  3. Применить анимацию по коду
  4. Поверх карты визуализируйте макет карты, используя соответствующую маскировку или прозрачный фон, если это необходимо.

Видео анимация

  1. Создайте анимацию с помощью таких инструментов, как Photoshop и After Effects.
  2. Экспортируйте это видео в формат, читаемый игровым движком
  3. Воспроизвести анимацию по коду
  4. Визуализируйте макет карты в верхней части видео, используя при необходимости правильную маскировку или прозрачный фон.

In-Engine анимация

  1. Создайте все ресурсы для анимации, используя такие инструменты, как Photoshop
  2. Создайте модель карты внутри двигателя со всеми необходимыми ресурсами
  3. Анимируйте движок с помощью собственного редактора анимации и сохраните его
  4. Воспроизвести анимацию по коду при необходимости

Это три типа анимации, о которых я знаю и с которыми я работал. У каждого есть свои плюсы и минусы, и в этом конкретном случае я больше склонен к спрайту и видео анимации, потому что они менее интенсивно используют GPU.

В случаях, подобных этому, самый простой подход, вероятно, правильный.

  • Один из способов сделать это — просто использовать видео вместо текстуры. Это видео должно быть подготовлено заранее и должно быть зациклено.
  • Другой способ — сделать всю сцену «персонаж, частицы, движущийся мыс» визуализированной в буфер, который позже при рендеринге кадра будет использоваться вместо текстуры.

У меня нет никакого опыта в достижении этих двух решений в 3D-движке, но я думаю, что оба возможны в 2D-движке (думаю, я могу сделать эту работу, например, в MOAI).

Читайте также:  Hearthstone не заходит в учетную запись с телефона

Оба варианта 4 и 5 выполняются с помощью УФ-прокрутки текстуры по области, возможно, с сеткой на карте, которая слегка искажена (статическим способом). Кровавый черт, похоже, также имеет вторую текстуру, которая умножает первую текстуру и не прокручивает УФ.

В целом, это не дорогие эффекты. Они просто не так хороши, как выглядят на первый взгляд.

На что ссылаются 4 и 5?

«Вихревые эффекты дыма, свет в примере 1 и зелено-пурпурное свечение в примере 2». Я предполагаю, что эффект искажения — это либо постоянная анимация движущихся вершин, либо процедурная, изменяющая их во время выполнения. Или это может быть шейдер с смещением образца текстуры, введенный второй текстурой с УФ-прокруткой.

Источник: qastack.ru

PlayBlizzard.com

Как сделать свою карту Hearthstone.

Как сделать свою карту в hearthstone,со своей фоткой.
ссылка — http://hearthcards.net/?lang=ru
Подписывайтесь на мой канал,ставьте лайки,спасибо за просмотр всем удачи.

Click to rate this post!

[Total: 0 Average: 0 ]

Похожие посты

Как сделать 3D карту из игры Hearthstone Ссылка на группу с развёртками https://vk.com/club44392650 Моя страница — https://vk.com/zzzero007, будут вопросы по сборке, пишите)…

Как сделать карту из Hearthstone без доната и пыли | Своими руками Всем привет, в этом гайде мы попробуем сделать еще одну карту из игры Hearthstone. Лично…

Источник: playblizzard.com