iOS / Android App Size Problem

Tips & Tricks
1

Hi, guys,
I am working on a game that runs on both IOS and Android. So far the IOS container is running fine. But I have a problem with the app size > 500 MB

I would like to preload some elements via Javascript when loading a scene (video, images, sound). When everything is loaded an OK comes and it continues. What is the best way to solve this? Can you help me a little bit.

Thanks to everyone for any help

2

Hype’s built-in preloader (via the Resources Library) only will operate on images and audio, and will only preload before the first scene. You can show a loading dialog via “Show loading indicator” or via a technique described here.

If you need to preload on a per-scene basis (and don’t want to split up scenes into separate documents or export separately via Advanced Export), then you will be a bit on your own. (Of course I think this is a good feature to add, though there’s a lot of complexity to it!)

The general process would be:

  1. Create an element to hold the media, like a Rectangle.
  2. Add the element referencing the ${resourcesFolderName} magic variable so it will show up, like:
    <img src = "${resourcesFolderName}/myImage.png">
  3. Make sure to turn off “Automatically Optimize When Exporting” in the resources library so that the image format/name won’t change on you
  4. Create a “loader” scene that doesn’t contain the image, but runs code on scene load to do the preloading that you would like
  5. When preloading is complete, move to the next scene that contains the image

There are different ways to do the loading code in step 4 depending on if it is a <img> tag, <audio>/</video> tag, or Web Audio API… you should be able to find some around the internet (or perhaps some on these forums). It does require a bit of code to manage.

(One small note about step 2 is to check the developer console to make sure the image doesn’t get downloaded ahead of time; browsers will download at different times and this can get tricky as the Inner HTML of a future scene in Hype gets set when the whole document is loaded.)

3

First of all, thank you so much for your help. I’d like not to solve this over separate scenes. I found something else downstairs. However, the code doesn’t work. or gives out and it doesn’t output anything to the console.

Do you know what the flaw in the code is downstairs?

```
video.onloadeddata = function(){
  video.onseeked = function(){
    if(video.seekable.end(0) >= video.duration-0.1){
      alert("Video is all loaded!");
    } else {
      video.currentTime=video.buffered.end(0); // Seek ahead to force more buffering
    }
  };
  video.currentTime=0; // first seek to trigger the event
};
```
4

Ha, that’s pretty interesting code to force loading it all; I had not seen that technique.

When I run on Chrome with my demo video it immediately gives the alert that the video is all loaded. It sounds like this may be different than what you are seeing? If so it could be dependent on a lot of factors like: browser, device, video, and even the server. Otherwise this is assume you are seeing that too:

I believe the problem is that most video probably allows seeking past the current buffer point, so your video.seekable.end(0) is returning the duration. I was able to get it to work by comparing against the buffered amount because if it isn’t buffered to the duration then you’ll want to load more. Therefore a working comparison (for my setup) is:

    if(video.buffered.end(0) >= video.duration-0.1){

(you’d probably also want to set currentTime back to 0 once the video is all loaded).