# Moving mask along with arcade sprite

**URL:** <https://phaser.discourse.group/t/moving-mask-along-with-arcade-sprite/12252>\
**Category:** Phaser 3\
**Created:** [September 1, 2022, 6:58am UTC](https://phaser.discourse.group/t/moving-mask-along-with-arcade-sprite/12252 "2022-09-01T06:58:33Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![Un\_Gamer](https://avatars.discourse-cdn.com/v4/letter/u/a6a055/32.png) [@Un\_Gamer](https://phaser.discourse.group/u/Un_Gamer)\
**Post date:** [September 1, 2022, 6:58am UTC](https://phaser.discourse.group/t/moving-mask-along-with-arcade-sprite/12252/1 "2022-09-01T06:58:33Z")

</div>

Hello,  
As mentioned in the topic I want mask to move along with the sprite. I do know that the `Masks are positioned in global space and are not relative to the Game Object to which they are applied` but is it possible to do the above?  
Below is the code :

```javascript
    let sprite = this.physics.add.sprite(0, 0, 'spritesheetName', 'kay');
    var pos = { x1: sprite.getLeftCenter().x, y1: sprite.getLeftCenter().y, x2: sprite.getCenter().x, y2: sprite.getCenter().y };
    var size = { w: sprite.displayWidth, h: sprite.displayHeight };
    const shape = this.make.graphics();
    shape.lineStyle(size.w, 0x000000, 1);
    shape.lineBetween(pos.x1, pos.y1, pos.x2, pos.y2);
    const mask = shape.createGeometryMask();
    sprite.setMask(mask);
    sprite.setVelocity(-50);

```

Thank you.

---

<div class="post-metadata">

**Author:** ![samme](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/samme/32/5275_2.png) [@samme](https://phaser.discourse.group/u/samme)\
**Post date:** [September 1, 2022, 2:55pm UTC](https://phaser.discourse.group/t/moving-mask-along-with-arcade-sprite/12252/2 "2022-09-01T14:55:51Z")

</div>

Clear and redraw on `shape`.

---

<div class="post-metadata">

**Author:** ![Un\_Gamer](https://avatars.discourse-cdn.com/v4/letter/u/a6a055/32.png) [@Un\_Gamer](https://phaser.discourse.group/u/Un_Gamer)\
**Post date:** [September 2, 2022, 6:51am UTC](https://phaser.discourse.group/t/moving-mask-along-with-arcade-sprite/12252/3 "2022-09-02T06:51:56Z")

</div>

I need to do that continuously in `update()` right?  
Isn’t there any other way of doing it?  
I just want to hide half of the image and move it.

---

<div class="post-metadata">

**Author:** ![samme](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/samme/32/5275_2.png) [@samme](https://phaser.discourse.group/u/samme)\
**Post date:** [September 7, 2022, 2:15pm UTC](https://phaser.discourse.group/t/moving-mask-along-with-arcade-sprite/12252/4 "2022-09-07T14:15:54Z")

</div>

You can set a crop rectangle instead of using a mask.