Quick Links: Download Gideros Studio | Gideros Documentation | Gideros Development Center | Gideros community chat | DONATE
Gideros Mobile: comic book with page curl effect — Gideros Forum

Gideros Mobile: comic book with page curl effect

hnimhnim Member
edited February 2012 in Code snippets
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/
+1 -1 (+3 / -0 )Share on Facebook
«1

Comments

  • ZoytZoyt Member
    Nice! Love it!
  • Very nice, thanks for sharing.
  • 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
  • @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.
    twitter: @ozapps | http://www.oz-apps.com | http://howto.oz-apps.com | http://reviewme.oz-apps.com
    Author of Learn Lua for iOS Game Development from Apress ( http://www.apress.com/9781430246626 )
    Cool Vizify Profile at https://www.vizify.com/oz-apps
  • Unknown Member
    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.
  • @OZApps, are there any tutorials to add some interactivity to the page?
  • talistalis Guru
    edited 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.



  • 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.

  • hnimhnim Member
    edited 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 :) )

    Likes: phongtt, talis

    +1 -1 (+2 / -0 )Share on Facebook
  • hnimhnim Member
    @phongtt i'm still be here but invi ^^
  • @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.
  • 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.
  • 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!
  • it's not part of image. right after finish flipping, i add animation on stage. And when i click, i remove it.
  • @cvieira : Could you share me your sourcecode? I will ver very thank you
  • Could you share me your sourcecode? I will ver very thank you
  • @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.
  • @talis : yes, i have source from hnim, but i'm newbie, could you show me how to alter for interactions? It's really good.
  • @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.



  • many thanks you tails, I'm learning Gideros from examples, also. The first app will be a book app so I need to learn :)
  • 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.
  • Try to use optimized images. No need to use unnecessary high resolution images.
    I am sure it will increase your performance issues.
  • hnimhnim Member
    edited January 2013
    i made a quick test with 126images(640x960), on kindle fire there is no difference in performance.
  • SinisterSoftSinisterSoft Maintainer
    edited 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
    Coder, video game industry veteran (since the '80s, ❤'s assembler), arrested - never convicted hacker (in the '90s), dad of five, he/him (if that even matters!).
    https://deluxepixel.com
  • SinisterSoftSinisterSoft Maintainer
    edited January 2013
    btw, if GiderOS gets render to texture then this could be amazing. :)
    Coder, video game industry veteran (since the '80s, ❤'s assembler), arrested - never convicted hacker (in the '90s), dad of five, he/him (if that even matters!).
    https://deluxepixel.com
  • thank you :)

    Likes: SinisterSoft

    +1 -1 (+1 / -0 )Share on Facebook
  • 感谢您

    Likes: oleg

    +1 -1 (+1 / -0 )Share on Facebook
Sign In or Register to comment.