JSFiddle - React, Tailwind, and code Playground
HTML
<script src='https://cdnjs.cloudflare.com/ajax/libs/phaser/2.5.0/phaser.min.js'></script>
JavaScript
// Copyright © 2014 John Watson
// Licensed under the terms of the MIT License
var GameState = function(game) {};
// Setup the example
GameState.prototype.create = function() {
// Set stage background color
this.game.stage.backgroundColor = 0x4488cc;
// The radius of the circle of light
this.LIGHT_RADIUS = 100;
// Create the shadow texture
this.shadowTexture = this.game.add.bitmapData(this.game.width, this.game.height);
// Create an object that will use the bitmap as a texture
var lightSprite = this.game.add.image(0, 0, this.shadowTexture);
// Set the blend mode to MULTIPLY. This will darken the colors of
// everything below this sprite.
lightSprite.blendMode = Phaser.blendModes.MULTIPLY;
// Simulate a pointer click/tap input at the center of the stage
// when the example begins running.
this.game.input.activePointer.x = this.game.width / 2;
this.game.input.activePointer.y = this.game.height / 2;
};
GameState.prototype.update = function() {
this.updateShadowTexture();
};
GameState.prototype.updateShadowTexture = function() {
// Draw shadow
this.shadowTexture.context.fillStyle = 'rgba(100, 100, 100 , 1)';
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();
// Second Light source...
this.shadowTexture.context.beginPath();
this.shadowTexture.context.fillStyle = 'rgb(255, 255, 255)';
this.shadowTexture.context.arc(100, 200,
this.LIGHT_RADIUS, 0, Math.PI * 2);
this.shadowTexture.context.fill();
// This just tells the engine it should update the texture cache
this.shadowTexture.dirty = true;
};
// Setup game
var game = new Phaser.Game(848, 450, Phaser.AUTO,...