![\"\"](\"http:\/\/www.pixnbgames.com\/blog\/wp-content\/uploads\/2017\/11\/Captura-de-pantalla-2017-11-22-a-las-21.09.50-300x84.png\")
<\/p>\n
Una vez importado, lo primero ser\u00e1 a\u00f1adir los recursos al proyecto. En el sub-proyecto android<\/em>, crearemos una carpeta \u00abmaps\/<\/em>\u00ab, y dentro copiamos los archivos tileset.png<\/em> y level.tmx<\/em>.<\/p>\n <\/p>\n A continuaci\u00f3n explicaremos como cargar y dibujar el mapa en la clase principal del juego, <\/p>\n La clase Como se puede ver, se utiliza tambi\u00e9n el m\u00e9todo <\/p>\n El objeto Por defecto encontraremos una serie de propiedades definidas por Tiled Map Editor<\/em>, y tambi\u00e9n podemos agregar las que necesitemos desde el editor de Tiled<\/em>. De las propiedades que tiene el mapa, es muy probable que necesitemos al menos las siguientes:<\/p>\n A partir de las propiedades anteriores podemos el calcular el tama\u00f1o total del mapa en p\u00edxeles, cosa que necesitaremos para, entre otras cosas, posicionar la c\u00e1mara:<\/p>\n <\/p>\n Para dibujar la escena utilizaremos una c\u00e1mara ortogr\u00e1fica <\/p>\n La clase encarga de dibujar el mapa en nuestra escena es Despu\u00e9s, en el m\u00e9todo La siguiente imagen muestra el resultado de la ejecuci\u00f3n:<\/p>\n Puedes descargar el proyecto completo desde mi repositorio de GitHub<\/em><\/a>.<\/p>\n Gracia y saludos,<\/p>\n","protected":false},"excerpt":{"rendered":" Recursos del proyecto Una vez tenemos nuestro tileset y nuestro mapa, es hora de empezar a trabajar con libGDX, para ello creamos un nuevo proyecto y lo importamos a nuestro editor de c\u00f3digo. Una vez importado, lo primero ser\u00e1 a\u00f1adir Seguir leyendo C\u00f3mo usar libGDX + Tiled: dibujando con libGDX<\/span>![\"\"](\"http:\/\/www.pixnbgames.com\/blog\/wp-content\/uploads\/2017\/11\/Captura-de-pantalla-2017-11-22-a-las-21.22.40.png\")
\nAdem\u00e1s borramos la imagen badlogic.jpg<\/em> incluida al crear el proyecto, ya que no la necesitamos.<\/p>\nC\u00f3digo<\/h3>\n
MyGdxTiledGame<\/code>. Antes de comenzar, limpiamos la implementaci\u00f3n por defecto de la clase:<\/p>\npublic class MyGdxTiledGame extends ApplicationAdapter {\r\n \r\n @Override\r\n public void create () { }\r\n\r\n @Override\r\n public void render () { }\r\n \r\n @Override\r\n public void dispose () { }\r\n}\r\n<\/pre>\nCargando el mapa<\/h4>\n
TiledMap<\/code> representa un mapa generado con Tiled Map Editor<\/em>. Es el punto de entrada a la manipulaci\u00f3n de nuestro mapa. Para cargar el TiledMap<\/code>, utilizaremos el cargador TmxMapLoader<\/code>. El siguiente fragmento de c\u00f3digo muestra c\u00f3mo hacerlo utilizando el AssetManager<\/code>:<\/p>\npublic class MyGdxTiledGame extends ApplicationAdapter {\r\n \r\n private TiledMap map;\r\n private AssetManager manager;\r\n ...\r\n\r\n @Override\r\n public void create () {\r\n manager = new AssetManager();\r\n manager.setLoader(TiledMap.class, new TmxMapLoader());\r\n manager.load(\"maps\/level.tmx\", TiledMap.class);\r\n manager.finishLoading();\r\n\r\n map = manager.get(\"maps\/level.tmx\", TiledMap.class);\r\n ...\r\n }\r\n \r\n @Override\r\n public void dispose () {\r\n manager.dispose();\r\n }\r\n}\r\n<\/pre>\ndispose()<\/code> para liberar los recursos del AssetManager<\/em>.<\/p>\nPropiedades del mapa<\/h4>\n
TiledMap<\/code> contiene informaci\u00f3n en forma de propiedades que podemos leer. Para la lectura de propiedades utilizaremos la clase MapProperties<\/code> que ofrece libGDX<\/em>.<\/p>\nMapProperties properties = map.getProperties();<\/pre>\n
\n
public class MyGdxTiledGame extends ApplicationAdapter {\r\n ...\r\n \/\/ Map properties\r\n private int tileWidth, tileHeight,\r\n mapWidthInTiles, mapHeightInTiles,\r\n mapWidthInPixels, mapHeightInPixels;\r\n ...\r\n @Override\r\n public void create () {\r\n ...\r\n \/\/ Read properties\r\n MapProperties properties = map.getProperties();\r\n tileWidth = properties.get(\"tilewidth\", Integer.class);\r\n tileHeight = properties.get(\"tileheight\", Integer.class);\r\n mapWidthInTiles = properties.get(\"width\", Integer.class);\r\n mapHeightInTiles = properties.get(\"height\", Integer.class);\r\n mapWidthInPixels = mapWidthInTiles * tileWidth;\r\n mapHeightInPixels = mapHeightInTiles * tileHeight;\r\n ...\r\n }\r\n ...\r\n}\r\n<\/pre>\nPreparando la c\u00e1mara<\/h4>\n
OrthographicCamera<\/code>, en este ejemplo usando una resoluci\u00f3n de proyecci\u00f3n de 320px<\/i> de ancho por 180px<\/i> de alto. Una vez creada, ajustamos su posici\u00f3n para dibujar el mapa en la posici\u00f3n deseada.<\/p>\npublic class MyGdxTiledGame extends ApplicationAdapter {\r\n ...\r\n private OrthographicCamera camera;\r\n ...\r\n @Override\r\n public void create () {\r\n ...\r\n \/\/ Set up the camera\r\n camera = new OrthographicCamera(320.f, 180.f);\r\n camera.position.x = mapWidthInPixels * .5f;\r\n camera.position.y = mapHeightInPixels * .35f;\r\n ...\r\n }\r\n ...\r\n}<\/pre>\nDibujando en la escena<\/h4>\n
OrthogonalTiledMapRenderer<\/code>. Creamos un objeto de esta clase, y lo instanciamos en el m\u00e9todo create()<\/code> pas\u00e1ndo nuestro mapa como par\u00e1metro.<\/p>\nrender()<\/code>, se limpia la pantalla con un color azul, se actualiza la c\u00e1mara y dibuja nuestro mapa.<\/p>\npublic class MyGdxTiledGame extends ApplicationAdapter {\r\n ...\r\n private OrthogonalTiledMapRenderer renderer;\r\n \r\n @Override\r\n public void create () {\r\n ...\r\n renderer = new OrthogonalTiledMapRenderer(map);\r\n ...\r\n }\r\n\r\n @Override\r\n public void render () {\r\n Gdx.gl.glClearColor(.5f, .7f, .9f, 1);\r\n Gdx.gl.glClear(GL20.GL_COLOR_BUFFER_BIT);\r\n\r\n camera.update();\r\n renderer.setView(camera);\r\n renderer.render();\r\n }\r\n ...\r\n}<\/pre>\n![\"\"](\"http:\/\/www.pixnbgames.com\/blog\/wp-content\/uploads\/2017\/11\/Captura-de-pantalla-2017-11-22-a-las-23.20.38-1024x612.png\")
<\/p>\n