v2 get canvas without a certain object

[LinkTree]

I've been trying to implement a menu with a dynamic blurred background behind it for a few days now and I just can't get it to work the way I want it.

what I did was to set my menu's update function to copy a rectangle in the size and position of my menu from the game canvas to an off-screen canvas and then blur the off-screen canvas and set a sprite with a the returned texture then draw the menu itself on top of that blurred sprite.

The problem is that it copies and blurs the menu itself as well. The only good solution I could think of was to create that menu in html and style it with css and feed it with data and images from the game using toDataURL(). But I really want to make it 100% canvas. the second solution I thought about was to run the game twice and not add the menu container in the second game but it sounds extremely wrong and will hit the game performance. Is there a way to render the off-screen canvas while excluding specific objects? or getting the canvas image before the menu is drawn to it? I couldn't figure it out and I tried many things. I don't want to edit the game engine itself but I might have to.

Thank you.

[SkyzohKey]

I think the following could work.

Pseudo code:

//First we use a tilingsprite with a blury texture and set it's opacity to whatever you want.
var blur = new game.TilingSprite("blury-texture.png");
blur.position.set(0, 0);
blur.width = game.system.width;
blur.height = game.system.height;

// Then let's add the menu itself.
var menu = new game.Menu();

Simply don't do that in the update method but in a click event ;).

[LinkTree]

20 minutes ago, ThanosS said:

I think the following could work.

Pseudo code:

//First we use a tilingsprite with a blury texture and set it's opacity to whatever you want.
var blur = new game.TilingSprite("blury-texture.png");
blur.position.set(, );
blur.width = game.system.width;
blur.height = game.system.height;

// Then let's add the menu itself.
var menu = new game.Menu();

Simply don't do that in the update method but in a click event ;).

Hi ThanosS, Thank you for your suggestion.

I don't have a problem with creating a static blurred background. It's quite simple and there are multiple ways of doing that.

What I am trying to create is a dynamic background that changes according to what's behind it in real-time. For that I think I have to use the update function and maybe modify some rendering function but I am not sure and I can't wrap my head around it.

 

Edit: I think I have to edit or extend the engine's renderer to detect my menu class and get the canvas image at that point before it renders the menu itself.

[LinkTree]

I solved it! had to use the _renderCanvas (or _render either will work) function of the Container class.