Forums » Help » Expand/Contract Entities

I am looking to achieve something akin to the Vines in Mario, which grow out of a tube/ground. Essentially, I'd like to have an entity that starts at 0px in height (or width), then grows incrementally to its maximum size, and then retracts back down to zero. The effect could be a hand reaching out from the ground, ceiling, or walls.

It is easy enough to handle changing the size of an entity, but unfortunately, I do not see any way to "mask" the sprite animSheet, so that only part of the graphic is revealed at a time (1px, 2px, 3px etc).

What I have found is that I can use ig.Image() to expand/contract, but it will not animate of course.

Is what I'm trying to achieve possible with impactJS?

Thanks!

The easiest way to do this is to use clipping on the context : for instance you might use the tile map to know where to clip : you clip with a rect that is above the floor, with your hand example . Then you draw your entity, and don't forget to restore the context.

Hi Vincent, interesting thought. Would that clip the background and all other layers as well though?

...forget that, that's why I suppose you said to restore the context ;) I'll let you know how it goes!

Hi, so I implemented it per your advice and while it works quite well, there is a good deal of flickering happening with the rendering. Do you have any thoughts on a good workaround for that? Please see code below within my draw() method

ig.system.context.save();
            
            ig.system.context.rect(
                ig.system.getDrawPos(this.pos.x) - (this.screenOffset * ig.system.scale),
                ig.system.getDrawPos(this.pos.y) - (ig.game.screen.y * ig.system.scale),
                this.size.x * ig.system.scale,
                this.size.y * ig.system.scale
            );
            
            ig.system.context.clip();
            
            this.parent();
            
            ig.system.context.restore();

UPDATE: I found the fix to the flickering issue. Basically, I just needed to add context.startPath() before creating the context.rect() and then context.closePath() after. Seems to have worked like a charm!