= assets
:author:
:revnumber:
:revdate: 2016/03/17 20:48
:relfileprefix: ../../../
:imagesdir: ../../..
ifdef::env-github,env-browser[:outfilesuffix: .adoc]



== The Card:


[TIP]
====
In my example,for the Front textures of the cards, I use the orignal Yugioh Card game, but you can make your own if you want!! (prevent copy right issues)
====



=== The Card Model:

The card model made of a Box with side faces deleted. The two remain faces has some change in UV, instead of the have exactly the same UV, they share the 50-50% vertical areas. Why? Cause in the shader we will modify the way to calculate UV and use two different diffuse for front face and back face. :p This is very cool thing to learn!

image:http://farm9.staticflickr.com/8104/8617106224_e0c494dbf6_z.jpg[8617106224_e0c494dbf6_z.jpg,width="",height=""]


=== The Card material:

After import from Blender, the importer made a default Lighting material for the model. So basicly we want to change that to our approriate material.

We make it by creating 3 new files: *CardMat.j3md* , *CardMat.j3m*, *SimpleCard.frag* ; and go to the Libraries section, where the TestData package is, copy the 4th file: *ColoredTexture.vert*.

....
  That’s basic how the Material system in JME works. 4 things combine:
  - **CardMat.j3md** is the Material definition (MatDef).
  - **CardMat.j3m** an instance with parameter s like textures, colors..etc
  - **SimpleCard.frag** : the fragment shader which choose by the MatDef
  - **ColoredTexture.vert**: The vertex shader which choose by the MatDef
....

Below show the detail content of the Material file in JMP and explain why for newbie in GLSL:

image::http://farm9.staticflickr.com/8521/8616051519_7c8c32ee1a_c.jpg[8616051519_7c8c32ee1a_c.jpg,width="",height="",align="center"]



=== CardMat.j3md

[source,glsl]
----

MaterialDef Card {

    MaterialParameters {
        Texture2D ColorMap
        Texture2D ColorMap2
        Color Color (Color)
        Boolean MixGlow
    }

    Technique {
        VertexShader GLSL100:   MatDefs/ColoredTextured.vert
        FragmentShader GLSL100: MatDefs/SimpleCard.frag

        WorldParameters {
            WorldViewProjectionMatrix
            Time
        }

        Defines {
            GLOW : MixGlow
        }
    }

}

----


=== SimpleCard.frag

[source,glsl]
----

varying vec2 texCoord;

uniform sampler2D m_ColorMap;
uniform sampler2D m_ColorMap2;
uniform vec4 m_Color;
uniform bool m_MixGlow;

uniform float g_Time;

void main() {
    vec2 uv = texCoord;
    vec4 texColor;
    vec4 color;

    if (uv.x > 0.5){
        uv.x = (uv.x – 0.5) *2;
        texColor = texture2D(m_ColorMap, uv);
    } else {
        uv.x = uv.x *2;
        texColor = texture2D(m_ColorMap2, uv);
    }
    vec2 uvc = uv;
    uvc.x = uv.x – 0.5;
    uvc.y = uv.y – 0.5;
    vec2 borderSize = vec2(0.05,0.05);
    #ifdef GLOW
        if (m_MixGlow == true){
                float glowV=sqrt((uvc.x)*(uvc.x)+(uvc.y)*(uvc.y));
                vec4 glowC = mix(vec4(0.9,0.8,0.1,1),vec4(0.4,0.7,1,1),sin(g_Time));
                color = mix(texColor,glowC,glowV);

                if ((uv.x <borderSize.x || 1-uv.x<borderSize.x)||(uv.y <borderSize.y || 1-uv.y<borderSize.y)){
                    color+= vec4(0.8,0.8,0.1,0.5);
                }
        } else {
            color = texColor;
        }
    #else
        color = texColor;
    #endif

    gl_FragColor = color;
}

----

This GLSL code can be obviously explain like this:

*  uv is the coordinate for the diffuse map. In our model, we modified the UV, so if the “x”-horizontal value of vertex coordinates is bigger than 0.5, than mean it in the back( that’s the trick I said), use the ColorMap2 texture.

*  uv2 is the coordinate to put the highlight for the border of the card, the value of highlight controller by the value of “sin(time)” … that means it goes up and down like a wave.

That’s it! No big deal!


==== Note:

texCoord is a Varying – mean it transfered from Vertex shader
Time is global Attribute – mean it sent to openGL from JME renderer
ColorMap – ColorMap2 are Uniform (s) – mean they are parameters from the user set to the Shader


== The Table:

The table of this card game is a design from the orginal game. It divide into two main area:
The ground and sides
The ground divided by two for each opponents
The side divided to some areas, including: Deck block, Magic block, Fusion block…ect


=== Table Texture:

The table represent by a single quad with this texture. I did it in PTS but you can also do the same thing in Gimp or even paint.net (which one you prefered). The source PTS file is in the Project assets if you want to look into.


image::http://farm9.staticflickr.com/8251/8617035018_bf7db17d09_z.jpg[8617035018_bf7db17d09_z.jpg,width="",height="",align="center"]

