Tile Mapping

Game Mechanics
#1

I tried Tiled for slick2D and threw some exception because it couldn’t read that certain type and i needed to edit a 64 somthing in the tmx. Ignoring that, I did more research on tile maps and tile engines to get the feeling of it. This tutorial explains how I could load a map from a text file which makes sense to me.
http://www.flashgametuts.com/tutorials/as3/how-to-create-a-platform-game-in-as3-part-2/

Then I see the more complicated tutorial which I should look more into.
http://www.tonypa.pri.ee/tbw/tut00.html

It explains from start to end about tiles. What I want to know is that in the first link, are maps normally loaded that way? I might have misunderstood someone but wasn’t i supposed draw each tile and render the ones on the screen/rectangle camera? Lastly, are each and every tile for some games told where to go?

#2

There is no normal way to do most things in games. You, the developer, have to pick a suitable way and go with it. Do you understand how to implement the algorithms in the pages you linked? Then implement them and use them. And I have no idea what you mean by “are each and every tile for some games told where to go?”. I think you need to think more about the algorithms behind the game and how they should work because it’s quite apparent you don’t, no offense. The “Tile” can be anything, there is no standard for rendering tiles. You’ll need to ask more specific questions if you want answers!

#3

There’s this one dude, named AppleSauce, who started a thread a while back. While the original post wasn’t specifically about tile maps, the thread is full of replies that explain many good fundamental concepts for working with tile engines.

But like opiop said, there’s no “one right way” (as even that thread shows). You do what works in the context of your game. That’s why it’s so hard to find step-by-step tutorials about specific parts of programming, because the parts have to work in the context of other parts you’ve already made. That’s why most tutorials are about concepts and how things should/could work, but seldom include actual code. Basically it’s like me explaining the concept of an internal combustion engine and how all the parts work with each other, but leaving the actual design of your version of the engine in your hands.

#4

Okay, then what would a very basic setup look like? I’ll be learning more about array algorithms. When I mean basic, let’s say I’m using Slick2D or Java2D and I want to draw a 5 by 5 tile map. For an example my Legend quest project was for testing my own tile engine and I put out the source code for it in pastebin. It loaded the tiles, but adding a tile or replacing one made it lag and the tile jiggle when it moves.

#5

I can’t tell you what a basic setup should look like. You need to figure it out so you learn, or I mean really you already have a whole thread dedicated to tile systems that Rayvolution linked, I think that’s a good place to start.

And if you want help with your lagging tiles or jiggling tiles or whatever, then please link the pastebin here. I don’t want to go searching for it.

#6

Watch every single one of these, from first to last, in order, and follow along.

Once you’re done, you’ll have a pretty solid basic understanding of forloops, arrays, arraylists and many other fundamental parts of a tile based map:
https://buckysroom.org/videos.php?cat=31
…and then watch these:
https://buckysroom.org/videos.php?cat=25
…and then all of these:
https://buckysroom.org/videos.php?cat=30
…and these even if you don’t use slick, because it helps with some game design concepts:
https://buckysroom.org/videos.php?cat=54

…and finally then, and only then are you authorized to reply to this thread! :stuck_out_tongue:

#7

Took a bit but I found the pastebin. If you draw another image (tiledistance from start * 64) it works fine besides the bit of lag a rugged movement.

This doesn’t count.

#8

I have a couple of questions for you.

#1 can you make a 1D array and load several different images into it?

#9

A 2D array would be a lot easier in my opinion. :slight_smile:

Applesauce, there is really nothing special about a a 2d tile game. You have an array of tiles which are drawn in a grid on the screen. There are different types of tiles, which may have different properties. The player may traverse some of these tiles, with very simple collision detection (AABB).

The methods that you posted are both ways to do it. Although they aren’t loading a map from a text file, this is essentially how it’s done. Different tiles have different id’s, and will have different properties (ie. collidable, traversable, etc). You draw these tiles by just looping through the array, and drawing the correct tile with a specific offset. You can change the overall offset of the map based off the player’s position.

I would really encourage you to watch Ray’s linked tutorials if you don’t understand any of those concepts. They should be the first things that you learn, and as Ray mentioned, they will help you with some game design concepts such as this.

#10

I’m sorry but the forum’s just full of these how to render XYZ things, and when you already have your own dedicated thread for tilemaps why would you open a new one?
To get started with game development though you would need to know at least the basic containers (ArrayList, LinkedList, HashSet, HashMap, arrays and multidimensional arrays). Until you haven’t got that down we cannot help you.

About loading the tilemaps:
You have couple of different choices here and you should always go with the one that suits your game the best.
The most used tilemap designer tool is Tiled currently and it uses XML as it’s output file format.
But if you don’t like that or you want to add some extra (like make different tiles have different properties as Longarmx said) you have lots of other choices to convert to (or you can just modify the output XML file), like JSON or YAML.
You can also roll your own file format which isn’t as hard as it sounds but I wouldn’t recommend it seeing that Java has 3 ways of built-in XML parsing and it has nice JSON and YAML libraries.
The way to think about tiles is that they’re in a key-value relationship, ie. we can represent tiles using numbers and every number means a specific tile. Let’s say that 1 is water, 2 is dirt and 3 is sand and you have the following tilemap:

1 1 2 2
2 2 3 3

Than it means that the first row has: Water, water, dirt, dirt
Second row: Dirt, dirt, sand, sand

Simple as that.

About rendering the tilemaps:
My suggestion would be to first aim to make the easiest (that would be a 2D array with separate VBOs and textures for each tile if you’re using OpenGL) tilemap structure as possible and when you’re done with that and you can fully understand what you’re doing, start optimizing it. Optimization’s first step would be to put all of your tiles’ vertices into a single buffer, so with a 100x100 tilemap you would have only 1 draw command instead of 10000. The second step would be to start using a texture atlas instead of seperate textures to reduce the amount of texture binding calls. If you feel confident implement texture arrays so you can use multiple texture atlases if needed for rendering a tilemap (this isn’t really necessary, but who knows, it could come handy). Also try to implement layers (eg. add a 3rd dimension to the array, that would be Z or L).

If you want to get into the deep water you can check out my game engine’s Tiled XML parser and TileMap classes. It uses all the optimizations (except texture arrays) that I’ve mentioned above. :slight_smile:

#11

yeah wouldn’t it look somthing like this

for (a = 0; a < array.length; a++) {
drawTile(some parameter)
}
#12

No, It would look like this:


    //create an array with 4 spaces
    Image myImages[] = new Image[4];

    //load each image into a space
    myImages[0] = loadImage("dirt.png");
    myImages[1] = loadImage("stone.png");
    myImages[2] = loadImage("grass.png");
    myImages[3] = loadImage("water.png");

This is the first step to making a tile engine. It loads each of your image files into an array so that you can access each one by using a number:


    //draw 4 images the same in different positions
    drawImage(myImages[0], 100,100);
    drawImage(myImages[0], 150,100);
    drawImage(myImages[0], 100,150);
    drawImage(myImages[0], 150,150);

    //draw 4 different images in different positions
    drawImage(myImages[3], 200,200);
    drawImage(myImages[1], 300,200);
    drawImage(myImages[2], 300,300);
    drawImage(myImages[3], 200,300);

    //draw randomly selected tiles in a line
    for (int i = 0; i < 100; i++){
        drawImage(myImages[random.nextInt(4)], i*20,400);
    }
#13

Thanks so much, i understand it. A lot less tedious than i thought. That explains how larger tile maps can be writtern like this

 {0,0,0,0,0,0,0
  0,0,0,0,0,0,0
  1,0,0,00,0,0}

// 1 = player; 0 = empty space

#14

yeah thats the one. Now when you want to make a map of tiles you say:


    Int mapWidth = 10;
    Int mapHeight = 10;

    //make a 2d array 10x10 which will hold "tile type reference" numbers
    Int tileMap[][] = new Int[mapWidth][mapHeight];

    //loop through the map array
    for (int x = 0; x < mapWidth; x++){
    for (int y = 0; y < mapHeight; y++){
        //set each map array space to a random number between 0 and 3
        tileMap[x][y] = random.nextInt(4);
    }
    }

Now you have a 2d array containing random “tile type references” you can use these references to get one of the images out of your myImages array:


    int currentTile;

    //loop through the map array
    for (int x = 0; x < mapWidth; x++){
    for (int y = 0; y < mapHeight; y++){
        //get the tile
        currentTile = tileMap[x][y];

        //draw the tile
        drawImage(myImages[currentTile], x * TILE_WIDTH, y * TILE_HEIGHT);
    }
    }

All this enables you to examine/change tiles from anywhere in your map at any time.

#15

Wouldn’t this just apply for just one image? How would you add a new tile?

 if (currentTile[10][10])drawImage(redtileImage[currentTile], x * TILE_WIDTH, y * TILE_HEIGHT)
#16

What are you trying to make this line do? that doesnt quite make sence.

To add a tile:
Firstly if you mean to add a new tile image (or 10) that youve just drawn in paint. Go back to the loading section and add your new images into there.

If you mean to add a new tile to the tile map, you dont actually add tiles to the tile map, you just change the “tile type reference” number of a space on the map array to represent a different tile type.


    //eg
    tileMap[3][7] = 0;
    tileMap[0][0] = 1;
    tileMap[9][9] = 3;

    //or work out a specific tile to change
    int xTileThatMouseIsOver = workoutMouseXSomehow();
    int yTileThatMouseIsOver = workoutMouseYSomehow();
    
    tileMap[xTileThatMouseIsOver][yTileThatMouseIsOver] = desiredTileTypeReferenceNumber;
#17

Based off of that:

if (tileMap[3][7] = 0) {
//not sure what exactly to put
drawImage(tile[3][7])}
#18

drawImage(myImages[tileMap[3][7]]);

#19

Ok you need to take a step back.
Define a tile class which holds an image. The tile class will also have a render method, which will obviously handle the rendering of the tile. Then, in your world or game or whatever class, create a two dimensional array of the Tile class. To render, you just loop through the array and call tile.render(). You need to have your classes handle themselves, which youre not doing right now and its messing you up.

#20

I don’t think throwing extra tile classes into the mix is really necessary at this point. Just getting a very basic looped drawer working from an array is a good goal.