Sigueme en Facebook Sigueme en Twitter Sigueme en Instagram Sigueme en Youtube
JC Mouse Bolivia
Index / Android / Resolución de pantalla con LibGDX

Resolución de pantalla con LibGDX

Autor jc mouse domingo, agosto 25, 2013

En este tutorial, veremos un poco más de lo que son las texturas en libGDX y dos maneras de añadirlas a nuestros juegos, ademas trataremos un aspecto muy  importante que es la resolución de pantalla para que los juegos que creemos se adapten sin problema al celular que usemos evitando que los gráficos se distorsionen.

Herramientas

– Eclipse Indigo + Android instalado y configurado

– LibGDX, descarga y descomprime en algún lugar de tu pc la versión Nightly Builds

Tiempo: 16 minutos

Nivel: Java intermedio, Android intermedio

Proyecto

1.Crea un nuevo Application Android Project con la siguiente configuración:

Application Name: LibGDX Resolution

Project Name: LibGDXResolution

Package Name: com.bolivia.libgdxresolution

Activity: Blank Activity

Activity Name: MainActivity.java

Layout Name: activity_main.xml

2. Añade las siguientes librerías y carpetas a la carpeta LIBS/ del proyecto después actualiza para hacer efectivos los cambios (Refresh o F5).

– gdx.jar

– gdx-backend-android.jar

– armeabi-v7a/

– armeabi/

Selecciona gdx.jar y gdx-backend-android.jar con el mouse, clic derecho -> Build Path -> Add to build path para agregar las librerías al proyecto.

3. Las imágenes que utilizaremos en el proyecto son:

Archivo: eva01.png

eva01

Archivo: asukarei.jpg

asuka y ayanami

Debes colocar las imágenes en la carpeta ASSETS/ del proyecto.

4. Crea dos clases en el paquete com.bolivia.libgdxresolution

 RPantalla.java : Esta clase redimensiona el ancho y alto del juego para que este encaje en la pantalla del celular

– Evangelion.java: Es la clase del juego en si

gdx project

5. A continuación el código de ambas clases

RPantalla.java

package com.bolivia.libgdxresolution;
/**
 * @author mouse
 * @web http://www.jc-mouse.net
 * 
 * Clase que redimensiona el ancho y alto del juego para que este encaje en la pantalla
 * del celular sin deformarse 
 * */
public final class RPantalla {

 //portrait
 private float anchop;
 private float altop;
 //landscape
 private float anchol;
 private float altol;
 //Coordenas X,Y para las diferentes vistas
 //portrait
 private float xp=0f;
 private float yp=0f;
 //landscape
 private float xl=0f;
 private float yl=0f;
 //Posicion de vista por defecto
 private String posicion="portrait" ;

 /**
 * Constructor de clase
 * @param game_ancho Ancho del juego
 * @param game_alto Alto del juego
 * @param screen_ancho Ancho de la pantalla del celular
 * @param screen_alto Alto de la pantalla del celular
 * */
 public RPantalla( float game_ancho, float game_alto ,float screen_ancho, float screen_alto  )
 {
   /* Portrait
 |--------|
 | |
 | |
 | |
 | |
 y |
 |x-------|
 */
   //posicion
   xp = 0f;
   yp = (screen_alto - game_alto*(screen_ancho/game_ancho))/2f;
   //tamaño
   anchop =  game_ancho*(screen_ancho/game_ancho);
   altop = game_alto*(screen_ancho/game_ancho); 

   /* Lanscape
 |-------------------|
 | |
 | |
 y |
 |x------------------|
 */
   //posicion
   xl= ( screen_ancho - game_ancho*(screen_alto/game_alto))/2f;
   yl = 0f;   
   //tamaño
   anchol = game_ancho*(screen_alto/game_alto);
   altol = game_alto*(screen_alto/game_alto);

 }

 /**
 * Segun las dimensiones de la pantalla asigna la posicion en portrait o landscape
 * @param width Ancho de pantalla
 * @param height Alto de pantalla
 * */
 public void setPosicion( int width, int height )
 {  
  this.posicion = ( width > height )?"landscape":"portrait" ;
 }

 public int getX()
 {
  return ( posicion.equals("landscape"))?(int)xl🙁int)xp;
 }

 public int getY()
 {
  return ( posicion.equals("landscape"))?(int)yl🙁int)yp;
 }

 public int getAncho()
 {

  return ( posicion.equals("landscape"))?(int)anchol🙁int)anchop;
 }

 public int getAlto()
 {
  return ( posicion.equals("landscape"))?(int)altol🙁int)altop;
 }

}

Evangelion.java

En esta clase, utilizamos dos formas de agregar imágenes con libGDX, usando TextureRegion y Sprite, ademas creamos un viewport y hacemos uso de nuestra clase RPantalla.java pasando las dimensiones del juego y las dimensiones de pantalla del dispositivo.

Los gráficos los dibujamos en el método render() y la clase RPantalla se ejecuta cuando el dispositivo cambia de tamaño, esto es en el método resize( int width, int height ) que tiene como parámetros de entrada las dimensiones (alto,ancho) de pantalla del dispositivo.

package com.bolivia.libgdxresolution;

import com.badlogic.gdx.ApplicationListener;
import com.badlogic.gdx.Gdx;
import com.badlogic.gdx.graphics.GL10;
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.graphics.g2d.TextureRegion;
import com.badlogic.gdx.graphics.glutils.ShapeRenderer;
import com.badlogic.gdx.graphics.glutils.ShapeRenderer.ShapeType;
/**
 * @author mouse
 * @web http://www.jc-mouse.net
 * */
public class Evangelion implements ApplicationListener{

 private TextureRegion asuka;
 private TextureRegion rei;
 private SpriteBatch batch;
 private OrthographicCamera camera; 
 private Sprite  eva01;
 private ShapeRenderer shapeRenderer;
 //dimensiones del juego
 private float game_ancho = 800;
 private float game_alto = 480;

 private RPantalla rpantalla;

 @Override
 public void create() {

  //----- TEXTURE REGION ------
  //Textura completa asuka y rei
  Texture asukarei = new Texture( Gdx.files.internal("asukarei.jpg") );
  //extrae una region de la imagen
  asuka = new TextureRegion( asukarei , 120, 50, 118, 164 );
  rei = new TextureRegion( asukarei , 32, 43, 88, 166 );
  //------SPRITE--------------
  Texture robot = new Texture( Gdx.files.internal("eva01.png") );
  eva01 = new Sprite( robot );
  eva01.rotate(45);
  eva01.setPosition(400, 100);
  eva01.setScale(2);

  batch = new SpriteBatch();  
  shapeRenderer = new ShapeRenderer();

  //Se crea el Viewport
  camera = new OrthographicCamera();
  camera.setToOrtho(false, game_ancho,game_alto);
  //Instancia a nueva clase RPantalla con las dimensiones del juego y de la pantalla del celular
  rpantalla = new RPantalla( game_ancho , game_alto, Gdx.graphics.getWidth() , Gdx.graphics.getHeight());
 }

 @Override
 public void dispose() {
  //liberamos memoria
  asuka.getTexture().dispose();
  rei.getTexture().dispose();  
  batch.dispose();  
 }

 @Override
 public void pause() { /* ... */ }

 @Override
 public void render() {
  Gdx.gl.glClearColor( 1, 0, 0.5f, 1);
  Gdx.gl.glClear(GL10.GL_COLOR_BUFFER_BIT);

  //Dibuja un rectangulo 
  shapeRenderer.setProjectionMatrix( camera.combined );
  shapeRenderer.begin( ShapeType.Filled );
  shapeRenderer.setColor(0, 1, 0, 1); 
  shapeRenderer.rect(0, 0, game_ancho, game_alto );  
  shapeRenderer.end();

  // dibuja las imagenes
  batch.setProjectionMatrix( camera.combined );
  batch.begin();
  batch.draw(rei,100,200,88,166);
  batch.draw(asuka,0,0,118,164);
  eva01.draw( batch );
  batch.end();
 }

 @Override
 public void resize(int width, int height) {
  //cuando se cambie de tamaño se redimensionara el juego
  this.rpantalla.setPosicion(width, height);
  Gdx.gl.glViewport( this.rpantalla.getX(), this.rpantalla.getY(), this.rpantalla.getAncho(), this.rpantalla.getAlto() );
 }

 @Override
 public void resume() { /* ... */ }
}

6. Ya para terminar, implementamos el código necesario en el MainActivity:

package com.bolivia.libgdxresolution;

import com.badlogic.gdx.backends.android.AndroidApplication;
import android.os.Bundle;

public class MainActivity  extends AndroidApplication{

 @Override
 protected void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);
  initialize( new Evangelion(), false );
 }

}

Si ejecutamos el proyecto, veremos como el área del juego para el ejemplo con un tamaño de 800×480 que esta pintado de color verde, se adapta correctamente a nuestro dispositivo tanto en la vista Portrait como Landscape, si no hiciéramos esto, android trataría de ajustar automáticamente al tamaño de pantalla de nuestro celular, pero como vemos en la imagen esto deformaría los gráficos.

resolucion pantalla

Descargate el proyecto en este link económico

Tags

Si te ha gustado podrías compartirlo o dejar un comentario. ¡Muchas gracias!
Autor: JC Mouse

Yo soy yo :) JC Mouse, Soy orgullosamente boliviano soy fundador y CEO de la web jc-Mouse.net uno de las pocas web en emprendimiento y tecnología en Bolivia.

Toda la información que encuentres en este sitio es y sera completamente gratis siempre, puedes copiar, descargar y re-publicar si así lo deseas en otros blogs o sitios web, solo te pido a cambio que dejes una referencia a esta web. Esto nos ayuda a crecer y seguir aportando. Bye

Enjoy! :)

También Te Podría Interesar

Generación de laberintos: Algoritmo de Aldous-Broder

Generación de laberintos: Algoritmo de Aldous-Broder

El Algoritmo de Aldous-Broder llamado así por dos matemáticos, David Aldous and A. Broder (quienes trabajaban en la inve...

Juego: Adivina el número

Juego: Adivina el número

Problema: Desarrollar un juego en consola con Kotlin que genere un numero aleatorio entre un rango preestablecido y perm...

Qulqi: Convierte números a letras en java

Qulqi: Convierte números a letras en java

Hola 🙂 publicando de tiempo les dejo esta chiti librería java para convertir números a su equivalente literal. La librer...

Configura tu smartphone y PC para testear aplicaciones

Configura tu smartphone y PC para testear aplicaciones

Cuando desarrollamos aplicaciones para android como programadores nos interesa la velocidad al tiempo de depurar el códi...

Lo nuevo de HTTP Client

Lo nuevo de HTTP Client

Una de las novedades de Java 9 y 10 aunque por el momento en modo de prueba (jdk.incubator.http) es el Cliente HTTP el c...

Validar documentos XML con esquema XSD

Validar documentos XML con esquema XSD

Un esquema XSD se utiliza para describir y validar la estructura y contenido de los datos de un documento XML. Un esquem...

6 comentarios en “Resolución de pantalla con LibGDX”

  1. Pablo Dante dice:

    Este ejemplo así explicado está: MORTAL MAS I.V.A. !!!!
    Es más … voy a tener que molestarte con consultas que se me vallan planteando.
    Un saludo cordial.

  2. Nery dice:

    Primeramente quiero decirte que vengo siguiendo desde años lo que publicas, quiero felicitarte por el aporte al aprendizaje y comprension de la programacion, sigues adelante contribuyendo al conocimiento.

    Ahh descubri la contraseña pero no vi la sorpresa jajajajajaj. chauuu saludos

    1. Mouse dice:

      a pillin

  3. cross dice:

    muy buen ejemplo y
    me podrias decir cuales son los nombres de la pistas que usaste para el video xD

  4. Jorge Luis Garduza dice:

    Hola, fijate que realize algunos cambios a tu proyecto para que me mostrara mas campos, todo bien no contiene errores el codigo, pero a la hora de ejecutarlo me dice el mensaje “No se encontro InvalidOperationException”, a que crees que se deba..

    Saludos

    1. Mouse dice:

      :/ ¿qué no encontró? el error no te da más detalles o indica la linea de código en el que se produce???

Los comentarios estan cerrados

Comparte lo que sabes

Categorias

Últimas entradas

En diciembre de 1990 se desarrolló una aplicación llamada WorldWideWeb en una máquina NeXT (programado con el lenguaje O...

En un post anterior vimos como usar la herramienta XJC del JDK para generar clases java desde esquemas XSD (XML Schema D...

Kali Linux es un sistema operativo de pruebas de intrusión con una gran colección de herramientas forenses y de segurida...

XJC es una herramienta de linea de comandos del compilador de esquemas de JAXB que se puede utilizar para convertir un e...

Android Bolivia

MAUS