Page Flipping Behaviour/Effect

Hello Everyone,

Amazing forums and community support :slight_smile:

right, my issue is the following, we’re trying to implement the page flipping effect to our guiTextures in the iPad game we’re working on, and here is where i tried to do so far.

place an exterior plane ( A ) outside the camera scope along a vertical curved path that mimics the effect of a page being turned, place another exterior plane ( B ) on top of plane ( A ), where B’s side is perpendicular to A’s diagonal ray.

now the movement along the path is implemented, however, now, i need plane B to cull/clip itself, the corresponding area of A, and the original page i’m turning, so the page under that would appear. So as is, i would need a partial/selective culling shader, i don’t know if such a thing is applicable anyways.

my question(s)
1- is there any other/better way of achieving this ( access to the iPhone SDK page turning effect through xcode somehow ), taking into consideration that pages are made of guiTextures but can be changed for the sake of better methodology.

2- is there such a thing as partial clipping of an object ( without using expensive methods like SetPixel() ) and clip selective layers

TIA

I have some questions for you…

From what I am reading, I am presuming that you want the pages to curve when changed, rather than move like a “board book” with stiff flat pages. What is the final effect that you are trying to achieve (can you link to say a video of a target example on YouTube)? Are you looking for side by side pages and need to see the text on the “back” side of the changing page? Or are you looking at single pages to the “back” of the changing page can be blank?

Are you looking at a Unity-only solution? Or are you willing to consider middleware like EZGui?

I don’t have a complete solution, but might be able to make some suggestions once I know what you are trying to achieve.

Thanks Little Angel for the swift reply :slight_smile:

what i originally wanted was an interactive vertical page flipping, the page has nothing on its back, and the text on it to be deformed as you drag along, but after many brick walls, i thought of the simpleton state of the case and how to achieve it, and probably take it from there.

the best example of what i want to achieve is an interactive version of the page flipping effects of the ( Notes ) app on iPhone/iPad …

i’m looking for a solution, come what may, weather it was Unity-Only, interop with xcode, third-party solutions.

and i Am looking for pointers not for a complete solution, doing my homework before coming here hopefully will keep me from getting politely flamed ( a.k.a ignored )

an even better effect would be

checking EZGui for flipping sequences

I found it easy to get a board-book working in EZGui. The animated page takes a lot of processing unless you use smoke and mirrors and make a “gag” out of it.

This is what I’m going to try in EZGui when I update the book before release: I’m going to work on a 5 element solution, as I have facing pages. To make this “gag” work, there need to be 3 image elements, minimum: The outgoing page, the incoming page and the covering page back. You also need to be able to use a set of animated frames and/or manipulate one or two clipping rects over time (both available in EZGui). First you need to bring in, activate or instantiate your incoming “revealed” page below your outgoing “existing” page. You need the covering page-back to be the top most element and it moves to cover the outgoing page. If you use an animated sequence, you’ll only need to lerp a clipping rect under the animated pages (as the alphas on the animated pages will do the clipping job for the animated sequence). If you are going to try and use a single frame for the page back, you’ll need to manipulate two clipping rects, one for the wipe between the pages under the turning page-back and one for the page back itself, which will also need a translate on the image. You can enhance this gag by making sure the wiping page-back as a semi-transparent shadow edge to it to give it a sense of depth. The one element you won’t get with this, is any distorted content on the moving page. It’s just a complex wipe gag. Without tapping into Apple’s stuff (which is beyond me) this is the only way I can think of doing it “in Unity”.

Now, all that being said, it might be worth tapping some of the peeps (like bliprob) that have made packages to help the Unity/Objective-C connection. He, they, might have a solution that would let you tap into some of the xCode stuff.

Ya - I love books on the iPad, but that’s a special thing. Lots of proprietary processing going on there. That could be nice to tap into, wouldn’t it? As you can see there is no content on the back of the page, but the front of the page is being subtly distorted and there is that nice shadow.

Unity iPhone Enhancement

Thank you millions for the solution i’ll start trying around the clipping rect, now i understood from your post that such a solution is expensive. but if it works i’ll post back here with results, meanwhile what do you think of

would such a solution be doable using Unity ? the part about iterating through each vertix in the input mesh … does Unity allow such level of control ?

WOW! Brilliant research… and a Unity Solution to! If you look, he also implemented this in Unity (tho’ he says it was “just released”, so it’s definitely “do-able” in Unity. The question would be, will this be performant on the iOS? I’ll have to read thru that.

You can do that using shaders in Unity. I don’t know if the iPhone can support such shaders though.

Unity iPhone could support the shaders (at least pro and naturally only 3GS+)

But you can also do it straight through the Mesh Class, problem will be the performance impact. already a 10x10 mesh, which is not remotely enough, will be 100 vertices per update to touch and the math behind it isn’t lightweight either.

optimally some spring grid solution would be used but that means fully selfimplementing that as well, for a darn page effect ^^

easiest way is a skinned bone animated page that does it

dreamora is right. I forgot about the Mesh class.

In fact that’s what the guy in the link uses. He said he lost the Unity source files to his page-flipping program so I took the liberty of downloading his mac app binary file and looking at its source code using Red Gate Reflector.

Attached is what I got after some heavy editing.

dreamora has some valid concerns over the performance impact of this code. It uses a square root function in LateUpdate which means it gets called every frame, and that’s slow.

I’ll try it out on a test iOS app and see what happens.

EDIT: Its actually pretty fast. I get the capped framerate of 60 fps on my iPod Touch 2nd Generation.

It required a bit of modifying the original code since the original author made the page flip to the left then go back to its original position. I needed it to flip all the way to the left. (You would need to modify PageCurl.calcAuto())

419976–14574–$PageBlock.cs (6.18 KB)
419976–14575–$PageCurl.cs (8.83 KB)

i used a bendmodifier in lucky cats 3d, to make the papercurl effekt, when you collect a fortune cookie.

read about the script here:
http://www.everyday3d.com/blog/index.php/2009/11/10/porting-actionscript-to-unity3d/

Bones animation in Maya for page turn effect … Make the frames of the animation divisible by the width of your screen, say a tenth … Then in Unity map your page texture to the animated page, drop a script on the page object that follows touch drag across the page (perhaps only when starting at right extremity of page) - then play animation frame that corresponds to finger position on screen. Duplicate pages under first page based on an array with page number, page texture and vertical position under page one… Instantiate page say when reader is three pages away while page turning. Make sense?

1 Like

It may require a unique double sided shader if your page model in maya is a simple one sided poly. That way back of page is blank and not see through or double sided. If not then model your page/pages in Maya / 3d max as double sided.

Thank you all … wow … i have a lot of thoughts to try out :slight_smile: i’ll post back with results after testing many of them on our iPad project …

cheers :slight_smile:

EDIT : just a simple question while i tryout solutions, is there any way that should maintain our guiTextures and flip pages using them ?

Try this

436640–15173–$PageCurl.unitypackage (7.83 KB)

kamusta anomalous,

this is great, thanks so much for figuring this out! i got this up and running with the two scripts you posted earlier and it worked perfectly. now i’d like to add a touch feature so that the page can turn by swipe gestures…

but first thing is how to get it to stop since it just repeats itself. i set up a new button in js to stop the animation rotation but the page curl still continues. is it possible to command the pagecurl script to stop in another js script? if so, how?

@anomalous_underdog: I download your PageCurl pkg, is there any way to do a complete page flip ? (also with back texture fot other side of the page ?)

Often, if your page curl doesn’t need to be fully interactive, it is much easier to create one in your favourite 3d app and export a few models at different stages of the animation to be used as morph targets during run time. This way you can cheaply animate the most complex behaviour with almost no CPU penalty ( compared to the other approach) at the cost of few dozen Kbs.