radcorps Posted August 25, 2015 Share Posted August 25, 2015 I have just finished building a game using Pixi.js. I am using the keyboard example on this page https://github.com/kittykatattack/learningPixi for keyboard input. function keyboard(keyCode) {var key = {};key.code = keyCode;key.isDown = false;key.isUp = true;key.press = undefined;key.release = undefined;//The `downHandler`key.downHandler = function(event) {if (event.keyCode === key.code) {if (key.isUp && key.press) key.press();key.isDown = true;key.isUp = false;}event.preventDefault();};//The `upHandler`key.upHandler = function(event) {if (event.keyCode === key.code) {if (key.isDown && key.release) key.release();key.isDown = false;key.isUp = true;}event.preventDefault();};//Attach event listenerswindow.addEventListener("keydown", key.downHandler.bind(key), false);window.addEventListener("keyup", key.upHandler.bind(key), false);return key;}I understand that this is technically not a PIxi.js issue as the code above is just using standard Javascript. However I would like to know how others are overcoming this problem. What is the accepted way for handling keyboard input that would allow this project to also work inside of an iframe? Example of game working (no iframe): http://www.adamhportfolio.com/WebGames/LD33/Example of game embedded in an iframe (keyboard input not working): http://adamhportfolio.com/ludum-dare-33-entry/ The code for the project if required can be found here: https://github.com/rad-corps/WebGames/tree/master/LD33 index.html is the entry point then GameLoop.js has the keyboard handling to get from the main menu to the game. Sorry its a mess, it was for a 72 hour game jam. Quote Link to comment Share on other sites More sharing options...
andreas_d Posted August 25, 2015 Share Posted August 25, 2015 Haven't tried this but pretty sure this has smth to do with the eventlisteners being attached to window. Look at the iframe contentWindow property http://www.w3schools.com/jsref/prop_frame_contentwindow.asp Quote Link to comment Share on other sites More sharing options...
radcorps Posted August 26, 2015 Author Share Posted August 26, 2015 Thanks andreas_d but I haven't had any success with the contentWindow property on iFrame. Although, you have made me think top down about the problem rather than bottom up. I found the following jsfiddle which may do the trick. I will try it when I get home. http://jsfiddle.net/rfkqe64j/ Quote Link to comment Share on other sites More sharing options...
radcorps Posted August 26, 2015 Author Share Posted August 26, 2015 No, still no luck. I am surprised that this isn't a more common issue. Quote Link to comment Share on other sites More sharing options...
radcorps Posted August 27, 2015 Author Share Posted August 27, 2015 Another small update: By increasing the iframe size to above the canvas size. I can now click in the "non-canvas" area of the iframe and will get keyboard input. But if I click inside the canvas itself, I dont get any keyboard input still. I guess Im getting closer. Another small observation: If I activate the keyboard input by clicking in said area then click inside the canvas, it still remains active. See http://adamhportfolio.com/ludum-dare-33-entry/ for example on what I mean. I have left the border on the iframe to make it obvious where to click (inside the border but not inside the canvas). Anyone have any ideas? Quote Link to comment Share on other sites More sharing options...
radcorps Posted August 27, 2015 Author Share Posted August 27, 2015 Problem solved. My issue ended up being two pronged:I was triggering a browser security exception by using the absolute path to my website in the iframe (<iframe src="http://www.mysite.com/dir/index.html"></iframe> instead of the path relative from the domain root <iframe src="/dir/index.html"></iframe> The other issue was the window variable that inputs were bound to needed to be set to the parent window when one was available (which there is in the case of an iframe). This small snippet fixed thatvar realWindow = window.parent || window;//..... //Attach event listeners realWindow.addEventListener( "keydown", key.downHandler.bind(key), false ); realWindow.addEventListener( "keyup", key.upHandler.bind(key), false ); Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.