HTML5 game problems getting keyboard focus

piXelicidio · August 14, 2015, 1:42pm

Hi when I put my game inside an iframe tag on my website the game doesn’t get the keyboard focus when you click inside the game window. The workaround for the is that he has to click buttons Pause and Resume, then you can use the keyboard but the cursor UP and DOWN still keep sending keystrokes to the browser and the whole page do scroll UP and DOWN.

You can see the live example here:
http://www.denysalmaral.com/2015/08/crabby-ball-free-online-game.html

ue4 version: 4.8.3 binary, blueprints only project.

regards,
piX

anonymous_user_a08c0bf2 · August 17, 2015, 8:13pm

Hey piXelicidio,

I’ve spoken with our HTML5 Developer and it’s suggested that you try to replace the HTML5 template with a simpler one that we provide. It’s suggested to use one that only contains the canvas element and very little else therefore, the inputs will not be blocked.

However, if you happen to notice that you’re still having this issue, please feel free to reply back with additional details and we will assist you further.

Thank you!

piXelicidio · August 17, 2015, 8:26pm

Hi ,
I’m not sure how to change or replace the HTML5 template. I going to check again the project settings to see if I’ve missed something.

Thanks!

piXelicidio · August 17, 2015, 9:26pm

Hi again, i really dont understand what you are suggesting… or I just need to wait for that simpler template?

I have noticed a new experimental template in the project settings and the same problems persist.

With the direct link to the generated page it works well:

This is my application with the old template: http://web.denysalmaral.com/games/crabbyball/index.html

This is with the experimental template: http://web.denysalmaral.com/games/crabbyballbeta/index.html

And this is the old template inside an iframe on my blog: http://www.denysalmaral.com/2015/08/crabby-ball-free-online-game.html

Both has problems of keyboard focus when inside an iframe.

I want to publish the game inside an iframe on my website so I can display more info, links and advertisements; Also if I want to publish my game in any HTML5 market they will need to put the app inside an iframe or something similar.

Best regards,
piX

anonymous_user_a08c0bf2 · August 18, 2015, 6:23pm

Hey piX,

We’re looking into this further to see if there is an issue specifically with the engine or not. I will update you as soon as possible.

Thank you for your patience.

anonymous_user_a08c0bf2 · August 20, 2015, 2:26pm

Hey piX,

So the keyboard input works correctly as long as you press resume. You may want to go into your iFrame code and take out the buttons, so that the keyboard input isn’t overridden. Have you tried this previously?

Looking forward to hearing back, thanks!

piXelicidio · August 20, 2015, 2:33pm

Hi,
Except the cursor UP/DOWN everything else work fine once I press resume. The buttons are from the generated code of UE4, my iframe has nothing more than a link to the hosted game in other folder.

This is my iframe code:

<iframe frameborder="1" height="520px" marginheight="px" marginwidth="0px" name="Crabby Ball" scrolling="no" src="http://web.denysalmaral.com/games/crabbyball/index.html" style="border: 0px #000000 none;" width="740px"></iframe>

piXelicidio · August 20, 2015, 2:36pm

If you mean editing the html generated by UE4 at least a need a hint where to change or delete, since I’m not very experienced at web programming, I just what i need and copy-paste examples from w3schools!

anonymous_user_a08c0bf2 · August 21, 2015, 2:09pm

Basically, you would need to is locate the .HTML5 file, right-click and select ‘edit’. Once you’re in the HTML5 editing document, you’ll see the following code close to the end of the sheet:

	<div class="row buttonarea text-center" id="buttonrow">
		<div class="col-sm-2 text-center"></div>
		<div class="col-sm-2 text-center"><button type="button" class="btn btn-primary" onclick="Module['pauseMainLoop']();"  >Pause</button></div>
		<div class="col-sm-2 text-center"><button type="button" class="btn btn-primary" onclick="Module['resumeMainLoop']();" >Resume</button></div>
		<div class="col-sm-2 text-center"><button type="button" class="btn btn-primary" onclick="$.jStorage.flush()">Clear Stored Game</button></div>
		<div class="col-sm-2 text-center"><button type="button" class="btn btn-primary"  id="fullscreen_request" >FullScreen</button></div>
		<div class="col-sm-2 text-center"></div>
 	</div>

That’s what you should adjust to see whether or not the buttons are causing an affect on your game.

Thanks!

piXelicidio · August 21, 2015, 7:10pm

Hi again ,
I appreciate a lot your effort for helping me.
The code I found was similar but not the same as yours, deleted and then this error rise:

55200-clipboard01_trying+to+remove+buttons.jpg

And this was the code I found, the only that seems to declare the buttons, I just deleted the whole div block:

    <div class="emscripten">
      <input type="button" value="Fullscreen" id="fullscreen_request">
      <input type="button" value="Pause" onclick="Module['pauseMainLoop']();">
      <input type="button" value="Resume" onclick="Module['resumeMainLoop']();">
      <!--input type="button" value="Quit" onclick="__exit(0)" -->
      <input type="button" value="ClearStoredGame" onclick="$.jStorage.flush()">
    </div>

piXelicidio · August 21, 2015, 7:13pm

Sincerely, fixing this issue is not urgent for me. If in the new update (4.9) it will come with a new HTML5 template without these problem of keyboard focus, I can wait for that
kind regards,
piX (Denys)

anonymous_user_a08c0bf2 · August 21, 2015, 7:57pm

Hey piX,

Could you provide me a zipped package of the whole packaged project for HTML5 through a private message on the forums? I’d really like to look at this error more closely for you.

Thanks!

piXelicidio · August 21, 2015, 9:06pm

Hi, great, you can download it directly from [here][1], these files are public on my website anyway.

http://web.denysalmaral.com/download/CrabbyBall_HTML5.zip

anonymous_user_a08c0bf2 · August 24, 2015, 2:24pm

Hey piX,

I’m discussing this with one of our Developers. I hope to get back to you with additional information shortly,

Thanks!

anonymous_user_a08c0bf2 · August 26, 2015, 8:53pm

Hey piX,

I’ve gotten back some information and we believe we’ve located a possible bug in the SDL2 event handler. I have submitted some additional findings to our HTML5 developers and hope to hear back soon.

I did find out that the reason deleting the code from HTML5 did not work correctly is due to the JavaScript involved. An alternative method is that instead of removing the buttons altogether, I’ve given them a “display: none;” CSS style, which causes the buttons to exist on the page, but they don’t get rendered or laid out to take any space on the page, so they are effectively invisible and removed.

If you have any further questions, please let me know as I’ll be more than happy to assist you further.

Thanks!

piXelicidio · August 27, 2015, 1:03pm

Thank you ,
That’s good you’re localizing the problem.
I’ll try that CSS thing
Regards,
piX

anonymous_user_a08c0bf2 · August 31, 2015, 10:10pm

Hey piX,

Did the CSS work for your project? Please let us know if we can be of any additional assistance, thank you!

piXelicidio · September 7, 2015, 9:18pm

Hi ,
Moved to 4.9 and I can’t advance since I can’t run the game in first place: Can't make Hosting HTML5 game 4.9 work! - Platform & Builds - Epic Developer Community Forums

Regards

anonymous_user_a08c0bf2 · September 8, 2015, 9:16pm

Hey piX,

I’ve obtained your other AnswerHub post, I will be responding to it as soon as I am able to.

Thank you.

arclee · July 16, 2018, 6:37am

UNREAL 4.19.2

In myproject.html find

<div class="wrapper" id="mainarea">
	<canvas id="canvas" class="emscripten" oncontextmenu="event.preventDefault()" style="display:none;">
</div>

after that add this

<script type="text/javascript">

var elem = document.getElementById('canvas');
elem.addEventListener('click', function(event) {
window.focus();
}, false);
</script>

when unreal canvas get click event, we let window get focus.