Sign in to follow this  
Alex_Matveev

globalCompositeOperation = "destination-in"

Recommended Posts

@Alex_Matveev I have a PR about custom blend modes. https://github.com/pixijs/pixi.js/pull/4049 

This is custom pixijs: http://pixijs.download/dev-blendmodes-class/pixi.js

That's how to use it:

var blend = PIXI.BlendMode.from2d('destination-in');

sprite.blendMode = blend;

Either you hack current version of pixi, either you wait for v5, but canvas renderer will be available only as a plugin.. oh god.. Forget it, just use my patch :)

Share this post


Link to post
Share on other sites
let rec0 = new PIXI.Graphics();
rec0.lineStyle(0);
rec0.beginFill(0xffffff, 1);
rec0.drawRect(300, 300, 300, 300);

let rec1 = new PIXI.Graphics();
rec1.lineStyle(0);
rec1.beginFill(0xff0000, 1);
rec1.drawRect(400, 400, 300, 300);


var blend = PIXI.BlendMode.from2d('source-in');
rec1.blendMode = blend;

this.app.stage.addChild(rec0);
this.app.stage.addChild(rec1);

 

I see part red cube and all screene dark

1. yes

2. yes

Share this post


Link to post
Share on other sites

I can use the blend mode only for the Container (everything screen is visible)?

 

let cont = new PIXI.Container();

let rec0 = new PIXI.Graphics();
rec0.lineStyle(0);
rec0.beginFill(0xffffff, 1);
rec0.drawRect(300, 300, 300, 300);

let rec1 = new PIXI.Graphics();
rec1.lineStyle(0);
rec1.beginFill(0xff0000, 1);
rec1.drawRect(400, 400, 300, 300);
rec1.alpha = 0.5;


var blend = PIXI.BlendMode.from2d('destination-in');
rec1.blendMode = blend;

cont.addChild(rec0);
cont.addChild(rec1);

this.app.stage.addChild(cont);

Share this post


Link to post
Share on other sites

You can cache the container after you put rec1, rec2 into it:

cont.addChild(rec0);
cont.addChild(rec1);
cont.cacheAsBitmap = true;

That way it will be rendered into separate canvas first. You'll have to fiddle it (false~true) every time you change those things.

All other ways will have to use separate canvas too, even if you go through vanilla html5 canvas 2d context.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.