Help with lighting for card game

Hi folks, I’m a total lighting noob in unreal. So bear with my noobness. I’ve been able to successfully make POC games in unreal, they visually look like crap and I’m now trying to get a grip of some techincal art and right now my focus is lighting.

Does anyone here know how to achieve a good lighting set for a card/board game in unreal engine? So in the game I’ve designed, I haven’t yet decided on an art style because I’m still learning how to do technical art in unreal engine and I want to get a foothold on some of the basics before I commit to any style so I know I can pull it off. But the game’s characters & visuals are heavily inspired by movies like Despicable Me and Bad Guys.

Please note all the art you see here is completely placeholder and not representative of anything. I’m just trying to learn lighting.

I would love to achieve good lighting found in games like Hearthstone, Marvel Snap, Pokemon TCG, etc. What I like about the lighting in these games is it shows off the art really well, it shows off the 3d effects, particle effects, emissive effects, and parallax tilt effects well. It doesn’t show any weird glares (like I have, see below).

I’ve been learning about lighting, and I did a few tutorials, but I’m not sure how best to apply this to a card/board game. Here is a lighting reference I was going with when making the below lighting rig. Not saying it’s correct, it’s just what I was referencing. I put 3 lights above the board facing down at various angles. I’ve tried tinkering with them a bit I’m not really sure what I’m doing. There seems to be a big glare and possibly some reflection. I’ve seen that I can do things like disable shadows to help flatten things out if that’s what I want. But I’m not sure what to do about the glare. See below

Test game board with a graphical background

Test game board with a plane background

I added those various materials to the board to help me see how the lighting behaves, they will be deleted.

3 overhead light setup

Does any of this at all look correct? Or would you recommend something different? Or how can I improve my current setup? So my next thing I was planning on doing is to read up more about lighting to see how I can tweak to get a desired lighting for my game.

Question: Is putting Images (card art) on a Widget within my (Actor) the right thing to do? Or should my images (card art) always be on a Material? I’ve read the glare can be fixed via changing materials but if my card art is on a widget maybe that won’t work for me? I don’t know if an actor’s material overwrites/overdraws what’s on the widget. I haven’t tried that yet. So far in all of my unreal POCs I’ve created cards as Actors that contain Widgets and the widget has an Image built into it. Is good or bad or any reason with regard to lighting?

Hey @SkankHunt1000!

Have you tried adjusting the roughness of the materials you’re working with? It goes from 0-1 (non-reflective to mirror sheen) and you should be able to just plug a single constant into the pin on the output if it doesn’t already have something there.

Hope that helps! Let us know how it goes once you get to give it a try! :slight_smile:

@Mind-Brain Good idea. So I was reading about that, but I ran into one part that confuses my noobness. It’s related to the Question I put in the OP. I’m using a widget to show some parts of the card (text, art, numbers, etc). Where do I apply the material to the card exactly? Because the widget’s Image component is what is display the card art itself. So does the material go onto the Actor? But right now the actor itself is pretty much nothing, the widget that lives on top of the actor is the only thing that’s really showing up. In some of my old proof of concepts I was using a cube as a hitbox only, but still using the widget as the part you visually see.

So I guess my question is, what do I attach the material to? Or am I just doing this wrong all together?

@Mind-Brain Good idea. So I was reading about that, but I ran into one part that confuses my noobness. It’s related to the Question I put in the OP. I’m using a widget to show some parts of the card (text, art, numbers, etc). Where do I apply the material to the card exactly? Because the widget’s Image component is what is display the card art itself. So does the material go onto the Actor? But right now the actor itself is pretty much nothing, the widget that lives on top of the actor is the only thing that’s really showing up. In some of my old proof of concepts I was using a cube as a hitbox only, but still using the widget as the part you visually see.

So I guess my question is, what do I attach the material to? Or am I just doing this wrong all together?

Update:

So I designed my card’s face in a Widget using widget components like size boxes, border, overlay, horizontal box, backgroundimage, vertical box, border, textbox, etc. So maybe what you’re suggesting is that I need to NOT design my card face using widgets and widget components at all and instead design my card face using StaticMeshComponents that I can apply a material to?

I’m sorry, I should have read more deeply.

Give this a try.
If you have a post process effect already, go to that. If you don’t, make one and make it big enough that the camera and play area will always be within it.

Got to “Details” and find “Auto-Exposure”. Set that to “Off”. Part of the problem is the widgets themselves are emissive. This will probably make your scene super bright, you’ll then want to bring the lights down. It’s supposed to be imitating the way eyes work in different light exposures, but you shouldn’t need that for this.

Give THAT a try and let us know what happens!

Also what is the play mat underneath? Is that a widget as well?

Typically widgets should be 100% unaffected by light.

Oh good thinking. The matt in the background is a Material with an image that I made. And yes I tried your tip there and forced its roughness to 1.0 and it worked, no glare! But my card faces are widgets so I can’t really just slap a material on there I assume. So maybe I need to re-create my card faces as static mesh components so that I can give them materials… I’ll consider that as well.

Next the Post processing volume. Yes I added one but I’m a post processing noob. I have Infinite extent (unbound) checked. So it should cover everything in the test map. Okay to so turn off auto exposure I set the metering mode to manual then adjust manually? I’ll have to experiment with that.

Thanks for the tips

1 Like