Lights

How would I go about making multiple non tile-based glowing lights and a darker background beneath the lights? Can’t really think of any efficient methods. I know there’s basically no information to here, but I don’t know what else to say.

Thanks. (:

What do you mean by “lights”?

Do you mean the game “Lights Off” (and its derivatives) or do you mean “an object that illuminates a scene and pushes back the shadows”?

And in either case, you’re pretty much using a tile based system one way or another (even if by “tile” we mean “pixel” because there’s no point in rendering anything smaller).

Maybe he wants it (whatever “it” really is) to be vector based.

looking for something like this: http://www.youtube.com/watch?v=C-ScURIRTGA&feature=related ?
seems like it’s build into box2d

You’re going to want to look for “ray-casting”.

I think what he’s wanting is like a hovering spot of light with a shadow underneath (e.g., faery, lightningbug, will-o-wisp). Basically, increasing the intensity of the pixels’ colour values at a specific location (and decreasing as it gets farther from centre of said point) and similarly decreasing them at a y-offset from that location.

This always helps me when I need to play with colors: http://www.quasimondo.com/colormatrix/ColorMatrix.as

Originally posted by dragon_of_celts:

I think what he’s wanting is like a hovering spot of light with a shadow underneath (e.g., faery, lightningbug, will-o-wisp). Basically, increasing the intensity of the pixels’ colour values at a specific location (and decreasing as it gets farther from centre of said point) and similarly decreasing them at a y-offset from that location.

So basically, two radial gradients?

Originally posted by player_03:

So basically, two radial gradients?

That was my interpretation of what he was asking for, which may or may not be correct.

are you looking for this
http://dl.dropbox.com/u/17828135/index.html

Sorry for not replying for so long and being unclear. I’m just looking for pretty much what dragon_of_celts said. Just a simple radial gradient that lights up a dark background beneath it.

Edit: Having a white/yellow gradient above a black background with alpha doesn’t accomplish this.

I’ve never done this, so please don’t crucify me for suggesting something naive.

How about a fully lit background, on top of which you put a black, almost opaque (alpha ~0.8) overlay. You can then make a point light by copying the light on the overlay, the light being a black image with an alpha gradient from its center. Make the alpha 0 at the center and match the background alpha at the edge, copyPixels() on the overlay without blending alphas.

Let me see if I can patch something up together quickly to illustrate.

Originally posted by Ace_Blue:

I’ve never done this, so please don’t crucify me for suggesting something naive.

How about a fully lit background, on top of which you put a black, almost opaque (alpha ~0.8) overlay. You can then make a point light by copying the light on the overlay, the light being a black image with an alpha gradient from its center. Make the alpha 0 at the center and match the background alpha at the edge, copyPixels() on the overlay without blending alphas.

Let me see if I can patch something up together quickly to illustrate.

You have to cast the ray to know where it ends.

The OP says nothing about obstacles blocking the light.

Here’s the demo: link

And the source is below. Just instanciate a Test object and addChild it. You’ll need to make a background picture and a ‘light’ (mine was a fully opaque, black-on-white radial gradient in Paint.net, hence the transform at the beginning.) I hope it fits your needs.

package 
{
	import flash.display.Bitmap;
	import flash.display.BitmapData;
	import flash.display.Sprite;
	import flash.events.MouseEvent;
	import flash.geom.Point;
	/**
	 * ...
	 * @author VLL
	 */
	public class Test extends Sprite
	{
		private static const OVERLAYALPHA:Number = 0.9;
		
		[Embed(source = '../png/background.png')]
		private static var Background:Class;
		
		[Embed(source = '../png/lightmask.png')]
		private static var Light:Class;
		
		private var overlay:Bitmap;
		private var light:Bitmap;
		private var lightpoint:Point;
		
		public function Test():void
		{
			var background:Bitmap = new Background;
			this.addChild(background);
			overlay = new Bitmap(new BitmapData(800, 600, true, 0xFF000000));
			overlay.alpha = OVERLAYALPHA;
			this.addChild(overlay);
			lightpoint = new Point();
			light = new Light;
			makeLight();
			this.addEventListener(MouseEvent.MOUSE_MOVE, moveLight);
		}
		
		private function makeLight():void
		{
			var j:int;
			var i:int = 0;
			while (i < light.width)
			{
				j = 0;
				while (j < light.height)
				{
					changePixel(i, j);
					j++;
				}
				i++;
			}
		}
		
		private function changePixel(x:int, y:int):void 
		{
			var gray:uint = light.bitmapData.getPixel(x, y) % 0x100;
			var transparency:uint = gray * 0x1000000;
			light.bitmapData.setPixel32(x, y, transparency);
		}
		
		private function moveLight(eve:MouseEvent):void
		{
			overlay.bitmapData.fillRect(overlay.bitmapData.rect, 0xFF000000);
			lightpoint.x = mouseX - light.width * 0.5;
			lightpoint.y = mouseY - light.height * 0.5;
			overlay.bitmapData.copyPixels(light.bitmapData, light.bitmapData.rect, lightpoint);
		}
	}
}

NineFiveThree you don’t need rays at all if you don’t want shadows and he never said anything about shadows.

Anyway I did this long time ago http://www.flash-core.com/examples/g2d/270609/ W/S/A/D/LMB

It uses a generated gradients which are simply blended over a background to achieve lighting so if you don’t want shadows there is no math involved, you can also use pretty much any bitmap as your light which opens up for some interesing lighting situations :)

Originally posted by sHTiF:

Anyway I did this long time ago http://www.flash-core.com/examples/g2d/270609/ W/S/A/D/LMB

I see.
But the shadows make it look good.

Originally posted by sHTiF:

NineFiveThree you don’t need rays at all if you don’t want shadows and he never said anything about shadows.

Anyway I did this long time ago http://www.flash-core.com/examples/g2d/270609/ W/S/A/D/LMB

It uses a generated gradients which are simply blended over a background to achieve lighting so if you don’t want shadows there is no math involved, you can also use pretty much any bitmap as your light which opens up for some interesing lighting situations :)

Wait are you the guy who authored Genome2d?

Yep I am creator of Genome2D why? The shadow demo is from the old Flash Player 9 version but I am working on implementing shadows in the latest Stage3D Genome2D as well I actually have it working using stencil but there is no time at the moment to tidy it up and add it to the API.

Originally posted by sHTiF:

Yep I am creator of Genome2D why? The shadow demo is from the old Flash Player 9 version but I am working on implementing shadows in the latest Stage3D Genome2D as well I actually have it working using stencil but there is no time at the moment to tidy it up and add it to the API.

I’ve been following your blog, but no source code :( when are you going to release the library to the public? I’m really interested in your blit functions.

Hmm, I was going to copy bitmapdata to another bitmapdata background but I just thought that’d be pretty inefficient because there were simpler ways such as masking. But not sure if that works with multiple lights. I don’t need ray casting or shadows at the moment, I’ll look into that later. (:
Also that’s a really awesome example, Shtif. Really cool.

Originally posted by Feffers:

Hmm, I was going to copy bitmapdata to another bitmapdata background but I just thought that’d be pretty inefficient because there were simpler ways such as masking. But not sure if that works with multiple lights. I don’t need ray casting or shadows at the moment, I’ll look into that later. (:
Also that’s a really awesome example, Shtif. Really cool.

Copying bitmapdata is probably by far the fastest way to do that- it’s called Blitting.

Oh, really? Thanks. So I’m copying a radiant white glow with a transparent background onto a black screen and merging the alpha so the glows blend. It doesn’t cut through the transparent background though, which is what I want. How would I do that? Code
I know this is really simple stuff, I just can’t get around it.

I don’t know how to say this without sounding all butthurt, but did you even look at the stuff I posted above? There’s a demo and the source. Near as I can tell it does what you asked for.

I did but yours required having a black radiant glow over a white background. Doing so with multiple lights don’t merge together because of the black background so that’s why I need a transparent background. I’m not sure how to modify the pixels to do so though :(

Not quite. Mine transformed a black radiant glow over a white background into a fully black image with a radial gradient of transparency from fully transparent at the center to fully opaque at the edge. It did so because Paint.Net, which I used to create the source image, doesn’t do alpha gradients for some reason (or if it does, I don’t know how).

What I do with the source image (once, upon creation, in makeLight() and changePixel() ) is convert the source image into something usable: an alpha gradient. Having done that the updater, moveLight(), which is called whenever the mouse moves, makes a clean, opaque overlay and then applies the ‘transparent hole’ to it, hence why I’m not merging the alphas there.

If you have multiple lights, it gets a bit trickier, because the overlap of two lights should obviously be lighter than either light. If ‘fully transparent’ means ‘fully lit’, then merging the images would result in the overlap becoming darker than either light. One solution is to redefine ‘fully transparent’ as ‘fully dark’ while merging all the light sources, then inverting the alpha channel of the resultant image. The advantage is that you don’t have to draw the darkness at the beginning.