Gideros Mobile: comic book with page curl effect

hnim · February 2012

FlipPageView: create simple comic book with page curl effect
-Examples:

--create new object
 
local flipview = FlipPageView.new()
 
--add some paths
 
flipview:addPages{"gfx/page1.png",
"gfx/page2.png",
"gfx/page3.png",
"gfx/page4.png",
"gfx/page5.png",
"gfx/page6.png"}
 
--add to stage
stage:addChild(flipview)
 
--show
flipview:show()

-Demo:

-Source and infomation
http://hnimpage.wordpress.com/2012/02/02/gideros-mobile-comic-book-with-page-curl-effect/

Zoyt · March 2012

Nice! Love it!

adrianeraldo · April 2012

Very nice, thanks for sharing.

adrianeraldo · April 2012

I looked at your code and it seems that only allow to flip images... what if I also have other objects in the page that I want to interact with?
thanks

OZApps · April 2012

@adrianeraldo, you will have to set the mode, pageTurn or interactive based on where the mouse down occurs, so if you mouse down on the edge to page flip, then set the mode to pageTurn which will deactivate all other interactivity, or else all your other objects can be interactive.

You can also set the page turn to happen automatically by clicking an arrow outside of your page so that the objects on your page are all interactive. Hope you get the idea.

Garyk1968 · April 2012

awesome!

Unknown · May 2012

Great page turning books!
As for the page turning effect, I had ever tried to create page turning ebooks for kids by Codebox and turning page software.

marbolec · June 2012

@OZApps, are there any tutorials to add some interactivity to the page?

talis · July 2012

@marbolec Unfortunately from my point of view it seems not possible without changing the FlipPageView.lua file.
Because Flipview is accepting your pages as one full object. Every image is one page. So every object that you will put on stage will be seen on all pages.

Changes that should be done (My point of view of course:)

1-After on every page roll you should be able to query your page number.
2-According to page number you can add objects(sprites) to stage or remove where not wanted

A more complicated approach will be adding the objects in the creation of the pages i mean while initializing the FlipPageView object and code built-in interractions in some other library with a keyword like;

interraction1= {object="bird.png", pagenumber="1", interractiontype="movable" }

then send this table to init of flipview.

talis · July 2012

One question, i can not make automatic screen resolution work with this code. At last i decided to implement code with no scaling and handle it by my self.

I am giving image1.png as 320 x 480 and image1@1.5x.png as 480x800 with a scaling factor of 1.5.

Unfortunately flippageview lua is not showing the scaled version.

Any idea? Have any of you here tried this code with auto screen scaling property of Gideros?

Thanks again @hnim for sharing this great code with us.

hnim · July 2012

@talis i've tested automatic screen resolution and my code works well.
i make a group of 720x480 images, add suffix @2x with scale factor 2.0. then i run project on iphone retina resolution, bigger images were shown.
(sr for my english

)

phongtt · July 2012

@hnim Long time no see

Where have you been?

hnim · July 2012

@phongtt i'm still be here but invi ^^

talis · July 2012

@hnim i have tested and yes it is working perfectly as you stated.I realized that my problem was in the scaling factor. Thanks for the reply.

talis · July 2012

Ok i found the mistake i was doing previous time. So i am writing here maybe somoone is doing the same mistake:D

Autamatic Screen scaling is taking logical dimension values from project properties as a base.
What i mean if you set your logical dimensions to 320x400. You should have to calculate your scaling factor according to 320x400 always:D
Actually this is also written in documentation so don't be lazy like me and read it good:D

Take care all.

cvieira · October 2012

Hi @hnim, i saw a video from you (

) that uses FlipPageView, but also has interactions... in one page there are some fishes that traverses the scene, and when you turn the page fishes stops and acts like their part of the image... you achieve this effect by only switch the page image when turning (in this case we need allways to have to images per page), given the idea that the fishes are glued to the page?

Thanks!

hnim · October 2012

it's not part of image. right after finish flipping, i add animation on stage. And when i click, i remove it.

mars · October 2012

@cvieira : Could you share me your sourcecode? I will ver very thank you

mars · October 2012

Could you share me your sourcecode? I will ver very thank you

talis · October 2012

@mars the source is in the first post already:D
If you are looking for interactions, you can easilly alter the main code add some event listeners and that's it. Hope you will figure it out.

mars · October 2012

@talis : yes, i have source from hnim, but i'm newbie, could you show me how to alter for interactions? It's really good.

talis · October 2012

@mars before alterations i can advice you to try some samples (coming with Gideros)
about events and how to handle them.

Then try to experiment with them by altering the source code of the examples. Because the code that you are trying to alter has some advanced material inside. But do not afraid because the logic stays the same with the simplest example in built-in samples that comes with the Gideros itself.

When you encounter an error in your code or can not find how to solve it directly write to the forum and you will surely get help soon.

For the beginning i strongly advice samples and also http://appcodingeasy.com/Gideros-Mobile

In addition do not forget to check the tutorials and FAQ page.

mars · October 2012

many thanks you tails, I'm learning Gideros from examples, also. The first app will be a book app so I need to learn

gokhansahin477 · January 2013

Hi,
i have a question.comic book with page curl effect app decrease in performance.Because i added a few pages.How can i increase performance.

talis · January 2013

Try to use optimized images. No need to use unnecessary high resolution images.
I am sure it will increase your performance issues.

hnim · January 2013

i made a quick test with 126images(640x960), on kindle fire there is no difference in performance.

SinisterSoft · January 2013

@hnim Great code.

In some cases the page can be pulled up/across further than it should be. I've made a fix for you that should fix this problem:

function FlipPageView:onMouseMove(event)
if self.flip and not self.isFlipping then

-- page pulled off edge problem fixed by SinisterSoft
local fixX=event.x
local fixY=event.y
local oppositeY=self.height-fixY
local distance=math.sqrt(fixX*fixX+oppositeY*oppositeY)
if distance>self.width then
distance=self.width
local angle=math.atan(oppositeY/fixX)
fixX=math.cos(angle)*distance
oppositeY=math.sin(angle)*distance
fixY=self.height-oppositeY
end

local dx = fixX - self.oldX
local dy = fixY - self.oldY

self.xTouch = self.xTouch - dx
self.yTouch = self.yTouch - dy
self:roll()
self.oldX = fixX
self.oldY = fixY
end
end

SinisterSoft · January 2013

btw, if GiderOS gets render to texture then this could be amazing.

gokhansahin477 · January 2013

thank you

bravcm · February 2013

Thanks!

Chan · February 2018

感谢您

Howdy, Stranger!

Categories

In this Discussion

Top Posters

Gideros Mobile: comic book with page curl effect

Comments

Howdy, Stranger!

Quick Links

Categories

In this Discussion

Top Posters

Gideros Mobile: comic book with page curl effect

Comments