Shaky Camera Pan AndEngine

Question

I have been trying to find the best way to move the camera by dragging the background scene. I have not found any resource to help yet. I am pretty new to android programming and using andEngine.

Here is my code so far

public class MainActivity extends SimpleBaseGameActivity{

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

private SmoothCamera mSmoothCamera;
private BitmapTextureAtlas mBitmapTextureAtlas;
private TextureRegion mFaceTextureRegion;
private Sprite face;
private float lastXmove;
private float lastYmove;


@Override
public EngineOptions onCreateEngineOptions() {

    mSmoothCamera = new SmoothCamera(0, 0, CAMERA_WIDTH-200, CAMERA_HEIGHT-200, 400, 400, 2);
    mSmoothCamera.setBounds(0f,0f,CAMERA_WIDTH, CAMERA_HEIGHT);
    cameraLastX = mSmoothCamera.getCenterX();
    cameraLastY = mSmoothCamera.getCenterY();
    return new EngineOptions(true, ScreenOrientation.LANDSCAPE_FIXED, new RatioResolutionPolicy(CAMERA_WIDTH, CAMERA_HEIGHT), mSmoothCamera);
}

@Override
public void onCreateResources() {
    this.mBitmapTextureAtlas = new BitmapTextureAtlas(this.getTextureManager(), 28, 247, TextureOptions.BILINEAR);
    this.mFaceTextureRegion = BitmapTextureAtlasTextureRegionFactory.createFromAsset(this.mBitmapTextureAtlas, this, "tower.png", 0, 0);
    this.mBitmapTextureAtlas.load();
}

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

    final Scene scene = new Scene();
    scene.setBackground(new Background(0.09804f, 0.6274f, 0.8784f));

    final float centerX = (CAMERA_WIDTH-100 - this.mFaceTextureRegion.getWidth()) / 2;
    final float centerY = (CAMERA_HEIGHT-100 - this.mFaceTextureRegion.getHeight()) / 2;
     face = new Sprite(centerX, centerY, this.mFaceTextureRegion, this.getVertexBufferObjectManager()) {
        @Override
        public boolean onAreaTouched(final TouchEvent pSceneTouchEvent, final float pTouchAreaLocalX, final float pTouchAreaLocalY) {
            this.setPosition(pSceneTouchEvent.getX() - this.getWidth() / 2, pSceneTouchEvent.getY() - this.getHeight() / 2);
            return true;
        }
    };

    scene.attachChild(face);
    scene.registerTouchArea(face);
    scene.setTouchAreaBindingOnActionDownEnabled(true);
    scene.setOnSceneTouchListener(new IOnSceneTouchListener() {

        @Override
        public boolean onSceneTouchEvent(Scene pScene, TouchEvent pSceneTouchEvent) {
            if (pSceneTouchEvent.isActionDown()) {
                lastXmove = pSceneTouchEvent.getX();
                lastYmove = pSceneTouchEvent.getY();
            }
            if (pSceneTouchEvent.isActionMove()) {
                float differenceX = pSceneTouchEvent.getX() - lastXmove;
                float differenceY = pSceneTouchEvent.getY() - lastYmove;
                mSmoothCamera.setCenter(mSmoothCamera.getCenterX() - differenceX, mSmoothCamera.getCenterY() - differenceY);
                lastXmove = pSceneTouchEvent.getX();
                lastYmove = pSceneTouchEvent.getY();

            }
            if (pSceneTouchEvent.isActionUp()) {

            }
            return true;
        }
    });
    return scene;
}

Currently this code will produce a limited camera view and when I try to test and drag the background the sprite will shake. I have tried creating a threshold so too small of a movement will not trigger the drag. But for the threshold to make it not shake the sprite starts being a little jumpy.

If there is a better way to go about this or some resource I have not seen yet to better pan the camera, a nudge in the right direction would be greatly appreciated.

you know that there is a camera.setChaseEntity(entiy) method that is responsible for chasing objects? — Łukasz Motyczka
I have heard of that but I did not know if it was applicable in this situation. Can that be used to chase a drag movement? — Mnazanda
Did you try to change the speed of your camera? Change 400, 400 to something like 1500, 1500 — Łukasz Motyczka
I tried that but it didn't work. I found a solution and posted it. Thanks for the suggestions though! — Mnazanda

Mnazanda Mnazanda · Accepted Answer · 2015-08-04T15:11:09

With a little bit of playing around and looking for answers, this is what I found that worked. Changing part of the onSceneTouchEvent function to this:

if (pSceneTouchEvent.isActionDown()) {
        // Obtain the initial touch coordinates when the scene is first pressed
        mInitialTouchX = pSceneTouchEvent.getX();
        mInitialTouchY = pSceneTouchEvent.getY();
    }

    if(pSceneTouchEvent.isActionMove()){
        if (!touchSpriteLock && !zoomLock) {
            // Calculate the offset touch coordinates
            final float touchOffsetX = mInitialTouchX - pSceneTouchEvent.getX();
            final float touchOffsetY = mInitialTouchY - pSceneTouchEvent.getY();

            // Apply the offset touch coordinates to the current camera coordinates

            mCamera.setCenter(mCamera.getCenterX() + touchOffsetX, mCamera.getCenterY() + touchOffsetY);


        }
    }

I was over complicating it

Shaky Camera Pan AndEngine

1 Answers