Problems with Internet Explorer 11 HTML5 support

Hi, I’m game developer and I have found some problems with HTML5 builds compatibility in IE11 and Edge. 

If you haven’t IE11, you can test it on a free service such this (you can use browser vpn to use it unlimited times).

  1. IE11 doesn’t support sounds in HTML5 builds, for example simple code:

    mySound = audio.loadSound( “mySound.wav” ) audio.play(mySound)

http://refall.com/coronalabs/test1/

  1. IE11 doesn’t support custom fonts in HTML builds, for example simple code:

    myFont = native.newFont( “framd.ttf”, 18 )

http://refall.com/coronalabs/test2/

  1. IE11 doesn’t support big resolution files (for building sheet sheetContentWidth=6400, sheetContentHeight=5400), for example simple code:

    – 2 image sheet local sheetData1 = { width=800, height=600, numFrames=72, sheetContentWidth=6400, sheetContentHeight=5400 } local sheet1 = graphics.newImageSheet( “splash1.png”, sheetData1 ) – 1 image sheet local sheetData2 = { width=800, height=600, numFrames=72, sheetContentWidth=6400, sheetContentHeight=5400 } local sheet2 = graphics.newImageSheet( “splash2.png”, sheetData2 ) – 3 image sheet local sheetData3 = { width=800, height=600, numFrames=72, sheetContentWidth=6400, sheetContentHeight=5400 } local sheet3 = graphics.newImageSheet( “splash3.png”, sheetData3 ) local sequenceData = { { name=“seq1”, sheet=sheet1, start=1, count=72, time=2200, loopCount=1 }, { name=“seq2”, sheet=sheet2, start=1, count=72, time=2200, loopCount=1 }, { name=“seq3”, sheet=sheet3, start=1, count=72, time=1000, loopCount=1 } } local splash = display.newSprite(sheet1, sequenceData )

http://refall.com/coronalabs/test3/

Employers/sponsors require support IE11 for their audience. I really like Corona SDK and I want the devs to pay attention on these problems.

Thanks.

I don’t know about the rest, but holy shit you need to chill it with the image sheets! :smiley:

A single image that is 6400 by 5400 pixels requires 8192^2 x 4 / 1024^2 = 256MB of texture memory to load. You’ve got three of them, so that’s 768MB, which is crazy. If you cut down the height of those images to 4096 or less, you’d “only” use 384MB and even then those image sheets would be massive. You should split your sprites into several image sheets and load them as needed.

I know, but some sponsors (like ArmorGames) needs their splash screen in games. The easiest way for me was build 3 big sheets to get perfect quality and add sound. I generated them with https://css.spritegen.com/ 

HTML5 builds with embedded video files doesn’t support by some browsers (include mobiles browsers), but thanks anyway for info about height limit. I think the best way to use small resolution sheets and scale theme like video files in video players (:

Easiest is not always the best. I fully understand their need for splash screens, but there are multiple ways of approaching this if you must take the image sheet approach.

For instance, they probably haven’t told you that their splash animation has to be some specific size? In other words, they are happy as long as it is clear and prominent. So, how about scaling down the images a bit?

Then, the image sheets that you posted include a substantial amounts of dead space. Tools like TexturePacker should be able to get rid of that wasted space and pack your sprites in significantly smaller sheets. I’m just guessing, but if all of that dead space was removed, you’d most likely fit everything in one large sheet.

I don’t know about the rest, but holy shit you need to chill it with the image sheets! :smiley:

A single image that is 6400 by 5400 pixels requires 8192^2 x 4 / 1024^2 = 256MB of texture memory to load. You’ve got three of them, so that’s 768MB, which is crazy. If you cut down the height of those images to 4096 or less, you’d “only” use 384MB and even then those image sheets would be massive. You should split your sprites into several image sheets and load them as needed.

I know, but some sponsors (like ArmorGames) needs their splash screen in games. The easiest way for me was build 3 big sheets to get perfect quality and add sound. I generated them with https://css.spritegen.com/ 

HTML5 builds with embedded video files doesn’t support by some browsers (include mobiles browsers), but thanks anyway for info about height limit. I think the best way to use small resolution sheets and scale theme like video files in video players (:

Easiest is not always the best. I fully understand their need for splash screens, but there are multiple ways of approaching this if you must take the image sheet approach.

For instance, they probably haven’t told you that their splash animation has to be some specific size? In other words, they are happy as long as it is clear and prominent. So, how about scaling down the images a bit?

Then, the image sheets that you posted include a substantial amounts of dead space. Tools like TexturePacker should be able to get rid of that wasted space and pack your sprites in significantly smaller sheets. I’m just guessing, but if all of that dead space was removed, you’d most likely fit everything in one large sheet.