WebGL on Kongregate

Anyone tried deploying WebGL to kongregate? I'm getting an issue where none of my keyboard inputs are detected. The keyboard input works fine if I run it locally.

Still working on debugging the why, it could be something in my code, I am doing some odd things with my input.

Anyway, interested to see if anyone else has problems. Or if anybody else has had no problems and it's just me.

The game can be played here if anyone is interested in seeing if it works on another system. You have to use chrome to access the WebGL version.

http://www.kongregate.com/games/boredmormon/pond-wars

 

Arrow keys aren't working for our WebGL Games as well, so you might wanna add WASD or Mouse control for your game.

Are you able to polish the game, btw? Graphics aren't looking best, to be honest.

 

Hmm, it's a two player game, the intent was one player on the arrows and another on wasd. But neither works.

 

I think there are issues with it in an iFrame as well, for example, PlayerPrefs dont save in my game on Kongregate either, but they do when i host the files locally with xampp

 

I'd wondered if it was an iFrame issue. Time to do some more experimenting. I'm also using a custom input manager that might be causing some of the issues.

 

It's HTML focus problem. make sure that the canvas element is in focus

 

that doesn't make much sense to me.

 

Actually it does, as arrow keys are also "browser controls" for moving the browser view. I think

 

that wouldn't explain the PlayerPrefs at all though.

 

The PlayerPrefs is another issue...
A game can have two un-related bugs

 

I'm not sure its focus related. Clicking on the UI elements in the game works. Clicking on anything else to give the game focus doesn't seem to make a difference. The arrow keys move the browser window, not in game. And A, S and Q do nothing.

So neither arrows nor WASD work.

 

I have determined that my playerpref issue does have nothing to do with the being loaded in an iframe tag, but there is definitely something wrong with how kongregate loads the content that prevents playerprefs from saving.

 

Did you submit a bug report?

 

There was a bug in the past in WebGL where PlayerPrefs will not be loaded on the first frame.
Also, it may be a problem related to server properties

 

I couldn't find anything in the issue tracker, that's why I asked about the bug report.

 

@BoredMormon when I enter the game in chrome, event if I clicked with the mouse on the canvas, when I click on the arrow keys or the WASD, it writes stuff on the right side of the page, where the login info form...

 

That's the same behaviour I'm experiencing, I'm beginning to think its a Kongregate issue, I've asked on their forums, but haven't heard much back yet. I'll try and raise whatever the equivalent of a bug report is over there.

 

When I clicked inside the iFrame(and not in the canvas), and then in the canvas - I started to get input from keyboard.

Why won't you add focus when clicking on canvas?
http://www.w3schools.com/jsref/met_html_focus.asp

 

In relation to PlayerPrefs.

It turns out that since kongregate.com page has an iframe that loads the html5/javascript files from konggames.com, the browser doesn't allow it to access the IndexedDB due to a DOMException (access not allowed).

By using fiddler to proxy my files on my machine so that it thought it was loading the game from kongregate.com, my playerprefs started working.

 

Tried it this way and it works, sort of. Got some more work to do, but at least I'm getting somewhere.

 

I am experiencing the same issues on gamejolt.
see here http://gamejolt.com/community/forum...me-doest-take-keyboard-focus/9253/#post-47152
no solutions from anyone there either.

 

One of the guys on the slack community has a solution. I'll try it out tonight, an if it works, I'll post it here.

 

i found this
http://forum.unity3d.com/threads/urgent-webgl-keyboards-event-not-working-when-in-a-iframe.299215/
im going to test it out tonight

 

Trying a build on Kongregate I found the same issue. I tried a variation of the link above without success, a variation since the above is jQuery based and not plain javascript and I didn't feel like packaging jQuery.

parent.document throws cross-origin frame exceptions when called within the iFrame at least from the preview.

I also used the browser console to manually call things like document.getElementById('gameiframe').focus() and other similar commands but to no avail. Would like to see a working solution to this.

I also simply tried attaching onkeydown="console.log('test')" to elements like the web gl canvas and iframe and I did see that get printed out just not reaction within the game.

 

i fixed it!

using a modified version based on this after getting some javascript permission errors: http://forum.unity3d.com/threads/urgent-webgl-keyboards-event-not-working-when-in-a-iframe.299215/

heres the working code
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script>
$(window).on('load', function(){
//$(document).ready(function(){
//$(parent.document).find('iframe').focus();
$(document).find('iframe').focus();
})
</script>

and now it loads and takes focus and gives no errors!

 

I haven't been able to get this solution to work unfortunately. This is proving very frustrating. Otherwise the game is looking good. Banreaxe did you add this to the end of the index.html body?

 

Ok I've been able to get this working now with the following code,
</script>
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script>
$(window).on('load', function(){
console.log( "Game loaded" );
$(document).find('#canvas').focus();
})

I have also stripped most html elements so that there is little inside the body of the uploaded document except the canvas element, the scripts and one <p></p>

 

so i thought i had it working well, and it does seem to get the focus initially, however if you then click outside of the game it loses focus and you have to do try and click in the first iframe and then the second to get focus again.

 

@Banriel I've seen this issue as well now game freezes if I click outside the game window. Not good. Worth posting a bug report about this?

 

@BoredMormon Hello, I'm having the same issue as you. The game window just won't get focus after I click outside it anymore. How do you solved this?

 

its not a complete fix but this should work for the most part

https://github.com/banreaxe/unity-webgl-iframe-fix

 

Hola, para los que aún no han podido solucionar el problema del focus en canvas de facebook les comparto la solución

En el html agregar arriba del head estas lineas

<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script>
$(window).on('load', function(){
$(document).find('#canvas').focus();
})
</script>
</head>

en la linea del canvas poner el parametro tabindex="1"

<canvas class="emscripten" id="canvas" tabindex="1" oncontextmenu="event.preventDefault()" height="600px" width="960px"></canvas>

Debería funcionarles sin ningún problema.

 

@banreaxe I followed this strategy, but I also had to incorporate a click listener attached to the canvas or iframe to also fire a focus function. This covers any case where the iframe loses focus and the player needs to restore focus to the game.

 

Rokert el script funciona perfectamente. Gracias.

 

Hello, my page script for my webgl trial is the following:

Code (CSharp):

1. <!doctype html>
2. <html lang="en-us">
3.   <head>
4.     <meta charset="utf-8">
5.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
6.     <title>Unity WebGL Player | Prisoner</title>
7.     <link rel="stylesheet" href="TemplateData/style.css">
8.     <link rel="shortcut icon" href="TemplateData/favicon.ico" />
9.     <script src="TemplateData/UnityProgress.js"></script>
10.       <script>
11. $(window).on('load', function(){
12. $(document).find('#canvas').focus();
13. })
14. </script>
15.  
16.   </head>
17.  
18.   <body class="template">
19.     <p class="header"><span>Unity WebGL Player | </span>Prisoner</p>
20.     <div class="template-wrap clear">
21.      <canvas class="emscripten" id="canvas" tabindex="1" oncontextmenu="event.preventDefault()" height="600px" width="960px"></canvas>      <br>
22.       <div class="logo"></div>
23.       <div class="fullscreen"><img src="TemplateData/fullscreen.png" width="38" height="38" alt="Fullscreen" title="Fullscreen" onclick="SetFullscreen(1);" /></div>
24.       <div class="title">Prisoner</div>
25.     </div>
26.     <p class="footer">&laquo; created with <a href="http://unity3d.com/" title="Go to unity3d.com">Unity</a> &raquo;</p>
27.     <script type='text/javascript'>
28.   var Module = {
29.     TOTAL_MEMORY: 268435456,
30.     errorhandler: null,            // arguments: err, url, line. This function must return 'true' if the error is handled, otherwise 'false'
31.     compatibilitycheck: null,
32.     dataUrl: "Release/prisoner.data",
33.     codeUrl: "Release/prisoner.js",
34.     memUrl: "Release/prisoner.mem",
35.    
36.   };
37. </script>
38. <script src="Release/UnityLoader.js"></script>
39.  
40.   </body>
41. </html>

Arrows keys and WASD don't work. Any suggestions? Thx