CODEWITHSUNDEEP
javaandroidandengine
Ayham
Ayham

Reputation: 302

background with several layers (like parallax)

I am trying to create a background for my game that gives the impression that some things are further than the others. so lets say i have a sky, a sun, some clouds and the ground. the sky and the sun are the furthest, the clouds in the middle and the ground is in the front. now if the player zooms or pans the camera i want the further layers to move less than the closer layers to give the impression that they are really further (the ground moves the most and the clouds move less and the sun almost doesn't move) just like the way auto parallax behave except that it is a static background so normally nothing moves unless the players zooms in or out.

this concept is implemented in angry birds with the game play objects (the birds, pigs, blocks...)and the ground are in the front, a mountain layer in the middle and the sky and clouds are the furthest.

now if you understood what i am trying to accomplish please give me an idea how to go about doing that because it drove me crazy the past few days and i just couldn't even put the concept to implement it yet. any code would also be great.

Upvotes: 2

Views: 2304

Answers (1)

Thkru
Thkru

Reputation: 4199

You could try to use the Andengine for such a purpose:
http://www.youtube.com/watch?v=ug5vfys6MIA

also see: http://www.andengine.org/forums/features/parallaxlayer-t5390.html

It's really easy to achieve an effect like that, here's an example:

@Override
    public void onLoadResources() {
        BitmapTextureAtlasTextureRegionFactory.setAssetBasePath("gfx/");

        this.mBitmapTextureAtlas = new BitmapTextureAtlas(256, 128, TextureOptions.BILINEAR_PREMULTIPLYALPHA);
        this.mPlayerTextureRegion = BitmapTextureAtlasTextureRegionFactory.createTiledFromAsset(this.mBitmapTextureAtlas, this, "player.png", 0, 0, 3, 4);
        this.mEnemyTextureRegion = BitmapTextureAtlasTextureRegionFactory.createTiledFromAsset(this.mBitmapTextureAtlas, this, "enemy.png", 73, 0, 3, 4);

        this.mAutoParallaxBackgroundTexture = new BitmapTextureAtlas(1024, 1024, TextureOptions.DEFAULT);
        this.mParallaxLayerFront = BitmapTextureAtlasTextureRegionFactory.createFromAsset(this.mAutoParallaxBackgroundTexture, this, "parallax_background_layer_front.png", 0, 0);
        this.mParallaxLayerBack = BitmapTextureAtlasTextureRegionFactory.createFromAsset(this.mAutoParallaxBackgroundTexture, this, "parallax_background_layer_back.png", 0, 188);
        this.mParallaxLayerMid = BitmapTextureAtlasTextureRegionFactory.createFromAsset(this.mAutoParallaxBackgroundTexture, this, "parallax_background_layer_mid.png", 0, 669);

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

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

        final Scene scene = new Scene();
        final AutoParallaxBackground autoParallaxBackground = new AutoParallaxBackground(0, 0, 0, 5);
        autoParallaxBackground.attachParallaxEntity(new ParallaxEntity(0.0f, new Sprite(0, CAMERA_HEIGHT - this.mParallaxLayerBack.getHeight(), this.mParallaxLayerBack)));
        autoParallaxBackground.attachParallaxEntity(new ParallaxEntity(-5.0f, new Sprite(0, 80, this.mParallaxLayerMid)));
        autoParallaxBackground.attachParallaxEntity(new ParallaxEntity(-10.0f, new Sprite(0, CAMERA_HEIGHT - this.mParallaxLayerFront.getHeight(), this.mParallaxLayerFront)));
        scene.setBackground(autoParallaxBackground);

        /*
         * Calculate the coordinates for the face, so its centered on the camera.
         */
        final int playerX = (CAMERA_WIDTH - this.mPlayerTextureRegion.getTileWidth()) / 2;
        final int playerY = CAMERA_HEIGHT - this.mPlayerTextureRegion.getTileHeight() - 5;

        /* Create two sprits and add it to the scene. */
        final AnimatedSprite player = new AnimatedSprite(playerX, playerY, this.mPlayerTextureRegion);
        player.setScaleCenterY(this.mPlayerTextureRegion.getTileHeight());
        player.setScale(2);
        player.animate(new long[] { 200, 200, 200 }, 3, 5, true);

        final AnimatedSprite enemy = new AnimatedSprite(playerX - 80, playerY, this.mEnemyTextureRegion);
        enemy.setScaleCenterY(this.mEnemyTextureRegion.getTileHeight());
        enemy.setScale(2);
        enemy.animate(new long[] { 200, 200, 200 }, 3, 5, true);

        scene.attachChild(player);
        scene.attachChild(enemy);

        return scene;
    }

Upvotes: 9

Related Questions