Original Post
Hi. I've been working on my 32x32 sprite tile-based map editor for fun for about a week now, and it's coming along great, I'm having heaps of fun and learning shitloads. I don't have any problems with it right now, some double-buffering issues, but nothing real bad. My question is, when I'm using a grid to draw my tiles, how can I draw a sexy fog of war? Circle? Square, Triangle? Fade-out gradient? Right now, my fog of war works like this: You have PLAYER_COL and PLAYER_ROW, the column and row that the player is currently in. This is currently represented by a red "X" to save time, I'm not a graphics artist so I'm not even going to bother trying to draw a player sprite yet. Anyway, each time the player movies (using arrows currently, UP/RIGHT/DOWN/LEFT, which moves the X respectively). Then I have FOG_COL and FOG_ROW, which is the "centering" of my fog column and row. The reason why I have 2 columns and rows instead of just using the player's to center the fog is because it looks extremely dodgey at the moment when the fog follows the player exactly as they move. Too fake, because my fog is chunky squares, it's very noticable. So yeah, I'll paste in my "moving" and "fog of war centering" code: So if the column and row is within 3 tiles (cells) of the player, it stays there. Once the player has moved > 3 squares away from the fog center, the fog cell updates to the player cell. This is obviously not a very attractive way of going about it, but it's my very first game and I intend to make it look better once I have the fundamentals of it down. Right now it's just fog of war, I'll work on the "transparent" fog history later. What I need help with is I want to change my style into a circle. But I don't know how to draw an "inverted" circle so that it covers everything EXCEPT where I am currently. This is what I currently have: The editor: http://img208.imageshack.us/img208/3889/editor33ts.png And this is how my game renders the editor's work: http://img96.imageshack.us/img96/7587/game24fw.png As you can see it's hell basic but it's working. I've got items working, and N/A just means Not Accessable (for boundaries). You can scroll through the interface using Next and Back (you can set passable/impassable tiles, item placement, objects and sprites (soon)). Anyway, based one what I've shown you I hope someone can help me find a way to convert that shitty triangular blocky fog into some sort of fading-out circular fog. As each tile is placed, the x and y coord of where to draw the image is incremented by 32. Like: So I know part of drawing the circle will have something to do with the pixels. I already know how to get the center pixel of the tile (x + (x/32) and y + (y/32)), but not what to do with that information. If you don't understand any of this, just tell me and I'll explain what you need to do/show you whatever code you need :) Thanks very much, Matt. [Edited by - Mattox on April 9, 2006 7:23:45 AM]
private int GetDis(int c, int r)
{
return (Math.abs(c - COL) + Math.abs(r - ROW));
}
private int GetFogDis(int c, int r)
{
return (Math.abs(c - FOG_COL) + Math.abs(r - FOG_ROW));
}
. . .
if(k == e.VK_UP)
{
if(COL - 1 != -1)
{
if(accessAt[COL - 1][ROW] == ACCESS_PASSABLE)
{
COL--;
if(GetDis(FOG_COL, FOG_ROW) >= FOG_DIS)
{
FOG_COL = COL;
FOG_ROW = ROW;
}
}
}
} else
if(k == e.VK_RIGHT)
{
if(ROW + 1 != tileAt.length)
{
if(accessAt[COL][ROW + 1] == ACCESS_PASSABLE)
{
ROW++;
if(GetDis(FOG_COL, FOG_ROW) >= FOG_DIS)
{
FOG_COL = COL;
FOG_ROW = ROW;
}
}
}
} else
if(k == e.VK_DOWN)
{
if(COL + 1 != tileAt.length)
{
if(accessAt[COL + 1][ROW] == ACCESS_PASSABLE)
{
COL++;
if(GetDis(FOG_COL, FOG_ROW) >= FOG_DIS)
{
FOG_COL = COL;
FOG_ROW = ROW;
}
}
}
} else
if(k == e.VK_LEFT)
{
if(ROW - 1 != -1)
{
if(accessAt[COL][ROW - 1] == ACCESS_PASSABLE)
{
ROW--;
if(GetDis(FOG_COL, FOG_ROW) >= FOG_DIS)
{
FOG_COL = COL;
FOG_ROW = ROW;
}
}
}
}
. . .
COL = 12; //Current player column
ROW = 12; //Current player row
FOG_COL = 12; //Current fog centering column
FOG_ROW = 12; //Current fog centering row
FOG_DIS = 2; //How many tiles to move before recentering the fog.
int x = 0, y = 0;
for(int col = 0; col < 25; col++)
{
for(int row = 0; row < 25; row++)
{
//Check tile type etc. to draw
x += 32;
}
y += 32;
x = 0; //reset to next row
}