Shaders Case Study - Hearthstone: Golden Cards
HTML-код
- Опубликовано: 15 сен 2024
- In this video, we explore shader techniques for recreating the effects of Hearthstone's animated Golden Cards.
Support me on Patreon:
/ danmoran
Checkout more Artwork by Jeremy Chong:
mixppl.artstat...
Follow me on the Twittersphere:
/ danieljmoran
Get the Assets for this Video here:
drive.google.c...
Music:
Hearthstone, 2014
Peter McConnell, Jason Hayes, Glenn Stafford, Russell Brower
Pull up a Chair
Playing with a Full Deck
I really hope you continue to make these tutorials, they are absolutely brilliant.
I'm loving your series, really makes me wanna sit down a while and finally take the time it takes getting all this together. As a dev, shaders always were a bit hard to grasp, and even harder to master, so I'm mesmerized by your vids every single time. Thanks for your work, I'll try and drop by Patreon when I get a chance.
You have quickly become my favorite Unity tutorial creator! Keep up the excellent work!
I fucking love this serie, keep it up. I don't have much disposable money and never really backed anyone on Patreon but you are probably the first person I've ever considered backing. Shaders are the hardest thing to get into as a game developer and although I already knew how to write them, I've learned a lot already just from these case studies you've posted.
Great work as usual!
Would love to see your interpretation of (what I believe to be) cubemap window effects used in Overwatch, specifically on the shop windows in Kings Row. A flat texture that gives the effect of a 3D room behind the glass.
This channel is fantastic and you shouldn't stop making videos.
As a shader geek, I am really loving your videos. Thanks!
I would love to learn on how to make the actual normal textures, or rgb textures, alpha textures, etc. Also I would love to learn how to make displacement effects like an explosion heatwave or or a black hole suction distortion effect, etc. Thanks!
wat?! This is exactly the channel I needed.
That's simply... amazing bro. Thank You so much for these videos. I am learning ton of useful stuff here!
I will never stop being impressed by these shaders you make. Buuuuuut... you gotta take a drink before recording, man. you can hear how parched you are.
Yeah that and I screwed something up with my mic for this one. So many lip smacks/clicks! Sorry!
+Makin' Stuff Look Good its really not noticeable.
@@DanMoranGameDev unintentional asmr
Here some more tutorials in the same shader case:
ruclips.net/video/ipI6NukuKnU/видео.html
ruclips.net/video/XWHmknUZidA/видео.html
Awesome :) Love these videos. There is plenty of beginner tuts and technical reference material around, but far less material demonstrating how to actually apply "book knowledge" to produce cool things. I feel like these vids are joining up the right brain and left brain :)
you're a fucking beast, man! where did you go to school/learn all this stuff?
Mostly from a class in University. Awesome professor who taught a really hard but rewarding course on Graphics. Then just a lot of practice, forum threads, trial and error, etc.
You should design an online educational tutorial series for people to pay to learn - you'd make a fortune! Like Udemy has.
+Mee dont im too poor for that id be steam summer sales all over again
Any books that you'd recommend in particular?
great video! , there is another approach to masking by using a dedicated masking texture, and use each color channel as a mask, this is what Hearthstone does anyway
Great video! I think this series really awesome and enlightening mate!
GOLDEN LEGENDARY Pog
Man, I love you! Thank you
This video is amazing as usual but damn... that Tracer is OP ;)
big fan of your work man, great to see you here!
ruclips.net/video/IRsPheErBj8/видео.html
FeelsBadMan
That was for Dan, you're cool (probably).
she needs charge
Nice video but could you please use FBX instead of Max files?
Not everybody has Max installed or work on Windows :)
Amazing stuff as usual !
Just Awesome the way how you explain this matter
Anyone knows how to make the red/green map ?
Do you have a tool to generate the flow map you want? :(
Thanks
How can I make these different UV shapes that you used to scroll the noise texture?
man you are awesome, please keep making videos like this
I really love your videos, please keep making them :)
Excellent work, dude!
good job man!But I got a little problem about making the motion texture,how did you make the motion texture? I make a similar motion texture with red and green color,but it works terribly.
7:40 How did you make "wavy motion texture"? I expect it to be very difficult.
love your vids, wish you had choose Entomb card, its a pretty crazy one
Dude, Can you help me out? I try follow the exemple and it's works perfectly on unity editor and samsung s7, but when I try on moto X; for some reason the UV motion texture doesn't work, the effect texture stay static. Any idea?
Best channel on RUclips.
Awesome. I would like to learn how to do Moving Plaid shader. It's the effect you see in animation where the "texture" moves separately from the object. It's sometimes done with a cosmic kind of texture like in DCUO there is a Cosmic skin.
Hey Congratulations for your tutorials! Can you make a video about attack effect (red arrow)... and also any ideas how they manage cards to behave like that while they're in your hand? One card is behind the other and all together make a bow like shape...Are they scaling them down and then use animations? or it's pure code?
hi, i love this video and i tried to make a picture myself, but there are a lot of problems, when will you release this shader source code?
I also love ur shaders series
shader case study: ruclips.net/video/isl18AP36PA/видео.html
Super impressive
The thing is, the golden cards are being animated in after effects, not in a shader graph
Hi. I know this might be a stupid question, and i don't know if you will read this but well.
What do you use exactly to make the motion textures, and what does the black color on the texture do?
I make them in Photoshop where you can edit the individual RGBA channels. It's a bit of a pain in the ass right now so I'd like a better tool to make them. Check out Shadron which hopefully will release soon: ruclips.net/video/NefbthPVJAs/видео.html
Should let you progamatically author textures which would be sick.
The black in the textures just encodes a value of (0,0,0,0). You can encode that to mean whatever you want. I think in mine it means no motion? Or maybe sample down-left. I can't remember right now and need to redo this shader at some point anyway to reduce a lot of unnecessary texture samples :P
Just released a couple of days ago! :)
EDIT: I guess weeks, now lol
Is it possible to use scripts to dynamically enable and disable the effects layers? How might one do that if so?
The Editor extension included with the downloads does this by setting the keywords defined on the material. If you mean to do this at run time, you could include another Float value for each layer that indicates whether the layer is disabled/enabled by whether it's 0/1 (just straight up multiply the layers contribution by that value).
Then in script, you can use Material.SetFloat("Layer1Contribution", 0) to disable it , or something like that.
This is awesome!
This was great, thanks!
Does anyone know how to make the motion texture ? (Red Green)
Hey i have been following your series for quite a while now, it's all very educational and useful for me ! (I am a game developer too)
I just tried this effect today but i failed to recreate the foreground/background effect layer thingy through the texture's alpha channel's texture ( i am not really familiar with all these rgba stuff all the while). i tried to create my own texture and edit the alpha channel , but i failed to create a proper one, it wont create the foreground/background effect.
can you provide more help regarding this ? your help is much appreciated !
i misunderstood how it worked, i finally got it ! i editted the alpha channel of the distortion mask, how silly i am. then i finally guessed and tried to edit the main texture's alpha channel and got it working ! thanks !
Nice man... ty
You deserve way more subs.
super interesting video man
Entomb and Murloc Knight please! :D
moar moar moar
You are the best man, seriously....a big respect, anyway can you do shader case study on Trifox action adventure game, where they dissolve world when player behind.. thanks..all the best for you.
So basicly u can make the same thing in unity as u would do in after effects for example? The main reason they do this in unity cause the final file size is gonna be much smaller compare to animated image or video ?
okay, I know that this may be a tedious task but I'm at relative rock bottom experience with all and any of this so could you do a video that goes through "basics" and jargon in some detail so I can understand this a lot easier?
More basic than my shaders 101? Check that out first if you're looking to learn more!
totally have, still totally don't understand a lot about what you said in this video.
Can this be applied to layers? For example, "Foreground layer", sorting level "1"
Not sure what you mean. As it is now with additive blending only, sorting is irrelevant. If you implemented order-dependent blending, sorting could just be by layer number.
Sorry. I am new to Unity. I was thinking of using a replacement shader on a the camera with a texture. Then on the texture material apply a new shader Magic Card shader. Something like that. Then I can use effects for specific layers.
Thanks. Don't mind the question. I started to look over the shader and now working on one actually several.
You can see the app on Google Play Store as "Pure Land" by Protocol Seven the visuals and shaders are being made fore.
I have been watching several of your tutorials. In the app, during gameplay, you might notice, a updated Hearthstone Image Effect Shader(Layer effects can be triggered doing runtime), Surface shader (Moving grass and glowing plants), and Particle System (Drop effects). I probably want to add a cloud shader and sky.
I also supported you on Patreon. Thanks for the tutorials.
YES MORE!
some 2d water shaders would be cool.. some of the shaders in ori and the blind forest look fantastic!
where do I download this?
Couldn't you add something like:
float opacity = 0.5 + 0.5 * sin(time); wind_color *= opacity;
to your shader? This way the wind color pulsates, without the use of the unity animation system.
This is how I would do it in GLSL however, so I don't know if this applies to unity as well. For example: glslsandbox.com/e#33738.0
Sure, but then every single card would have opacity pulsing hard coded into it.
Ah that makes sense. My solution is indeed not very flexible (although it could be made more flexible if you were to pass some data to the shader, such as the frequency).
Awesome work!
can you use this but with transparent textures?
Certainly, just need to add the right blend mode.
How and where?
How to deactivate those animations?
thank you for ur sharing.
what if i tell you this cards use just a movie file not actual shader ?
I would tell you that is incorrect! Not only would that not be a scaleable solution for the hundreds of cards in the game, but it is easily disproved by the fact that the cards do not have seamless loop points (due to the various timings of animations be offset from one another). I've also spoken to one of the VFX artists on HS and she confirmed that my shader is quite close to what they use. In fact at the time of this video, they hadn't started using flow maps yet, though their color channel usage was more optimal than mine.
Cheers!
thank you !!!!
good shit
Dangit man, you really a master of reverse engineering
This is not reverse engineering. It's more like cloning
This is great ;)
Would these shaders be expensive by adding them on a mobile game ?
Considering Hearthstone's mobile version was made in the Unity Engine likely using a similar if not identical approach, it probably wouldn't be too taxing.
slimabob's got it right. I mentioned at the end you want to cut down on texture use and size as much as you can, and many of the motion textures I use are literally just 32x32 for memory reasons (and the bilinear filtering gives us some free blurring).
One of the biggest things Hearthstone does to be mobile friendly (in terms of GPU load) is use a as much opaque geometry as possible. The cards and portraits can all be opaque and avoid taxing mobile blends.
i wanna do a golden card, but i have 0 experience with this app.
wish i had these skills :(
at first i thought they just used a sprite animation for that
nice
Although I am not a patreon, Can I make a request?
In the game overwatch, the shields are outlined where it contacts the ground. (shown in the link below)
i.ytimg.com/vi/oqupHSwB7_w/maxresdefault.jpg
This is implemented on shaders and wondering how this would be accomplished.
is it free to use??
Yes. I'll be moving everything to GitHub soon and giving proper GNU licenses to make that clear. So for now just treat it like open source.
+Makin' Stuff Look Good Oh my god I Love you. best unity channel ever
Hi man, your channel is really great. I have yet to find someone else who's creating technical content with such artistic quality as well.
Sometime ago i asked the unity forums for a discussion on how to implement some effects with few responses. It's about achieving lightning effects similar to Ori And The Blind Forest, and how i imagined the workflow could be. Even if it doesn't incite you to make a video about it, would be nice to hear your input.
forum.unity3d.com/threads/how-could-one-implement-lightning-like-this-its-more-of-a-discussion-than-a-help-for-a-problem.406677/#post-2654883
Keep up with your great work!
For some reason when I open your version of the project, I just get this imgur.com/a/zvosj Im not sure what Im doing wrong
Ahh these assets are so old, not sure how I never caught this issue. I accidentally included the mesh I used for the card as a .max file instead of an fbx. If you swap out the mesh with the default unity quad you'll see something.
Of course, I didn't include the assets ripped from Hearthstone for legal reasons, so the important part of that project is really the shader itself, and less so the assets!
Awesome video ! I tried making those a while back and I used RGB values as separate masks on the same mask texture. It's way more optimized and even allows for effect textures to blend together to create even more effects by using yellow, pink, etc. Each effect texture is then applied only to Red, Green or Blue. Here's an official Hearthstone post talking about that tinyurl.com/HSjohnbriggs and here's my Magni remake using that technique tinyurl.com/magnirem
Hey they use four effect layers, so I got that part right! Yeah it looks like they use one mask texture's RGBA. Then I bet they use the Alpha of the base texture for distortion mask. They must use SOMETHING to define the motion of scrolling though, too many effects require a pinch or a curve.
Maybe those are also doubled up. EffectLayer 1 and 2 can share a texture, 3 and 4 can share one. Still probably sample fewer textures on average. Thanks for the link!
could you please make this tutorial???
how to make glowing outline like hearthstone.
the green glowing outline like in this photo below
image2.redbull.com/rbcom/010/2016-02-09/1331775750657_5/0010/1/550/366/5/mages-usually-rely-on-spell-damage-to-win-their-matches-in-blizzard-s-hearthstone-game.jpg
i would love that!!!
I'm struggling getting the base texture transparent with your Shader. :/ Any help?
Uh... i don't know man. I'm pretty sure these are made in after effects
He manages to mention a lot he has done, but in the same time to say nothing. He is like BlenderGuru, his videos aren't that good bec. he skips so much parts.