Hi all,
I am about to create an animated flipbook/magazine. The type that is common on various websites. I have been thinking of two alternatives. Either using GDevelops 3D extension (Pandako or native) or using premade JS-code such as turn.js. I’m not sure if the GD 3D extension can create a good looking animations without me having very advanced coding skills, so I’m looking at the GDevelop event for JavaScript as an alternative.
When I read tutorials for such JavaScipts they use html and css alongside the JS code. How do I use that in the JavaScript editor in GDevelop? Other tutorials wants me to install libraries with npm install. Can I implement these libraries in GDevelop just by installing with npm? That makes no sense to me, since npm is run from the terminal (mac) and not from within GDevelop.
Hi Farid, I found this idea interesting and experimented with making a very simple version of a flipbook as a test. I only did it for one page to see how it looked. I had the pages under each other with the appropriate z order and used tweens to change the page width. B is for boat tweens from full width to zero. C is for carrot tweens from zero to full width.
Thanks Bubble!
Sorry, I forgot to mention that I have done exactly that solution once before and I think it’s pretty ok. This time I would like to make it more realistic by distorting the page while turning it, to give it more of a 3D feeling. Now I am trying to learn how to implement JavaScript code, since there are some scripts on the Internet that does exactly that. Problem is that they involve html and css, that I don’t think you can use in GDevelop, right? Except if I use iFrame, but that is not an option in my case, since the content in the book comes dynamically from my GDevelop game.
Gdevelop does 3D but I’m guessing you want more of a paper or clothe like look. A soft object not hard.
I wonder if you could combine the scale with an animation of flipping blank pages. Either through opacity or the object blend mode. I know I’ve seen that in older games. Although, I don’t think they scaled the text. You could tie the actions together and control the frame to make it look interactive.
It would be an interesting experiment even if it didn’t look right.
Hi Keith,
For a 3D solution I am thinking of the following approach. It seems like Pandakos 3D extension can import animated 3D objects (such as game characters that walk, run, turn etc) in the .glb file format. I have purchased an animated 3D object (a flipping book) from Turbosquid and converted it to glb, but I haven’t managed to make it animate in GDevelop yet. I have very little experience of 3D in GDevelop and also JavaScript, so I guess there will be some heavy learning during the following weeks. What do you think of my approach to using animated 3D objects? Any suggestions?
Do you have an example of what you are wanting it to look like? I was thinking of something from Castlevania Harmony of Dissonance I think it is. This sounds pretty interesting!
I haven’t done that much in 3D. I was waiting for the 3D features to mature a bit. They’re starting to add the missing events. It still seems cobbled together. I love 2D.
Hi TJCoffman,
Actually we have aldready made this as a web page a few years ago. Now we want to do the same thing in GDevelop (running in fullscreen at a museum in Sweden). Here is a link to our current solution: https://portside.at/ostersjoposten-demo/
Thanks for sharing, that was pretty cool! I do have an idea but I would do it 2D as that is more in my wheelhouse.
I think the first example is a good one to piggy back off of but I would split the images in two pieces that are not the same size. One part of the image would be about 2/3 or 3/4 of the image furthest away from the spine of the book, with the remaining portion being the part nearest the spine. I would then use tweens similarly to how they were already done in the example and have them move at the same rate but have them offset on time to start but have them take the same duration of time to complete. This way your eyes can make sense of the inner portion of a book since the inner portion of the page does less overall movement at a slower speed.
Hopefully that makes sense. As far as 3D . . . I don’t have any experience there but I would probably try to do it the same way. If the 2D way makes any sense and seems interesting to you I can try to take a crack at an example.
Thanks,
That makes sense and is better than our previous solution. There is also one more 2D approach using the 3D flip extension (that isn’t real 3D). The only problem with that one is that it seems to me that you can only flip images around the center of the image. I have tried to move the center without success. Please keep me in the loop if you continue with this challenge! I’ll keep testing various solutions.
Hmmm, I could see how I could utilize a book for leveling up characters. I will try to reach out with what I can put together before the end of the weekend. I can’t guarantee I will get a chance to take a proper crack at until then. I will update this forum post or direct message you.
Great to hear that Taylor!
Also, since the pages content is dynamically created and not just fixed images I need to make that work too. I was thinking of the “Take Screenshot” action to create screenshots of the pages and put them over the book when flipping the page. Does that seem to be a good solution?
Okay, that is even more interesting! I think you’re probably already going down the right path as far as Take a Screenshot. Out of curiosity though, will the images be created in the game? It sounds like that will be the case.
If the take a screen shot idea doesn’t work out.I wonder if the latest tutorial released on the GDevelop Youtube page about saving and loading could possibly help. If you were doing text, you could probably create a text box object that could be tweened about. You could probably update that text box or use a dialogue system to constantly update the text box. I saved the tutorials I used to understand Yarn(a dialogue system) and can send you the links if you think that avenue is worth your time.
Well, we usually get our content from an external source except for videos. We get the content either from a URL or from a path on the local computer. In this case we are getting the content from the web server that is hosting the original book (the one I linked to previously). We are using WordPress as a CMS. As we speak a skilled GDeveloper (Robert-Jan) is creating an extension for us that can connect videos from a web server just as we do with images and text (via json files). Usually I create a very simple CMS within the GDevelop app where I save and load info to a json. Anyways, in this case I would save the Screenshots locally as png and load them from the disk.
and I think it’s pretty ok. This time I would like to make it more realistic by distorting the page while turning it, to give it more of a 3D feeling. Now I am trying to learn how to implement JavaScript code, since there are some scripts on the Internet that does exactly that. Problem is that they involve html and css, that I don’t think you can use in GDevelop, right? Except if I use iFrame, but that is not an option in my case, since the content in the book comes dynamically from my GDevelop game.