How to do a spotlight effect

BlitzMax Forums/BlitzMax Programming/How to do a spotlight effect

GfK	(Posted 2014) [#1]

Suppose I have a game map and I want a torch/spotlight effect around the mouse cursor. Let's say it's a 256x256 diameter circle. The area outside the circle won't be solid black - it'll just be darker than the area within the circle.

Ordinarily I guess I could use ShadeBlend for that. But I don't just need to draw the game map - there are things I draw on top of that which also need to be affected by the spotlight effect. Which pretty much rules out ShadeBlend as an option.

Anybody have any ideas, or a quick and dirty code sample to demonstrate how this might be achieved?

GfK	(Posted 2014) [#2]

Never mind - done it!

Derron

(Posted 2014) [#3]

Instead of ShadeBlend --- what about LightBlend?

So you have the torch-area as a sprite which gets darkener with increasing radius.
Now draw this image in an order so that all "to get effected" images are drawn before.

Edit(h) brought you a sample code:

SuperStrict

Graphics 640,480

'=== PREPARATION ===
For local i:int = 0 to 10
	SetColor(i*20,i*20,i*20)
	DrawRect(0+i*5, 0, 100-i*10, 480 )
Next
Global ray:TImage = LoadImage(GrabPixmap(0, 0, 100,480))

flip
for local i:int = 0 to 20
	SetColor(i*10, i*5, i*8)
	SetAlpha Rand(0.5, 1.0)
	DrawRect(rand(0,640),rand(0,480), 100,100)
Next
Global bg:TImage = LoadImage(GrabPixmap(0,0,640,480))
'=== /PREPARATION ===


While not KeyHit(KEY_ESCAPE)
	cls

	SetColor(255, 255, 255)
	SetAlpha(1.0)
	DrawImage(bg, 0,0)
	SetBlend(LIGHTBLEND)
	DrawImage(ray, MouseX()-50,0)
	
	Flip 0
Wend

bye
Ron

Derron

(Posted 2014) [#4]

double clicking on "update post" shouldn't post it again... someone should revisit the forums code (given "postID" should never run an "Insert" or "insert on duplicate")...

GfK	(Posted 2014) [#5]

<snippety-snip!>

Derron

(Posted 2014) [#6]

Did you run my example code?

It does what it has to do - and does it correclty.

LIGHTBLEND is not using the alpha channel, it is using the "brightness" of the pixels. So You take a grayscale image (no need to be grayscale, but better for visual check when creating the image) ... the whiter the pixel, the more "lightened" are the underlaying pixels.

But I seem to "know" what you mean: it is more like a "no Fog-of-war"-circle which fades out to "darkness" on the outside.
This is not the torchlight effect (a torchlight brightens things up instead of showing them in a "normal lighted way").

Fog-of-war:

Such an Fog-of-war could be faked improperly using this: draw everything "darker" (setColor 150,150,150) and with that LIGHTBLEND-Mode bring it back to "normal". This is not really the best way - maybe better use OpenGL and stencils ... but I do know nothing about that matter (you have to trust google then).

EDIT:
http://www.blitzbasic.com/Community/posts.php?topic=49403

It is slow because of Grabimage/Grabpixmap ... If you are already using FBOs ("rendertotexture" in OpenGL) you might do this way faster...

bye
Ron

therevills

(Posted 2014) [#7]

I added a Spot Light effect using the following:

http://www.blitzmax.com/Community/posts.php?topic=86281

But the way you have done it with the image is the easiest :)

Derron

(Posted 2014) [#8]

As you assume something similar as I tried to explain in that SC2-Screenshot (circular area "normal lightened" and outer area in shadows). The best performance should be

SetColor 125,125,125
Draw units
SetColor 255,255,255
Draw lightSprite

lightSprite would then be an image which maximally "doubles" the resulting brightness (just check the gray values).
I do not know if the resulting brightness is calculated after eg. a pixel already got "black" - in this case the contrast would be clamped and dark areas would loose details ... Just test it.

EDIT: yeah it modifies brightness to "white" not to original color... so it is not useful in the way you want it.

The other one is using - like said - RenderToTexture / FBO.

Or - if you 100% use OpenGL - use Stencil buffers and other technologies to achieve that effect.

EDIT2:

If you do not intend to have multiple lights you could use the following approach: have your small spotLight-image drawn shadeblended. and Top/Bottom/Left/Right of it, you add black rectangles - each drawn with shadeblend too.

This has - instead of using a huge "lights-Sprite" (must be bigger than screen-res to allow "movement" to all borders) - or instead of using a dynamicalyl adjusted lightmap - the advantage of being realtime-useable.

Of course you could add "more lights" but then you end up using a single light map (multiplied with some algorithm I posted some years ago ... and others did that surely too). But as soon as the positions within that lightmap should move ... it isn't useful for realtime any longer.

SuperStrict

Graphics 640,480

'=== PREPARATION ===
local gray:int = 0
For local i:int = 0 to 100
	if i < 20 then gray:+7
	if i < 40 then gray:+3
	gray = min(255,gray)

	SetColor(gray,gray,gray)
	DrawOval(i,i,200-2*i,200-2*i)
'	DrawRect(0+i*5, 0, 100-i*10, 480 )
Next
Global spotLight:TImage = LoadImage(GrabPixmap(0, 0, 200,200))

flip
for local i:int = 0 to 40
	SetColor(Rand(255), Rand(255), Rand(255))
	SetAlpha Rand(0.5, 1.0)
	DrawRect(rand(0,640),rand(0,480), Rand(50,150),Rand(50,150))
Next
Global bg:TImage = LoadImage(GrabPixmap(0,0,640,480))
'=== /PREPARATION ===

Global shadowAreaX:int = 20
Global shadowAreaY:int = 20
Global shadowAreaW:int = 600
Global shadowAreaH:int = 340

Global spotLightX:int = 0
Global spotLightY:int = 0
Global spotLightW:int = 200
Global spotLightH:int = 200


While not KeyHit(KEY_ESCAPE)
	cls
	SetBlend(ALPHABLEND)
	'units/area
	SetColor(255,255,255)
	DrawImage(bg, 0,0)

	'spotlight / fog of war
	spotLightX = MouseX() -100
	spotLightY = MouseY() -100
	SetBlend(SHADEBLEND)
	DrawImage(spotLight, spotLightX, spotLightY)
	SetBlend(ALPHABLEND)
	'compute "outside rects"
	'there is one ABOVE the spotLight
	'there is one BELOW the spotLight
	'there is one RIGHT the spotLight
	'there is one LEFT the spotLight
	SetColor 0,0,0 'we need "black" (or the darkest color of the light)
	'above - if visible
	if spotLightY > shadowAreaY
		DrawRect(shadowAreaX, shadowAreaY, shadowAreaW, spotLightY - shadowAreaY)
	endif
	'below - if visible
	if spotLightY + spotLightH < shadowAreaY + shadowAreaH
		DrawRect(shadowAreaX, spotlightY + spotLightH, shadowAreaW, (shadowAreaY + shadowAreaH) - (spotLightY + spotLightH))
	endif
	'left - if visible
	if spotLightX > shadowAreaX
		DrawRect(shadowAreaX, spotLightY, spotLightX - shadowAreaX, spotLightH)
	endif
	'right - if visible
	if spotLightX + spotLightW < shadowAreaX + shadowAreaW
		DrawRect(spotLightX + spotLightW, spotLightY, (shadowAreaX + shadowAreaW) - (spotLightX + spotLightW), spotLightH)
	endif

	'interface
	SetColor(200,200,250)
	DrawRect(0,0,640, ShadowAreaY)
	DrawRect(0,shadowAreaY+shadowAreaH, 640, 480 - shadowAreaY - shadowAreaH)
	DrawRect(0,0,ShadowAreaX, 480)
	DrawRect(shadowAreaX + shadowAreaW,0,640 - shadowAreaX - shadowAreaW, 480)
	SetColor(255, 255, 255)
	SetAlpha(1.0)

	Flip 1
Wend

bye
Ron

GfK	(Posted 2014) [#9]

@therevills - I read through all that but I really didn't like the dependency on GrabImage.

Anyhoo, all done now!

Derron

(Posted 2014) [#10]

@GrabImage

That is why my example in the post above yours ... is using _no_ GrabImage but a normal grayscale light-image and 4 DrawRect-commands.

bye
Ron