Sorry your browser is not supported!

You are using an outdated browser that does not support modern web technologies, in order to use this site please update to a new browser.

Browsers supported include Chrome, FireFox, Safari, Opera, Internet Explorer 10+ or Microsoft Edge.

AppGameKit Classic Chat / Help with page turning animation

Author
Message
Seed
11
Years of Service
User Offline
Joined: 23rd Feb 2013
Location:
Posted: 5th May 2013 20:29
I have a set of pages in a book, I want to animate them when the page turns, with a page turning animation. Like this: http://pageflip.hu

I can't think of how to implement this with AppGameKit or C++.

Using AppGameKit Tier 2, does anyone have any ideas?.

Thanks.
Ancient Lady
Valued Member
20
Years of Service
User Offline
Joined: 17th Mar 2004
Location: Anchorage, Alaska, USA
Posted: 6th May 2013 01:12 Edited at: 6th May 2013 01:12
You need to have a generic page flip animation image/sprite. The first frame is with the page open for reading. The sprite should be displayed behind the readable text. When it is time to animate, play the full animation (which shows the page turning) and then roll back to frame one and display the next set of text over it.

This is doable in either Tier using the PlaySprite and SetSpriteFrame commands. The trick is creating the animation image file itself.

Cheers,
Ancient Lady
AGK Community Tester and AppGameKit Master
lilpissywilly
AGK Developer
13
Years of Service
User Offline
Joined: 10th Sep 2010
Location: Office Chair
Posted: 6th May 2013 01:36 Edited at: 6th May 2013 01:37
I think it's a tad more complicated than that, if you try the page he linked to AL

It's like a dynamic system, not locked to an animation.

Maybe though, if you set the cut-off of the animation based on how much of the page is flipped and scewed, and the opposite on the other side of the page?

I don't know, but it's neat

My hovercraft is full of eels
Naphier
13
Years of Service
User Offline
Joined: 2nd Oct 2010
Location: St Petersburg, Florida
Posted: 6th May 2013 02:15
Yeah that one would be pretty complex, but it looks nice.

Looks like you'd have to use GetImage to make a sprite out of your text for each page (essentially rendering the page). Then use sprite scissor to show what you want. The skewing would be the most difficult and I doubt it'd be worth the effort.

Phaelax
DBPro Master
21
Years of Service
User Offline
Joined: 16th Apr 2003
Location: Metropia
Posted: 6th May 2013 02:24
I'm thinking he uses a 3D plane and manipulates the vertices.

"You're all wrong. You're all idiots." ~Fluffy Rabbit
Van B
Moderator
21
Years of Service
User Offline
Joined: 8th Oct 2002
Location: Sunnyvale
Posted: 6th May 2013 14:12
Would probably be best to just use a 3D object - like an open book object, and a page with a slight bend in it - but the page would have to be the same size as the page on the book. Also - the pages on the book object would be better off as seperate objects, so they can be textured with pages as well.

Assuming that you can get your page as a single image, or doubled up for 2 sided pages I guess... I would decide that first - do you want to see the other side of the page when you flip over, do you want to see the pages on the book. Page 1, might be blank on the left side of the book, and with page 1 on the right side - then when the page flips, you texture the moving page with page 1, and the other side with page 2, and the right side of the book with page 3. Then show the page flipping over, showing page 2, and also page 3 on the right side of the book. Then when the page flip has finished, hide the object again, and make the left side of the book page 2, right side stays as page 1. Would probably be easiest to just have a blank page included with all your other pages.

The pages could be generated with a memblock, but as PNG files, the book probably wouldn't take up too much space and would allow a lot of freedom.

Now, the complex bit, the page itself. If you imagine a book being left open, the pages are curved, and that's where you'd get your cool flip animation, just by scaling the page. If you scale the page on the Z axis, it would flatten it, scale it invertly, and it'll flip it the opposite way. So the actual turn might be rotating that page from 90 to -90, while scaling the page from 100% to -100%. That way, the page actually bends to the left as if the page is turning, it would be straight when the animation is right in the middle. The size of the page when scaling won't be precise, but it shouldn't matter a great deal considering the angle that orientation camera is likely to be in front, reading the book, so it won't be noticeable.

This is what I did a while ago with DBPro, and it does provide a neat effect - although I did use a proper animated model, you could easily get a cool effect with just scaling and rotating the page. I don't think there's an elegant way to do it in 2D without using a lot of animation frames of a page turning, and even then you don't have the page contents turning with that (probably).

Maybe I can dig up my old test code and make an AppGameKit version, if it's the sort of thing you want.

I got a fever, and the only prescription, is more memes.
Ancient Lady
Valued Member
20
Years of Service
User Offline
Joined: 17th Mar 2004
Location: Anchorage, Alaska, USA
Posted: 6th May 2013 17:33
I was just going for something relatively simple that would be easily accomplished.

The posted example would be a whole lot more difficult to do.

The posted page is using Flash, which has lots of transitions and things built into the core engine. Something AppGameKit just doesn't have at this point.

Cheers,
Ancient Lady
AGK Community Tester and AppGameKit Master
Seed
11
Years of Service
User Offline
Joined: 23rd Feb 2013
Location:
Posted: 6th May 2013 18:11
Van B, digging up your old code would be much appreciated

I don't know much about 3D with AppGameKit, so something to base it off would be vary helpful.

Thanks.
Markus
Valued Member
20
Years of Service
User Offline
Joined: 10th Apr 2004
Location: Germany
Posted: 6th May 2013 20:02
the 3d part in agk is not finished.
you need at first the possibility of creating/changing polygons.
alternative you can create much wrily page objects.
(a raw opengl access would be nice...)
merryflip
10
Years of Service
User Offline
Joined: 30th May 2013
Location:
Posted: 30th May 2013 10:18
Quote: "I have a set of pages in a book, I want to animate them when the page turns, with a page turning animation. Like this: http://pageflip.hu

well, besides this, use xflip to create flipping page animation

I can't think of how to implement this with AppGameKit or C++.

Using AppGameKit Tier 2, does anyone have any ideas?."


well, very great, the book with flipping page effect is really very wonderful, I love it very much!

Login to post a reply

Server time is: 2024-05-04 18:39:19
Your offset time is: 2024-05-04 18:39:19