I have created a self-contained multiple scene (30+) app using Hype and am testing the PhoneGap app at the moment. It’s basically an interactive book with music, sound effects and some scenes have simple animations.
My question is how best to speed up the loading time and interaction performance as it’s less than perfect. I’ve done the usual of shrinking files sizes of all resources and taking off pre-load images for a few of the larger images (repeated backgrounds for instance).
On opening the app on iPad it takes about 10 second of white screen (after the splash screen) to load and swiping left and right is a little jumpy and the buttons aren’t always as responsive as I’d like.
Should I look to swap png files I’ve used for maybe svg files?
Should I restructure somehow?
Cut the book in half? - Is it possible to break the book in half but still keep it as a single download and see performance increases or would two separate apps be the only way?
Re-write as a native app?
The overall files size is just under 50mb.
Any help would be gratefully appreciated.
It sounds like you’ve already taken most of the important steps we recommend to reduce load times.
Changing from PNG to SVG may or may not help. SVGs can often reduce performance because their rendering can be more complex then simple pixel pushing, so that is usually dependent on the images themselves.
To offer more specific advice, we’d need to see the project itself. It is likely that the number of scenes, especially if they have a lot of elements, could be the major culprit in load times. You could potentially break up the scenes to separate Hype documents. But without seeing the document that advice could be wrong!
Daniel at Tumult is currently looking at the project which is great, I’m currently combining the scenes into single scenes with slightly more elements as there is repetition of backgrounds and symbols in quite a few of the ‘pages’ as I hope this will greatly lighten the load. Once I’ve done the modifications I’ll then try it again, fingers crossed this does the job.
As to creating several Hype documents, I’m not quite sure how I would do this for an ‘app’ output, would there be several HTML files in the output and how would they run sequentially?
Yes, there would end up being several different HTML files. The easiest way to output in this manner is to use the File > Advanced Export… and you could set it up to export scenes individually.
Doing it this way doesn’t provide the linkage between them though. To do that, you’d want actions to use a Go to URL… and have the URL be the name of the .html file for the scene that was exported (usually the scene name). If you want them to play sequentially, you’d make a timeline action at the end that would do the Go to URL call, just as you would a Jump to Scene call.
And I could then export everything to PhoneGap Build to create the multi platform app as I have been doing with the one HTML file which I simply rename ‘index.html’?
I’m not really familiar with PhoneGap Build, but I’d guess if you still have an entry point index.html for the first scene it would work correctly.
Perfect, I’ll look into it, it should be straightforward I’d imagine.