[Shaders] Gwent Parallax Card Mockup Sketch

Hello!

I’ve been learning about shaders using Ben Cloward’s amazing series of UE4 materials tutorials and I’ve also been playing a bit of Gwent in my downtime. I love the art in that game, and I really like the neat parallaxing effect the premium cards have. Here is an example:

Inspecting the card and dragging the mouse around reveals the parallax effect. It’s a really needless but cool effect that I cant get enough of. So, using what I have learned so far, I attempted to do a mock up in UE4’s material editor just to see if I could get the basics together.

I built a card mesh in blender, kicked out the UVs to PS, made a quick border, and pulled some random stuff from the web for background and foreground assets. After throwing them all into UE4, this is what I came up with for a base material:

After that I threw in a parallax setup that I learned from one of the tutorials I mentioned, which you can see here:

This node was duplicated thrice and plugged into the UVs node of the background, and two foreground items. I set the depth of them to 75, 50, and 25 respectively, to give it a good depth, and here is the final result:

I’m really happy that I managed to reverse engineer some things I have learned to make this work!

Issues/Questions/Musings:

  • I had a heck of a time trying to get the alpha channels of these textures to get along, and I think the way I have it is kind of slap dash, but I currently don’t have the know how of what random material node I might use to layer texture samples on top of each other properly.
  • Gwent uses full on animations which makes me think that they record the animations and use those in lieu of still images like I have used here.
  • I just learned how to make material functions, and I’m going to make one for that parallax setup.

Thanks for reading! I would love to hear any feedback on the setup, or what you would do differently!

5 Likes