Paper2D HTML5 Camera not working properly

So I’ve been fiddling with Unreal Engine 4 for about a month now. I still very much a noob at it but I’ve learned a lot so far! One thing that has my mind boggled is that when I have packaged the game in to an html5 file and try to run it in an web browser, the camera is offset and refuses to move/follow the player. I have not encountered this issue in the engine/viewport testing or when packaging it to windows, where it runs perfectly fine.

This is how it normally looks like:

And this is how it looks like in the web browser:

Now the game is still working. I can hear the sound effects of the character picking up items but it seems like the screen is frozen in that state. I have tried changing the camera from orthographic to perspective, that didn’t help. I’ve checked online for quite some time and haven’t encountered anyone with the same problem. I even tried to make a new level to start off from, with a menu, but the camera was offset on that one too. I’m guessing there’s an option somewhere that I’ve missed but I have no clue on what it could be. Any help would be appreciated!

can you post a screenshot of the blueprint where you set the view target?

Spring arm and camera within it can help you. You could also try 2d scroller template, it works in html5 perfectly.

Here’s a little update:

Right now, I’ve got a spring arm and a camera connected to the player. Here is a picture of it:

There are no blueprints for the camera. It’s bound to the player as an component. I have the player spawn through a “Player Start” and the camera is working both in the viewport and packaging it to windows, it’s just the html5 version that isn’t working.

I tried taking the 2d scroller template and package it to html5 straight away and the screen is completely black on that one, unfortunatly.

When the player spawns, I saw that each time a camera is spawned too, however it is not being used. Here is a screenshot over it:

It pretty much looks like the camera that I get in the html5 version of the game. I also created a new camera, locked it to the main character and it worked in html5…sort of. The colors were distorted and it wasn’t really in the right place, which is an easy fix, however not the color problem as I have no idea what might cause that.

It is pretty strange that its doesn’t work for you. What browser do you use to test 2d scroller template ? Firefox Nightly not working for me at all, i have got black screen in my UE4 game too, so my solution is : get some local web server (because Nightly do that for you), winginx for example and host scroller template on it. After that you can use google chrome x32 or anything else.

Hard to say whats wrong with your camera at the moment. Can you share your project ?

I’ve tried in Firefox, Firefox Nightly and Chrome. I’ve zipped the project, here it is if you wanna check it out: File Dropper - Online file sharing

I get the same issue with FF38 x64 beta and the paper2D template project. Currently I am using 4.7.6. To fix the black screen issue mentioned by Ferret_228_, you MUST enable TemporalAA on the global postprocessing volume. This is probably another bug. Once you do that, you will experience the side viewing bug with the orthographic camera as mentioned in Dorial’s post. His attached images are verbatim what I see minus his assets of course. To fix the broken camera angle in firefox, you must go to about:config and change webgl.disable-angle to true. At this point, you should have a working paper 2D sidescroller template in HTML5. Here is to hoping that the HTML5 implementation gets the TLC it needs sooner than later.

Unfortunatly, the webgl.disable-angle method does not solve my problem. :confused: I enabled it and this is what is shown when I try to open the html5 file:

After some trial and error, I tried removing the camera from the player and setting up a new camera pointing at its direction. It seems to fix the camera being at that strange able but instead, I get this:

So basically, what is happening is that it freezes the game at the first frame, distorts the colors and I get an “Error:” with blank after it. The game is playable in the background cause I still hear the sounds of picking up items but the screen never changes. Am I doing something wrong in the cooking process or does this issue belong in another topic? I’m really at my ropes end here so any help would be awesome.

Hey Dorial,

Thank you for taking the time to report this issue, and we appreciate your patience while awaiting a response. In order to assist you in an effective manner, we would like to see if you are still experiencing the issue you are reporting in engine versions 4.8.3 and/or 4.9.2?

This game looks neat and I would like to see it completed, so let me know if you have questions or need assistance!

Cheers,

Hello Andrew!

The issue with the camera was solved - sort of. The main issue was that the browser I had wasn’t fully supporting unreal so it crashed the second it started. The color issue was an problem with the shaders that I fixed by changing all textures to another shader. The camera issue still “exists”, you can briefly see that image when the game starts up but it’s not a real issue anymore. There were other issues that got solved with the release of 4.9.1 so I’m happy about that!

The only big problem I have left is that the game is huge/takes a long time to load, which doesn’t really help my cause, but I can’t seem to compress or speed it up even more than I’ve had.

Here is the link to the game if you want to check it out:
http://pierrehansson.com/

Regards,

Pierre

Cool little game!

Yeah I wish I knew enough about optimizing load times to help you, but I am sure if you made a new answerhub post, or if you posted it to the Forums, someone will chim in with some helpful information.

Cheers,

I have this problem on 4.15 and I’m not using HTML.