I’ve wanted to have masks which can change size easily. The typical mask advice is to surround the white of a mask with at least 4 pixels of black. Fortunately, if you leave one edge open you can get some interesting effects because that edge extends forever.
The code below allows the part of the image visible through the mask to be changed by dragging the red and green dots around. You’ll need these two image files for this:
The mask: http://content.screencast.com/users/HoraceBury/folders/Default/media/29ba77ce-b5f3-4629-9e63-896f7ec4f86a/bottomedgemask.png
The content image: http://content.screencast.com/users/HoraceBury/folders/Default/media/b9c654a2-9e6f-48ca-aeaf-50bb0d4d595b/test.png
The second image is quite large so feel free to use a smaller one. This code was written while running the iPad simulator on Windows, so it might be a bit out of scale for the iphone sim.
main.lua:
[lua]-- create a top level group which contains the bottom level group, which itself contains the image
– these could be called outer (top) and inner (bottom) with the image being the content
local top = display.newGroup()
local bottom = display.newGroup()
top:insert( bottom )
local content = display.newImage( bottom, “test.png” )
– load the mask
local mask = graphics.newMask( “bottomedgemask.png” )
– set the mask on the top group
top:setMask( mask )
– either of these two lines is fine - they just flip the mask round
–top.maskScaleY = -1
top.maskRotation = 180
– set the mask on the bottom group
bottom:setMask( mask )
– move the top group’s mask
top.maskX, top.maskY = 400, 100
local a = display.newCircle( 400, 100, 35 )
a:setFillColor(255,0,0)
function a:touch(event)
a.x, a.y = event.x, event.y
top.maskX, top.maskY = event.x, event.y
end
a:addEventListener(“touch”,a)
– move the bottom group’s mask
bottom.maskX, bottom.maskY = 400, 700
local b = display.newCircle( 400, 700, 35 )
b:setFillColor(0,255,0)
function b:touch(event)
b.x, b.y = event.x, event.y
bottom.maskX, bottom.maskY = event.x, event.y
end
b:addEventListener(“touch”,b)[/lua] [import]uid: 8271 topic_id: 28337 reply_id: 328337[/import]