Fog of war / shroud
Monkey Forums/Monkey Programming/Fog of war / shroud
| ||
| Hi all, just an open question instead of me looking for specific answers. How would/do you deal with "fog of war" or shroud in game development? I worked on a game recently which is 2d, top down and reveals the level as you walk around (the entire game is on the same screen with no scrolling). I used a 2d array to determine which pixels were visible and should be drawn (yes I was drawing the level on a per pixel basis). I know this was a really shoddy and rushed way of doing things. So I'm wondering, how have you handled it? |
| ||
| You either need to be constructing a single background image on the fly or revealing that image by altering an obscuring overlay image on the fly. It's a case where even if Monkey's render-to-texture operations are pretty slow they're likely to be far faster than rendering all the separate images every frame. An alternative would be to just draw the background image (via writepixels from map data if that's easier) and then render the shroud as a minimal set of rectangles, but that's probably a lot more effort for little return. I did take a look at your code to see if I could play around with speeding it up but the zip doesn't seem to contain a working project. |
| ||
| Maybe you could use a set of points (perhaps in a hexagonal array or something more randomised) and fix the fog of war according to these. That way you wouldn't have to save so much data, and you could draw the fog with a limited number of draws, or generate an appropriate polygon and fill it. The downside would be that the fog would clear in 'steps', but you could disguise this by fading in changes. |
| ||
Hmm the source should be valid (just downloaded it and tried it), ld31.monkey is the main file, however, you will need to comment out the following line of GameScreen.OnStart() to, you know... stop the game showing the whole map at the start! (not sure how that was left in the code)GameScreen.ClearShroud(100, 100, 500) The drawing to background idea seems like a great one to me, to be honest I have little to no experience with manipulating images in Monkey, because from the threads I saw it always seemed a bit hit and miss (granted it was a long time ago). I have to say though that loading a level directly from an image was very helpful considering the time constraints. I considered the drawing of rectangles idea, but didn't actually get round to it in the end. I've no idea where I'd start with it though. Gerry: I think if there was a nice enough looking transition and the shape was a bit more interesting than a simple rectangle, that would actually look quite cool. Your suggestion of a hexagonal array seems fitting to me. Now all I need to do is find the time to do all of this stuff. |
| ||
| Looks like I messed up extracting the files somehow before and only got some of the folders. Okay, I've had a tinker and uploaded a HTML5 build to here: http://stickydesigns.com/chrisld31/MonkeyGame.html . It runs okay in Chrome on my laptop so it should be playable for most people. The altered source is in http://stickydesigns.com/chrisld31/src.zip . Things I did: * Performance - Changed the background rendering to write to an image. * Performance - Changed the "mobile" element rendering to use rects instead of the coloured pixel image. If you used a WebGL mojo implementation this would probably not be needed. * Performance - Changed the collision mechanism to use a collision map rather than trawl the active objects list every frame. * Visual - Changed the fog of war to a float array and used a circular reveal with a 30% falloff boundary. Looks nice but is a bit expensive. * Input - Tweaked the key handling code to track new directional inputs and allow the player to override the current direction without lifting off the held direction. * Collision - I changed the way the update and collision checks occur to fix a problem where the player could walk through moving entities. Anyway, it was kind of fun to mess about with someone else's code. I hope some of it is useful reference for you. |
| ||
| That's amazing thank you, I look forward to looking through the code :) |
| ||
| You could "cheat" and use sprites with alpha values. Start them at full visibility and when the player gets close reduce the alpha so it becomes transparent. |
| ||
| in pizza pestz i used a sprite, black square with a transparent circle in the middle to emulate a torch, used drawrect to fill in the gaps on my current project im using a custom tile map and have a bool array of the same size as the map to decide weather or not to draw the tile reflecting fogofwar which is essentially the same way you have done it but instead of per pixel its per tile |
   |