Existe una ley antigua, posiblemente anterior a la edad del hombre, que establece que todos los tutoriales deben comenzar con Hello World. No soy más que respetuoso de la ley, así que vamos a crear una aplicación Hello World. Hello World es generalmente uno de los programas más simples que puede crear, simplemente muestra las palabras Hello World en la pantalla. Por supuesto, siempre hay complicaciones en la vida… ¡eso es lo que la hace interesante!

Para comenzar, creé un proyecto simple usando la herramienta Configuración del proyecto que discutimos en el tutorial previo.

Vamos a saltar con el código en un segundo, pero primero echemos un vistazo rápido al código creado por la herramienta del proyecto, gdx-setup-ui. Tu proyecto debería verse así:

Obviamente, los nombres de sus archivos variarán según lo que haya utilizado durante la herramienta de configuración del proyecto. Lo más importante a tener en cuenta son los conceptos básicos de cómo se presenta el código. La carpeta sin sufijo ( hello-world ) es donde va el código compartido. Las carpetas –android, –desktop y –html son donde va el código específico de la plataforma y, con suerte, tendrá una necesidad mínima de usarlas. Los miraré un poco más de cerca en unos minutos, pero por ahora es el archivo HelloWorld.java el que nos interesa. Aquí es donde se implementa una clase muy importante llamada ApplicationListener. Aquí está el código que usé:

package com.gamefromscratch.helloworld;

import com.badlogic.gdx.ApplicationListener;
import com.badlogic.gdx.Gdx;
import com.badlogic.gdx.graphics.Color;
import com.badlogic.gdx.graphics.GL10;
import com.badlogic.gdx.graphics.g2d.BitmapFont;
import com.badlogic.gdx.graphics.g2d.SpriteBatch;

public class HelloWorld implements ApplicationListener {
    private SpriteBatch batch;
    private BitmapFont font;
    
    @Override
    public void create() {        
        batch = new SpriteBatch();    
        font = new BitmapFont();
        font.setColor(Color.RED);
    }

    @Override
    public void dispose() {
        batch.dispose();
        font.dispose();
    }

    @Override
    public void render() {        
        Gdx.gl.glClearColor(1, 1, 1, 1);
        Gdx.gl.glClear(GL10.GL_COLOR_BUFFER_BIT);
        
        batch.begin();
        font.draw(batch, "Hello World", 200, 200);
        batch.end();
    }

    @Override
    public void resize(int width, int height) {
    }

    @Override
    public void pause() {
    }

    @Override
    public void resume() {
    }
}

Lo primero que notará es… ¡no hay Main! Bueno, hay uno y lo veremos en un segundo. Sin embargo, al final del día, LibGDX es un motor impulsado por eventos. Implementa un ApplicationListener y GDX llama a una serie de funciones a las que puede responder. El método render() se llamará a cada cuadro, por lo que si lo desea, puede considerarlo como su ciclo de eventos. De lo contrario, hay funciones que se llaman en respuesta a varios eventos, estos incluyen crear, cambiar el tamaño, pausar y reanudar. ¡Me imagino que puedes adivinar a qué evento responde cada uno!

La mayor parte de nuestro código está en create() y render(). En create() asignamos un nuevo SpriteBatch, BitmapFont y configuramos la fuente en color rojo. SpriteBatch’ing es una actividad común en los motores de juegos 2D construidos sobre bibliotecas 3D, si ha usado XNA, está acostumbrado. Básicamente, detrás de escena, LibGDX está usando OpenGL (o WebGL dependiendo de la plataforma) para hacer el renderizado. En OpenGL hay un poco de sobrecarga en el dibujo… bueno, cualquier cosa. Un spritebatch los combina todos en una sola operación para reducir la cantidad de gastos generales. En pocas palabras, hace que el renderizado 2D sea mucho más rápido. Un BitmapFont es exactamente lo que parece, un mapa de bits 2D que contiene todos los caracteres. Si no especifica una fuente en el constructor, obtendrá la fuente predeterminada Arial-15 incluida con LibGDX. El archivo de fuente se ve así:

En el método render() borramos la pantalla a blanco haciendo que la función OpenGL llame a glClear() y glClearColor(). Los parámetros de glClearColor son los valores rojo, verde, azul y alfa (transparencia) para limpiar la pantalla. La función glClear en realidad borra la pantalla. Como puede ver, la funcionalidad subyacente de OpenGL está expuesta en Gdx.gl, aunque generalmente no trabajará en ese nivel muy a menudo.

A continuación, comenzamos nuestro lote de sprites llamando a begin(), luego procesamos nuestro texto en el lote usando el método font.draw. Los parámetros para dibujar () son el lote para dibujar, el texto para dibujar y las coordenadas x e y para dibujar el texto. Si ejecuta este código (haga clic con el botón derecho en hello-world-desktop y seleccione Ejecutar como->Aplicación Java) verá:

¡Voila! Es Hola Mundo.

Una cosa importante a tener en cuenta es que el proyecto hello-world no es una aplicación que pueda ejecutar, es una biblioteca utilizada por otros proyectos. Te mostraré lo que quiero decir, echa un vistazo al código en hello-world-desktop, por ejemplo:

¡Oye, mira, es Main! Veamos el código:

package com.gamefromscratch.helloworld;

import com.badlogic.gdx.backends.lwjgl.LwjglApplication;
import com.badlogic.gdx.backends.lwjgl.LwjglApplicationConfiguration;

public class Main {
    public static void main(String[] args) {
        LwjglApplicationConfiguration cfg = new LwjglApplicationConfiguration();
        cfg.title = "hello-world";
        cfg.useGL20 = false;
        cfg.width = 480;
        cfg.height = 320;
        
        new LwjglApplication(new HelloWorld(), cfg);
    }
}

Este es el punto de entrada real para su aplicación, o al menos lo es para el destino de escritorio. Aquí es donde ocurre la configuración específica del escritorio. Luego comienza su juego creando un objeto LwjglApplication, pasando una instancia de su ApplicationListener, así como los ajustes de configuración específicos de Lwjgl. Si Lwjgl es nuevo para usted, es un envoltorio de juego basado en Java sobre OpenGL y es lo que LibGDX usa para la representación de escritorio. Más allá de configurarlo aquí, no tendrás otras interacciones con él, LibGDX se encarga de todo eso por ti.

Para comprender realmente cómo funciona la magia multiplataforma en LibGDX, echemos un vistazo al proyecto Main for the –html. En este caso, en realidad no se llama Main, sino GwtLauncher.java.

Gwt significa Google Web Toolkit, y es una tecnología que proporciona Google para compilar Java en JavaScript para usar en un navegador. Es la salsa secreta que usa LibGDX para hacer que su juego se ejecute en HTML. También es terriblemente molesto a veces, ¡te han advertido! Dicho esto, si no le importa HTML, puede eliminar este proyecto por completo y ahorrarse varios dolores de cabeza.

Echemos un vistazo a GwtLauncher.java:

package com.gamefromscratch.helloworld.client;

import com.gamefromscratch.helloworld.HelloWorld;
import com.badlogic.gdx.ApplicationListener;
import com.badlogic.gdx.backends.gwt.GwtApplication;
import com.badlogic.gdx.backends.gwt.GwtApplicationConfiguration;

public class GwtLauncher extends GwtApplication {
    @Override
    public GwtApplicationConfiguration getConfig () {
        GwtApplicationConfiguration cfg = new GwtApplicationConfiguration(480, 320);
        return cfg;
    }

    @Override
    public ApplicationListener getApplicationListener () {
        return new HelloWorld();
    }
}

Se parece mucho al proyecto de escritorio principal, ¿no? El concepto básico es exactamente el mismo, usted crea los bits de configuración específicos de la plataforma y crea una instancia de su ApplicationListener. Sin embargo, la clase GwtApplication se basa en la devolución de llamada, por lo que se ve un poco diferente. Una vez más, rara vez debería estar trabajando a este nivel. Sin embargo, una cosa importante a tener en cuenta son los valores que se pasan a GwtApplicationConfiguration… esto representa el tamaño del lienzo HTML que se está creando. Entonces, si desea que su aplicación HTML sea más que un pequeño cuadrado en el medio de la pantalla, aquí es donde debe cambiarla.

Entonces, básicamente, LibGDX funciona haciendo que crees una única biblioteca común que implementa tu juego de una manera multiplataforma en forma de ApplicationListener. Para admitir múltiples plataformas, tiene un proyecto para cada plataforma en el que crea una aplicación específica de plataforma (una instancia de GwtApplication en el caso de objetivos HTML, LwjglApplication para objetivos de escritorio, AndroidApplication para objetivos Android, Aplicación para objetivos iOS… no se muestra porque estoy trabajando en Windows actualmente), configúrelo y pase el ApplicationListener. Es esta clase de aplicación la que volverá a llamar a su ApplicationListener en cada cuadro. La buena noticia es que, la mayoría de las veces, no te importará nada de esto… pero es útil entender lo que sucede detrás de las cortinas.

Oh sí… sobre GWT

¿Recuerdas que dije que era un poco doloroso? Bueno, echemos un vistazo a lo que sucede cuando ejecuta la aplicación hello-world-html (haga clic con el botón derecho en hello-world-html->Ejecutar como->Aplicación web):

Uf… así que básicamente nuestro código intenta hacer algo que GWT no permite. Si volvemos a Eclipse en el panel Consola, podemos obtener un poco más de información sobre la naturaleza de la excepción.

Es la línea 17 en HelloWorld.Java la que está causando la excepción:

font = new BitmapFont();

Entonces, ¿qué está pasando aquí exactamente? Bueno, recuerda antes cuando te dije que el constructor predeterminado de BitmapFont usaría la fuente arial-15 incorporada. Bueno, cuando dije incorporado, ese archivo en realidad reside en gdx.jar, que está incluido en su proyecto. Un archivo jar es en realidad solo un zip, por lo que si extrae el archivo, puede ver todo el código y los activos que componen la biblioteca gdx. De particular interés para nosotros es la carpeta gdxcombadlogicgdxutils, aquí es donde reside el archivo de fuente entre otros archivos:

Básicamente, GwtApplication está intentando acceder a este archivo y no tiene permiso para hacerlo. ¿Cuál es la moraleja de la historia? La plataforma cruzada es increíble… ¡pero no siempre es gratis! A menos que necesite admitir HTML, sugeriría no crear un proyecto HTML, ya que es, con mucho, la parte más frágil de LibGDX y trabajar con GWT causa todo tipo de angustias y complicaciones. ¡Su experiencia puede ser diferente!

Dicho esto, hay una solución muy simple para esto, e ilustra muy bien cómo maneja los archivos entre sus proyectos… un proceso que puede no ser particularmente intuitivo. La solución simple es agregar los archivos arial-15.fnt y arial-15 al proyecto y cambiar la línea:

font = new BitmapFont();

a

font = new BitmapFont(Gdx.files.internal("data/arial-15.fnt"),false);

Esta versión del constructor de BitmapFont toma un identificador de archivo del archivo de fuente que desea que use BitmapFont. Gdx.files se usa para la manipulación de archivos, internal devuelve un identificador de archivo a un archivo que está incluido en el proyecto. El parámetro falso especifica que el gráfico de la fuente no está al revés.

Entonces, ¿cómo se agrega realmente el archivo al proyecto? Los agregas a la carpeta assetsdata del proyecto hello-world-android:

Puede agregar los archivos simplemente arrastrándolos o soltándolos desde el Finder o el Explorador a la carpeta de datos en el Explorador de paquetes.

Ahora que se ha agregado el archivo de fuente, ahora podemos ejecutar el objetivo HTML:

Eso es Hello World en LibGDX. A continuación, veremos algo más avanzado que Hello World.