Tutorial 04: camera

downloadDownload the ready to use Eclipse project for this tutorial

Now we know how to draw stuff; but there is something that you might have been wondering: why on earth is the camera a XY plane, (0,0) centered with a height and width of 2.0f? Simply put; it is the default camera on OpenGL. You could perfectly program a game using this default camera but let’s face it, that would be painful.

The default camera on OpenGL.

The default camera on OpenGL.

This would be painful because of two things: if you have a 2D game, it’s easier to deal with positive coordinates (ie: no negative x and y); and secondly, this camera doesn’t respect the aspect ratio at all! You can clearly see that one unit of y axis is longer than 1 unit of x axis. This results in a very ugly distortion where a perfectly square mesh (like our Ryu) will appear distorted in height.

So in essence: we want a camera with a 0,0 origin and that respects the aspect ratio of our game. This also brings the question of how to deal with different screen resolutions. A Galaxy S2 has a ratio of 480/800 = 0.6, a Galaxy Note 720/1280 = 0.5625, and other devices have other aspect ratios. The thing is: you don’t want your game to look weird on a screen and OK on another.

To solve this issue; you have to ask yourself which axis is the most important; ie if your answer is y then the height displayed will be the same on all devices; then compute the other axis length depending on the aspect ratio.

So let’s do this; let’s say the most important axis in our game is y; so we will define the screen height on the camera to be exactly 1.0f unit; then we compute the width. First; let’s create variables that will store all the information.

  private float camWidth = 0.0f;    //the width of the cam
  private float camHeight = 0.0f;    //the height of the cam
  private float aspectRatio = 0.0f;  //the aspect ratio
  private int screenWidth = 0;    //screen width in pixel size
  private int screenHeight = 0;    //screen height in pixel size
  private OrthographicCamera cam;    //our camera

The camera then needs to be setup in the “resize” method of your application. Why here? Because when an app starts, it resizes itself to the screen resolution of the device; and so we know from here what kind of screen resolution we are dealing with and how to setup properly the camera to respect the aspect ratio.

  @Override
  public void resize(int arg0, int arg1) {
    screenWidth = arg0;
    screenHeight = arg1;
    aspectRatio = (float) screenWidth / (float) screenHeight;
    camHeight = 1.0f;  //our camera will always be 1.0f height
    camWidth = 1.0f*aspectRatio; //width depend on aspect ratio

        cam = new OrthographicCamera(camWidth,camHeight);
        cam.position.set(camWidth / 2.0f, camHeight / 2.0f, 0.0f);
  }

In this exemple; where a window of 360×600 is launched, we therefore have an y axis of 1.0f, and a x axis of 0.6f. If we were working on a 720p device, the width of the camera would be 0.5625f. That is to say: someone playing your game on a Galaxy S2 will see more than someone playing it on a 720p device.

Don’t bugger yourself around this too much. It is how 2D games work and it is completely not important. In a 2D horizontal platformer, it would mean, definining x as 1.0f and computing the height, that some people might be a tiny bit more of the sky for instance. This is what it’s going to cost to support various screen sizes; but your game will look good on alldevices. And this is what matters.

There is one more final step to setup this camera: apply it in your render method:

  @Override
  public void render() {
    GL10 gl = Gdx.graphics.getGL10();
        gl.glClear(GL10.GL_COLOR_BUFFER_BIT);
        cam.update();
        cam.apply(gl);

Then if you draw the same mesh and textures than the previous tutorial; this is what should appear:

Everything in order for the next tutorial!

Everything in order for the next tutorial!

Of course, now that we have this camera, everything defined in negative coordinates cannot be seen. And it’s the same for anything drawn further away from 0.6f on the x axis: can’t be seen anymore!

But have no fear, now that we have a correct camera with the correct aspect ratio, we can move forward to the next tutorial: transforms.

downloadDownload the ready to use Eclipse project for this tutorial

Leave a Reply

css.php