Flashlight effect in wade
Shri February 9th, 2015

Gio,

 

I wanted to code up something like the attached image.

 

In a previous discussion thread (shadow light effect), you helped me figure out how to make a whole layer/game fade from day to night.

Now, I want the whole game faded out, except where the flashlight is shining.

The light would be attached to a sceneObject which could move (ex the player).

 

I'm thinking something like this.

Create a layer 'Darkenss Layer' which lays over everything but the gui.

Create a transparent or whitish triangular shaped sprite name flashlight.png

sp = new Sprite('flashlight.png', Darkness Layer);offset = {x:0,y:-50}player.addSprite(sp,offset);

Will this work, or will it just look like a white triangle over the darkness layer ?

 

I figured I ask you before I tried coding something up in case I'm just in the dark here.

 

cheers,

Shri

 

 

 

All 2 Comments
Gio February 10th, 2015

Hehe you aren't too much in the dark but yeah, that would just look like a white triangle on a dark background.

 

You really want to cut a hole in the dark background, which you can do with a composite operation:

sp.setDrawFunction(wade.drawFunctions.composite_('destination-out', sp.getDrawFunction()));

For best results fade out your triangle around the edges too.

 

This trick only works on 2d canvas layers, so not on WebGL ones. I can see it being quite performance intensive too: as you know, on 2d layers,  the main bottleneck is how many pixels you are drawing per frame. In this case, it would be the whole screen every time the flashlight moves. So it's going to be pretty bad on older mobiles and I would definitely recommend setting the resolution factor of the layer to 0.5 or something like that.

Shri February 10th, 2015

Gio,

 

Thanks for the help.

I put together a little demo and put it up on the projects page - Flashlight Demo

 

A few general things to note:

  • I can't seem to turn the tank unless I run the demo in full screen mode.
  • The night effect is just a purple rectangle - I just filled an image in photoshop with the color at 50% opacity
  • The flashlight is just a white triangle(ish) shape - you could play around with this shape / color to get different light effects.

 

In the code:

  • The message layer is a lower number than the dark layer which is lower than the game layer. If you understand wade layers then duh, if you don't, go read about wade layers
  • The dark layer resolution factor is set to 0.1. To maintain performance but I'm not sure how this would perform on a mobile.
  •  If using destination-out in the composite draw function, the nightEffect sprite has to be behind  the flashlight sprite. Refer to the diagram on the right side of this page,   html canvas  to understand how the composite draw functions make foreground and background images interact

 

Next, I will try to add this effect to sector 7 so a couple of the game levels are in partial darkness.

 

Anyway, this could be a nice easy effect to add to your games.

 

cheers,

Shri

Post a reply
Add Attachment
Submit Reply
Login to Reply