3D Perspective Tutorial

  ... tutorials on how to use AndEngine.

3D Perspective Tutorial

Postby undershirt » Thu Jan 27, 2011 2:40 am

To add a 3D perspective to AndEngine, use the following code when creating your Camera object:

(This is useful for placing objects at different distances from the screen using the Z coordinate.)

Syntax: [ Download ] [ Hide ]
Using java Syntax Highlighting
  1. import android.opengl.GLU;
  2. /* ... */
  3. this.mCamera = new Camera(0, 0, CAMERA_WIDTH, CAMERA_HEIGHT)
  4. {
  5.    @Override
  6.    public void onApplyMatrix(GL10 pGL)
  7.    {  
  8.       setFrustum(pGL);
  9.    }  
  10.    
  11.    @Override
  12.    public void onApplyPositionIndependentMatrix(GL10 pGL)
  13.    {  
  14.       setFrustum(pGL);
  15.    }  
  16.    
  17.    @Override
  18.    public void onApplyCameraSceneMatrix(GL10 pGL)
  19.    {  
  20.       setFrustum(pGL);
  21.    }  
  22.    
  23.    private void setFrustum(GL10 pGL)
  24.    {  
  25.       // set field of view to 60 degrees
  26.       float fov_degrees = 60;
  27.       float fov_radians = fov_degrees / 180 * (float)Math.PI;
  28.    
  29.       // set aspect ratio and distance of the screen
  30.       float aspect = this.getWidth() / this.getHeight();
  31.       float camZ = this.getHeight()/2 / (float)Math.tan(fov_radians/2);
  32.    
  33.       // set projection
  34.       GLHelper.setProjectionIdentityMatrix(pGL);
  35.       GLU.gluPerspective(pGL, fov_degrees, aspect, camZ/10, camZ*10);
  36.    
  37.       // set view
  38.       GLU.gluLookAt(pGL, 0, 0, camZ, 0, 0, 0, 0, 1, 0); // move camera back
  39.       pGL.glScalef(1,-1,1); // reverse y-axis
  40.       pGL.glTranslatef(-CAMERA_WIDTH/2,-CAMERA_HEIGHT/2,0); // origin at top left
  41.    }  
  42. };
  43.  
Parsed in 0.037 seconds, using GeSHi 1.0.8.4


NOTE: This breaks the Camera::applyRotation function since it is inaccessible from a subclass.
undershirt
 
Posts: 2
Joined: Thu Jan 27, 2011 2:15 am

Re: 3D Perspective Tutorial

Postby jgittins » Tue Feb 01, 2011 9:34 pm

I tried using it but I couldn't really tell any difference. Could you post screenshots of before and after so I can see what you mean?
jgittins
 
Posts: 4
Joined: Fri Jan 28, 2011 9:39 pm

Re: 3D Perspective Tutorial

Postby undershirt » Thu Feb 03, 2011 8:46 am

The idea is that it only changes when you edit the Z coordinate of a texture or shape, causing it to go deeper into the screen.

But here's an example that applies this 3D Perspective to the Rotation3DExample from AndEngineExamples project.

Before/After:
Image

Here's the full code for the edits to Rotation3DExample.java (all I changed was the camera code and the pGL.glHint line for rendering texture perspective correctly):
Syntax: [ Download ] [ Hide ]
Using java Syntax Highlighting
  1. package org.anddev.andengine.examples;
  2. import javax.microedition.khronos.opengles.GL10;
  3. import org.anddev.andengine.engine.Engine;
  4. import org.anddev.andengine.engine.camera.Camera;
  5. import org.anddev.andengine.engine.options.EngineOptions;
  6. import org.anddev.andengine.engine.options.EngineOptions.ScreenOrientation;
  7. import org.anddev.andengine.engine.options.resolutionpolicy.RatioResolutionPolicy;
  8. import org.anddev.andengine.entity.scene.Scene;
  9. import org.anddev.andengine.entity.scene.background.ColorBackground;
  10. import org.anddev.andengine.entity.shape.modifier.LoopShapeModifier;
  11. import org.anddev.andengine.entity.shape.modifier.RotationModifier;
  12. import org.anddev.andengine.entity.sprite.Sprite;
  13. import org.anddev.andengine.entity.util.FPSLogger;
  14. import org.anddev.andengine.opengl.texture.Texture;
  15. import org.anddev.andengine.opengl.texture.TextureOptions;
  16. import org.anddev.andengine.opengl.texture.region.TextureRegion;
  17. import org.anddev.andengine.opengl.texture.region.TextureRegionFactory;
  18. import org.anddev.andengine.opengl.util.GLHelper;
  19. import android.opengl.GLU;
  20. /**
  21.  * @author Nicolas Gramlich
  22.  * @since 10:10:10 - 10.10.2010
  23.  */
  24.  
  25. public class Rotation3DExample extends BaseExample {
  26.         // ===========================================================
  27.         // Constants
  28.         // ===========================================================
  29.  
  30.         private static final int CAMERA_WIDTH = 720;
  31.         private static final int CAMERA_HEIGHT = 480;
  32.  
  33.         // ===========================================================
  34.         // Fields
  35.         // ===========================================================
  36.  
  37.         private Camera mCamera;
  38.         private Texture mTexture;
  39.         private TextureRegion mFaceTextureRegion;
  40.  
  41.         // ===========================================================
  42.         // Constructors
  43.         // ===========================================================
  44.  
  45.         // ===========================================================
  46.         // Getter & Setter
  47.         // ===========================================================
  48.  
  49.         // ===========================================================
  50.         // Methods for/from SuperClass/Interfaces
  51.         // ===========================================================
  52.  
  53.         @Override
  54.         public Engine onLoadEngine() {
  55.                 this.mCamera = new Camera(0, 0, CAMERA_WIDTH, CAMERA_HEIGHT)
  56.                 {
  57.                         @Override
  58.                         public void onApplyMatrix(GL10 pGL)
  59.                         {
  60.                                 setFrustum(pGL);
  61.                         }                      
  62.  
  63.                         @Override
  64.                         public void onApplyPositionIndependentMatrix(GL10 pGL)
  65.                         {
  66.                                 setFrustum(pGL);
  67.                         }                      
  68.  
  69.                         @Override
  70.                         public void onApplyCameraSceneMatrix(GL10 pGL)
  71.                         {
  72.                                 setFrustum(pGL);
  73.                         }                      
  74.  
  75.                         private void setFrustum(GL10 pGL)
  76.                         {
  77.                                 // set field of view to 60 degrees
  78.                                 float fov_degrees = 60;
  79.                                 float fov_radians = fov_degrees / 180 * (float)Math.PI;                        
  80.  
  81.                                 // set aspect ratio and distance of the screen
  82.                                 float aspect = this.getWidth() / this.getHeight();
  83.                                 float camZ = this.getHeight()/2 / (float)Math.tan(fov_radians/2);                              
  84.  
  85.                                 // set projection
  86.                                 GLHelper.setProjectionIdentityMatrix(pGL);
  87.                                 GLU.gluPerspective(pGL, fov_degrees, aspect, camZ/10, camZ*10);                        
  88.  
  89.                                 // set view
  90.                                 GLU.gluLookAt(pGL, 0, 0, camZ, 0, 0, 0, 0, 1, 0); // move camera back
  91.                                 pGL.glScalef(1,-1,1); // reverse y-axis
  92.                                 pGL.glTranslatef(-CAMERA_WIDTH/2,-CAMERA_HEIGHT/2,0); // origin at top left
  93.                         }
  94.                 };
  95.  
  96.                 return new Engine(new EngineOptions(true, ScreenOrientation.LANDSCAPE, new RatioResolutionPolicy(CAMERA_WIDTH, CAMERA_HEIGHT), this.mCamera));
  97.         }
  98.  
  99.         @Override
  100.         public void onLoadResources() {
  101.                 this.mTexture = new Texture(32, 32, TextureOptions.BILINEAR_PREMULTIPLYALPHA);
  102.                 this.mFaceTextureRegion = TextureRegionFactory.createFromAsset(this.mTexture, this, "gfx/face_box.png", 0, 0);
  103.                 this.mEngine.getTextureManager().loadTexture(this.mTexture);
  104.         }
  105.  
  106.         @Override
  107.         public Scene onLoadScene() {
  108.                 this.mEngine.registerUpdateHandler(new FPSLogger());
  109.  
  110.                 final Scene scene = new Scene(1);
  111.                 scene.setBackground(new ColorBackground(0.09804f, 0.6274f, 0.8784f));
  112.  
  113.                 /* Calculate the coordinates for the face, so its centered on the camera. */
  114.                 final int centerX = (CAMERA_WIDTH - this.mFaceTextureRegion.getWidth()) / 2;
  115.                 final int centerY = (CAMERA_HEIGHT - this.mFaceTextureRegion.getHeight()) / 2;
  116.  
  117.                 /* Create the face and add it to the scene. */
  118.                 final Sprite face = new Sprite(centerX, centerY, this.mFaceTextureRegion) {
  119.                         @Override
  120.                         protected void applyRotation(final GL10 pGL) {
  121.                                 /* Disable culling so we can see the backside of this sprite. */
  122.                                 GLHelper.disableCulling(pGL);                          
  123.  
  124.                                 final float rotation = this.mRotation;
  125.  
  126.                                 if(rotation != 0) {
  127.                                         final float rotationCenterX = this.mRotationCenterX;
  128.                                         final float rotationCenterY = this.mRotationCenterY;
  129.  
  130.                                         pGL.glTranslatef(rotationCenterX, rotationCenterY, 0);
  131.                                         /* Note we are applying rotation around the y-axis and not the z-axis anymore! */
  132.                                         pGL.glRotatef(rotation, 0, 1, 0);
  133.                                         pGL.glTranslatef(-rotationCenterX, -rotationCenterY, 0);
  134.                                 }
  135.                         }
  136.  
  137.                         @Override
  138.                         protected void drawVertices(final GL10 pGL, final Camera pCamera) {
  139.                                 pGL.glHint(GL10.GL_PERSPECTIVE_CORRECTION_HINT,GL10.GL_NICEST);
  140.                                 super.drawVertices(pGL, pCamera);
  141.  
  142.                                 /* Enable culling as 'normal' entities profit from culling. */
  143.                                 GLHelper.enableCulling(pGL);
  144.                         }
  145.                 };
  146.  
  147.                 face.setScale(10);
  148.                 face.addShapeModifier(new LoopShapeModifier(new RotationModifier(6, 0, 360)));
  149.                 scene.getTopLayer().addEntity(face);
  150.  
  151.                 return scene;
  152.         }
  153.  
  154.         @Override
  155.         public void onLoadComplete() {
  156.         }
  157.  
  158.         // ===========================================================
  159.         // Methods
  160.         // ===========================================================
  161.  
  162.         // ===========================================================
  163.         // Inner and Anonymous Classes
  164.         // ===========================================================
  165. }
Parsed in 0.050 seconds, using GeSHi 1.0.8.4
undershirt
 
Posts: 2
Joined: Thu Jan 27, 2011 2:15 am

Re: 3D Perspective Tutorial

Postby moppelg » Sun Jun 19, 2011 2:12 pm

Hi,

this perspective Tutorial looks great. Can anyone add a small code snippet how to change the "depth" of my entity? So that is looks smaller or bigger depending on the depth?

That code could also replace a single layer parallax background.

Best regards,

Moppel
moppelg
 
Posts: 64
Joined: Sun Jun 12, 2011 12:42 pm

Re: 3D Perspective Tutorial

Postby Nicolas Gramlich » Sun Jun 19, 2011 5:08 pm

Hi,

thanks for the tutorial. (Btw it would be a bit nicer to turn your anonymous Camera subclass into a top-level class with some constcurtors/getters/setters).

The Entity class has no "z" property and simply passes zero fro the z value.
Syntax: [ Download ] [ Hide ]
Using java Syntax Highlighting
  1. protected void applyTranslation(final GL10 pGL) {
  2.      pGL.glTranslatef(this.mX, this.mY, 0);
  3. }
Parsed in 0.033 seconds, using GeSHi 1.0.8.4


If you do so, I'll make a new 3D Example and turn the old one into a Pseudo3DExample :lol:

But you can easily subclass the Entity and overwrite applyTranslation as I made it protected, which would like this:
Syntax: [ Download ] [ Hide ]
Using java Syntax Highlighting
  1. new Sprite(0, 0, null) {
  2.         private float mZ = SOME_VALUE;
  3.         @Override
  4.         protected void applyTranslation(GL10 pGL) {
  5.                 pGL.glTranslatef(this.mX, this.mY, this.mZ);
  6.         }
  7. };
Parsed in 0.036 seconds, using GeSHi 1.0.8.4


Best Regards,
Nicolas
Nicolas Gramlich
Site Admin
 
Posts: 1734
Joined: Mon Jun 07, 2010 6:20 pm
Location: Schriesheim, Germany

Re: 3D Perspective Tutorial

Postby moppelg » Sun Jun 19, 2011 6:08 pm

Hi Nicolas,

fast as always! Thanks again - good to know!
Hope my AndEngine skills grows fast, so I also can help people one day.

Best regards,

Moppel
moppelg
 
Posts: 64
Joined: Sun Jun 12, 2011 12:42 pm

Re: 3D Perspective Tutorial

Postby Liiam » Thu Jul 07, 2011 3:53 pm

Hey guys,

i was wondering if it is possible to get the sprite moving towards you in that perspective. Basicaly I'm looking for something like Guitar hero style track if you know what i mean.

any ideas ?

Liiam
Liiam
 
Posts: 23
Joined: Thu Nov 25, 2010 6:21 pm

Re: 3D Perspective Tutorial

Postby moppelg » Thu Jul 07, 2011 9:02 pm

Hi,

I still didn't try it, but Nicolas posted above the answer to your question.

Best regards

Moppel
moppelg
 
Posts: 64
Joined: Sun Jun 12, 2011 12:42 pm

Re: 3D Perspective Tutorial

Postby Liiam » Fri Jul 08, 2011 10:36 am

hey

you're right thanks, but is there any way to set velocity to this sprite in that perspective?

thanks in advance

Liiam
Liiam
 
Posts: 23
Joined: Thu Nov 25, 2010 6:21 pm

Re: 3D Perspective Tutorial

Postby moppelg » Fri Jul 08, 2011 10:06 pm

Hi,

I think you would have to do this manually in the Update method and change thbere the z value according to the "speed".
To get the "comes out of the screen effect" it would also work just to scale your sprite.

Best regards

Moppel
moppelg
 
Posts: 64
Joined: Sun Jun 12, 2011 12:42 pm

Next

Return to Tutorials

Who is online

Users browsing this forum: No registered users and 20 guests