Si nunca has usado Tiled ¡Leé esto primero!
En esta parte del tutorial, veremos cómo cargar mapas ortogonales en LibGDX. Ortogonal básicamente significa «en ángulo recto», que es una forma elegante de decir que la cámara está mirando directamente a la escena. Otra palabra mucho menos elegante para este estilo de juego es «de arriba hacia abajo». Los ejemplos comunes incluyen casi todos los juegos de la generación de consolas de 16 bits, como Zelda o MegaMan.
Uno de los primeros problemas con los que te vas a encontrar es ¿cómo creas tus mapas? Una solución muy común es la Editor de mapas en mosaico que afortunadamente yo acaba de completar un tutorial sobre! Este tutorial asume que sabe cómo generar un archivo TMX, por lo que si no lo ha hecho, asegúrese de seguir el tutorial vinculado. Afortunadamente, LibGDX hace que sea muy fácil trabajar con archivos TMX.
Lo primero es lo primero que necesitamos para copiar el TMX y cualquier/todos los archivos de imagen de mapa de mosaico utilizados en su carpeta de activos, así:
Puede notar que, a diferencia de los tutoriales anteriores, actualmente estoy usando IntelliJ. Con el cambio reciente a Gradle, es mucho más fácil ponerse en marcha en IntelliJ y lo prefiero enormemente a Eclipse. Dicho esto, todo lo que digo es igualmente válido en Eclipse o IntelliJ y cuando haya diferencias las señalaré. Si desea comenzar con IntelliJ leer aquí.
Bien, volviendo al tema…
Ahora que tiene el mapa y los mosaicos en su proyecto, comencemos con el código:
package com.gamefromscratch;
import com.badlogic.gdx.ApplicationAdapter;
import com.badlogic.gdx.Gdx;
import com.badlogic.gdx.Input;
import com.badlogic.gdx.InputProcessor;
import com.badlogic.gdx.graphics.GL20;
import com.badlogic.gdx.graphics.OrthographicCamera;
import com.badlogic.gdx.graphics.Texture;
import com.badlogic.gdx.maps.tiled.TiledMap;
import com.badlogic.gdx.maps.tiled.TiledMapRenderer;
import com.badlogic.gdx.maps.tiled.TmxMapLoader;
import com.badlogic.gdx.maps.tiled.renderers.OrthogonalTiledMapRenderer;
public class TiledTest extends ApplicationAdapter implements InputProcessor {
Texture img;
TiledMap tiledMap;
OrthographicCamera camera;
TiledMapRenderer tiledMapRenderer;
@Override
public void create () {
float w = Gdx.graphics.getWidth();
float h = Gdx.graphics.getHeight();
camera = new OrthographicCamera();
camera.setToOrtho(false,w,h);
camera.update();
tiledMap = new TmxMapLoader().load("MyCrappyMap.tmx");
tiledMapRenderer = new OrthogonalTiledMapRenderer(tiledMap);
Gdx.input.setInputProcessor(this);
}
@Override
public void render () {
Gdx.gl.glClearColor(1, 0, 0, 1);
Gdx.gl.glBlendFunc(GL20.GL_SRC_ALPHA, GL20.GL_ONE_MINUS_SRC_ALPHA);
Gdx.gl.glClear(GL20.GL_COLOR_BUFFER_BIT);
camera.update();
tiledMapRenderer.setView(camera);
tiledMapRenderer.render();
}
@Override
public boolean keyDown(int keycode) {
return false;
}
@Override
public boolean keyUp(int keycode) {
if(keycode == Input.Keys.LEFT)
camera.translate(-32,0);
if(keycode == Input.Keys.RIGHT)
camera.translate(32,0);
if(keycode == Input.Keys.UP)
camera.translate(0,-32);
if(keycode == Input.Keys.DOWN)
camera.translate(0,32);
if(keycode == Input.Keys.NUM_1)
tiledMap.getLayers().get(0).setVisible(!tiledMap.getLayers().get(0).isVisible());
if(keycode == Input.Keys.NUM_2)
tiledMap.getLayers().get(1).setVisible(!tiledMap.getLayers().get(1).isVisible());
return false;
}
@Override
public boolean keyTyped(char character) {
return false;
}
@Override
public boolean touchDown(int screenX, int screenY, int pointer, int button) {
return false;
}
@Override
public boolean touchUp(int screenX, int screenY, int pointer, int button) {
return false;
}
@Override
public boolean touchDragged(int screenX, int screenY, int pointer) {
return false;
}
@Override
public boolean mouseMoved(int screenX, int screenY) {
return false;
}
@Override
public boolean scrolled(int amount) {
return false;
}
}
Cuando ejecute el código, debería ver su mapa. Al presionar las teclas de flecha, se desplazará por el mapa (y se mostrará en rojo brillante cuando se haya movido más allá de la extensión de su mapa). Presionar 0 o 1 cambiará la visibilidad de cada una de las dos capas en su mapa. (Vea el tutorial en Tiled si eso no tiene sentido).
Lo impresionante aquí es cuán poco código se requirió para lograr tanto. En pocas palabras, era básicamente esto:
camera = new OrthographicCamera();
camera.setToOrtho(false,w,h);
camera.update();
tiledMap = new TmxMapLoader().load("MyCrappyMap.tmx");
tiledMapRenderer = new OrthogonalTiledMapRenderer(tiledMap);
Creamos una OrthographicCamera, la configuramos a las dimensiones de la pantalla y la actualizamos(). A continuación, cargamos nuestro mapa usando TmxMapLoader.load() y creamos un OrthogonalTiledMapRenderer pasando nuestro mapa en mosaico.
En nuestro método de renderizado:
camera.update(); tiledMapRenderer.setView(camera); tiledMapRenderer.render();
Básicamente, actualice la cámara (en caso de que la hayamos movido usando las teclas de flecha), pásela al TiledMapRenderer con setView() y finalmente renderice() el mapa. Eso es todo.
Como puede ver en nuestro controlador de claves:
@Override
public boolean keyUp(int keycode) {
if(keycode == Input.Keys.LEFT)
camera.translate(-32,0);
if(keycode == Input.Keys.RIGHT)
camera.translate(32,0);
if(keycode == Input.Keys.UP)
camera.translate(0,-32);
if(keycode == Input.Keys.DOWN)
camera.translate(0,32);
if(keycode == Input.Keys.NUM_1)
tiledMap.getLayers().get(0).setVisible(!tiledMap.getLayers().get(0).isVisible());
if(keycode == Input.Keys.NUM_2)
tiledMap.getLayers().get(1).setVisible(!tiledMap.getLayers().get(1).isVisible());
return false;
}
Navegar por el mapa es simplemente cuestión de moverse alrededor de la cámara. Nos movemos en fragmentos de 32 píxeles porque ese es el tamaño de nuestros mosaicos. Básicamente, movemos la cámara hacia la izquierda/derecha/arriba/abajo un mosaico cada vez que se presiona una tecla de flecha. En el caso de que se presionen las teclas 0 o 1, cambiamos la visibilidad de esa capa en particular. Como puede ver, puede acceder a las capas de TileMap usando la función getLayers().get().
En la siguiente parte, veremos cómo agregar algunas funciones más complejas.
