So, we’re throwing around assets here and there but now it’s time to get things ingame.
This is how it should look like:
So I thought it would be best to use simple tga images and use a nice alpha channel in order to preserve the nice drop shadow effect.
But now the programmer was saying something about using a simple plane mesh, using a giant picture with all 52 cards on it and uvmapping the 52 plane meshes onto the according texture space.
Which sounds rather weird to me, to have a hugeass texture.
So what would be the most performant solution in order to achieve the exact mockup with the drop shadow effect on the cards ?
Using planes with alpha effect ?
Just modeling the cards entirely ? Since there won’t be much visible on the screen it would be only a couple of hundred polygons, when i make the cards really rounded - Would it be possible to get a “realtime” drop shadow ?
Or use another plane with the drop shadow alpha effect underneath the card plane ?
What would be the best way to handle all the 52 card variations ?
Make 52 unique textures ?
Make one bigger texture for each suit ?
Make one giantass texture ? - I don’t even think that’s possible or reasonable :o
There will be no fancy card animations whatsoever. It will be a simple, simple 2d card game setup. What would you suggest as the most performant solution ? I’m really interested in hearing interesting solutions and approaches that I can forward to the programmer
edit: I just downloaded the Iphone-Match example files. It seems that approach 2) and 3) seem reasonable. Yet I wonder about the textures. The cards are a bit bigger than on this specific example.
With so few objects there’s not really much to be gained by texture atlasing. Performance-wise you generally want to avoid alpha textures as much as possible because of overdraw, so ideally you’d model the cards using polygons, and use a backwards-L shape model for the shadow, where you include only the bottom and right strips. Not sure if it really makes that much difference for a card game though.
So you’d make 52 individual textures for this game ?
But how do I get the soft shadow on the L-Shape model ? A modeled version looks too sharp for our needs. The IPhone-Match example had an alpha shadow texture as well, if I understood the assets hierarchy correctly.
You could potentially reduce memory requirements for textures by making textures for the card numbers (two sets, black and red), plus the four suits, and then use UV mapping to set these. It depends on how high-res the textures are as to whether this would be worth the bother though. The shadow would be applied to the reverse-L model using alpha, then overlay the card model on top:
maybe you could also model the symbol, use 3D text for number then you arrange your stuff using prefab to make your card , that will let you mainly with the back card texture the rest can be simple color…
or as eric said using UV mapping , in that case you may divide your card maybe like a grid so you can easily move the square UV you need on an atlases representing all your suits symbol.
Wow, all of that for a simple card game seems like a tremendous amount of overkill. Great suggestions, however, if there were other CPU draws like physics and skinned models. I wouldn’t worry about alpha overdraw in this case as there are no overlapping cards with alpha in your layout. The texture atlas is a good idea, from a performance standpoint, because at runtime you’re only loading one texture vs. 52 individual textures. The other side of the argument is with a large texture atlas you’ll begin to lose resolution so having certain items (card suit symbols and such) would benefit with perhaps a large section of UV space meant for each suit symbol and facecard image. Some testing should be done on the device to give you realworld data on what looks good to you.
It’s overlapping the background though, and with cards filling most of the display, you have a large amount of overdraw. Putting a single quad with transparency over the entire display can have a noticeable effect on framerate on retina displays; it’s the same general thing in this case. Also, framerate isn’t the only consideration–the less work you make the GPU do, the less battery is used.
It’s not necessarily beneficial; it depends on how you handle it. If you used a single card model and changed the face by changing the UV offset in the material, then you’d end up with 52 different materials at runtime, which is not really any better than just using 52 different textures. You’d need 52 unique card models in order to use a single material and actually have a performance benefit.
Actually, this is how I ended up realizing it.
Model one card shape and the shadow L as Eric5h5 suggested.
The card shape is modeled, that I have 2 square shape parts on it, that I can cut out and move around on the uv’s.
Made one texture with all the symbols (jokers, numbers,…) on it - just like the Unity IPhone Match example - since the cards are pure white and don’t have a gradient, that works fine.
A second texture was made for making the back of the cards with 4 variations.
The shadow L works great also. Now I just hope we can implement it all without problems. If there shall rise any, I’ll make sure to let you know ^^
thank you for clearing that up Eric. Something like this would be useful as a tips and tricks sticky for us modelers.
I’m curious about the overdraw and can’t get a solid answer from other coder friends. Does the overdraw occur wherever a pixel goes to 254 and below? or if the texture has an alpha channel it will overdraw over the entire model that uses that texture?
