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
Archivo: asukarei.jpg
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
5. A continuación el código de ambas clases
RPantalla.java
package com.bolivia.libgdxresolution; /** * @author mouse * @web https://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 https://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.
Descargate el proyecto en este link económico
Java 8 trae consigo una nueva versión del motor de JavaScript llamada Nashorn, este motor introduce mejoras de rendimien[...]
Cuando se realizan trabajos donde se necesita mostrar al cliente un determinado monto de dinero, tipo factura, recibo, c[...]
Cuando realizamos proyectos java desde Netbeans, usamos System.out.println para imprimir datos en consola (para dep[...]
En este post conocernos lo que son las Estructuras de Control IF en los script de Bash. Estas estructuras nos ayudan a c[...]
im4java es una interfaz pura de Java para la línea de comandos de ImageMagick. La interfaz de la línea de comandos de IM[...]
De los diferentes IDE’s que existen para crear aplicaciones para android, lamentablemente Netbeans es una de las m[...]
