Tutorial 7: Cámara y Gestos

Hola buenas.

En el presente tutorial, veremos como manipular un poco la cámara y unos conceptos de captura de gestos.

Es sabido que en los diversos juegos, existe un objeto fundamental, este objeto es la cámara, la cual se encarga de observar en un recuadro llamado vista, que elementos existen en ella.

En nuestro caso la cámara tiene varias propiedades:

1. Mover y rotar la cámara en nuestras escenas.
2. Hacer zoom in o zoom out(acercar o alejar los elementos de nuestro escena).
3. Cambiar las relaciones de aspectos.

Aquí esta la documentación: Camara

También veremos la interfaz GestureListener, para detectar que gestos estamos haciendo en la pantalla.

Para nuestro caso de estudio, utilizaremos la funcion de "pan", la cual lee los estados cuando un dedo en la pantalla es esta siendo arrastrado. Excelente para hacer los desplazamientos entre escenas grandes. En adicion la funcion "fling" es perfecto para hacer el Swipe.

Estrategia:

Utilizaremos una imagen de 2048x1152, y nuestra pantalla tendrá 800x400, es esta pantalla centraremos la imagen, para poder visualizarla solo ese segmento. 

Luego por medio del  arrastre del mouse/dedo, desplazaremos la camera en ese sentido.

Manos a la obra:

Para comenzar, creamos nuestro proyecto, así:

Importamos en eclipse, la imagen que utilizaremos es: dbs_2048x1152.jpg, esta se debe colocar en la carpeta de assets del proyecto de android, y borrar la otra que se encuentra ahí.

Nuestro código quedaría así:

Clase Tuto5:

package sv.chuckles.tuto5;

import com.badlogic.gdx.ApplicationAdapter;

import com.badlogic.gdx.Gdx;

import com.badlogic.gdx.Input;

import com.badlogic.gdx.graphics.GL20;

import com.badlogic.gdx.graphics.OrthographicCamera;

import com.badlogic.gdx.graphics.Texture;

import com.badlogic.gdx.graphics.g2d.Sprite;

import com.badlogic.gdx.graphics.g2d.SpriteBatch;

import com.badlogic.gdx.input.GestureDetector;

import com.badlogic.gdx.input.GestureDetector.GestureListener;

import com.badlogic.gdx.math.Vector2;

public class Tuto5 extends ApplicationAdapter implements GestureListener {

SpriteBatch batch;

Sprite sprite;

OrthographicCamera camera;

@Override

public void create () {

batch = new SpriteBatch();

sprite = new Sprite(new Texture("dbs_2048x1152.jpg"));

sprite.setPosition(-sprite.getWidth()/2,-sprite.getHeight()/2);

camera = new OrthographicCamera(800, 400);

Gdx.input.setInputProcessor(new GestureDetector(this));

}

@Override

public void render () {

camera.update();

Gdx.gl.glClearColor(1, 0, 0, 1);

Gdx.gl.glClear(GL20.GL_COLOR_BUFFER_BIT);

   

batch.setProjectionMatrix(camera.combined);

batch.begin();

sprite.draw(batch);

batch.end();

if (Gdx.input.isKeyPressed(Input.Keys.A)) {

camera.zoom += 0.02;

        }

if (Gdx.input.isKeyPressed(Input.Keys.Q)) {

camera.zoom -= 0.02;

        }

}

@Override

public void dispose() {

batch.dispose();

}

@Override

public boolean touchDown(float x, float y, int pointer, int button) {

return false;

}

@Override

public boolean tap(float x, float y, int count, int button) {

return false;

}

@Override

public boolean longPress(float x, float y) {

return false;

}

@Override

public boolean fling(float velocityX, float velocityY, int button) {

return false;

}

@Override

public boolean pan(float x, float y, float deltaX, float deltaY) {

camera.translate(-deltaX,deltaY);

return false;

}

@Override

public boolean panStop(float x, float y, int pointer, int button) {

return false;

}

@Override

public boolean zoom(float initialDistance, float distance) {

return false;

}

@Override

public boolean pinch(Vector2 initialPointer1, Vector2 initialPointer2, Vector2 pointer1, Vector2 pointer2) {

return false;

}

}

Explicación:

• Linea 15: ahí esta la implementacion de la interfaz "GestureListener", que nos ayuda a capturar los gestos. Cuando se implementa, a la clase se le agregan los métodos sobrescritos: touchDown, tap, longPress, fling, pan, panStop, zoom y pinch.
• Linea 18: Creamos la variable camera.
• Linea 26: Instanciamos el objeto camera y pasamos de parametro 800x400 que tendra de vista nuestra ventana.
• Linea 28: Esta instrucción es muy importante, es aquí donde se le dice a LibGdx que nuestra clase implementada es la que se utilizara para la lectura de los gestos. Si somos observadores vemos que la clase GestureDetector recibe de parámetro "this", que no es nada mas que nuestra clase implementada.
• Linea 33: Esta instrucción actualiza la vista de la cámara, es decir actualiza las coordenadas para pintarlas en nuestra ventana.
• Linea 37: Esta instrucción convierte las coordenadas de la cámara a coordenadas naturales para el batch, porque esto, es donde escalamos las pantallas, por ejemplo nuestra escena es de 1024x768, pero nuestra ventana tiene 800x400. Entonces con esto la resolución alta se ajusta a la pequeña.
• Linea 42 a la 47: Si presionamos la tecla A, hará un zoom in y la tecla Q, hará un zoom out, esto solo funciona en el proyecto de Desktop.
• Linea 77: la instrucción translate, mueve la cámara, después de la acción del pan.

Ya puedes probar vía Desktop y con tu dispositivo mobil xD

Espero que les ayude y un saludo.

Código fuente: https://github.com/Solidux/tuto-libgdxelsalvador.blogspot.com/tree/master/tuto5

Sígueme en Twiter: https://twitter.com/libgdxESA

Si te gusta mi trabajo y quisieras ver mas y mas rápido, puedes donar $1.00 vía donación paypal: