Quote:Original post by yhsa2nd
Hi im new to programming in java and basically i am trying to add a map or tiles to my game... As of now all I have is a moving sprite, I want to add tiles but I have no idea how... Could someone help me?

Drawing tiles isn't much different from drawing your moving sprite. Only a matter of scale, really. I'll present one of many basic approaches below to get you thinking and on your way, but keep in mind that this naive solution is somewhat flawed in several respects. It is only the idea I wish to convey.

Imagine the world that your sprite/avatar is walking on as one giant image with a large 2D grid overlaid on top of it. Also imagine that the avatar is sitting at coordinates (0, 0) of this world, which we will say is the bottom-left corner of the map--with this setup, there will be no negative numbers in the coordinates, only positive. Assume the world's boundaries are at 1024 pixels in either direction, for a total map size of 2048x2048. Each square or tile section of the map, we'll say, is 32x32 pixels in size. Let's also say that only 640x480 pixels of the entire map are visible at any given time--this is our viewport into the world. For these purposes, we'll say the viewport is always centered on the avatar, which means that the avatar stays in one place on the screen and that the world moves around it. To achieve this, we will require both a local and a global/world position for our sprite; the local position is where the sprite is displayed (i.e. the center of the screen) and the global position is where the avatar is at on the world map.

Behind the scenes, our tiled world is actually a two-dimensional array of objects where each 32x32 tile section on the world corresponds to an entry in the array--the actual entries are tile class objects that store information about which tile to draw at a given position in the map. We've established the world to be 2048x2048 in size. If we divide the tile size into the world size then we can determine that our data array will need to be 64 by 64 entries in size in order to completely represent our particular world.

We said earlier that the avatar is standing at coordinates (0, 0) in the world (meaning its global position). Allow that position to correspond with the first entry in the data array (i.e. [0][0]). As the avatar moves right he will advance along the array, going from [0][0] to [1][0], to [2][0], to [3][0], and so on. But, remember we said that each tile in the world is 32x32 pixels. This implies that the avatar must move 32 pixels in any direction (in global coordinates) in order to progress to the next tile, and thus the next entry in the array. So, this means that even if the avatar's position, in pixels, was (31, 31), the avatar is actually still on the same tile it started on, which is the tile associated with the entry [0][0] of our 2D map array.

The first thing to determine when actually displaying the tiles is which portion of the map to draw. This is fairly straightforward given that we have established a viewport. Assuming we have a sprite that can move, we start by pulling the sprite's global coordinates. We must then convert those coordinates into something the map array can use by dividing by our tile size of 32. For example, if the sprite's world position in pixels is (321, 63), dividing each coordinate by 32 (and ignoring fractions by rounding down) yields (10, 1). That means the sprite is at position [10][1] in the map array.

Next, remember that the viewport is 640x320 in pixels and is centered on the sprite, which means there will be 320 pixels to the left and right of the sprite to draw and 160 pixels above and below. So how many tiles do we draw, and which ones? If we perform the same coordinate conversion as above and divide both 320 and 160 by 32, we get 10 and 5, respectively. That means we need to draw 10 tiles to the left and right and 5 above and below the sprite.

We now know which tiles to draw. From here we can quickly draw our given section of the map with a double for loop, with each loop iterating a different dimension of our map array. The actual drawing is not unlike the drawing of the sprite; the same methods used to draw the sprite can be repeated here, but using tile images instead of sprites. Since we established the bottom-left of our map to be the origin of the map, it makes sense to draw tiles going from bottom to top and left to right.

At this point, I'm going to do a bit of hand-waving and say that the drawing is done. There are a lot of gaps to fill, of course, but I want to allow you that opportunity to decipher the complete puzzle on your own.

I'll say again, this is not the most efficient approach to 2D tile map drawing. One flaw of this approach is that the setup makes it difficult to handle tile images that are bigger than 32x32 pixels--what if we wanted one large image on the map, how do we handle that? Another issue is layering: How do we modify this setup to allow multiple tiles to overlap? Also, let's say we _don't_ want to keep the sprite in the center of the screen. How do we allow the sprite to move around on the screen and still draw the proper portions of the map?

These and many more issues will arise in your implementation. What you have asked is not something quickly answered, and there are roadblocks aplenty. All I can advise is take what's been posted here and push onward. May you find the solution that works best for you. :)