Search in
Sort by:

Question Status:

Search help

  • Simple searches use one or more words. Separate the words with spaces (cat dog) to search cat,dog or both. Separate the words with plus signs (cat +dog) to search for items that may contain cat but must contain dog.
  • You can further refine your search on the search results page, where you can search by keywords, author, topic. These can be combined with each other. Examples
    • cat dog --matches anything with cat,dog or both
    • cat +dog --searches for cat +dog where dog is a mandatory term
    • cat -dog -- searches for cat excluding any result containing dog
    • [cats] —will restrict your search to results with topic named "cats"
    • [cats] [dogs] —will restrict your search to results with both topics, "cats", and "dogs"

Office Holiday

Epic Games' offices will be on holiday from June 22nd to July 7th. During this period support will be limited. Our offices will reopen on Monday, July 8th. 

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: alt text

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

alt text

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!

Product Version: Not Selected
in ue4.png (814.7 kB)
camera error.png (886.8 kB)
more ▼

asked Apr 28 '15 at 08:28 PM in Packaging & Deployment

avatar image

33 1 3 7

avatar image ScottSpadea Apr 29 '15 at 12:27 AM

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

avatar image Laserbeak43 Apr 12 '17 at 08:26 PM

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

(comments are locked)
10|2000 characters needed characters left
Viewable by all users

3 answers: sort voted first

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/



more ▼

answered Oct 14 '15 at 05:19 PM

avatar image

33 1 3 7

(comments are locked)
10|2000 characters needed characters left
Viewable by all users

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

more ▼

answered Apr 30 '15 at 10:32 AM

avatar image

26 1 3

avatar image Dorial Apr 30 '15 at 03:36 PM

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:alt text

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:

alt text

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.

avatar image Ferret_228_ Apr 30 '15 at 04:33 PM

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 ?

avatar image Dorial Apr 30 '15 at 06:25 PM

I've tried in Firefox, Firefox Nightly and Chrome. I've zipped the project, here it is if you wanna check it out: http://www.filedropper.com/game_1

(comments are locked)
10|2000 characters needed characters left
Viewable by all users

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.

more ▼

answered Apr 30 '15 at 09:08 PM

avatar image

3 1 2 4

avatar image Dorial May 01 '15 at 03:16 PM

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

alt text

error.png (7.0 kB)
avatar image Dorial May 02 '15 at 08:26 AM

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:

alt text

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.

errorstop.png (1.3 MB)
avatar image AndrewHurley Oct 11 '15 at 05:45 PM

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!


Andrew Hurley

avatar image AndrewHurley Oct 14 '15 at 09:22 PM

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.


Andrew Hurley

(comments are locked)
10|2000 characters needed characters left
Viewable by all users
Your answer
toggle preview:

Up to 5 attachments (including images) can be used with a maximum of 5.2 MB each and 5.2 MB total.

Follow this question

Once you sign in you will be able to subscribe for any updates here

Answers to this question