Search the Community

Showing results for tags 'keyboard'.

More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


  • HTML5 Game Coding
    • News
    • Game Showcase
    • Coding and Game Design
  • Frameworks
    • Phaser
    • Pixi.js
    • Babylon.js
    • Panda.js
    • melonJS
    • Haxe JS
    • Kiwi.js
  • General
    • General Talk
  • Business
    • Collaborations (un-paid)
    • Jobs (Hiring and Freelance)
    • Services Offered

Found 42 results

  1. In my main scene I add keyboard event listeners to specific keys in the init() state. Also some of those keys need to be disabled at specific time and re-enabled at specific time. How can I disable/enable input on specific keyboard buttons at runtime?
  2. Hi everyone, I just tested the keyboard input examples of Phaser on Microsoft Edge and it doesn't work as it should. Sometimes it won't detect key presses or keep a key pressed down even if I already stopped pressing it. I had the same problem with a game we're developing and I even noticed that some of the old games we've developed have the same problem when testing on Edge. Has anyone else had this problem? Should I raise it as an issue on the repository?
  3. Hi everyone, I'm having some weird issues with Safari on Mac : it seems like using the arrow keys in combination with A messes up the keyboard language. I have a french keyboard (azerty), and if I press A, no issue, A is triggered. If I press the right arrow + A, the A becomes a Q. Is that a known issue? Is anyone having the same issue? Is there something wrong with the way I handle the keys? Here is a JSFiddle to illustrate the issue (open the console to see the logs) : Thanks a log guys!
  4. Hi, I'm currently learning Phaser, and i need to handle key events, so i saw some tutorials and if i want to move my character, i need to know if key is down so, in the "phaser" way, things are done like this: window.checkInputs = () => { let key = Phaser.Keyboard if ( game.input.keyboard.isDown(key.LEFT) ) { console.log('Left is down !') } } And i need to call this method in the update loop, so 60 times / s, phaser will check if left arrow is down, like i come from node.js, i don't like this, i mean it waste resources no ? So, is this methode better ? : window.addInput = () => { document.onkeydown = (e) => { if (e.code == 'ArrowLeft') { console.log('Left is down !') } } } Thanks !
  5. Hi Guys. I am new to HTML5 game development.I want to implement 4 buttons on screen(left, right,up and down), which controls the camera.has someone idea how to implement it?? @Dad72, @davrous, @Deltakosh
  6. Hello, I'm trying to call the keyboard on click (InputDown) event. Everything works fine in Android, but on iOS the keyboard doesn't show. I'm running the app through Cocoon Developer App using .zip file openKeyboard: function() { Cocoon.Dialog.showKeyboard({ type: Cocoon.Dialog.keyboardType.TEXT, }, { insertText: function(inserted) { console.log(inserted); }, deleteBackward: function() { console.log("deleteBackward"); }, done: function() { console.log("user clicked done key"); }, cancel: function() { console.log("user dismissed keyboard"); } }); } showKeyboard function is called because I've checked that using console logs, but actual keyboard is not appearing... Anyone encountered simillar problems? Or maybe you can recommend some other option to display keyboard in native app?
  7. My post about control mechanisms in JavaScript games was just published on Mozilla Hacks blog. It introduces a series of MDN articles about Implementing game control mechanisms: Mobile touch controls Desktop mouse and keyboard controls Desktop gamepad controls Unconventional controls The basic examples are available on GitHub at And the articles are using Phaser-based game Captain Rogers: Battle at Andromeda demo as a case study.
  8. I already found the solution for my problem. Please delete this topic.
  9. Is there a way to see the full list of keyboard buttons? For example Phaser.Keyboard.SPACEBAR, Phaser.Keyboard.ONE, Phaser.Keyboard.TWO etc... I cannot see these "constants" in the phaser 2.2.2 docs. For example I need dot, single quote, dash(minus), ~
  10. I have this code: var myKey = SI.gameObject.input.keyboard.addKey(SI.gameObject, 32); myKey.onDown.add(function () { console.log("space"); }, SI.gameObject); When pressing Space the browser scrolls down. I want to prevent this but still be able to detect when i pressed Space. Yes there is method game.input.keyboard.addKeyCapture() which does the job, but it also disables Space button completely i.e I don't detect when the button is pressed. Any ideas if this is possible in Phaser?
  11. This question is of course for each specific browser forum, but I decided to ask anyway. I am using Phaser to develop educational game where you type letters which are analog to Sandhi/Devanagari/Sanscrit language letters. So you type ṁ or ī or ṇ, ñ, etc... and these letters are simplified by typing .m, -i, n. , ~n i.e I enter letters available on my keyboard but a special Sanscrit software analyzes these keystrokes and replaces them with appropriate Devanagari letters. Of course this software is not a necessity so I need to type keys from keyboard to achieve the letters above, i.e encode them. So far I have used addKeyCapture() function to disable Space, ".", "-", and "'". Well I planned to disable Shift as well but I works somehow. Also single quote doesn't took effect as I can still open "Quick Find" box in Firefox. gameObject.input.keyboard.addKeyCapture([32, 39, 45, 46]); So, is there a way to disable browser keyboard shortcuts trough JavaScript without installing or configuring additional plugins, addons or browser settings? Any ideas are welcome.
  12. Hi guys! I just want to share with you some plugins i made for my games (pixi.js >= 3.0.8). May be useful for someone. pixi-animationloop: To manage the requestAnimationFrame, doing the basic time operations, like delta time, total times, stop the loop when the browser's tab lost the focus, etc... pixi-keyboard: To manage keyboard events easily. pixi-timer: To create time events, clocks, etc... pixi-audio: To add audio support using the pixi resource-loader. The plugin use webaudio by default, and fallbacks to HTMLAudio when is needed. pixi-tween: To create tween animations, tween alongs paths, etc... Extra: obj-pool this plugin is not for pixi.js per se, but it's useful when we develop games for the memory management. Extra2: ES6-Webpack-Pixi-bolierplate, a start point to use pixi with ES6. I have other things in a old engine i made with pixi v2-3, and i will be move it to pixi v3-4 like plugins, for example, scene transitions, particle sys and tools, etc... -> Particle sys tool1, particle sys2 Regards!
  13. Hi, I'm currently working on a tile base RPG game using Phaser. function create(): controls = { up: game.input.keyboard.addKey(Phaser.Keyboard.Z), (...), shift: game.input.keyboard.addKey(Phaser.Keyboard.SHIFT) }; } If I press Z, my character needs to move and if I press SHIFT + Z, my character has to rotate towards the Z direction. function update() : if (controls.shift.isDown) { if (controls.up.isDown){ rotateCharacter(); } } else { if (controls.up.isDown){ moveCharacter(); } } Right now, when try to rotate my character using SHIFT + Z, it triggers the rotation AND the movement. If I press Z alone, the character moves as expected. I've tried checking if my SHIFT key was up but it didn't change anything. How can I achieve that? Thanks, in advance.
  14. I have multiple sprites that I'd like to each control with the arrows in a turn-based way. i.e. move sprite1 around screen with arrows then press 'E' to switch to controlling sprite2 with arrow keys. Repeat back and forth. I've tried many methods, looked through many examples, read Interphase 1, and googled for hours. I can't seem to figure this one out. Here's the relevant code: currentPlayer = "Guy"; //this.player1 if (currentPlayer == "Guy") { movingPlayer = this.player1; } else { movingPlayer = this.player2; } //the conditional doesn't work, but if I set it outside the conditional it's fine //movingPlayer = player1 works fine. this.cursors.right.onDown.add(this.moveRight, this, 0, movingPlayer); moveRight: function (key, player) { player.x += TILE_SIZE; } So if I set movingPlayer manually before I run the game it works fine. It passes the correct player to the moveRight function and everything is great. However, I CAN NOT for the life of me set movingPlayer dynamically. I've tried it in the update function, in the create function, in its own function, and nothing works. Is there a good tutorial, example, code snippet, or advice on how to have two sprites on the screen that can both be controlled by the arrow keys on different turns? Thanks!
  15. Currently, I have this script in my application to move the player in a circle using the mouse (taken from this example: : var mouseX = this.input.x; var mouseY = this.input.y; theta = Math.atan2(mouseX-cX, mouseY-cY) var newX = Math.sin(theta) * radius; var newY = Math.cos(theta) * radius; rocket.x=cX + newX; rocket.y=cY + newY;I would like to change the above to key control ("A"/'D") -- but can't get the right code to work. FYI, I am using the cursor arrows for other movement with no problem. Any assistance would be greatly appreciated.
  16. Hello I need to set events only for pixi.js canvas. how can i do it? document.addEventListener('keydown', function(event) { });This method start leasten all window and block html inputs. Thank you
  17. I'm making a menu and decided to use onDownCallback. The options are text objects(game.add.text(....)). The selected option should become active. But it works only once and for the first chosen option - up or down. Then nothing happens. BUT the debugger goes in the called functions everytime I press 'up' or 'down'. create() { down.onDown.add(optionB, this); up.onDown.add(optionA, this);}function optionA() { optionAText.fill = activeFill;} function optionB() { optionBText.fill = activeFill;}Edit: actually, everything works but the text color(fill) does not update. Another thing I tried: update() { if ( == down) { optionA.fill = deactiveFill; optionB.fill = activeFill; } else if ( == up) { optionA.fill = activeFill; optionB.fill = deactiveFill; }}I don't know why but this makes both options change color. If I press 'down', both are activeColor, if I press 'up', both get deactiveColor. ... Great! I have other ideas how to do what I want but I'd like to know what's wrong with the upper 2.
  18. Can someone please explain/show me what code I need to insert to add mobile touch support to a game in phaser. I am trying to build onto the invaders example: I need more specifically a button for keyboard left, a button for space bar, and a button for keyboard right on mobile. Also I have read the docs and I am fairly new to this, so I'm having a hard time deciphering what the docs are even talking about on pages like keyboard events, Phaser.key etc. If someone could please show me an actual example of how to do this, and not just tell me to read the docs it would be greatly appreciated.
  19. Hello guys, I am a newbie and still learning Phaser.js framework and want to clarify a doubt. I am trying to make a game where two players can play together from the same keyboard to fight it out. One from WASD keys and another from default arrow keys. I have created two players and binded them to their respective keys, but I am not able to control players from their respective keys How can I achieve such?
  20. Good afternoon all, I'm trying to capture user key presses... here's my code: // This is in my "create" functiongame.input.keyboard.addCallbacks(this, null, null, this.input);// ...input: function(char) { += char; this.selection.setText(; },Here's the error I'm getting: Uncaught TypeError: is not a function If anyone has any ideas, please let me know!
  21. I have just finished building a game using Pixi.js. I am using the keyboard example on this page for keyboard input. function keyboard(keyCode) {var key = {};key.code = keyCode;key.isDown = false;key.isUp = true; = undefined;key.release = undefined;//The `downHandler`key.downHandler = function(event) {if (event.keyCode === key.code) {if (key.isUp &&;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): Example of game embedded in an iframe (keyboard input not working): The code for the project if required can be found here: 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.
  22. Everywhere is written that for interactive events you need to set the flag sprite.interactive = true; but docs have no such Sprite properties. How did a "make" events?
  23. I uploaded the game on fgl. The game gets put in a iframe. While in firefox it works fine, in Chrome it seems to have a problem. When the keys on keyboard get pressed, nothing happens in the game, instead it is the window that moves when pressing the up and down keys. I entered the following code game.system.canvas.focus(); and game.system.canvas.setAttribute('tabindex','0'); and somehow the keys now work for the game. But the keys still move the window as a whole. Is there a way to focus only the canvas?
  24. Here is my code: window.document.addEventListener("DOMContentLoaded", function (event) {'use strict'; var game = new Phaser.Game(800, 600, Phaser.AUTO, ''), arcade = null, stateManager = null, physicsManager = null, state1Object = new Phaser.State(), player = null, platforms = null, ledge = null, ground = null, cursors = null, keyboard = null; state1Object.preload = function (gameObject) { gameObject.load.image('logo', 'assets/phaser.png'); gameObject.load.image('sky', 'assets/sky.png'); gameObject.load.image('ground', 'assets/platform.png'); gameObject.load.image('star', 'assets/star.png'); gameObject.load.spritesheet('dude', 'assets/dude.png', 32, 48); }; state1Object.create = function (gameObject) { //var logo = game.add.sprite(,, 'logo'); //logo.anchor.setTo(0.5, 0.5); //game.add.sprite(0, 0, 'star'); // We're going to be using physics, so enable the Arcade Physics system //game.physics.startSystem(Phaser.Physics.ARCADE); arcade = new Phaser.Physics.Arcade(gameObject); // A simple background for our game gameObject.add.sprite(0, 0, 'sky'); // The platforms group contains the ground and the 2 ledges we can jump on platforms =; // We will enable physics for any object that is created in this group platforms.enableBody = true; platforms.physicsBodyType = Phaser.Physics.ARCADE; // Here we create the ground. ground = platforms.create(0, - 64, 'ground'); // Scale it to fit the width of the game (the original sprite is 400x32 in size) ground.scale.setTo(2, 2); // This stops it from falling away when you jump on it ground.body.immovable = true; // Now let's create two ledges ledge = platforms.create(400, 400, 'ground'); ledge.body.immovable = true; ledge = platforms.create(-150, 250, 'ground'); ledge.body.immovable = true; // The player and its settings player = gameObject.add.sprite(32, - 150, 'dude'); // We need to enable physics on the player // arcade.enable(player); // Player physics properties. Give the little guy a slight bounce. player.enableBody = true; player.physicsBodyType = Phaser.Physics.ARCADE; player.body.bounce.y = 0.2; player.body.gravity.y = 300; player.body.collideWorldBounds = true; // Our two animations, walking left and right. player.animations.add('left', [0, 1, 2, 3], 10, true); player.animations.add('right', [5, 6, 7, 8], 10, true); player.body.gravity.y = 300; keyboard = new Phaser.Keyboard(gameObject); keyboard.addKey(Phaser.Keyboard.LEFT); console.log(keyboard); cursors = keyboard.createCursorKeys(); //controlPlayer(cursors, player); }; state1Object.update = function (gameObject) { // Collide the player and the stars with the platforms arcade.collide(player, ground); player.body.velocity.x = 0; if (cursors.left.isDown) { // Move to the left player.body.velocity.x = -150;'left'); } else if (cursors.right.isDown) { // Move to the right player.body.velocity.x = 150;'right'); } else { // Stand still player.animations.stop(); player.frame = 4; } // Allow the player to jump if they are touching the ground. if (cursors.up.isDown && player.body.touching.down) { player.body.velocity.y = -350; } }; state1Object.render = function (gameObject) { }; // create state manager stateManager = new Phaser.StateManager(game); stateManager.add("state1", state1Object, false); stateManager.start(state1Object); // create physics manager //physicsManager = new Phaser.Physics.Arcade(game); game.state = stateManager; //game.physics = physicsManager; });I am fighting with this stuff. What do I do wrong? I cannot get my arrow keys to work.
  25. Hey there, its me again with two stupid questions I looked for many examples on the web to understand how I can execute code when a key is pressed. Unfortunetaly, nothing worked for me. Is there a easy way to do this? I just need something like if(key.A) { variableNumber = 1; } Then I want to check some variables, so I tried to use the console from the debug layer: console.log(varTest); The console still tells me only that the Babylon.js engine launched. Any way to feed the console? Thanks for help!