Jump to content
  • Advertisement
Sign in to follow this  
Mattox

[java] Tile-based fog of war help

This topic is 4456 days old which is more than the 365 day threshold we allow for new replies. Please post a new topic.

If you intended to correct an error in the post then please contact us.

Recommended Posts

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:
     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.



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:
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
}



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]

Share this post


Link to post
Share on other sites
Advertisement
Hi Matt,

What part of your program is managing the fog of war? Also, it might be better if you post your source code using the [ source lang="Java"][ /source] tags (without the spaces, of course).

Share this post


Link to post
Share on other sites
Thanks Rob, I'll remember the source tags.

I'm as new as it gets to game programming. This is my first real (and surprisingly successful) attempt at creating my OWN game. I've played around with other people's games, and self-taught myself Java through writing macros for that RuneScape java game. But when I got bored of the game itself, I no longer cared to write cheats for it, so I decided to start my own game altogether.

I'm only 16, so I have zero experience in game programming. I've watched speeches and talks and read books and talked to programmers and done whatever I can to start learning as much as possible before I leave school so I have a head start in game programming, but it was all theory until now.

So keep that in mind when you're commenting on what I have :D

At the moment, there's only one class that handles my game display. I have some interfaces for storing small info, like terrain IDs and sprite locations so I don't have to type the URL every time etc., but at the moment, Main.class is what displays everything.

I go through a 25x25 for loop for drawing all 625 of my tiles, probably not the best way to go about it but it's what I have and I'm not about to change it because I'm comfortable with it and it works. Right now, when the game is drawing the tile, for the fog of war at least, it checks to see if this current tile is within range - if it's not, then it simply doesn't draw an image at all, so all you see is my application's background: black.

I have no seperate classes for anything, however I'm considering adding a Tile class for handling small info like what sort of items this Tile currently stores, objects, accessability and whatnot. At the moment it's all 2d or 3d arrays.

If it would really help I don't see the harm in pasting or uploading my entire source to provide more insight, whatever works is fine with me. It's more of an experiment than a project, I have nothing to hide :)

Share this post


Link to post
Share on other sites
Quote:
Original post by Mattox
Thanks Rob, I'll remember the source tags.


No problem! [smile]

Quote:
I'm as new as it gets to game programming. This is my first real (and surprisingly successful) attempt at creating my OWN game. I've played around with other people's games, and self-taught myself Java through writing macros for that RuneScape java game. But when I got bored of the game itself, I no longer cared to write cheats for it, so I decided to start my own game altogether.

I'm only 16, so I have zero experience in game programming. I've watched speeches and talks and read books and talked to programmers and done whatever I can to start learning as much as possible before I leave school so I have a head start in game programming, but it was all theory until now.

So keep that in mind when you're commenting on what I have :D


I certainly will. Don't worry, though, everyone has to start somewhere!

Quote:
At the moment, there's only one class that handles my game display. I have some interfaces for storing small info, like terrain IDs and sprite locations so I don't have to type the URL every time etc., but at the moment, Main.class is what displays everything.

I go through a 25x25 for loop for drawing all 625 of my tiles, probably not the best way to go about it but it's what I have and I'm not about to change it because I'm comfortable with it and it works. Right now, when the game is drawing the tile, for the fog of war at least, it checks to see if this current tile is within range - if it's not, then it simply doesn't draw an image at all, so all you see is my application's background: black.

I have no seperate classes for anything, however I'm considering adding a Tile class for handling small info like what sort of items this Tile currently stores, objects, accessability and whatnot. At the moment it's all 2d or 3d arrays.


First off, I suggest making a separate class to store and draw your tilemap. Also, the fog of war is really a function of the human player's units' locations and sensor ranges (i.e. how far they can "see"). What this means is that the tilemap is going to need some sort of access to the human player's units (or vice versa) in order to draw itself correctly. Finally, to get a smoother-looking fog of war displayed, I think some sort of "border" tiles would come in handy, probably two at the most (one for a straight edge and one for a corner -- the latter can simply be flipped horizontally and/or vertically for the four possible orientations). The border tiles would really just be an alpha mask over most of the area (but not all, to give that smooth look).

A separate tile class is also a must-have. The fog of war can be implemented in that class itself. Tiles could have states for whether not it's completely hidden by the fog of war, along the edge of it, or outside of it. So the map and the human-player units interact on some level, whereby the current state of each tile is set, and then each tile draws itself according to what state it's in.

Quote:
If it would really help I don't see the harm in pasting or uploading my entire source to provide more insight, whatever works is fine with me. It's more of an experiment than a project, I have nothing to hide :)


I think we have enough to work with right now -- I just wanted to know a little more about how your program is organized so far. If I feel I need to see more of your source, I'll let you know. [smile]

Hope this helps,

Share this post


Link to post
Share on other sites
Sign in to follow this  

  • Advertisement
×

Important Information

By using GameDev.net, you agree to our community Guidelines, Terms of Use, and Privacy Policy.

Participate in the game development conversation and more when you create an account on GameDev.net!

Sign me up!