Jump to content
This forum will be closing down. Please move to the respective dedicated project forums.

flashlight effect and masking


Recommended Posts

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/

Link to comment
Share on other sites

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



from top layer to bottom -




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.  

Link to comment
Share on other sites

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 :P. Tab shows score


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


See the screenshot below:


Link to comment
Share on other sites

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!

Link to comment
Share on other sites

        // 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

Link to comment
Share on other sites

  • 4 months later...

  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...