Keyboard controls not working in Facebook app

Discussion and feedback on Construct 2

Post » Thu Nov 01, 2012 9:59 am

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: http://www.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!
B
3
Posts: 3
Reputation: 646

Post » Thu Nov 01, 2012 1:49 pm

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.
Scirra Founder
B
359
S
214
G
72
Posts: 22,952
Reputation: 178,580

Post » Thu Nov 01, 2012 5:38 pm

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?
B
3
Posts: 3
Reputation: 646

Post » Thu Nov 01, 2012 6:37 pm

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.Knifegrinder2012-11-01 19:01:19
B
11
S
3
Posts: 224
Reputation: 2,028

Post » Thu Nov 01, 2012 6:55 pm

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.
B
31
S
6
G
3
Posts: 67
Reputation: 3,526

Post » Fri Nov 02, 2012 3:05 am

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.
B
18
S
6
G
2
Posts: 22
Reputation: 2,339

Post » Fri Nov 02, 2012 5:59 am

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.
B
3
Posts: 3
Reputation: 646

Post » Fri Nov 09, 2012 4:42 pm

Thank you very much, @dcburnett

I was going crazy and you saved me

Thanks a lot.
B
65
S
13
G
2
Posts: 969
Reputation: 6,732

Post » Tue Feb 12, 2013 4:04 pm

THANKS dcburnett! You saved my job.

I suggest further explanation of this odd iframe behavior on the Facebook article or the Facebook manual entry.
Image
B
26
S
10
G
5
Posts: 25
Reputation: 3,130

Post » Wed Feb 13, 2013 12:45 am

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.
B
26
S
8
G
3
Posts: 210
Reputation: 5,973

Next

Return to Construct 2 General

Who is online

Users browsing this forum: No registered users and 18 guests