[metric]

Hey guys,
I am about to go off the deep end. I started writing a little game awhile back. My goal was to have a small engine that I could use to test little fun ideas I had for games. In April I stopped developing because I couldn't figure this out. I started about a week ago and after I tore the game down to it's foundation I still can't figure it out.

Okay so the game is a standard top down where you can walk around. Currently I have removed everything except the map drawing. I am using tiles and have a maps that are way bigger then my screen. So right now what I'm trying to do is make it so when I click on a tile it re-draws the map so the tile clicked is in the middle.

For example, my window size is 1024x768 each tile is 32x32 pixels make the center tile (16, 12)

Right now the coordinates are static so when I click they stay in place even though the map is moving, im am still trying to figure out how I am going to fix this.

Basically I'm posting in desperation right now. I had no intentions of ever asking for help but I've spent so long on this problem I feel that it will be a waste of time not to ask.
So if you could refer me to an article on 2D cameras or give me some personal insight I would GREATLY APPRECIATE IT!

I have a copy of my code zipped, I'm not to excited about sharing it as I have spent so much time on it but will PM a link if necessary.

I made a small video demonstrating the issue.
http://www.youtube.c...h?v=GvQSuizIl6U

So I think the main question is: How do I implement a camera/viewpoint in a today game? because I sure can't figure it out haha

Serious hugs to anyone who can try and help <3

[KuroTsuto]

I'm not sure about how it's normally carried out, but the way I'm handling it, I have coordinates fixed to tiles and variables for tilesize and the centered coordinates. When a tile is clicked, I calculate the difference between the center coordinates and the click coordinates, multiply them by the tilesize, and apply the resulting offsets to move the tile container (i.e. the map).

I see that you're using Java, yeah? If you've created a tile sub-class or some such, assign it coordinates on instantiation that are relative to origin of your map object, then use offset properties in your map object to determine which tiles are drawn. That's how I think about the situation, anyway - there are likely better solutions available.

Good luck!
~Kuro

This post has been edited by KuroTsuto: 10 September 2010 - 09:27 AM

[metric]

Hmm okay the way I have it structured is in two different classes, a parser which grabs all the information from the XML file, and then a generation class that actually draws it.

So I have two loops for x and y:

for(int y = (mouseClick.getY()-((Commons.HEIGHT/tileSize.getY())/2)); y < (mouseClick.getY()+((Commons.HEIGHT/tileSize.getY())/2)); y++){
for(int x = (mouseClick.getX()-((Commons.WIDTH/tileSize.getX())/2)); x < (mouseClick.getX()+((Commons.WIDTH/tileSize.getX())/2)); x++){

mouseClick is the coordinate that was clicked.
Commons.WIDTH/HEIGHT is the window size
tileSize is tilesize (in this case 32px by 32px)

A problem i see with this is that because the mouseClick coords are not tied to tiles every time the map moves each tile has different coordinates.

and then the actual draw script is:

g.drawImage(tileset[set], camera.getX()*tileSize.getX(), camera.getY()*tileSize.getY(),//Places the image
camera.getX()*tileSize.getX()+tileSize.getX(), camera.getY()*tileSize.getY()+tileSize.getY(),
//Retrieves img from tileSource
tXY.getX(), tXY.getY(), tXY.getX() +  tileSize.getX(), tXY.getY() +  tileSize.getY(), this );

the relevant part is where the image is placed (lines 1 and 2).
the camera variable counts every time the x and y loop is ran to draw the map within the camera view.

I'm having trouble fixing coordinates to the tiles, and finding the difference between the two.

If you'd like I can send you a link to the zipped version of source code.

Thanks for the reply!
Metric

[KuroTsuto]

Ahh, alright. No cell/map classes - got it.

It seems to me that you could convert window coordinates to cell coordinates (that are relative to your map rather than the window) with a method similar to this, which I assume would reside in your camera object:

public static coordinateObject screenToCell( coordinateObject screen )
{
    coordinateObject cell;
    
    cell.setX( ( (int) ( screen.getX() / tilesize.getX() ) ) + (int) ( ( this.getX() - Commons.WIDTH / 2 ) / tilesize.getX() ) );
    cell.setY( ( (int) ( screen.getY() / tilesize.getY() ) ) + (int) ( ( this.getY() - Commons.HEIGHT / 2 ) / tilesize.getY() ) );

    return cell;
}

I'm making many assumptions (moreso as I have not touched Java in 3 months!), here, so please forgive whatever ignorance I might display .
coordinateObject is whatever you're using to keep track of coordinate pairs, like java.awt.Point or some custom class.
I'm also assuming that the camera object's getX and getY methods return the window coordinates of the center of the view, which could effectively be used as the offset of your map to your camera. As such, calling

coordinateObject clickedCell = camera.screenToCell( new coordinateObject( mouseClick.getX(), mouseClick.getY() );

Should set up clickedCell to represent the proper cell coordinates of the tile that was clicked.

I may be entirely offbase, here, but in any scenario, I believe you will need to use an offset of some sort (which will likely be obtained from your camera object) to add to the tile coordinates.

I would be happy to check out your source (I promise I won't steal anything!) as I'm still not entirely sure how what you've got going on all works together, but I can't promise much, and I understand entirely if you wish not to disclose your source!

~Kuro

[metric]

Hmm okay,
so I figured that naming the coordinate variable "camera" was misleading...all it does is layout the map when its being drawn from left to right, top to bottom.

I'm a unsure of how I'm actually gonna go about making a camera. From what I can tell I integrated with the map generation:

for(int lay=0; lay < gids.length; lay++){
			camera = new Coord(0,0);
			for(int y = (mouseClick.getY()-((Commons.HEIGHT/tileSize.getY())/2)); y < (mouseClick.getY()+((Commons.HEIGHT/tileSize.getY())/2)); y++){
				camera.setX(0);
				for(int x = (mouseClick.getX()-((Commons.WIDTH/tileSize.getX())/2)); x < (mouseClick.getX()+((Commons.WIDTH/tileSize.getX())/2)); x++){
					//Draws roof
					if(x > 0 && y > 0){
						if(layType == 2){
							if(mapReader.getLayerType()[lay] == 2){
								//sets what tileset to read from
								set = 0;
								set = map[lay][x][y]/key;
								//Location of image on tileset
								int tile = map[lay][x][y] - firstGID[set];
								tXY.setX(((tile) % tR) * tileSize.getX());
								tXY.setY(((tile) / tR) * tileSize.getX());
								//draws image
								g.drawImage(tileset[set], camera.getX()*tileSize.getX(), camera.getY()*tileSize.getY(),//Places the image
										camera.getX()*tileSize.getX()+tileSize.getX(), camera.getY()*tileSize.getY()+tileSize.getY(),
										//Retrieves img from tileSource
										tXY.getX(), tXY.getY(), tXY.getX() +  tileSize.getX(), tXY.getY() +  tileSize.getY(), this );
							}
						}
						//Draws everything else
						else{
							if(mapReader.getLayerType()[lay] != 2){
								//sets what tileset to read from
								set = 0;
								set = map[lay][x][y]/key;
								//Location of image on tileset
								int tile = map[lay][x][y] - firstGID[set];
								tXY.setX(((tile) % tR) * tileSize.getX());
								tXY.setY(((tile) / tR) * tileSize.getX());
								//draws image
								g.drawImage(tileset[set], camera.getX()*tileSize.getX(), camera.getY()*tileSize.getY(),//Places the image
										camera.getX()*tileSize.getX()+tileSize.getX(), camera.getY()*tileSize.getY()+tileSize.getY(),
										//Retrieves img from tileSource
										tXY.getX(), tXY.getY(), tXY.getX() +  tileSize.getX(), tXY.getY() +  tileSize.getY(), this );

							}
						}
					}
					else{
						//TODO 
						//Draw black square
					}
					camera.setX(camera.getX()+1);
				}
				camera.setY(camera.getY()+1);
			}

Basically in the for statements for x and y it determines how far to draw from the x and y coords on the tile click. This isn't working correctly because the coordinates are in no way connected to the map, so the map moves but the coordinates don't move with it, they are just drawn according to map size...and that is the problem (I think) I need to make a set of coordinates that are attached to the tiles, and move based on them in relation to the base coordinates which will give me the offset.

Now the method i just described smells funny to me, I think it could be simpler...if I could assign coordinates to the actual tiles and somehow figure out the offset would be much simpler.

It seems that there is just so much to consider here it is above my skill and experience.

Metric