The most asked question since Ansca!

OK, I know this has been asked a million times. Somebody must have an answer by now.

OK, ahem…

Has anyone found a decent drag/page curl effect that works on Graphics 2.0?

It’s one of those infuriating things that really should exist, but just doesn’t.

There was a great version a couple of years back, by a guy called David Wallin, but with the loss of X/Y reference it stopped working. I’ve tried pretty hard to adapt the code to graphics 2.0, but not having much joy…

In case there’s any whizz kids out there, I’ve included the original code for inspection… If you can convert it, believe me, there will be more than just me who’s grateful.

Failing that, maybe you’ve seen something that might do the trick??

Mark

local Flipbook = { mask = graphics.newMask( "mask1.png" ), currentPage = 1, pages = {}, displayGroup = display.newGroup() } Flipbook.\_\_index = Flipbook function Flipbook:newFlipbook(newBackPage, newBackShadow, newBasicShadow, newCurlShadow) --Create a new flipbook local tempFlipbook = setmetatable({},self) -- Adds a shadow for where the curled page overlaps itself tempFlipbook.backShadow = display.newImage( newBackShadow ) tempFlipbook.displayGroup:insert( tempFlipbook.backShadow ) tempFlipbook.backShadow:setMask( self.mask ) tempFlipbook.backShadow.y = display.contentHeight / 2 tempFlipbook.backShadow.isVisible = false -- Adds a back page tempFlipbook.backPage = display.newImage( newBackPage ) tempFlipbook.displayGroup:insert( tempFlipbook.backPage ) tempFlipbook.backPage:setMask( self.mask ) tempFlipbook.backPage.isVisible = false -- Adds a shadow for where the curled page overlaps the new page tempFlipbook.basicShadow = display.newImage( newBasicShadow ) tempFlipbook.displayGroup:insert( tempFlipbook.basicShadow ) tempFlipbook.basicShadow.y = display.contentHeight / 2 tempFlipbook.basicShadow.yScale = 150 tempFlipbook.basicShadow.xReference = -1 \* tempFlipbook.basicShadow.contentWidth / 2 tempFlipbook.basicShadow.xScale = 0.01 tempFlipbook.basicShadow.isVisible = false -- Adds a shadow to give the edge of the curled page a 3d appearance tempFlipbook.curlShadow = display.newImage( newCurlShadow ) tempFlipbook.displayGroup:insert( tempFlipbook.curlShadow ) tempFlipbook.curlShadow.y = display.contentHeight / 2 tempFlipbook.curlShadow.yScale = 150 tempFlipbook.curlShadow.xReference = tempFlipbook.curlShadow.contentWidth / 2 tempFlipbook.curlShadow.xScale = 0.01 tempFlipbook.curlShadow.isVisible = false -- Adds event listener tempFlipbook.displayGroup:addEventListener( "touch", tempFlipbook ) ---- return tempFlipbook end function Flipbook:addPage( newPageImage ) -- Add a new page to your flipbook local tempPageImage = display.newImage( newPageImage ) tempPageImage:setMask( self.mask ) tempPageImage.maskX = display.contentWidth tempPageImage.isHitTestMasked = false table.insert( self.pages, tempPageImage ) -- Adds new page to pages index self.displayGroup:insert( 1, tempPageImage ) -- Adds new page to display group end function Flipbook:updateCurlEffect( handleX, handleY, originY ) -- Updates the curl effect assets local tempX = ( handleX + ( display.contentWidth - handleX ) / 2 ) local maskRot = math.deg (math.atan2 (originY - handleY, display.contentWidth - tempX)) print( handleX, handleY, originY ) print( tempX, maskRot ) self.pages[self.currentPage].maskRotation = maskRot / 6 self.pages[self.currentPage].maskX = tempX - display.contentWidth / 2 self.backPage.xReference = display.contentWidth / 2 - tempX - 2 self.backPage.rotation = maskRot / 3 self.backPage.x = tempX self.backPage.maskRotation = maskRot / -6 self.backPage.maskX = display.contentWidth / 2 - tempX self.backShadow.xReference = display.contentWidth / 2 - tempX self.backShadow.rotation = maskRot / 3 self.backShadow.x = tempX + 10 \* (handleX / display.contentWidth) self.backShadow.maskRotation = maskRot / -6 self.backShadow.maskX = display.contentWidth / 2 - tempX - 10 \* (handleX / display.contentWidth) self.curlShadow.rotation = maskRot / 6 self.curlShadow.x = tempX self.curlShadow.xScale = 1.01 - handleX / display.contentWidth self.basicShadow.rotation = maskRot / 6 self.basicShadow.x = tempX self.basicShadow.xScale = 1.01 - handleX / display.contentWidth / 3 end function Flipbook:setAssetsVisible( isVisibleBoolean ) -- Curl effect assets visibility switch box self.backPage.isVisible = isVisibleBoolean self.backShadow.isVisible = isVisibleBoolean self.basicShadow.isVisible = isVisibleBoolean self.curlShadow.isVisible = isVisibleBoolean end function Flipbook:touch( event ) if event.phase == "began" then if event.xStart \> 5 \* display.contentWidth / 6 and self.currentPage \< # self.pages or event.xStart \< display.contentWidth / 6 and self.currentPage \> 1 then if event.xStart \< display.contentWidth / 6 then self.currentPage = self.currentPage - 1 self.pages[self.currentPage].isVisible = true end display.getCurrentStage():setFocus( self.displayGroup ) self.isFocus = true self:setAssetsVisible( true ) else return false end end if self.isFocus then self:updateCurlEffect( event.x, event.y, event.yStart ) if event.phase == "ended" or event.phase == "cancelled" then self:updateCurlEffect( display.contentWidth, 0, 0 ) if math.abs(event.x - event.xStart) \> display.contentWidth / 6 then if event.xStart \> 5 \* display.contentWidth / 6 and self.currentPage \< # self.pages then self.pages[self.currentPage].isVisible = false self.currentPage = self.currentPage + 1 end self:setAssetsVisible( false ) display.getCurrentStage():setFocus( nil ) self.isFocus = nil else if event.xStart \< display.contentWidth / 6 and self.currentPage \> 1 then self.pages[self.currentPage].isVisible = false self.currentPage = self.currentPage + 1 end self:setAssetsVisible( false ) display.getCurrentStage():setFocus( nil ) self.isFocus = nil end end return true end end return Flipbook

Great!! question,

this should not be to hard to figure out ( although I don’t know the math for it myself ) but with the Graphics 2.0 example of the folding graphics It looks doable.

I’ll be watching to see this topic to see if anyone gives us some code.

Larry

It’s not quite ready, and I still hope to make some improvements, but here’s a sneak preview of a module I’m cooking up to meet this need. I’ll share a download link once it’s done…

https://www.youtube.com/watch?v=n15AK4AR43Y

Nice. Let me know when you’re done. Keep up the good work!

Great!! question,

this should not be to hard to figure out ( although I don’t know the math for it myself ) but with the Graphics 2.0 example of the folding graphics It looks doable.

I’ll be watching to see this topic to see if anyone gives us some code.

Larry

It’s not quite ready, and I still hope to make some improvements, but here’s a sneak preview of a module I’m cooking up to meet this need. I’ll share a download link once it’s done…

https://www.youtube.com/watch?v=n15AK4AR43Y

Nice. Let me know when you’re done. Keep up the good work!