Highlighted

HTML game not loading on iPhone iOS 13.5.1 and above

Community Beginner ,
Jul 20, 2020

Copy link to clipboard

Copied

I'm currently working on trying to resolve an issue with an HTML5 game create in Adobe Animate 2020.

 

The problem is when it is played on specifically iPhones running an iOS at either 13.5.1 or higher. All other android devices and even iPhones/iPads using a lower iOS work fine.

 

The first page/level loaded will always work fine. I am using the following code to navigate my folder structure:

window.location = "../level02/level02.html";

After maybe a level or two the game will be stuck on the default background colour I have set in the Animate build file and the script is seemingly stopped from firing.

 

On the iPhone I was using that was running iOS 13.6, I went into the Safari cache and it was when I deleted only the "create.js" cache by itself and not the actual browser cache that it would force the page to reload and then it would work as intended. Pressing refresh would not work and going back to previous pages would now have the same blank screen as well.

In my files, the create js code I am using is:

createjs.Touch.enable(stage);

this.musicplay = function() {
	this.mainmenu = createjs.Sound.play("menumusic", {loop: -1});
}

this.musicplay();

All pages have the touch enable code and only some have music.

 

What is it that could be carrying over from previous pages that collect and stop the next ones from working? Also why is it only on iPhones running this iOS 13.5.1 or above and not other devices?

Please note I am very new to all of this so go a little easy on me.

 

Appreciate the time taken to read all this text.

TOPICS
Code, Error

Views

85

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

HTML game not loading on iPhone iOS 13.5.1 and above

Community Beginner ,
Jul 20, 2020

Copy link to clipboard

Copied

I'm currently working on trying to resolve an issue with an HTML5 game create in Adobe Animate 2020.

 

The problem is when it is played on specifically iPhones running an iOS at either 13.5.1 or higher. All other android devices and even iPhones/iPads using a lower iOS work fine.

 

The first page/level loaded will always work fine. I am using the following code to navigate my folder structure:

window.location = "../level02/level02.html";

After maybe a level or two the game will be stuck on the default background colour I have set in the Animate build file and the script is seemingly stopped from firing.

 

On the iPhone I was using that was running iOS 13.6, I went into the Safari cache and it was when I deleted only the "create.js" cache by itself and not the actual browser cache that it would force the page to reload and then it would work as intended. Pressing refresh would not work and going back to previous pages would now have the same blank screen as well.

In my files, the create js code I am using is:

createjs.Touch.enable(stage);

this.musicplay = function() {
	this.mainmenu = createjs.Sound.play("menumusic", {loop: -1});
}

this.musicplay();

All pages have the touch enable code and only some have music.

 

What is it that could be carrying over from previous pages that collect and stop the next ones from working? Also why is it only on iPhones running this iOS 13.5.1 or above and not other devices?

Please note I am very new to all of this so go a little easy on me.

 

Appreciate the time taken to read all this text.

TOPICS
Code, Error

Views

86

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Jul 20, 2020 0
Adobe Community Professional ,
Jul 21, 2020

Copy link to clipboard

Copied

Hi!

 

Developing for iPhone is always a challenge...

 

It's hard to figure it out what's going on without actually seeing the game and testing in it. Do you mind providing a link to it? Even if you have to send it in private or if you need to use placeholder assets.

 

In the meantime, my best guess is that sound playback may be the cause for your issues. In the past few years, browser vendors have become very restrictive when it comes to allow sound and video playback.

 

So it's a good idea to check if it will be necessary for each page to have a first interaction from the user to allow sound playback or if you're gonna need a special attribute in some media element (e.g.: playsinline in video tags).

 

It can also be some sort of incompatibility from CreateJS.

 

Please let us know.

 

Regards,

JC

__________________________________________
HTML5, JSFL, and AS3 samples: http://bit.ly/2mJgDoG

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jul 21, 2020 0
Community Beginner ,
Jul 21, 2020

Copy link to clipboard

Copied

Thank you for your reply! 

 

Yeah the audio could definitely be an issue as I do have some music that attempts to fire on window load sometimes.

 

I will send you a message with a link so you can test it out.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jul 21, 2020 0
Adobe Community Professional ,
Jul 21, 2020

Copy link to clipboard

Copied

Hi again.

 

Thanks for the link.

 

By taking a quick look, my best guess is that you should really request user interaction before playing the first sound in every new page you load.

 

Please test if this approach works and let us know.

 

And by the way: what an amazing game! Really cool design and animations! Congratulations!

__________________________________________
HTML5, JSFL, and AS3 samples: http://bit.ly/2mJgDoG

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jul 21, 2020 0
Community Beginner ,
Jul 21, 2020

Copy link to clipboard

Copied

Thanks for the kind words! Glad you enjoyed it. Also appreciate the time put into testing it.

 

With the request of user interaction, do you mean just making sure the user has to press a button or something before playing a sound? Or is there a specific code that helps with this too?

 

Thanks again.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jul 21, 2020 0
Adobe Community Professional ,
Jul 21, 2020

Copy link to clipboard

Copied

Nice!

 

Yeah. A simple touch from the user should be enough.

 

I wish I could help you more, but I don't have access to iOS devices from 13.5.1 and above.

__________________________________________
HTML5, JSFL, and AS3 samples: http://bit.ly/2mJgDoG

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jul 21, 2020 1
Community Beginner ,
Jul 21, 2020

Copy link to clipboard

Copied

Hi again,

 

I've done more testing after fixing the audio initiation to only be by user gesture. The same problem unfortunately still occurs and it seems as though clearing the cache will always fix it on reload (regular refresh does not work).

 

Luckily I was able to get some console errors from someone using an iPhone running 13.5.1 (and also tested on 13.6) which can reproduce the error. I have attached the images as reference, the device used to test was an iPhone X using  iOS 13.5.1

 

I'm going to send you a screen recording of the crash as well, incase it is useful.

 

Thanks for your time!

 

EDIT: Is there a way to make sure each page load is done with a fresh cache? I.e not allowing caching? It seems that as long as the page is loaded with a clear cache it runs as intended! I have found a couple solutions online for meta tags but it seems to be deprecated methods used for HTML4.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jul 21, 2020 0
Adobe Community Professional ,
Jul 22, 2020

Copy link to clipboard

Copied

Hi!

 

Thanks for the video.

 

It's still hard to tell what's going on without seeing the console messages.

 

You can consider searching online how to debug pages on iOS browsers. I'm pretty confident that some error message will appear in the console and it will help you figure it out what's going on.

 

About the cache question, I really can't tell you a simple, direct, and effective solution for loading an HTML page using a fresh cache. It doesn't seem to be something trivial.

 

 

__________________________________________
HTML5, JSFL, and AS3 samples: http://bit.ly/2mJgDoG

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jul 22, 2020 1
Adobe Community Professional ,
Jul 22, 2020

Copy link to clipboard

Copied

I also would like to suggest you something that maybe will be helpful to make your game look even cooler.

 

You can change the background image or color of a page directly from Animate altering the CSS through JavaScript.

 

Like this:

document.body.style.backgroundImage = "url('yourBackground.png)";

// or

document.body.style.backgroundColor = "#7b0129";

 

Regards,

JC

__________________________________________
HTML5, JSFL, and AS3 samples: http://bit.ly/2mJgDoG

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jul 22, 2020 1
Borp LATEST
Community Beginner ,
Jul 22, 2020

Copy link to clipboard

Copied

Thanks for the great advice!

 

Altering the background colour will definitely make it look nicer, wasn't aware of that thank you.

 

The error messages in the console received on the affected devices are like so:

Capture_01.PNGCapture_02.PNG

This only happens when you play a level or two, then the next one you try and load will crash and provide errors similar to these. When I clear the cache it will reload the page and I will be able to play for another level or two until the same error occurs.

 

I have found online mention of script trying to function before DOM elements load when I search this error message but all the levels work on first load. It's only after playing it is somehow collecting something and eventually causing this error.

It does say however the functions are anonymous apart from a couple but I don't really know what that means...

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jul 22, 2020 0