在手指滑动下方添加视觉效果，三角形条像水果忍者和引擎 [英] add visual below finger swipe, Triangle strip like fruit ninja Andengine

问题描述

当用户在屏幕上交换手指时，我想显示一个三角形条.我不知道如何使用 AndEngine、使用粒子系统或使用精灵或使用三角带算法...

我没有写任何代码，因为我很惊讶该怎么做.我正在上传图片，请分享您的想法.

更新

<块引用>

有人在 Iphone 中这样做过，但不幸的是我不熟悉语言语法，请帮助我理解此代码的算法

我已经完成了这段代码，但是没有得到想要的效果...

 包 org.az.algo.examples;导入 javax.microedition.khronos.opengles.GL10;导入 org.anddev.andengine.engine.Engine;导入 org.anddev.andengine.engine.camera.Camera;导入 org.anddev.andengine.engine.options.EngineOptions;导入 org.anddev.andengine.engine.options.EngineOptions.ScreenOrientation;导入 org.anddev.andengine.engine.options.resolutionpolicy.RatioResolutionPolicy;导入 org.anddev.andengine.entity.particle.ParticleSystem;导入 org.anddev.andengine.entity.particle.emitter.RectangleParticleEmitter;导入 org.anddev.andengine.entity.particle.initializer.AlphaInitializer;导入 org.anddev.andengine.entity.particle.initializer.ColorInitializer；导入 org.anddev.andengine.entity.particle.initializer.GravityInitializer;导入 org.anddev.andengine.entity.particle.initializer.RotationInitializer;导入 org.anddev.andengine.entity.particle.modifier.AlphaModifier;导入 org.anddev.andengine.entity.particle.modifier.ColorModifier;导入 org.anddev.andengine.entity.particle.modifier.ExpireModifier;导入 org.anddev.andengine.entity.scene.Scene；导入 org.anddev.andengine.entity.scene.Scene.IOnSceneTouchListener;导入 org.anddev.andengine.entity.sprite.Sprite;导入 org.anddev.andengine.entity.util.FPSLogger；导入 org.anddev.andengine.input.touch.TouchEvent;导入 org.anddev.andengine.opengl.texture.TextureOptions;导入 org.anddev.andengine.opengl.texture.atlas.bitmap.BitmapTextureAtlas；导入 org.anddev.andengine.opengl.texture.atlas.bitmap.BitmapTextureAtlasTextureRegionFactory;导入 org.anddev.andengine.opengl.texture.region.TextureRegion;导入 android.view.ViewGroup.MarginLayoutParams;导入 android.widget.Toast;公共类 ParticleSystemSimpleExample 扩展 BaseExample {//============================================================//常量//============================================================私有静态最终 int CAMERA_WIDTH = 720;私有静态最终 int CAMERA_HEIGHT = 480;//============================================================//字段//============================================================私人相机 mCamera；私有 BitmapTextureAtlas mBitmapTextureAtlas；私有 TextureRegion mParticleTextureRegion;私有 BitmapTextureAtlas mBitmapTextureAtlasStreak；私有 TextureRegion mStreadTextureRegion;私人精灵[] mSprite = 新精灵[20];私人 int mIndex = 0;//============================================================//构造函数//============================================================//============================================================//吸气剂 &二传手//============================================================//============================================================//超类/接口的/来自超类/接口的方法//============================================================@覆盖公共引擎 onLoadEngine() {Toast.makeText(this, "触摸屏幕移动粒子系统.", Toast.LENGTH_LONG).show();this.mCamera = new Camera(0, 0, CAMERA_WIDTH, CAMERA_HEIGHT);返回新引擎(新引擎选项(真，ScreenOrientation.LANDSCAPE，新的RatioResolutionPolicy(CAMERA_WIDTH，CAMERA_HEIGHT)，this.mCamera))；}@覆盖公共无效 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);}@覆盖公共场景 onLoadScene() {this.mEngine.registerUpdateHandler(new FPSLogger());最终场景场景 = 新场景()；//final CircleOutlineParticleEmitterparticleEmitter = new CircleOutlineParticleEmitter(CAMERA_WIDTH * 0.5f, CAMERA_HEIGHT * 0.5f + 20, 80);最终 RectangleParticleEmitterparticleEmitter = new RectangleParticleEmitter(CAMERA_WIDTH * 0.5f, CAMERA_HEIGHT * 0.5f, 5f,5f);//final PointParticleEmitterparticleEmitter = new PointParticleEmitter(10, 10);最终粒子系统particleSystem = new ParticleSystem(particleEmitter, 100, 100, 1000, this.mParticleTextureRegion);particleSystem.setParticlesSpawnEnabled(false);场景.setOnSceneTouchListener(新的IOnSceneTouchListener(){@覆盖公共布尔 onSceneTouchEvent(最终场景 pScene，最终 TouchEvent pSceneTouchEvent){if(pSceneTouchEvent.getAction() == TouchEvent.ACTION_MOVE){粒子系统.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);全部藏起来();}else if(pSceneTouchEvent.getAction() == TouchEvent.ACTION_DOWN){粒子系统.reset();}返回真；}});particleSystem.addParticleInitializer(new ColorInitializer(1, 0, 0));粒子系统.addParticleInitializer(新的AlphaInitializer(0))；粒子系统.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));场景.attachChild(粒子系统)；for(int i = 0; i < mSprite.length; i++){mSprite[i] = new Sprite(-20, 0, mStreadTextureRegion);mSprite[i].setVisible(false);场景.attachChild(mSprite[i]);}返回场景；}@覆盖公共无效 onLoadComplete() {}私有 int getIndex(){if(mIndex >= mSprite.length -1){mIndex = 0;}System.out.println("索引......"+mIndex);返回 mIndex++；}私有无效 hideAll(){for(int i = 0; i

我与此代码一起使用的图像也附上了

<块引用>

更新

实现了部分效果..但是在快速滑动时出现问题..所有完整的项目都上传在这里

最终的解决方案使用两个三角形条带和一个自定义的 texCoord 属性，允许我们使用查找纹理来实现假(但有效)抗锯齿.更有效/灵活的抗锯齿将使用着色器和单个三角形条.将顶点属性 -1.0 用于顶部，1.0 用于滑动的底部边缘，1.0 用于提示.然后在片段着色器中，使用 abs() - 所以 0.0 表示中心"，1.0 表示边缘".

像这样:

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

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.

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 **

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 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

解决方案

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));

这篇关于在手指滑动下方添加视觉效果，三角形条像水果忍者和引擎的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！