flashlight effect and masking

[jfjose]

Hi Guys,

 

this is a sample of what i am trying to do.  

 

 

As you can see,  the guy is holding a flashlight and you can see the light on the ground.. but those that are not lighted by the light can still be seen, just darker.   on some samples i have seen and working on,  a mask is added to the ground so that the unlighted areas are flat black.  can't seem to change the transparency of the mask..

 

i saw on game mechanic explorer a lighting section and it has the effect what i am looking for but it says the blend mode is only for webgl.  question is, i read here some topics on optimizing for mobile and says canvas is better.  so im kind of leaning into not using webgl or am i wrong in my assumption?

 

here's the tutorial i am following to achieve a flashlight effect : http://www.emanueleferonato.com/2014/10/21/phaser-tutorial-how-to-create-an-html5-survival-horror-game-in-6-easy-steps/

[CtlAltDel]

I solved this by adding the floor twice, once with the least visibility and then add the masked 'real' one on top of that. The real one is also in the group that has all the enemies etc, so they get masked nicely as well

[jfjose]

Not exactly sure what you meant but is it something like this :

 

 

from top layer to bottom -

 

Mask

 

Floor 2 (real)

 

Floor 1

 

 

 

 

did you do also the same method as those in the tutorial?  because in the tutorial, he just added a graphics   and made that the mask to the floor.  

[CtlAltDel]

I used a graphic for the mask indeed. and yes, it's layered as you say. with all entities being a child of Floor 2.

 

I have temporarily started my server so you can see the effect: [offline]

 

It's on my home connection so loading the assets and sounds might be slow. move with wsad or arrows, mouse rotates FPS style. Beware of twitchy mouse . Tab shows score

 

Also beware of other players (probably only me), this is mulitplayer.

 

See the screenshot below:

[jfjose]

Hi,  do you mind if you can give me a sample code? 

 

for some reason, having the 2 floors either does not show the light but can see the whole room or it does show the light but everything else is black..

 

 

here's my code :

	function onCreate() {		goFullScreen();		floor1 = game.add.sprite(0,0,"floor");		floor = game.add.sprite(0,0,"floor");		floor1.addChild(floor);				wallsBitmap = game.make.bitmapData(640,480);		wallsBitmap.draw("walls");		wallsBitmap.update();		game.add.sprite(0,0,wallsBitmap);		player = game.add.sprite(80,80,"player");		player.anchor.setTo(0.5,0.5);		cursors = game.input.keyboard.createCursorKeys();		maskGraphics = this.game.add.graphics(0, 0);		floor.mask=maskGraphics;	}	function onUpdate() {		var xSpeed = 0;		var ySpeed = 0;		if(cursors.up.isDown){			ySpeed -=1;		}		if(cursors.down.isDown){			ySpeed +=1;		}		if(cursors.left.isDown){			xSpeed -=1;		}		if(cursors.right.isDown){			xSpeed +=1;		}		if(Math.abs(xSpeed)+Math.abs(ySpeed)<2 && Math.abs(xSpeed)+Math.abs(ySpeed)>0){			var color = wallsBitmap.getPixel32(player.x+xSpeed+player.width/2,player.y+ySpeed+player.height/2);			color+= wallsBitmap.getPixel32(player.x+xSpeed-player.width/2,player.y+ySpeed+player.height/2);			color+=wallsBitmap.getPixel32(player.x+xSpeed-player.width/2,player.y+ySpeed-player.height/2)			color+=wallsBitmap.getPixel32(player.x+xSpeed+player.width/2,player.y+ySpeed-player.height/2)			if(color==0){				player.x+=xSpeed;				player.y+=ySpeed;			}				}		var mouseAngle = Math.atan2(player.y-game.input.y,player.x-game.input.x);		maskGraphics.clear();		//maskGraphics.lineStyle(2, 0xffffff, 1);		//maskGraphics.beginFill(0xffff00);		maskGraphics.moveTo(player.x,player.y);					for(var i = 0; i<numberOfRays; i++){				var rayAngle = mouseAngle-(lightAngle/2)+(lightAngle/numberOfRays)*i			var lastX = player.x;			var lastY = player.y;			for(var j= 1; j<=rayLength;j+=1){          		var landingX = Math.round(player.x-(2*j)*Math.cos(rayAngle));          		var landingY = Math.round(player.y-(2*j)*Math.sin(rayAngle));          		if(wallsBitmap.getPixel32(landingX,landingY)==0){					lastX = landingX;					lastY = landingY;					}				else{					maskGraphics.lineTo(lastX,lastY);					break;				}			}			maskGraphics.lineTo(lastX,lastY);		}		maskGraphics.lineTo(player.x,player.y);      	maskGraphics.endFill();		//floor.alpha = 0.5+Math.random()*0.5;			floor.alpha = 0.5;		}	

also uploaded it on toastedbrains.com/light

 

the light follows the mouse and arrow keys for movement. 

 

will really appreciate any more tips/suggestions to the code.  thanks!

[CtlAltDel]

        // I use a worldgroup that contains everything so I can rotate the whole world around my player        this.worldgroup = this.game.add.group();        // This is the real backdrop this one is shown 30% alpha it's the dark background        this.realback = this.game.add.sprite(0, 0, 'de_dust2_map');        this.worldgroup.add(this.realback);        // You can use whatever method to make this background darker, I used an alpha of .3 since the default background is black.        this.realback.alpha = 0.3;        // this is the backdrop that gets masked by the visibility        this.backdrop = this.game.add.sprite(0, 0, 'de_dust2_map');        this.worldgroup.add(this.backdrop);        // All my regular game entities reside in this group        this.entityGroup = this.game.add.group();        this.backdrop.addChild(this.entityGroup); // this makes the sprites get masked with the backdrop        // And the visibility mask        this.visibility = this.game.add.graphics(0, 0);        this.backdrop.mask = this.visibility;        this.worldgroup.add(this.visibility);

Hope this code helps. This is a straight copy paste with some comments from my main state create() function

[jfjose]

THANK YOU!  that this.realback.alpha = 0.3; line did the trick in the code.  thanks a lot again. .though now i have to understand why that worked...   lol

 

but really, thanks and now i also found a solution to my other question.

[CtlAltDel]

the reason that .3 alpha works is because the default background is black and giving it an alpha of .3 will make the image 'darker' or rather semitransparant to black

[jfjose]

thanks for the explanation. i understood it already and did a couple more tests.

[jdnichollsc]

Any examples with tilemaps? 

[wayfinder]

Instead of drawing the floor twice, you could also use a white visibility polygon on a black background (easy to do with Graphics) and put that on top of everything with blendMode set to Phaser.blendModes.MULTIPLY