Keyboard controls not working in Facebook app

Hi,

I've just built my first game with Construct 2, and this is my first post to the forums. I am having an issue with keyboard controls not working in my game when it is accessed as a Facebook app. This might be a bug, but since I'm still a new user, I figured I would post here first since it might just be human error.

I have exported my game and put it on my web server (https://www.crowdedcomics.com/mudslinger/). It works perfectly there -- for keyboard, mouse, and touch inputs. I followed the tutorial to also create a Facebook app, and the app points to the exact same page on my server (but through an iframe I believe). When you use it through Facebook (https://apps.facebook.com/515574108472496/), the keyboard controls don't do anything. I tried disabling touch controls, but that didn't have any impact. I also went through my game disabling features and plugins one by one, but I haven't had any luck yet.

I searched the forums and found an old issue that sounds similar: scirra.com/forum/r792-and-r793-bugs_topic49185_page2.html

But this issue was apparently resolved back in February. I'm using Construct 2 version 108.2 64-bit, so I assume that fix must be part of the version I'm using.

Has this old issue popped up again? Or is there some workaround that I'm supposed to do to make keyboard controls work in a Facebook app? I appreciate any help!

Hmm - try adding empty 'On key pressed' events in the Keyboard object for each key used as controls. This will block the default behavior, which might be to scroll the page and such. It might also be a problem with Facebook... not sure.

Thanks, Ashley. Unfortunately, that didn't change anything. I added 4 empty keyboard events: for the left arrow, the right arrow, the up arrow, and the spacebar. I already have actions assigned to keyboard "on pressed events" for each of these keys, so these new empty events are incremental.

Nonetheless, there's still no player/platform movement when using the keys via Facebook. Interestingly, the up arrow still causes the page to scroll on Facebook, so it seems the game in the browser is not getting the keystrokes when the game is loaded through Facebook.

Any other ideas?

How strange! I opened the firefox developer bar to investigate your issue and... controls started to work correctly.

EDIT: Another strange thing... Even closing firefox and reopening it controls are working fine now... I finished your game with a 6505 score.

On Chrome there's no way to get controls working.

Hi

I have the same problem... I can't remember which version this began recently....long time with no posts here, but using C2 intensively.

I tried it out also. It seems the focus for the controls was in the login text area up above. I tried various ways to make the key controls focus on the game but it never worked. This was using Chrome on Win7.

Thanks to those of you who looked into this issue. I've resolved it, and I wanted to post the solution for anyone else having this problem (@Alemar: you should give this a try).

After a lot of trial and error and looking at the JS code itself, the solution is actually very simple. The problem is that whenever the game is served through an iframe (as Facebook apps are), for some reason the iframe does not have focus. This prevents the keyboard inputs from doing anything for the game within the iframe (keystrokes only impact the window that holds the iframe).

The easy solution is to create a new System event to run "on start of layout" with a Browser action of Focus. Do this on any layout that requires keyboard controls. That's it. If you do that, the keyboard controls now work in the iframe for Facebook apps.

Since I'm not sure of the intended C2 behavior when served through an iframe, I don't know if this is a bug or simply a required step that may not be documented. Either way, I think it would be useful to note this required event in the How to Make a Facebook App tutorial.

Thank you very much, dcburnett

I was going crazy and you saved me

Thanks a lot.

THANKS dcburnett! You saved my job.

I suggest further explanation of this odd iframe behavior on the Facebook article or the Facebook manual entry.

Ran into the exact same issue when using the iframe for Kongregate. My solution was similar, but to also account for the user clicking over into chat during game play (i.e. after on start of layout) I instead went with using the browser focus action on the mouse any click event. That way when they click back into the game, it gives focus back to the game and the keys again work.

Something else to consider when designing apps that sit in an iFrame that the player might click outside of.

Is there an event for on focus lost? May want to put some type of pause action whenever the game loses focus with a message telling them to click/touch in the game area to continue...

Ashley,

I'm working on rebuilding the facebook plugin and would gladly add an onfocus/unfocus condition. Can you point me to information on checking for focus or do you have an idea on what to add? I'm thinking it should be a trigger event so when it loses focus it fires the condition(onfocus). Is this in the browser plugin for me to look at by any chance?

My plugin link