Mask view holes (One for Brent or Rob?)

Solar2D General Questions/Discussion
#1

I recently posted a code exchange entry which allows for a thumbnail of an image to be viewed through two nested display groups with masks applied to each. This gives the effect that when tapped on the view can grow smoothly by shifting the masks.

The problem is that the tap has to be detected by an invisible object placed over the top of the top masked group. This is because the display objects within the nested, masked groups do not receive touch events.

This seems to be a problem and I am wondering if this is (a) by design and (b) has a work around/solution?

My asset files are here: https://dl.dropbox.com/u/10254959/MaskTestAssets.zip

And this is the main.lua:
[lua]-- mask test

– set default screen values
display.setStatusBar(display.HiddenStatusBar)
display.setDefault( “background”, 50, 50, 50 )
stage = display.getCurrentStage()

img = display.newImage( “5UgTS.jpg” )

– load the mask to be used
mask = graphics.newMask(“mask.png”)
maskbr = graphics.newMask(“maskbr.png”)

img:setMask( maskdt )

local top, bottom = display.newGroup(), display.newGroup()

top:insert( bottom )
bottom:insert( img )

top:setMask(maskbr)
top.maskX, top.maskY = (display.contentWidth/4)*3, (display.contentHeight/4)*3

bottom:setMask(mask)
bottom.maskX, bottom.maskY = display.contentWidth/4, display.contentHeight/4

rect = display.newRect( bottom, 250, 500, 250, 200 )

function img:tap(e)
print(‘tap’)
end
img:addEventListener(“tap”,img)
rect:addEventListener(“tap”,img)[/lua] [import]uid: 8271 topic_id: 34158 reply_id: 334158[/import]

#2

Hello,
I looked at your project, and frankly I’m still a bit confused on what it’s “supposed to do”. :slight_smile: Is the “window” that you can see Indiana Jones through supposed to slowly resize/scale? Or only move around, like the user is dragging that window around? Does the aspect ratio change (as in, must the “window” grow taller or wider depending on certain factors)?

I assume you followed the tutorial on this? Masks are a tricky business, and if you don’t do it exactly correct, it seems to fail pretty easily. I notice, for example, that you didn’t include the 3px border around your masks (required for some reason that I still can’t explain).
http://www.coronalabs.com/blog/2012/05/29/how-to-use-bitmap-masks/

Anyway, if you can describe your requirements in more detail, I might have some ideas. I’ve only briefly tinkered with masks, and I actually need a brush-up course in this, so I’m willing to consider different options.

Brent [import]uid: 200026 topic_id: 34158 reply_id: 135852[/import]

#3

Thanks for taking a look, Brent.

My masks are designed just the way I intended; I’ve noticed that the mask pixels at the edge essentially bleed infinitely and so I thought “can I make use of this?” The ‘use’ was to make two masks which operate like moveable corners of a window. This window can then be resized allowing a fairly maleable hole for viewing a limited portion of content beneath.

I do understand this is very non-typical and breaking the published rules, but it does appear to work.

To answer your initial questions; No, the window in this particular code is not meant to move or resize, just to show a limited amount of the full Indiana Jones image. It’s just an example. The ‘window’ could move and that’s what I’m getting at.

My problem is that the content within the window is “non-clickable”, as it were.

Yes, I have followed the tutorials and they are great. I do think I understand masks pretty well and am quite familiar with the concept. I have previously noticed that (at least for a time, some time ago) the published dimensions of a working mask was a width and height as a multiple of 4 but that it should actually be 8.

So, in summary, what I’m trying to show is that if you have a mask like mine which can act like a corner (the visible pixels meet the edge of the mask) that corner extends infinitely out allowing some interesting things - ie: windows. The problem is that you can’t interact with the content in the window.

Does that help? [import]uid: 8271 topic_id: 34158 reply_id: 135865[/import]

#4

Hmmmm… I think in this case, it’s something to do with these “nested groups” and masking. The reason I asked about resizing the window and such is: could you just make a standard mask with a window in the middle (just one mask with a rectangular “hole”) and then move/scale that mask? If the window needed to resize, I believe you could just scale it up and down using the “.maskScale” properties, correct? Or scale them independently to make the window stretch or squash. Dragging just one corner would require, I suppose, repositioning the mask about that corner point somehow, so it wouldn’t appear to scale in/out around a center point. Movement of the mask would be done by “.maskX” and “.maskY”…

Anyway, just thinking out loud, maybe you’ve tried all of this and it’s simply not feasible. Let me know if I’m way off base with this. :slight_smile:

My immediate thought, initially, was that you hadn’t set the “isHitTestMasked” property to “false”, but I tried that and it had no effect.

Brent [import]uid: 200026 topic_id: 34158 reply_id: 136007[/import]

#5

I’m afraid I’ve tried all that - scaling didn’t work because the mask aliased. I will try scaling down the mask as my last effort was scaling the mask up. isHitTestable didn’t have any effect. It would be fantastic to use masks in this way. [import]uid: 8271 topic_id: 34158 reply_id: 136023[/import]

#6

Hello,
I looked at your project, and frankly I’m still a bit confused on what it’s “supposed to do”. :slight_smile: Is the “window” that you can see Indiana Jones through supposed to slowly resize/scale? Or only move around, like the user is dragging that window around? Does the aspect ratio change (as in, must the “window” grow taller or wider depending on certain factors)?

I assume you followed the tutorial on this? Masks are a tricky business, and if you don’t do it exactly correct, it seems to fail pretty easily. I notice, for example, that you didn’t include the 3px border around your masks (required for some reason that I still can’t explain).
http://www.coronalabs.com/blog/2012/05/29/how-to-use-bitmap-masks/

Anyway, if you can describe your requirements in more detail, I might have some ideas. I’ve only briefly tinkered with masks, and I actually need a brush-up course in this, so I’m willing to consider different options.

Brent [import]uid: 200026 topic_id: 34158 reply_id: 135852[/import]

#7

Thanks for taking a look, Brent.

My masks are designed just the way I intended; I’ve noticed that the mask pixels at the edge essentially bleed infinitely and so I thought “can I make use of this?” The ‘use’ was to make two masks which operate like moveable corners of a window. This window can then be resized allowing a fairly maleable hole for viewing a limited portion of content beneath.

I do understand this is very non-typical and breaking the published rules, but it does appear to work.

To answer your initial questions; No, the window in this particular code is not meant to move or resize, just to show a limited amount of the full Indiana Jones image. It’s just an example. The ‘window’ could move and that’s what I’m getting at.

My problem is that the content within the window is “non-clickable”, as it were.

Yes, I have followed the tutorials and they are great. I do think I understand masks pretty well and am quite familiar with the concept. I have previously noticed that (at least for a time, some time ago) the published dimensions of a working mask was a width and height as a multiple of 4 but that it should actually be 8.

So, in summary, what I’m trying to show is that if you have a mask like mine which can act like a corner (the visible pixels meet the edge of the mask) that corner extends infinitely out allowing some interesting things - ie: windows. The problem is that you can’t interact with the content in the window.

Does that help? [import]uid: 8271 topic_id: 34158 reply_id: 135865[/import]

#8

Hmmmm… I think in this case, it’s something to do with these “nested groups” and masking. The reason I asked about resizing the window and such is: could you just make a standard mask with a window in the middle (just one mask with a rectangular “hole”) and then move/scale that mask? If the window needed to resize, I believe you could just scale it up and down using the “.maskScale” properties, correct? Or scale them independently to make the window stretch or squash. Dragging just one corner would require, I suppose, repositioning the mask about that corner point somehow, so it wouldn’t appear to scale in/out around a center point. Movement of the mask would be done by “.maskX” and “.maskY”…

Anyway, just thinking out loud, maybe you’ve tried all of this and it’s simply not feasible. Let me know if I’m way off base with this. :slight_smile:

My immediate thought, initially, was that you hadn’t set the “isHitTestMasked” property to “false”, but I tried that and it had no effect.

Brent [import]uid: 200026 topic_id: 34158 reply_id: 136007[/import]

#9

I’m afraid I’ve tried all that - scaling didn’t work because the mask aliased. I will try scaling down the mask as my last effort was scaling the mask up. isHitTestable didn’t have any effect. It would be fantastic to use masks in this way. [import]uid: 8271 topic_id: 34158 reply_id: 136023[/import]