Ok so I am working on the start of my card game so I figured I would start by nailing down a card tech demo.
Now my initial first hurdle is I have no modeling experience or experience with shaders but in general here is what I need to figure out.
First I need a card mesh. I was thinking 2 quads because the texture for the back of the card is different from the front. Also I believe I need the card to be lit and that means I need forward facing normals on the front and back. Can this be done programmatically with the custom mesh class?
Second I am going to want to create what is known as a rare foil card. Think Magic the gathering. This looks kinda like a multicolored metal like surface over the card I am sure someone has seen a MTG foil card or any TCG foil card before. Any tips for creating such a shader? This is why the card needs lighting. Typically a foil card is foiled with the colors the card uses. So the shader would need to use the colors from the texture on the front of the card.
Any advice would be much appreciated. NOTE: I want to learn here not looking for it to be done for me.
You can use custome mesh to create the card, you can also create a base spatial using blender or any modelling program (it can give you the advantage if you want to move from quads to planes with come curved corners). I did so for my dominoes game since I have plenty of tiles to use and I have a base model for just one tile.
Besides base mesh origins (custom or pre-made) there are some advices I can give you.is one advice I can give and that is to exploit using texture atlasing if possible. Each card will have to materials, one for the front and one for the back. The back material can be the same for all cards but the front will be different if you will have one texture per front of the card. for prototyping it’s not a problem but for actual development try to atlas textures to reduce draw calls and number of materials on scene. you can get an idea about atlasing here:
@bloodwalker yes I will be using a large atlas that has the back and all the fronts on it. I may be able to learn enough blender to make a card mesh. Never used a modeling program before.
Now to figure out how to make a foil card shader… to me it looks like a metalized color interpolation may be simple enough to make with a bit of research.
Hint: In your special case you can use inkscape (2d vector editor) first. the vector image (format is .svg) can be used in Blender to get the outer shape of the card which you then simply extrude (hold [E] key down and type some number like 0.2 for 0.2 millimeter thick, hit [ENTER] and you have the shape of your card.
@Ogli thanks will check into that. Is there a way to set the normals on the mesh in blender to be camera facing on front and back?
@pspeed I was thinking about the foil card. I remember in the tutorials about making a shiny rock. I was thinking if I have no bump map is it possible to combine a color interpolation with a specular map for the shiny metalic look and apply that over the texture of the card to get the foil look?
Yes there is! In Blender you can turn on/off “smooth shading” (which is their term for normals either facing perpendicular to the surface or not). You would want to keep “smooth” off (which was the default all the years so I think it’s still their default) - it prevents a newly created cube mesh in Blender from looking odd - it also is the first thing you need to change when modeling a sphere which looks odd until you turn smooth on.
If they are effectively just two sides quads then it’s like three or four lines of code to make a two sided card.
Step 1: look at Quad.java to see what it’s doing.
Step 2: Mesh card = new Mesh();
Step 3: card.setBuffer… similar to what you see in Quad.java except with 8 vertexes instead of four and 12 indexes instead of 6.
The card has round corners (seen the link in the first post of this thread). Game cards / Trading cards often have round corners (at least those that come from the factory).
You can either make that with .svg and Blender (like I described). Or you use a texture with alpha for the corners and use a 9 sections like that:
Yes, the user “was thinking of 2 quads” - but … following the mantra “give the user what he didn’t know he wanted” it will go into either the 9 sections or the Blender-aided mesh. Two quads (when thinking of real quads with only 4 vertices) won’t work in the long run…
Sure they will… people have been making cards in games that way since the beginning of card games. The rounded corners come from the texture and then you don’t get aliasing. In fact, if you bring the edges of the card texture in one pixel then you avoid aliasing all around the card.
Plus if you render lots of cards, two quads is going to be way more efficient in the long run… but that’s only a side benefit. Visually, textured quads will look better.
@pspeed@Ogli. Typically a card does have rounded corners. Either method is valid. As far as I know the only real difference is texture overhead. With a mesh I believe you need to wrap the texture meaning with model from blender every card face in the atlas needs a card back with it so it can wrap where with 2x rectangles you need the corner alpha but you can use the same back in the atlas for every card meaning the atlas is smaller.
As for the foil shader I think I am making progress. A difuse/specular map is what I need I just have to figure out how to squeeze a rgb interpolation between the 2 without making the card art vanish but instead accentuate.
Nah, one approach uses four triangles to look smooth and the other uses 100 triangles to look smooth. Well, I guess maybe sort of in that the 100 triangles approach means you have a lot more texture coordinates to change for the atlas cell.
Plus, if you use shader tricks like dist fields (texture with alpha and shading) or tesselation (real geometry for corners), then aliasing is effectively cancelled.
And according to the Nyquist theorem, aliasing will not be a problem as long as the card is shown below the pixel threshold (who wants to look at a 1920 x 1080 zoom view of the corners of the game cards??).
Really, just put that corner in the texture atlas once (e.g. in a 200 x 200 square or 400 x 400 or something like that - maybe depending on the gfx quality settings of the game).
Aliasing happens if the cards are ever rotated… which happens often in cards rendered in 3D engines. The size relative to the screen doesn’t matter.
Bringing in the sides of the texture slightly and letting the edges be transparent is a simple way to avoid the issue.
I’ve designed game cards by the way, since I’m a board game and playing card fan who often plays such things with friends. Maybe when my board/card game is finished, I will post a link here. I’ve been making those since I was 3 years old, so I know a bit about designing those beasts and making the art for it. :chimpanzee_amused:
Have you seen “The Gamers” (part 3 is about trading card games)?
If the texture goes all the way to the edge of the quad then you will show aliasing where pixels are drawn and where pixels aren’t. If the texture image is slightly smaller than what is displayed on the quad then yes, you get the blending you suggest and that’s exactly what I’m saying. The aliased pixels are transparent in that case.
Yea like I said though diffuse + specular map is actually how foil cards work in theory if you read how they are made. The art is actually a specular map or mask printed over the foil layer. The issue i see is figuring out how to place the interpolated color map in there without actually covering the art. Maybe it works like the real world maybe if the art is the specular map and the diffuse is the interpolation it will work. Gunna try when I get home from work.
