Moving picture book

I made a moving picture book with Hype based on the animation made by 3DCG(modo).

http://subgrid.jp/episode01_0e.html

Since the animation plays the image at high speed, the file size has become large.
In the future, I would like to incorporate an interactive puzzle using javaScript. I would like to learn how to use JavaScript in Hype, so please teach me.

4 Likes

Wow, that looks great! The scope scene works well too :slight_smile:.

It must have been a tremendous amount of effort to animate your video as adjusting the display for every frame. Out of curiosity, why didn't you just make a video file? I think you'd wind up with faster loading, better rendering, and significantly less effort.

Hype also has a spritesheet feature, but in this case the file it generates would be very large and browsers may choke a little on it as well.

As far as JavaScript goes, we can help with specific questions and it may be useful to know more about the puzzles that you want to create.

Thank you for the proper advice!

I felt that it would be easier to adjust the timing of the animation if the frames were directly assembled with Hype. Video playback is also interesting with a retro atmosphere. However, as a result, the file size became larger than the video, and the playback was disturbed. Now that the video structure is complete, let's replace it with a video.

I don't know the spritesheet feature yet, so let's check it.

I have various ideas about puzzles, so I will consult with you when the image is completed. Thank you!

It took quite a while for the Hype scene to start playing here. Then most of the images seem to only load while the text is displayed. There might be something to win here time wise.

First thing that comes to my mind is do you have 'preload images' turned on in the Hype resource folder? Because if I play your movie backwards everything loads near instantly.

Also your used JPeG compression seems to be quite high, it may not be needed here and if I set an image JPeG compression to 48% on one of your images, I get almost half the file size of the original and not too much visible image deterioration which may speed up your great scenes.

I really like your 360 degree VR part, how did you do that?
.
Keep up the great work! :wink:

Thank you for your detailed advice on sequential images!

I think that I may handle large sequential files in the future, so I will investigate 'preload images'. When I use video and image together, I'm worried that the display will be different between them. However, considering the file size and display slack, I concluded that it is better to use a video file. Currently replacing with a video file. I will still post the URL when it is complete.

360 degree VR loads a file (html5 compatible) created with Pano2VR as an HTML widget. Since it is licking with an external file, I am worried that I can not go from the hot spot in 360 degree VR to the specified scene in Hype. If you know how to do it, please let me know.

Thank you!

1 Like

I replaced the frame animation with a video file. The file size has been halved and playback has become smoother. thank you everyone!

http://subgrid.jp/episode01_0e.html

There is only one problem left to be solved. It is to be able to jump to any Hype scene from the hotspot in VR loaded by the HTML widget. I would be happy if I could borrow your wisdom.

To clarify, you're talking about the HTML widget that links to http://subgrid.jp/ep01_11_pn/index.html ?

I don't know much about the Pano/VR solution you are using, but if you know the right hooks you can access the iframe's parent object, and then you can use the HYPE global object to get at your document and use the API to change scenes. The code would look like:

Object.values(parent.HYPE.documents)[0].showSceneNamed("ep01_10_5");

This assumes you only have one Hype document in the parent.

Note: This will work in a published export as your iframe is on the same domain as your document. However if you are previewing (or ever change this) then it will fail because a child iframe cannot access a parent on a different domain due to browser security policy. For testing with a preview, you may want to check "Disable Cross-Origin Restrictions" in Safari's Develop menu temporarily to get around this.

Thank you for your detailed advice!

I'm not good at using code, but I'll try it. :sweat_smile:
It may take some time, I will report the results of my efforts.

I checked Pano2VR.
It seems that the mouse event in Panorama VR is not transmitted to the external application.

However, it seems that the parent page can be refreshed entirely with the URL link in PanoramaVR, so I think that the HTML file of Hype was divided into several parts and the intended action was realized by page jumping.

Thank you for your valuable advice!
I learned a lot. Furthermore, I will use Hype to work hard to make an ideal picture book.

1 Like

Very interesting work. Works much better with video than with previous still images :+1:

Thank you for having interest!

I made it possible to go to the next scene from the hotspot link built in 360 degree VR.