Scrollable parallax with zoom(angrybirds style)

  ... discussions about development with the GLES2 branch of AndEngine.

Scrollable parallax with zoom(angrybirds style)

Postby p37TD8 » Mon Feb 27, 2012 11:18 am

Hi all!

I'm trying to implement angry birds functional with parallax scroll and zoom.
Syntax: [ Download ] [ Hide ]
Using java Syntax Highlighting
  1. public class Third extends SimpleBaseGameActivity implements
  2.                 IOnSceneTouchListener, IPinchZoomDetectorListener,
  3.                 IScrollDetectorListener {
  4.         // ===========================================================
  5.         // Constants
  6.         // ===========================================================
  7.  
  8.         private static final int CAMERA_WIDTH = 800;
  9.         private static final int CAMERA_HEIGHT = 480;
  10.  
  11.         // ===========================================================
  12.         // Fields
  13.         // ===========================================================
  14.  
  15.         private BitmapTextureAtlas mBitmapTextureAtlas;
  16.  
  17.         private SurfaceScrollDetector mScrollDetector;
  18.         private PinchZoomDetector mPinchZoomDetector;
  19.  
  20.         private BitmapTextureAtlas mBitmapTextureAtlas1;
  21.         private BitmapTextureAtlas mBitmapTextureAtlas2;
  22.         private float mPinchZoomStartedCameraZoomFactor;
  23.  
  24.         private ITextureRegion mParallaxLayerBack;
  25.         private ITextureRegion mParallaxLayerMid;
  26.         private ITextureRegion mParallaxLayerFront;
  27.  
  28.         ScrollableParallaxBackground bg;
  29.         Sprite spr1, spr2, spr3;
  30.  
  31.         ParallaxBackground bg1;
  32.         ZoomCamera mSmoothCamera;
  33.  
  34.  
  35.  
  36.         @Override
  37.         public EngineOptions onCreateEngineOptions() {
  38.                 this.mSmoothCamera = new ZoomCamera(0, 0, CAMERA_WIDTH, CAMERA_HEIGHT);
  39.                 this.mSmoothCamera.setBounds(0, 0, 800, 480);
  40.                 this.mSmoothCamera.setBoundsEnabled(true);
  41.                 return new EngineOptions(true, ScreenOrientation.LANDSCAPE_FIXED,
  42.                                 new RatioResolutionPolicy(CAMERA_WIDTH, CAMERA_HEIGHT),
  43.                                 this.mSmoothCamera);
  44.         }
  45.  
  46.         @Override
  47.         public void onCreateResources() {
  48.                 BitmapTextureAtlasTextureRegionFactory.setAssetBasePath("gfx/");
  49.  
  50.                 this.mBitmapTextureAtlas = new BitmapTextureAtlas(
  51.                                 this.getTextureManager(), 256, 128, TextureOptions.BILINEAR);
  52.                 this.mBitmapTextureAtlas.load();
  53.  
  54.                 this.mBitmapTextureAtlas1 = new BitmapTextureAtlas(
  55.                                 this.getTextureManager(), 2048, 2048);
  56.                 this.mBitmapTextureAtlas2 = new BitmapTextureAtlas(
  57.                                 this.getTextureManager(), 2048, 2048);
  58.                 this.mParallaxLayerFront = BitmapTextureAtlasTextureRegionFactory
  59.                                 .createFromAsset(this.mBitmapTextureAtlas1, this, "3_.png", 0,
  60.                                                 0);
  61.                 this.mParallaxLayerBack = BitmapTextureAtlasTextureRegionFactory
  62.                                 .createFromAsset(this.mBitmapTextureAtlas1, this, "1_.png", 0,
  63.                                                 801);
  64.                 this.mParallaxLayerMid = BitmapTextureAtlasTextureRegionFactory
  65.                                 .createFromAsset(this.mBitmapTextureAtlas2, this, "2_.png", 0,
  66.                                                 0);
  67.  
  68.                 this.mBitmapTextureAtlas1.load();
  69.                 this.mBitmapTextureAtlas2.load();
  70.         }
  71.  
  72.         @Override
  73.         public Scene onCreateScene() {
  74.                 this.mEngine.registerUpdateHandler(new FPSLogger());
  75.  
  76.                 final Scene scene = new Scene();
  77.  
  78.                 spr1 = new Sprite(0, 0, mParallaxLayerFront,
  79.                                 getVertexBufferObjectManager()) {
  80.                         @Override
  81.                         protected void preDraw(GLState pGLState, Camera pCamera) {
  82.                                 super.preDraw(pGLState, pCamera);
  83.                                 pGLState.enableDither();
  84.                         }
  85.                 };
  86.                 spr2 = new Sprite(0, 100, mParallaxLayerMid,
  87.                                 getVertexBufferObjectManager()) {
  88.                         @Override
  89.                         protected void preDraw(GLState pGLState, Camera pCamera) {
  90.                                 super.preDraw(pGLState, pCamera);
  91.                                 pGLState.enableDither();
  92.                         }
  93.                 };
  94.                 spr3 = new Sprite(0, 0, mParallaxLayerBack,
  95.                                 getVertexBufferObjectManager()) {
  96.                         @Override
  97.                         protected void preDraw(GLState pGLState, Camera pCamera) {
  98.                                 super.preDraw(pGLState, pCamera);
  99.                                 pGLState.enableDither();
  100.                         }
  101.                 };
  102.  
  103.                 scene.attachChild(spr3);
  104.                 scene.attachChild(spr2);
  105.                 scene.attachChild(spr1);
  106.  
  107.  
  108.  
  109.                 this.mScrollDetector = new SurfaceScrollDetector(this);
  110.                 this.mPinchZoomDetector = new PinchZoomDetector(this);
  111.  
  112.                 scene.setOnSceneTouchListener(this);
  113.  
  114.                 return scene;
  115.         }
  116.  
  117.  
  118.  
  119.         @Override
  120.         public boolean onSceneTouchEvent(Scene pScene, TouchEvent pSceneTouchEvent) {
  121.  
  122.  
  123.                 this.mPinchZoomDetector.onTouchEvent(pSceneTouchEvent);
  124.  
  125.                 if (this.mPinchZoomDetector.isZooming()) {
  126.                         this.mScrollDetector.setEnabled(false);
  127.                 } else {
  128.                         if (pSceneTouchEvent.isActionDown()) {
  129.                                 this.mScrollDetector.setEnabled(true);
  130.  
  131.                         }
  132.                         this.mScrollDetector.onTouchEvent(pSceneTouchEvent);
  133.                 }
  134.  
  135.                 return true;
  136.  
  137.         }
  138.  
  139.         @Override
  140.         public void onScrollStarted(final ScrollDetector pScollDetector,
  141.                         final int pPointerID, final float pDistanceX, final float pDistanceY) {
  142.                 final float zoomFactor = this.mSmoothCamera.getZoomFactor();
  143.                 this.mSmoothCamera.offsetCenter(-pDistanceX / zoomFactor, -pDistanceY
  144.                                 / zoomFactor);
  145.  
  146.         }
  147.  
  148.         @Override
  149.         public void onScroll(final ScrollDetector pScollDetector,
  150.                         final int pPointerID, final float pDistanceX, final float pDistanceY) {
  151.  
  152.                 final float zoomFactor = this.mSmoothCamera.getZoomFactor();
  153.                
  154.  
  155.                
  156.                 spr1.setPosition(spr1.getX() + pDistanceX, spr1.getY());
  157.                 spr2.setPosition(spr2.getX() + pDistanceX * 0.5f, spr2.getY());
  158.                 spr3.setPosition(spr3.getX() + pDistanceX * 0.2f, spr3.getY());
  159.  
  160.                 this.mSmoothCamera.offsetCenter(-pDistanceX / zoomFactor, -pDistanceY
  161.                                 / zoomFactor);
  162.  
  163.         }
  164.  
  165.         @Override
  166.         public void onScrollFinished(final ScrollDetector pScollDetector,
  167.                         final int pPointerID, final float pDistanceX, final float pDistanceY) {
  168.                 final float zoomFactor = this.mSmoothCamera.getZoomFactor();
  169.                 this.mSmoothCamera.offsetCenter(-pDistanceX / zoomFactor, -pDistanceY
  170.                                 / zoomFactor);
  171.         }
  172.  
  173.         @Override
  174.         public void onPinchZoomStarted(final PinchZoomDetector pPinchZoomDetector,
  175.                         final TouchEvent pTouchEvent) {
  176.                 this.mPinchZoomStartedCameraZoomFactor = this.mSmoothCamera
  177.                                 .getZoomFactor();
  178.  
  179.         }
  180.  
  181.         @Override
  182.         public void onPinchZoom(final PinchZoomDetector pPinchZoomDetector,
  183.                         final TouchEvent pTouchEvent, final float pZoomFactor) {
  184.  
  185.                
  186.                
  187.                 this.mSmoothCamera.setZoomFactor(this.mPinchZoomStartedCameraZoomFactor
  188.                                 * pZoomFactor);
  189.  
  190.                
  191.         }
  192.  
  193.         @Override
  194.         public void onPinchZoomFinished(final PinchZoomDetector pPinchZoomDetector,
  195.                         final TouchEvent pTouchEvent, final float pZoomFactor) {
  196.                 this.mSmoothCamera.setZoomFactor(this.mPinchZoomStartedCameraZoomFactor
  197.                                 * pZoomFactor);
  198.         }
  199.  
  200. }
  201.  
Parsed in 0.051 seconds, using GeSHi 1.0.8.4


Maybe I'm not on the right way? Can`t understand How to implement the boundary of zooming and scrolling?
p37TD8
 
Posts: 2
Joined: Sun Feb 12, 2012 5:55 pm

Re: Scrollable parallax with zoom(angrybirds style)

Postby jaym » Mon Feb 27, 2012 1:08 pm

Take a look here for an idea of how to get a scrolling parallax background (there's a video in the thread showing the end result). features/scrollable-parallax-background-t5390.html

As for zooming, you can change the ScrollingParallaxBackground to simply extend entity rather than Background and you'll be able to zoom the "background" as well.
AndEngine for Android Game Development Cookbook - Based on AndEngine's latest, greatest, GLES2.0 AnchorCenter branch!
jaym
 
Posts: 690
Joined: Wed May 04, 2011 10:08 pm

Re: Scrollable parallax with zoom(angrybirds style)

Postby p37TD8 » Tue Feb 28, 2012 11:11 am

Thanks for the answer. I did the scrolling parallax background on this example before, but I do not understand how to implement the zoom.
p37TD8
 
Posts: 2
Joined: Sun Feb 12, 2012 5:55 pm

Re: Scrollable parallax with zoom(angrybirds style)

Postby OzLark » Fri Mar 02, 2012 5:44 am

Has anyone had any luck implementing this?

@jaym could you expand on your idea of extending Entity ? I gave it a 'blind' shot and did the following:

  • Copied org.andengine.entity.scene.background.ParallaxBackground into my project and called it ParallaxBackgroundEntity
  • Changed ParallaxBackgroundEntity super class from Background to Entity, changed overloads onUpdate and onDraw to be onManagedUpdate and onManagedDraw.
  • Made ScrollableParallaxBackground extend ParallaxBackgroundEntity.
  • Changed ParallaxBackgroundEntity overloads to managed ones like above.
  • Changed camera.setBackgound(background) to scene.attachChild(background) -> is this how you see it being attached to the world?
I got no background rendered at all with this setup....

Any ideas?
Did this post help you? Feel free to return the gesture by downloading Ninja Bees, creating a level (or more) and sharing it to the Ninja Bees website!

Ninja Bees - Our latest Android game, check it out on Google Play (free) or paid with no ads
OzLark
 
Posts: 1130
Joined: Sun Feb 05, 2012 3:19 am

Re: Scrollable parallax with zoom(angrybirds style)

Postby chayfo » Sat Mar 03, 2012 1:51 am

I've got parallax scrolling with zoom setup in one of my games. Looks better than angry birds in my opinion. You have to implement your own function for the zoom portion on the parallax, but its really not that hard.

I'm not going to give you the code, but can get you pointed in the right direction. You need to add a parallaxZoom variable, just like the 'mParallaxValueX' variable. I personally have the following variables parallaxX, parallaxY, parallaxXOffset, parallaxYOffset, parallaxZoom, parallaxXScroll, parallaxYScroll.

Anyway, once you figure out how to get and set your parallaxZoom variable, you can then implement code in the OnDraw Method of the parallax scroller. Here you will get your parallaxZoom variable and "SCALE" the parallax background accordingly.

If you want to make it work like angry birds, I recommend adding an offset value and scroll value.
chayfo
 
Posts: 18
Joined: Thu Mar 10, 2011 2:27 pm

Re: Scrollable parallax with zoom(angrybirds style)

Postby jaym » Sat Mar 03, 2012 3:54 am

Here's my code for creating a parallax layer.

features/scrollable-parallax-background-t5390-10.html#p31188
AndEngine for Android Game Development Cookbook - Based on AndEngine's latest, greatest, GLES2.0 AnchorCenter branch!
jaym
 
Posts: 690
Joined: Wed May 04, 2011 10:08 pm


Return to GLES2

Who is online

Users browsing this forum: apenzzi, bruno.gabriel, Google [Bot] and 44 guests