JSFiddle - React, Tailwind, and code Playground

by georgie

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/phaser/2.2.1/phaser.js"></script>

JavaScript

var Shadowland = function() {};
Shadowland.Game = function() {};


Shadowland.ContentWithLights = function(game){
  this.game = game;
  //create a new canvas to render a composition withotu interfering with the main canvas
  this.canvasBuffer = new PIXI.CanvasBuffer(1024,1024);
  this.canvasTexture = PIXI.Texture.fromCanvas(this.canvasBuffer.canvas);

  Phaser.Group.call(this, game, game.world, 'content-and-lights');

  this.contentLayer = game.make.group(this,'content')
  this.lightsLayer = game.make.group(this,'lights')

  //this will containe the merged content of content & lights
  this.canvasOutput = this.create(0,0, this.canvasTexture)
}

Shadowland.ContentWithLights.prototype = Object.create(Phaser.Group.prototype);
Shadowland.ContentWithLights.prototype.constructor = Shadowland.ContentWithLights;

Shadowland.ContentWithLights.prototype.addContent = function(displayObject){
  this.contentLayer.add(displayObject)
}

Shadowland.ContentWithLights.prototype.addLight  = function(displayObject){
  this.lightsLayer.add(displayObject)
}


Shadowland.ContentWithLights.prototype.renderLayers = function(){
  var bufferContext = this.canvasBuffer.context;
  var renderer = this.game.renderer;
  
  this.canvasBuffer.clear()

  //manually update child transform
  this.lightsLayer.forEach(function(child){ child.updateTransform() });
  
  //https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Compositing
  if (renderer.type === PIXI.CANVAS_RENDERER){
    renderer.renderDisplayObject(this.contentLayer, bufferContext);
    
    //first lighten
    //bufferContext.globalCompositeOperation = "lighten";
    //renderer.renderDisplayObject(this.lightsLayer, bufferContext);

    //then cut it out
    bufferContext.globalCompositeOperation = "source-atop";
    renderer.renderDisplayObject(this.lightsLayer, bufferContext);
    


    //reset
    bufferContext.globalCompositeOperation = "source-over";

  
  }else{
    //not working yet
    var gl = renderer.gl;
   ...