Sign in to follow this  
eguneys

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

Recommended Posts

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 by eguneys

Share this post


Link to post
Share on other sites

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 by ivan.popelyshev

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.