Add a visual finger pattern, a stripe of a triangle, like a fruit Andengine ninja

Question

I want to show a triangle strip when the user swaps a finger on the screen. I'm not sure how to do this with AndEngine using a particle system or using sprites or using Triangle Strip algo ...

I have not written any code because I am amazed at what to do. I am uploading an image, please share your ideas.

Update

someone did this on iphone, but unfortunately I am not familiar with the syntax of the language, please help me in understanding the algorithm of this code https://github.com/hiepnd/CCBlade

** The effect I want **

Full project download Android

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

I made 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 // =========================================================== } 

The image I used with this code is also attached

Update

partial effect is achieved .. but the problem is with fast scrolling .. all full projects are downloaded here http://www.andengine.org/forums/post31772.html#p31772

Answer 1

Here is the solution in LibGDX. It uses GL_TRIANGLE_STRIP.

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

The final solution uses two triangular stripes and its own texCoord attribute, which allows us to use the search texture to achieve fake (but effective) anti-aliasing. More efficient / flexible anti-aliasing will use shaders and one triangle strip. Use the 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 frag shader use abs () - so 0.0 means "center" and 1.0 means "edge".

Something like that:

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