{"id":90,"date":"2015-07-25T17:52:00","date_gmt":"2015-07-25T17:52:00","guid":{"rendered":"https:\/\/therenaissanceraven.com\/?p=90"},"modified":"2015-07-25T17:52:00","modified_gmt":"2015-07-25T17:52:00","slug":"libgdx-creating-the-map-or-platform-tiled","status":"publish","type":"post","link":"https:\/\/therenaissanceraven.com\/?p=90","title":{"rendered":"*libGDX* Creating the Map or Platform – Tiled"},"content":{"rendered":"

<\/a>To create the map that will be used in the game, we use an amazing free open source program called Tiled. You are able to download it from here:<\/p>\n

http:\/\/www.mapeditor.org\/<\/a><\/p>\n

Open opening this browser, you are able to create a new map. For mine i kept the tile size at 32, and made the map 25×15 as to keep the total pixel size as 800×480 so no screen resizing would be needed in our 800×480 size game. For the tile layer format, Base64 zlib is recommended as the best for tmx maps to use withing libGDX.<\/p>\n

Open creating the new map you are exposed to the following:<\/p>\n

<\/a><\/a><\/div>\n

Tiles – Simply a graphic you can use to build your map. These can be easily made in paint as I do, or very nice royalty free ones are available online.
Layers – These are you layers in to which you can add different tiles, such as a pathways\/walls\/traps, any kind of tile type that you would wish to distinguish from others.<\/p>\n

<\/a><\/a>Now simply just click the tile from tile set and add it to the map as your heart desires, to achieve a result such as the following with two layers of “pathway” (mine is called Tile Layer 1) and “barricade”:<\/p>\n

<\/a><\/div>\n

And then it is as simple as that, your map is created.<\/p>\n

<\/a>Now to add it to the game the following must be done in addition to adding the tiled map into your assets folder. In your main class (e.g. GameScreen) which renders the game, you must define two new variables:
<\/p>\n

\n\n\n\n
\n
1
2
3
4
5<\/pre>\n<\/td>\n
\n
    \/\/Creates a reference for our tiled map<\/span>
    private<\/span> TiledMap tiledMap =<\/span> new<\/span> TmxMapLoader().<\/span>load<\/span>(<\/span>\"testmap.tmx\"<\/span>);<\/span>

    \/\/creates a reference for our tiledmaprenderer whichs loads are tiled map<\/span>
    private<\/span> OrthogonalTiledMapRenderer mapRenderer =<\/span> new<\/span> OrthogonalTiledMapRenderer(<\/span>tiledMap);<\/span>
<\/pre>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
Then in the render section, this code will cause the map to be rendered, along with an optional code to center the camera around your character’s location (you will have to create the character class in order to copy this):
<\/p>\n
\n\n\n\n
\n
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13<\/pre>\n<\/td>\n
\n
\/\/makes the camera fit onto the available screen<\/span>
        game.<\/span>gameBatch<\/span>.<\/span>setProjectionMatrix<\/span>(<\/span>camera.<\/span>combined<\/span>);<\/span>
        \/\/sets the map renderer to display in the camera<\/span>
        mapRenderer.<\/span>setView<\/span>(<\/span>camera);<\/span>
        \/\/renders the map<\/span>
        mapRenderer.<\/span>render<\/span>();<\/span>

        \/\/If you wish for the camera to follow to character<\/span>
        camera.<\/span>position<\/span>.<\/span>x<\/span> =<\/span> character.<\/span>charPosition<\/span>.<\/span>x<\/span>;<\/span>
        camera.<\/span>position<\/span>.<\/span>y<\/span> =<\/span> character.<\/span>charPosition<\/span>.<\/span>y<\/span>;<\/span>

        \/\/updates camera view<\/span>
        camera.<\/span>update<\/span>();<\/span>
<\/pre>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n","protected":false},"excerpt":{"rendered":"
To create the map that will be used in the game, we use an amazing free open source program called Tiled. You are able to download it from here: http:\/\/www.mapeditor.org\/ Open opening this browser, you are able to create a new map. For mine i kept the tile size at 32, and made the map…<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[7],"tags":[],"class_list":["post-90","post","type-post","status-publish","format-standard","hentry","category-programming"],"_links":{"self":[{"href":"https:\/\/therenaissanceraven.com\/index.php?rest_route=\/wp\/v2\/posts\/90","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/therenaissanceraven.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/therenaissanceraven.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/therenaissanceraven.com\/index.php?rest_route=\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/therenaissanceraven.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=90"}],"version-history":[{"count":0,"href":"https:\/\/therenaissanceraven.com\/index.php?rest_route=\/wp\/v2\/posts\/90\/revisions"}],"wp:attachment":[{"href":"https:\/\/therenaissanceraven.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=90"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/therenaissanceraven.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=90"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/therenaissanceraven.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=90"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}