Issue with setting a mask on a Container.

Audio and Graphics
#1

I’m trying to set a mask on a container, because I need some particles to show only behind some features of my scene.

Here’s the mask image: http://i.imgur.com/N5BiUZB.png

It’s 240x92 in size.

self.waterContainer = self:addToScene(display.newContainer(240, 92)) self.waterContainer.anchorChildren = false self.waterContainer.anchorX, self.waterContainer.anchorY = 0, 0 self.waterContainer.x, self.waterContainer.y = 165, 249 self.waterContainer:setMask(graphics.newMask("mask\_sink.png")) --self.waterContainer.maskX, self.waterContainer.maskY = 0,0 --self.waterContainer.maskX, self.waterContainer.maskY = self.waterContainer.x, self.waterContainer.y

The commented lines were things that I tried to make this work.

So, I tried adding a rectangle to try the mask out since it wasn’t working for me, like this:

self.waterContainer:insert(game.ui.newRect(0, 0, 240, 92, {0,0,0}))

and this is the result: http://i.imgur.com/jDKLyNL.png

Without the mask, this is the result: http://i.imgur.com/GmbSy1Q.png

That is the correct area that should be covered by the container, but the mask is screwing it up for some reason.

Can someone tell me if I’m doing something wrong here?

By the way, the newRect method I use above is defined like this:

function ui.newRect(x, y, w, h, color, touch) local rect = display.newRect(x, y, w, h) rect.alpha = 1 if color then rect:setFillColor(color[1], color[2], color[3]) if #color == 4 then rect.alpha = color[4] end end rect.anchorX, rect.anchorY = 0, 0 rect.x, rect.y = x, y if touch then rect.isHitTestable = true rect:addEventListener("touch", touch) end return rect end

Any help is appreciated.

Thanks,

George

#2

Well generally speaking a container is a display.newGroup() with a mask applied dynamically to block out areas wider and higher than specified in the container’s constructor. 

You might have better luck using a group and adding your mask. Instead of applying a mask to an already masked object.

Rob

#3

I have tried using a normal group as well, with no luck:

self.waterContainer = self:addToScene(display.newGroup()) self.waterContainer.x, self.waterContainer.y = 156, 243 self.waterContainer:setMask(graphics.newMask("mask\_sink.png")) self.waterContainer.maskX, self.waterContainer.maskY = self.waterContainer.x, self.waterContainer.y self.waterContainer:insert(game.ui.newRect(0, 0, 280, 200, {0,0,0}))

With that code, the rectangle doesn’t even show at all.

I even tried inserting a regular group into the container, and that didn’t work either.

I’m out of ideas, do you have any more?

Thanks.

#4

Hi @Squadventure Games,

I would suggest that you don’t move the actual group, but instead you reposition the mask itself. Meaning, in regards to your screenshots, the group would remain at 0,0 and effectively cover the entire scene (mirror, sink, etc.). Then, the mask itself would be positioned somewhere like “self.waterContainer.x, self.waterContainer.y + 50” (I’m not sure your content area size, but you see my point). In other words, offset the mask position via “.maskX” and “.maskY” but keep the group itself at position 0,0 (don’t shift it to 156, 243).

Best regards,

Brent

#5

That worked perfectly Brent, thanks a lot.

It feels strange that moving the group doesn’t work though. I would suggest you add a better example for masking groups in the guide because it can get very confusing to get right.

Thanks to Rob as well.

#6

Well generally speaking a container is a display.newGroup() with a mask applied dynamically to block out areas wider and higher than specified in the container’s constructor. 

You might have better luck using a group and adding your mask. Instead of applying a mask to an already masked object.

Rob

#7

I have tried using a normal group as well, with no luck:

self.waterContainer = self:addToScene(display.newGroup()) self.waterContainer.x, self.waterContainer.y = 156, 243 self.waterContainer:setMask(graphics.newMask("mask\_sink.png")) self.waterContainer.maskX, self.waterContainer.maskY = self.waterContainer.x, self.waterContainer.y self.waterContainer:insert(game.ui.newRect(0, 0, 280, 200, {0,0,0}))

With that code, the rectangle doesn’t even show at all.

I even tried inserting a regular group into the container, and that didn’t work either.

I’m out of ideas, do you have any more?

Thanks.

#8

Hi @Squadventure Games,

I would suggest that you don’t move the actual group, but instead you reposition the mask itself. Meaning, in regards to your screenshots, the group would remain at 0,0 and effectively cover the entire scene (mirror, sink, etc.). Then, the mask itself would be positioned somewhere like “self.waterContainer.x, self.waterContainer.y + 50” (I’m not sure your content area size, but you see my point). In other words, offset the mask position via “.maskX” and “.maskY” but keep the group itself at position 0,0 (don’t shift it to 156, 243).

Best regards,

Brent

#9

That worked perfectly Brent, thanks a lot.

It feels strange that moving the group doesn’t work though. I would suggest you add a better example for masking groups in the guide because it can get very confusing to get right.

Thanks to Rob as well.