HTML5 build large black area

Hello, I recently created a test project to see how HTML5 fared with the current Unreal Engine.

While testing locally using the “Launch” button, I was able to run this game in 32bit Chrome with no issues.

However when I package the game, and run it locally I see a large black box covering most of the game. On 32bit Chrome it’s a gray and black box like a ghost of the first frame, and on Firefox Nightly it’s just all black.

I uploaded the project to itch.io and saw the same results as my local host.
https://deadboltinteractive.itch.io/u4-test?secret=KkOqKO8mx35MgaR5IE9xGaCvhqw

Any suggestions or solutions are welcome.

Tried this on Windows 10 64-bit / ASUS NVidia GTX 980 Ti with Firefox Nightly 64-bit 49.0a1 (2016-04-28) and in Firefox Stable 46 32-bit, and on both I get output that looks like on your system. Which OS x GPU x Firefox browser versions do you have?

Since the darkened area looks like a 2D overlay of some sorts that is just vertically offset, I wonder if that could be related somehow to camera sizes or aspect ratios being computed wrong. Seems like an UE4 engine bug, but would be good to poke around different configurations to try to find what it is related to. Are there any postprocessing effects or anything like that in use?

Btw, when running in Firefox, after a few seconds, I get the error "Blocked loading mixed active content “http://etsource.epicgames.com/ET2/CollectData.1?SessionID=xxxx” in console. This is reported as buganswers.unrealengine.com/questions/410058/html5-exports-are-not-loadable-via-https-cdns-by-d.html to which the page execution crashes.

Thanks for taking a look. I’m running Windows 7 with a gtx760, and I’ll have to get back to you on the Firefox version once I’m home later.

I simply updated my UE4 to 4.11.2 and then followed Noon’s training stream for building a 2d platformer, and after the first part decided to make a build. It’s mostly the default 2d platformer template. I will poke around and disable different things tonight and see if I can find a reproduction.

I did change the HTML file to use https as that’s what itch.io recommended, so maybe that causes the error, but I was seeing this problem before I did that.

I created a new project with only the content from the default 2D sidescroller template, and was able to make and run the build with no visual artifacts. I’m not sure what was causing my problem, but it appears to have been a product of my changes.

Hi dbInteractive,

Did you have any post process settings or a widget in your project that could be causing the artifacts to occur?

I didn’t apply any post settings. I do have one widget that is attached to the player as a component, the health bar. It’s quite a small canvas, as the game is in pixel units, and the progress bar didn’t exactly scale down elegantly, but it seemed to look fine. I’ll test later tonight and see what the settings on the widget are, and if removing it fixes the visual bug.

I removed the widget and rebuilt the game, and it does seem to be working now. I believe I had the widget component on my player set to render in screen space.

to confirm, you are no longer experiencing the error you were seeing?

yes, removing the widget component solved the issue. Thanks for pointing me in the right direction.

I’m happy to hear this error is no longer occurring. I am marking this as answered for tracking purposes.