Making images appear/disappear part by part

Solar2D General Questions/Discussion
#1

Hi!

How do I make images appear part by part. Like first just a little of an image is visible then more and more. I am not talking about alpha BTW.

Thanks! [import]uid: 171228 topic_id: 32588 reply_id: 332588[/import]

#2

Image masking would probably work for this. I’m not really familiar with the usage, but you should be able to find the info here:

http://docs.coronalabs.com/api/type/Mask/index.html

Brent [import]uid: 9747 topic_id: 32588 reply_id: 129606[/import]

#3

Image masking would probably work for this. I’m not really familiar with the usage, but you should be able to find the info here:

http://docs.coronalabs.com/api/type/Mask/index.html

Brent [import]uid: 9747 topic_id: 32588 reply_id: 129606[/import]

#4

Are you talking about a checker board style grid where a block of the image becomes visible?

If so why not draw the whole photo, then overlay a set of squares on top of it in your grid pattern. Then when you want to revel the photo below it, just remove one of the squares (either really remove it with :removeSelf() or set its visibility to false if you want to hide that area again or transition that block using alpha for a little animation of the square disappearing)

pic = display.newImageRect("mypic.jpg",320,480)  
squares = {}  
x = 0  
y = 0  
for i = 1, 24 do  
 squares[i] = display.newRect(0,0,80,80)  
 squares[i]:setFillColor(255)  
 squares[i].x = x \* 80 + 40 -- center of the square  
 squares[i].y = y \* 80 + 40  
 x = x + 1  
 if x \>= 4 then  
 x = 0  
 y = y + 1  
 end  
 local function hideSquare(event)  
 if event.phase == "ended" then  
 transition.to(event.target,{alpha=0})  
 end  
 return true  
 end  
 squares[i]:addEventListener("touch", hideSquare)  
end

Or something like that. [import]uid: 19626 topic_id: 32588 reply_id: 129661[/import]

#5

You can also use Sprite. [import]uid: 97768 topic_id: 32588 reply_id: 129669[/import]

#6

Are you talking about a checker board style grid where a block of the image becomes visible?

If so why not draw the whole photo, then overlay a set of squares on top of it in your grid pattern. Then when you want to revel the photo below it, just remove one of the squares (either really remove it with :removeSelf() or set its visibility to false if you want to hide that area again or transition that block using alpha for a little animation of the square disappearing)

pic = display.newImageRect("mypic.jpg",320,480)  
squares = {}  
x = 0  
y = 0  
for i = 1, 24 do  
 squares[i] = display.newRect(0,0,80,80)  
 squares[i]:setFillColor(255)  
 squares[i].x = x \* 80 + 40 -- center of the square  
 squares[i].y = y \* 80 + 40  
 x = x + 1  
 if x \>= 4 then  
 x = 0  
 y = y + 1  
 end  
 local function hideSquare(event)  
 if event.phase == "ended" then  
 transition.to(event.target,{alpha=0})  
 end  
 return true  
 end  
 squares[i]:addEventListener("touch", hideSquare)  
end

Or something like that. [import]uid: 19626 topic_id: 32588 reply_id: 129661[/import]

#7

You can also use Sprite. [import]uid: 97768 topic_id: 32588 reply_id: 129669[/import]