Selection effect

Troubleshooting General Help
1

Hi people,

I’m creating a cardgame, and now I’m trying to do a “beautiful” selection. My inspiration is HeroDex selection, and Magic Gathering selection method.

First of all, I’m trying to recreate the HeroDex selection, but I think I’m missing something. It’s not perfectly the same. See HeroDex images bellow:

See my version:

Do you know some clue about what is missing? I’m trying to modify transparency and other properties, but it’s so different. I think I’m missing something.

See my code for that:

[java]
Mesh meshMarcador = new Mesh();

    // Vertex positions in space
    Vector3f [] vertices = new Vector3f[4];
    vertices[0] = new Vector3f(0,0,0);
    vertices[1] = new Vector3f(1.4f,0,0);
    vertices[2] = new Vector3f(0,2.2f,0);
    vertices[3] = new Vector3f(1.4f,2.2f,0);

    // Texture coordinates
    Vector2f [] texCoord = new Vector2f[4];
    texCoord[0] = new Vector2f(0,0);
    texCoord[1] = new Vector2f(1,0);
    texCoord[2] = new Vector2f(0,1);
    texCoord[3] = new Vector2f(1,1);

    // Indexes. We define the order in which mesh should be constructed
    short[] indexes = {2, 0, 1, 1, 3, 2};

    // Setting buffers
    meshMarcador.setBuffer(VertexBuffer.Type.Position, 3, BufferUtils.createFloatBuffer(vertices));
    meshMarcador.setBuffer(VertexBuffer.Type.TexCoord, 2, BufferUtils.createFloatBuffer(texCoord));
    meshMarcador.setBuffer(VertexBuffer.Type.Index, 1, BufferUtils.createShortBuffer(indexes));
    meshMarcador.updateBound();

    float[] colorArray = new float[4*4];
    int colorIndex = 0;
    for(int i = 0; i < 4; i++){
        // Red value (is increased by .2 on each next vertex here)
        colorArray[colorIndex++]= 0f;;
        // Green value (is reduced by .2 on each next vertex)
        colorArray[colorIndex++]= 0.5f;
        // Blue value (remains the same in our case)
        colorArray[colorIndex++]= 1f;
        // Alpha value (no transparency set here)
        colorArray[colorIndex++]= 0.3f;
    }
    meshMarcador.setBuffer(VertexBuffer.Type.Color, 4, colorArray);
    
    Geometry marcador = new Geometry("Texture", meshMarcador);
    Material materialMarcador = new          Material(dInterface.getApp().getAssetManager(),"Common/MatDefs/Misc/Unshaded.j3md");
    materialMarcador.setBoolean("VertexColor", true);
    materialMarcador.getAdditionalRenderState().setBlendMode(RenderState.BlendMode.Alpha);
    marcador.setMaterial(materialMarcador);
    marcador.setQueueBucket(RenderQueue.Bucket.Transparent);
    node.attachChild(marcador);

[/java]

Regarding Magic Gathering selection, do you know how can we simulate this kind of effect?

Thanks people :slight_smile:

Tati

2

Hi people,

We’ve evolved in this topic, but we still haven’t get the desired solution. Now we used the shader FakeParticleBlow. You can see the effect in this link:

[video]- YouTube

But I need some help to understand this shader. Can you point me some readings, any background about this?

My concerned about it:

  • I want a clockwise animation.
  • I want more glow, and some bright, like the image from magic I post in last topic.

The code of this effect is following:

[java]
package teste;
import com.jme3.app.SimpleApplication;
import com.jme3.asset.plugins.FileLocator;
import com.jme3.material.Material;
import com.jme3.material.RenderState.BlendMode;
import com.jme3.material.RenderState.FaceCullMode;
import com.jme3.math.ColorRGBA;
import com.jme3.renderer.queue.RenderQueue.Bucket;
import com.jme3.scene.Geometry;
import com.jme3.scene.shape.Box;
import com.jme3.texture.Texture;
import com.jme3.texture.Texture.WrapMode;
import com.jme3.util.TangentBinormalGenerator;

public class Main extends SimpleApplication {

public static void main(final String[] args) {
    Main app = new Main();
    app.start();
}

@Override
public void simpleInitApp() {
    this.assetManager.registerLocator("assets", FileLocator.class);
    Material mat = new Material(this.assetManager,"Materials/Borda/Borda.j3md");
    Texture maskTex = this.assetManager.loadTexture("Materials/Borda/borda.png");
    mat.setTexture("MaskMap", maskTex);

    Texture aniTex = this.assetManager.loadTexture("Materials/Borda/particles.png");
    aniTex.setWrap(WrapMode.MirroredRepeat); 
    mat.setTexture("AniTexMap", aniTex);

    mat.setFloat("TimeSpeed", 1f);

    mat.setColor("BaseColor", ColorRGBA.Blue.clone());

    mat.setBoolean("Animation_X", true);
    mat.setBoolean("Animation_Y", true);
    mat.setBoolean("Change_Direction", true); 
    mat.getAdditionalRenderState().setDepthTest(true);
    mat.getAdditionalRenderState().setDepthWrite(false);          

    mat.getAdditionalRenderState().setFaceCullMode(FaceCullMode.Off); 
    mat.getAdditionalRenderState().setBlendMode(BlendMode.Additive);

    ColorRGBA fogColor = ColorRGBA.Red.clone();
    fogColor.a = 10;
    mat.setColor("FogColor", fogColor); 

    Box quad = new Box(1.3f ,1.3f,0);
    Geometry geom = new Geometry("Particle", quad);
    geom.setMaterial(mat); 
    TangentBinormalGenerator.generate(geom);
    geom.setQueueBucket(Bucket.Transparent);

    this.rootNode.attachChild(geom);
    
    Box box = new Box(1 ,1,0);
    Geometry geometry = new Geometry("Texture", box);
    Material material = new Material(this.getAssetManager(),"Common/MatDefs/Misc/Unshaded.j3md");
    material.setTexture("ColorMap", this.getAssetManager().loadTexture("Interface/cartas/modelo_carta.jpg"));
    
    geometry.setMaterial(material);
    this.rootNode.attachChild(geometry);
    
    
}

}
[/java]

The images, and other source code I used are available in: https://www.dropbox.com/sh/6kzlbls713wakgn/2WPq9O04VW

Does anyone can help me with this?

Regards,

Tati