Can someone help me understand

[Glaydur]

So I've been trying to understand this example in gamemechanicexplorer:

 

http://gamemechanicexplorer.com/#lighting-1

 

I understand the code in general(thanks to the comment) but I can't understand what he/she is specifically doing with each word of code. I have searched the documentation for some keywords but I still don't understand it.

 

So here are the specific things I don't understand:

this.shadowTexture = this.game.add.bitmapData(this.game.width, this.game.height);

is shadowTexture a special keyword in Phaser? I have searched the docs and I have not found it but he didn't initialize this if it's a variable. I searched in the docs about bitmapData and I learned that you need a sprite/image for this but he's just specifying the width and height? 

 // Set the blend mode to MULTIPLY. This will darken the colors of    // everything below this sprite.    lightSprite.blendMode = Phaser.blendModes.MULTIPLY;

So is he setting the multiply blend mode for the circle? It's pretty confusing cause he made the variable lightSprite and set shadowTexture as texture. So this will essentially make the circle dark right?  How is it then that the opposite happens in the demo?

GameState.prototype.updateShadowTexture = function() {    // This function updates the shadow texture (this.shadowTexture).    // First, it fills the entire texture with a dark shadow color.    // Then it draws a white circle centered on the pointer position.    // Because the texture is drawn to the screen using the MULTIPLY    // blend mode, the dark areas of the texture make all of the colors    // underneath it darker, while the white area is unaffected.    // Draw shadow    this.shadowTexture.context.fillStyle = 'rgb(100, 100, 100)';    this.shadowTexture.context.fillRect(0, 0, this.game.width, this.game.height);    // Draw circle of light    this.shadowTexture.context.beginPath();    this.shadowTexture.context.fillStyle = 'rgb(255, 255, 255)';    this.shadowTexture.context.arc(this.game.input.activePointer.x, this.game.input.activePointer.y,        this.LIGHT_RADIUS, 0, Math.PI*2);    this.shadowTexture.context.fill();

So this is the part that I get and what makes sense. He's making a box that fills the game window with the color of 100,100,100 in rgb and making a circle that is essentially the flashlight with the color of white. What confuses me though is that he just drawing these shapes but he didn't set the blend mode. I know that he set the blend mode at the earlier part but that is the part that confuses me.

 

I would be VERY grateful to anyone that can help me with regards to this. I really want to understand. I have finished some online courses for Phaser and I'm ready to make my own game after understanding lighting in this framework. 

[lewster32]

is shadowTexture a special keyword in Phaser? I have searched the docs and I have not found it but he didn't initialize this if it's a variable. I searched in the docs about bitmapData and I learned that you need a sprite/image for this but he's just specifying the width and height? 

 

No, in this case it's just a custom property. It could be anything. BitmapData is basically a blank canvas which you can draw pixels to - a 'generated' image.

 

So is he setting the multiply blend mode for the circle? It's pretty confusing cause he made the variable lightSprite and set shadowTexture as texture. So this will essentially make the circle dark right?  How is it then that the opposite happens in the demo?

 

No, he's setting the blend mode of the sprite which contains our generated image of both the black rectangle and the circle. This only has to be done once, because then all that happens is the generated image is cleared and updated each frame. The sprite it's attached to takes care of how that image is then blended with the rest of the scene.