How to proper mask for tiled rectangular area [Celeste Remake]

[eguneys]

I have a bunch of points, that forms a rectangle when drawn like this:

 

points.forEach(([x, y]) => {
  let sprite = spritePool[getASprite];
  sprite.position.set(x * 4, y * 4);                                                                                                                    
});

I can animate these points and have a moving rectangle. Now I want to fill this rectangle with some animated texture. But I don't know how.

 

I tried to do masking, with graphics like this:

let graphics = new PIXI.Graphics()
sprite.mask = graphics;

// on update loop

graphics.clear();

points.forEach(([x, y]) => {
 graphics.lineTo(x * 4, y * 4);
});

But the mask didn't work properly.

Maybe a flood fill algorithm can determine the points inside the rectangle, Or any other solution to how to make it like in celeste game?

Here's a demo: https://eguneys.github.io/jsgames/work.html

Edited March 13, 2020 by eguneys

[ivan.popelyshev]

Mask works with fills, and you dont have fillls in your graphics.

You can also use graphics beginTextureFill() for texture, no need for a sprite.

If you want to animate that texture - you can use AnimatedSprite with "renderable=false", and use active texture from it for that beginTextureFill every frame.

Make sure that texture has power-of-two size and dont forget to specify its "baseTexture.wrapMode=PIXI.WRAP_MODES.REPEAT"

======

Alternative: you can add a polygon in graphics and then animate it, and its fillStyle, in that case you have to call `graphics.geometry.invalidate()` every frame. Its not possible without going inside pixi sources, you have to clone the repo and open separate IDE window with it. Basically you will use pixi as a part of your engine and not just black box you dont understand how it works. Did you at least look in Graphics/GraphicsGeometry sources in pixijs repo? If not - its time to do it.

Edited March 13, 2020 by ivan.popelyshev

[ivan.popelyshev]

yo! are you still working on it?