Lighting Example in Top View Game with SWF

[cjke.7777]

Hey guys,

I have been knocking about some different light examples as a part of a larger project, the link below shows one version. This is just an experiment on light, not on collision detection for the little guy or anything like that.

http://www.users.on.net/~cjke/swf_examples/light/lightTest.html

This version projects a ray of light in code until it hits an object. Once this has been established, it moves on the next ray of light. By the end of all this we have a rough diamond shape that acts as a mask to the world.

Notice also there is a "lamp" as such in the upper right room projecting light also, just a test for overlapping light sources.

How do you guys normally tackle lighting in flash and as3?

[flyingmonkey456]

i've read a tutorial that shows how to do exactly this, and i can't speak for the rest of the flash community but that's how i do it

http://www.emanueleferonato.com/2007/09/26/create-a-survival-horror-game-in-flash-tutorial-part-1/

enjoy :)

[Caravaggio]

I've always thought this was extermely cool, though I've only seen one example besides that one by Emanuele (which I hadn't seen, thanks monkey!), have you posted something like this before cjke.7777? Maybe a few years ago?

I've always wondered about making it a proper flashlight though, with falloff where the light gets dimmer the further away. Since masks are solid I imagine it would have to be a mask of another bitmap that rotates with the character and is set to a LIGHTEN or MULTIPLY blend over the background.

[cjke.7777]

Caravaggio - I haven't posted anything like this before. But I am looking at doing what you suggest with the fade away. I'm just trying to think of ways to do it.

Ideally I also want to build it without a mask - and with this the light source effecting bitmapData instead.

I will continue to play around with it and hopefully improve on it.

[flyingmonkey456]

Ideally I also want to build it without a mask - and with this the light source effecting bitmapData instead.

you like to do things realistically :) me too, i always code my physics the way they work in the real universe. if something as big as the universe can do it without lag, it must be efficient :P

[cjke.7777]

you like to do things realistically :) me too, i always code my physics the way they work in the real universe. if something as big as the universe can do it without lag, it must be efficient :P

Yep eventually I will program ever aspect of physics using just flash, I mean with the power of AS3 it should be possible right??

Na but seriously I don't want to go over board with the lighting, as its not the focus of the larger project - for example I am ignoring all light refraction, etc.

I don't think the bitmapData thing will be that difficult to achieve, just alter the pixels that overlap that lighting diamond by ## amount.

[mastermax]

I have a very good vision area effect like this in my latest game: http://www.games121.com/2009/06/ultimate-assassin-2.html

[cjke.7777]

@mastermax Thats a very cool game - I actually had played it shortly before putting together the demo above, you could say that it gave me some ideas on how to tackle it actually.

[flyingmonkey456]

what a coincidence, i found that tutorial i posted because of that game. i was reading through a forum about it after i played it and the creator gave his source for the enemy sight. i guess it got a lot of people interested in how to do it :P

[Sirisian]

Wow this questions comes up way too much. Front face culling is probably the cheapest way. I made an example years ago for people on kirupa. (http://assaultwars.com/flash/frontface.htm) It showed off LOS shadows but the idea is similar.

Since then I've lost the source code, but I've implemented this in XNA. It's pretty trivial. Bound all objects with concave polygons such that you have an array of vertices. For all static polygons store the normal of the edge.

Iterate all polygons and for each polygon iterate the edges. Use the dot product to figure out of the edge is facing you (vertOnEdge - player) dot normal < 0. If it is then skip it. If it's > 0 then fire a ray from the player to the 2 vertices. Check these rays with the camera's rectangle. That is perform a ray to line-segment intersection test with each of the 4 edges of the camera. You'll end up with 2 vertices. The last step is to see if the corners of the camera need to be included. A possible of 2 corners can be included. This can be done with 2 dot products since you're checking to see if a corner is between the two rays. So find the LHS and RHS normals of each ray respectively and perform dot products with (corner - player). If both are > 0 then the corner is included. If you handled everything correctly you'll have a 2 edge vertices + corner vertices (if any were included) in an array. These form a convex polygon that can be rendered. Do this for each edge and you'll end up with shadow volumes very similar to the 3D implementation of the algorithm. There are many optimizations to this algorithm. I'll leave those for you to find since they're cool to figure out.
Here's some C++ intersection equations which come in handy:
http://sirisian.pastebin.com/f2d380dd3

There are other way to render lights. You can render true light volumes which is the inverse of the LOS shadow algorithm I explained. It's extremely algorithm heavy. I started implementing it a long time ago but had other things to do.
This might help you to visualize things though. (Like I said it was never finished). (http://assaultwars.com/flash/occlusion/occlusion.html)It ends up being a very cost effective algorithm. I was researching the use of a dynamic occlusion algorithm with it, but a basic naive version of the algorithm shouldn't be too hard.

[SparK_BR]

oh, i remember that one (the occlusion algorithm)
you showed it in a similar thread about lights shadows and 3D in 2D etc etc..

i know it's not the right way but... with mask layers and the LOS shadows is it possible to make the same result of the occlusion?
cause despite beeing the oposite, they look very similar to me.
(i know that sounded weird and generic XD)

[Sirisian]

What's so bad about the mask way? It works really well and it's easier to program and less error prone than running the other algorithm. And yes it's possible to get the light effect using the LOS algorithm. Just render the LOS stuff to a bitmapdata using 0 alpha. Then just render your light texture using copy pixels with the LOS bitmapdata as the alpha part (http://livedocs.adobe.com/flash/9.0/ActionScriptLangRefV3/flash/display/BitmapData.html#copyPixels%28%29).

For more than one light you have to do something that's kind of annoying. Render all of the shadows from the light's perspective to a bitmapdata and then render the light texture (circle gradient or something) using that bitmapdata LOS for the alpha. So basically you're doing multiple passes basically for each light.

That occlusion test wasn't even me trying to render lights so much as implementing occlusion and some other ideas. Light volumes have the single advantage that if you need to render more than one light you don't need to render the whole scene again so it's much faster. I had multiple spot lights at one point. Basically tons of lights can be rendered. :)