andengineswipegl-triangle-strip

add visual below finger swipe, Triangle strip like fruit ninja Andengine


I want to show a triangle strip when user swap finger on screen. I am not sure how to do it with AndEngine, using particle system or using sprites or using Triangle Strip algo...

I haven't wrote any code because I am struck that what to do. I am uploading an image please share your ideas.

triangle strip

Update

someone has done this in Iphone but unfortunately I am unfamiliar with language syntax please help me in understanding algo of this code https://github.com/hiepnd/CCBlade

**Effect I want ** fruit ninja effect

Complete Android Project Download

http://www.andengine.org/forums/resources/complete-runnable-project/1301

I have done this code but could not get the desired effect...

    package org.az.algo.examples;

import javax.microedition.khronos.opengles.GL10;

import org.anddev.andengine.engine.Engine;
import org.anddev.andengine.engine.camera.Camera;
import org.anddev.andengine.engine.options.EngineOptions;
import org.anddev.andengine.engine.options.EngineOptions.ScreenOrientation;
import org.anddev.andengine.engine.options.resolutionpolicy.RatioResolutionPolicy;
import org.anddev.andengine.entity.particle.ParticleSystem;
import org.anddev.andengine.entity.particle.emitter.RectangleParticleEmitter;
import org.anddev.andengine.entity.particle.initializer.AlphaInitializer;
import org.anddev.andengine.entity.particle.initializer.ColorInitializer;
import org.anddev.andengine.entity.particle.initializer.GravityInitializer;
import org.anddev.andengine.entity.particle.initializer.RotationInitializer;
import org.anddev.andengine.entity.particle.modifier.AlphaModifier;
import org.anddev.andengine.entity.particle.modifier.ColorModifier;
import org.anddev.andengine.entity.particle.modifier.ExpireModifier;
import org.anddev.andengine.entity.scene.Scene;
import org.anddev.andengine.entity.scene.Scene.IOnSceneTouchListener;
import org.anddev.andengine.entity.sprite.Sprite;
import org.anddev.andengine.entity.util.FPSLogger;
import org.anddev.andengine.input.touch.TouchEvent;
import org.anddev.andengine.opengl.texture.TextureOptions;
import org.anddev.andengine.opengl.texture.atlas.bitmap.BitmapTextureAtlas;
import org.anddev.andengine.opengl.texture.atlas.bitmap.BitmapTextureAtlasTextureRegionFactory;
import org.anddev.andengine.opengl.texture.region.TextureRegion;

import android.view.ViewGroup.MarginLayoutParams;
import android.widget.Toast;


public class ParticleSystemSimpleExample extends BaseExample {
    // ===========================================================
    // Constants
    // ===========================================================

    private static final int CAMERA_WIDTH = 720;
    private static final int CAMERA_HEIGHT = 480;

    // ===========================================================
    // Fields
    // ===========================================================

    private Camera mCamera;
    private BitmapTextureAtlas mBitmapTextureAtlas;
    private TextureRegion mParticleTextureRegion;
    private BitmapTextureAtlas mBitmapTextureAtlasStreak;
    private TextureRegion mStreadTextureRegion;

    private Sprite[] mSprite = new Sprite[20];
    private int mIndex = 0;

    // ===========================================================
    // Constructors
    // ===========================================================

    // ===========================================================
    // Getter & Setter
    // ===========================================================

    // ===========================================================
    // Methods for/from SuperClass/Interfaces
    // ===========================================================

    @Override
    public Engine onLoadEngine() {
        Toast.makeText(this, "Touch the screen to move the particlesystem.", Toast.LENGTH_LONG).show();
        this.mCamera = new Camera(0, 0, CAMERA_WIDTH, CAMERA_HEIGHT);
        return new Engine(new EngineOptions(true, ScreenOrientation.LANDSCAPE, new RatioResolutionPolicy(CAMERA_WIDTH, CAMERA_HEIGHT), this.mCamera));
    }

    @Override
    public void onLoadResources() {
        this.mBitmapTextureAtlas = new BitmapTextureAtlas(32, 32, TextureOptions.BILINEAR_PREMULTIPLYALPHA);
        this.mParticleTextureRegion = BitmapTextureAtlasTextureRegionFactory.createFromAsset(this.mBitmapTextureAtlas, this, "gfx/particle_point.png", 0, 0);

        this.mBitmapTextureAtlasStreak = new BitmapTextureAtlas(128, 16, TextureOptions.BILINEAR_PREMULTIPLYALPHA);     
        this.mStreadTextureRegion = BitmapTextureAtlasTextureRegionFactory.createFromAsset(this.mBitmapTextureAtlasStreak, this, "gfx/streak1.png", 0, 0);

        this.mEngine.getTextureManager().loadTextures(this.mBitmapTextureAtlas, this.mBitmapTextureAtlasStreak);
    }

    @Override
    public Scene onLoadScene() {
        this.mEngine.registerUpdateHandler(new FPSLogger());

        final Scene scene = new Scene();

//      final CircleOutlineParticleEmitter particleEmitter = new CircleOutlineParticleEmitter(CAMERA_WIDTH * 0.5f, CAMERA_HEIGHT * 0.5f + 20, 80);
        final RectangleParticleEmitter particleEmitter = new RectangleParticleEmitter(CAMERA_WIDTH * 0.5f, CAMERA_HEIGHT * 0.5f, 5f,5f);

//      final PointParticleEmitter particleEmitter = new PointParticleEmitter(10, 10);      
        final ParticleSystem particleSystem = new ParticleSystem(particleEmitter, 100, 100, 1000, this.mParticleTextureRegion);
        particleSystem.setParticlesSpawnEnabled(false);     

        scene.setOnSceneTouchListener(new IOnSceneTouchListener() {
            @Override
            public boolean onSceneTouchEvent(final Scene pScene, final TouchEvent pSceneTouchEvent) {               

                if(pSceneTouchEvent.getAction() == TouchEvent.ACTION_MOVE){                 

                    particleSystem.setParticlesSpawnEnabled(true);                  
                    particleEmitter.setCenter(pSceneTouchEvent.getX(), pSceneTouchEvent.getY());

                    mSprite[getIndex()].setPosition(pSceneTouchEvent.getX(), pSceneTouchEvent.getY());
                    mSprite[getIndex()].setVisible(true);

                }else if (pSceneTouchEvent.getAction() == TouchEvent.ACTION_UP){

                    particleSystem.setParticlesSpawnEnabled(false);
                    hideAll();

                }else if(pSceneTouchEvent.getAction() == TouchEvent.ACTION_DOWN){

                    particleSystem.reset();

                }

                return true;
            }
        });     

        particleSystem.addParticleInitializer(new ColorInitializer(1, 0, 0));
        particleSystem.addParticleInitializer(new AlphaInitializer(0));
        particleSystem.setBlendFunction(GL10.GL_SRC_ALPHA, GL10.GL_ONE);
//      particleSystem.addParticleInitializer(new VelocityInitializer(-2, 2, -20, -10));
        particleSystem.addParticleInitializer(new GravityInitializer());

//      particleSystem.addParticleModifier(new ScaleModifier(0.5f, 1.0f, 0, 1.5f));
        particleSystem.addParticleModifier(new ColorModifier(1, 1, 0, 0.5f, 0, 0, 0, 3));
        particleSystem.addParticleModifier(new ColorModifier(1, 1, 0.5f, 1, 0, 1, 4, 6));
        particleSystem.addParticleModifier(new AlphaModifier(0, 1, 0, 0.5f));
        particleSystem.addParticleModifier(new AlphaModifier(1, 0, 2.5f, 3.5f));
        particleSystem.addParticleModifier(new ExpireModifier(6, 6f));

        scene.attachChild(particleSystem);


        for(int i = 0; i < mSprite.length; i++){
            mSprite[i] = new Sprite(-20, 0, mStreadTextureRegion);
            mSprite[i].setVisible(false);
            scene.attachChild(mSprite[i]);
        }





        return scene;
    }

    @Override
    public void onLoadComplete() {

    }


    private int getIndex(){
        if(mIndex >= mSprite.length -1){
            mIndex = 0;
        }
        System.out.println("Index ........ "+mIndex);
        return mIndex++;
    }

    private void hideAll(){
        for(int i = 0; i<mSprite.length; i++){
            mSprite[i].setVisible(false);
            mSprite[i].setPosition(-CAMERA_WIDTH, 0);
        }
    }
    // ===========================================================
    // Methods
    // ===========================================================

    // ===========================================================
    // Inner and Anonymous Classes
    // ===========================================================
}

Image i used whit this code

image I used with this code is also attached

Updated

partial effect achieved.. but problem on fast swiping.. all complete projects are uploaded here http://www.andengine.org/forums/post31772.html#p31772

partial effect


Solution

  • Here is a solution in LibGDX. It uses GL_TRIANGLE_STRIP.

    https://github.com/mattdesl/lwjgl-basics/wiki/LibGDX-Finger-Swipe

    The final solution uses two triangle strips and a custom texCoord attribute, allowing for us to use a lookup texture to achieve fake (but efficient) anti-aliasing. A more efficient/flexible anti-aliasing would use shaders and a single triangle strip. Use vertex attribute -1.0 for the top and 1.0 for the bottom edge of your swipe, and 1.0 for the tips. Then in the frag shader, use abs() -- so 0.0 means "center" and 1.0 means "edge."

    Something like this:

        color.a *= smoothstep(0.0, 2./thickness, 1.0-abs(vTexCoord.t));