How to create this effect more efficiently?

[AzraelTycka]

Hello,

 

I'd like to kindly ask for your help.

 

This is the kind of effect I'd like to achieve (this was made by me in graphics program not with phaser).

 

I manage to get this:

 

with this code:

var mainstate = {    preload: function() {        this.load.image('testW', 'testW.png');        this.load.image('testB', 'testB.png');    },        create: function() {    this.stage.backgroundColor = '#B1FD00';    //this.tB = game.add.sprite(50, 50, 'testB');    //this.tW = game.add.sprite(0, 0, 'testB');        this.bmd = this.add.bitmapData(this.game.width, this.game.height);    this.bmd.draw('testB', 0, 0, null, null, 'normal');    this.bmd.draw('testB', 50, 50, null, null, 'xor');    //this.bmd.replaceRGB(0, 0, 0, 255, 255, 255, 255, 255);    this.bmd.addToWorld();        },        update: function() {    }    };var game = new Phaser.Game(400, 300, Phaser.AUTO, 'gameDiv');game.state.add('main', mainstate);game.state.start('main');

What I would like is to change the color of that overlapping green area, but I unfortunately can't find a way. Or more precisely I wan't it green this way but I don't want other images to affect this area.

 

Basically I have these layers:

background

sprite1

sprite2

spriteToOverlap1

spriteToOverlap2

 

And I want to get the overlapping (xor) effect between spriteToOverlap1 and spriteToOverlap2 with background behind, but I don't want in case that sprite1 or sprite2 get in the overlapping area (they are behind spriteToOverlap1/2 in layers) to see them in the overlap.

I tried to change the color with replaceRGB() (commented in code) but that changed the whole bitmap not only just part of it.

 

I hope I made myself clear :-).

 

Thank you for any advice you can give me I'd highly appreciate it.

 

 

EDIT:

 

For now I went with this (in docs I found that other function on bitmap needs to update the buffer, so I tried it and it worked fine :-)):

// create functionthis.bmd = this.add.bitmapData(this.game.width, this.game.height);// update functionthis.bmd.cls();this.bmd.draw('testB', 0, 0, null, null, 'normal'); // testB is a black rectanglethis.bmd.draw('testB', 50, 50, null, null, 'source-in');this.bmd.update();  // this line did the trick, found it in docs while checking getPixel32this.bmd.replaceRGB(0, 0, 0, 255, 255, 255, 255, 255);this.bmd.addToWorld();

But doing this in the update looop is super expensive, is tehre a way to achieve this result with lower cost?

 

Thanks ;-)

[AzraelTycka]

Ouch, repeatedly using add.toWorld() was wrong on my part . Without it the game is smooth.

 

Though I'm still interested if there is any other way how to achieve this effect?