🎉 Celebrating 25 Years of GameDev.net! 🎉

Not many can claim 25 years on the Internet! Join us in celebrating this milestone. Learn more about our history, and thank you for being a part of our community!

moving sprite on a hex grid

Started by
73 comments, last by Tom Sloper 1 year, 11 months ago

I have drawn a hex grid and a sprite. What I want to do is move the sprite from hex to hex I have googled this problem but have found no answers.

void drawHex()
{
	const float hexagon_r = 10.0;
	const float hexagon_dx = hexagon_r * cos(30.0*PI / 180.0);
	const float hexagon_dy = hexagon_r * sin(30.0*PI / 180.0);
	const float hexagon_gx = 2.0*hexagon_dx;
	const float hexagon_gy = 2.0*hexagon_dx*sin(60.0*PI / 180.0);
	float x = 1.0f, y = 1.0f, z = 0.0f;
	int ni = 22, nj = 22;
			int i, j; float x0;
			x -= float(ni - 1)*hexagon_gx*0.5; // just shift x,y to start position (i=0,j=0)
			x -= float(nj - 1)*hexagon_dx*0.5;
			y -= float(nj - 1)*hexagon_gy*0.5;
			for (x0 = x, j = 0; j < nj; j++, x0 += hexagon_dx, x = x0, y += hexagon_gy)
			{
				for (i = 0; i < ni; i++, x += hexagon_gx)
				{
					glBegin(GL_LINE_LOOP);
					glVertex3f(x - hexagon_dx, y - hexagon_dy, z);
					glVertex3f(x - hexagon_dx, y + hexagon_dy, z);
					glVertex3f(x, y + hexagon_r, z);
					glVertex3f(x + hexagon_dx, y + hexagon_dy, z);
					glVertex3f(x + hexagon_dx, y - hexagon_dy, z);
					glVertex3f(x, y - hexagon_r, z);
					glEnd();
				}
			}
}

void drawTankNorthWest()
{
	glEnable(GL_TEXTURE_2D);
	glBindTexture(GL_TEXTURE_2D, texture[0]);
	glBegin(GL_QUADS);
	
	glTexCoord2f(0.0f, 0.0f);
	glVertex2f(0.0f + move_x, -5.0f + move_y);
	
	glTexCoord2f(1.0f, 0.0f);
	glVertex2f(5.0f + move_x, 0.0f + move_y);
	
	glTexCoord2f(1.0f, 1.0f);
	glVertex2f(0.0f + move_x, 5.0f + move_y);
	
	glTexCoord2f(0.0f, 1.0f);
	glVertex2f(-5.0f + move_x, 0.0f + move_y);
	
	glEnd();
	glDisable(GL_TEXTURE_2D);
}
  
Advertisement

well my question is how do I move a sprite from hex to hex

pbivens67 said:
well my question is how do I move a sprite from hex to hex

Why do you ask? You rendered hex grid, so you know how to calculate hex grid coordinates.

But you can not isolate this knowledge, as it is obfuscated in some rendering code.

Here's what you should do:
Come up with some convention of how to index a hex grid. The easiest is to use a skewed regular grid.
Write a function which returns the center point of a hex cell. This is where you want to place the sprite.
Ideally, use that same function to draw the grid, e.g. by adding 6 precomputed offset vectors to the given cell origin.

There may be other options to achieve the same thing, but the key observation should be:

Write a function which returns the center point of a hex cell

Express the functionality you implement in some form, so it can be actually used and accessed outside a certain special case, like rendering a hex grid.
Make a small class which handles all the conversations from grid indices to spatial locations on the map, and vice versa.
Or make a header file, containing all those conversation functions, or use a namespace… whatever.

This includes tools like e.g. calculating the 6 neighbor cells of a given current cell.

After that, you can calculate the center of the current cell where the tank is, and the center some neighboring cell it should move to.
Then you move the sprite along the line between those two centers, which is simple math and no longer has to respect a hex grid.

You have a function that can draw a hex in a given location (x,y) so you know how to calculate the pixel location for any hex on your map(x,y)

So write a function that puts a sprite in a given hex, using the same code to determine the pixel location for a hex (x,y)

To erase the unit in the old hex, just redraw the hex he was in. Then draw the unit in the next hex location.

As JoeJ mentioned above, it is possible to use a skewed regular grid to represent the hex grid.

That is the strategy I use. . . Most often I draw rows of hexes which are offset by ½ hex width every other row. Every object still has X and Y loc, just like on a regular grid.

Getting to the specific question about moving on such a grid. . .

Moving East or West is pretty simple with this set up (just +/- 1 to HexLocX).

Moving NE, NW, SE, or SW are more complex moves because you have to take into account whether you are on an even vs an odd row. For example, moving North-West always is plus 1 to HexLocY, but there may (or may not) be a shift in HexLocX, depending if you are on an even or an odd row.

Personally, I usually look at a hex grid, label all the hexes relating to their skewed x,y space, and observe exactly how each move on the hex grid would change an object's location (again keeping in mind that this will change based on whether the object's y value is even or odd).

Hopefully the information above is helpful, but I could go into more detail if necessary.

well, I have found out how to get the distance from center of hex to center of hex, can you give me some more help warp9

is there any way I can convert pointy top to flat top hexes?

To answer your question:

can you give me some more help warp9

Definitely, I will be glad to help you!

Regarding your question about flat top hexes vs pointy-top ones, That is all about orientation. . . If you rotate a pointy-top hex grid by 90 degrees, and you will have a flat top hex grid. The programing for both is nearly identical, but you have to switch a few things around. I have a lot of code around that is set up to work with pointy-top hex grids, so that is probably what I'll be focused on for right now. . .

Assuming that my attempt to insert an image works, I am including a picture of 3 grids : a standard square grid, an offset square grid, and a hex grid (it is worth taking note of how similar the offset square grid and the hex grid are). All of these are labeled, for each grid element, in (x,y) grid coordinates. Since the offset stuff has been mentioned above, I wanted to include a picture to show exactly what I'm talking about (just so we are all on the same page). Also, it is important to understand the coordinate system I'm using to designate specific hexes (as pictured on the hex grid).

Pictures are a very important tool for me to understand the subjects I'm writing code for. . . There are a number of note books where I carefully draw and label whatever matter I'm focused on.

That is the approach I'd recommend to some one trying to write code to move around hex-grids, so I'll be including more pictures as we go forward.

This topic is closed to new replies.

Advertisement