Jump to content

How to create this effect more efficiently?


Recommended Posts



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:







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.





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 ;-)

Link to comment
Share on other sites


  • Recently Browsing   0 members

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