# Mask inside gameobject
**URL:** https://phaser.discourse.group/t/mask-inside-gameobject/10079
**Category:** Phaser 3
**Created:** [August 8, 2021, 7:38am UTC](https://phaser.discourse.group/t/mask-inside-gameobject/10079 "2021-08-08T07:38:56Z")
**Posts on this page:** 8
**Page:** 1
### Author:  [@knighter](https://phaser.discourse.group/u/knighter)
#### Post date: [August 8, 2021, 7:38am UTC](https://phaser.discourse.group/t/mask-inside-gameobject/10079/1 "2021-08-08T07:38:56Z")
How to create a masked content object with mask inside the class?
Mask must be a class member (changes self coordinates according the parent gameobject).
For example:
Green rectangle is a content area.
Red circle is a mask.
Picture 1 before masking:
```javascript
class MaskedCont extends Phaser.GameObjects.Container {
constructor(scene: Phaser.Scene, x: number, y: number) {
super(scene, x, y);
const rect = scene.add.rectangle(0, 0, 300, 300, 0x00bb00).setOrigin(0);
const mask = scene.make.graphics({x: 0, y: 0}, false);
mask.fillStyle(0xff0000, 1);
mask.fillCircle(150, 150, 150);
this.add(rect);
this.add(mask);
rect.setMask(mask.createGeometryMask());
}
}
export class GameScene extends Phaser.Scene {
constructor() {
super({ key: "GameScene" });
}
create(): void {
const cont = new MaskedCont(this, 50, 50);
this.add.existing(cont);
}
}
```
Picture 2 after masking:
---
### Author:  [@samme](https://phaser.discourse.group/u/samme)
#### Post date: [August 8, 2021, 3:19pm UTC](https://phaser.discourse.group/t/mask-inside-gameobject/10079/2 "2021-08-08T15:19:02Z")
A mask source must not be in a Container.
---
### Author:  [@knighter](https://phaser.discourse.group/u/knighter)
#### Post date: [August 8, 2021, 11:38pm UTC](https://phaser.discourse.group/t/mask-inside-gameobject/10079/3 "2021-08-08T23:38:42Z")
Ok. How I can masking a container without knowing it global coordinates inside class, for ex. in render method?
---
### Author:  [@rexrainbow](https://phaser.discourse.group/u/rexrainbow)
#### Post date: [August 9, 2021, 2:14am UTC](https://phaser.discourse.group/t/mask-inside-gameobject/10079/4 "2021-08-09T02:14:16Z")
If the goal is to apply a circle/round-rectangle mask on a specific texture, you might try [this plugin](https://rexrainbow.github.io/phaser3-rex-notes/docs/site/circlemaskimage/) ([demo](https://codepen.io/rexrainbow/pen/XWrMKBY)).
---
### Author:  [@knighter](https://phaser.discourse.group/u/knighter)
#### Post date: [August 10, 2021, 12:19pm UTC](https://phaser.discourse.group/t/mask-inside-gameobject/10079/5 "2021-08-10T12:19:04Z")
No, circle is an example mask.
The goal is a creating whole component with mask (usual scroll list and etc).
---
### Author:  [@rexrainbow](https://phaser.discourse.group/u/rexrainbow)
#### Post date: [August 10, 2021, 12:40pm UTC](https://phaser.discourse.group/t/mask-inside-gameobject/10079/6 "2021-08-10T12:40:47Z")
[Scrollable panel](https://codepen.io/rexrainbow/pen/YMyBom), [Grid table](https://codepen.io/rexrainbow/pen/XyJbWX), which are parts of [rexUI](https://rexrainbow.github.io/phaser3-rex-notes/docs/site/ui-overview/). BTW, rexUI does not use built-in container.
---
### Author:  [@knighter](https://phaser.discourse.group/u/knighter)
#### Post date: [August 11, 2021, 12:40am UTC](https://phaser.discourse.group/t/mask-inside-gameobject/10079/7 "2021-08-11T00:40:18Z")
Thanks! But unfortunately, this is not suitable for use.
The only way is to use mask for nested scroll lists as root scene element with calculating global coordinates for masked objects.
Do I understand correctly?
---
### Author:  [@rexrainbow](https://phaser.discourse.group/u/rexrainbow)
#### Post date: [August 11, 2021, 2:21am UTC](https://phaser.discourse.group/t/mask-inside-gameobject/10079/8 "2021-08-11T02:21:35Z")
I did not know if that is the ‘only way’.
For rexUI plugins, children game object are put in scene’s display list (as you mention, _global coordinates_), then mask part of children game object which are at bounds.
i.e. not all children are masked, reducing masked game objects could improve performance, BTW.