Search the Community

Showing results for tags 'input'.

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 148 results

  1. How can I find the pointer's x/y coordinates in the world? Can I convert between camera and world coordinates?
  2. Hello, I am working on a game using tilemap and phaser framework. I want select the multiple coordinates on tilemap using phaser (cursor) and then can be able to store into an array. Is this possible using phaser? suggest me some solution for this.
  3. 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?
  4. I have pixijs webgl app with some inputs. I have an input which uses native html input which placed out of scene and dispatches some events to my input and so on (like old pixi.input project) Yesterday I've update pixijs from 4.3.5 to 4.4.1, and input has broken. When hidden input is focused and I've move mouse (like usual text selection) native unfocus event has been emmited on my hidden input without stack trace (by browser as I think). Keydown events also doesn't work on hidden input (maybe it previously unfocused by mouse up or mouseclick event after it has been focused). Pixi 4.4.1 Chrome - bug Mobile chrome - bug Mozilla - ok Desktop Chrome with mobile emulation - looks OK, but didn't test it enough Downgrade to Pixi 4.3.5 - all browsers works OK
  5. I have some sprites that are set to horizontal drag only. What I want to do is, if someone drags vertically up from one of those sprites, when they leave the bounds of that sprite (top edge), spawn a new sprite and be actively dragging that new sprite. The user should not have to release the mouse button, they should just instantly be dragging the new sprite. I can successfully calculate when the pointer is leaving the first sprite, and spawn a new sprite at that location, but I can't seem to transfer the drag control. I tried Pointer.swapTarget, but that doesn't seem to work - the new sprite is spawned, but just sits there and I have to release the mouse button and re-click on the new sprite in order to drag it. How can I make the transfer seamless?
  6. I'm writing an FPS (Asteroids in 3D) and need to change the input mapping and some of the behaviour of the camera (currently Universal Camera). 1. rotate left and right (about the y-axis) instead of move - it does this for the mouse, but not keys 2. when rotating tilt into the direction of roatation - to emphasise the motion and give a "swooping" feel 3. control key sensitivity Are these behaviours / properties directly configurable? Or do I need to subclass a new camera type, or develop a different input control mechanism?
  7. Hey guys, I have made some scaling of the game via CSS so I can have my game always the proper size in the browser window. However, I lose my onInputDown because for some reason the game container overflows but visually is okay.... here is my CSS styling (visually it looks perfect): html { height: 100%; margin: 0; padding: 0; } body { height: 100%; margin: 0; padding: 0; } #content { height: 100%; } #content > canvas { margin: 0 auto; height: auto !important; width: auto !important; max-height: 100%; max-width: 100%; position: relative; top: 50%; transform: translateY(-50%); } Here is my game init class: import Boot from 'states/Boot'; import Preload from 'states/Preload'; import GameState from 'states/GameState'; import * as Constants from 'data/Constants.js' class Game extends Phaser.Game { constructor() { let height = window.screen.height; let width = window.screen.height / Constants.SIXTEEN_TO_NINE; super(width, height, Phaser.AUTO, 'content', null); this.state.add('Boot', Boot, false); this.state.add('Boot', Preload, false); this.state.add('GameState', GameState, false); this.state.start('Boot'); }; } new Game(); If I don't have any css code - the input works. I believe it is because the game is still bigger than what it visually appears. Has anyone had this issue?
  8. 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 !
  9. My Phaser.js version: `v2.6.2 "Kore Springs"` Gamepad: generic Logitech Dual Action controller OS: OSX Sierra Browser: Chrome Update: I can confirm that this also occurs with an XBOX 360 controller. Also see @Cyclone112's comments below for more troubleshooting info. I'm adding gamepad support to my current project, and am encountering the following error when disconnecting the gamepad from the USB input: Uncaught TypeError: Cannot read property 'timestamp' of undefined at c.SinglePad.pollStatus (phaser.js:43607) at c.Gamepad.update (phaser.js:43003) at c.Gamepad.reset (phaser.js:43169) at c.Input.reset (phaser.js:37282) at c.Game.gameResumed (phaser.js:36532) at c.Stage.visibilityChange (phaser.js:31966) at HTMLDocument._onChange (phaser.js:31905) This happens regardless of whether or not I register `onDisconnectCallback` to the gamepad. May also be worth mentioning that I encounter the error when disconnecting from this example: If the Github issue tracker would be a more appropriate place for this, I can post there instead. Any recommendations for a workaround would be great. Thanks!
  10. I have a very trivial nested-sprites situation, similar to this: function create() { var sprite = game.add.sprite(0, 0, 'phaser'); sprite.width = 100; sprite.width = 100; sprite.inputEnabled = true;{console.log("parent clicked")}); var child = game.make.sprite(0, 0, 'phaser'); child.width = 10; child.width = 10; sprite.addChild(child); child.inputEnabled = true;{console.log("child clicked")}); //child.input.priorityID = 1; } The problem is that by default the parent catches the click event and does not propagate it to the child. How do I make both child and parent catch the click event?
  11. Hi, I am developing a game in phaser but I am newbie yet. I want to create a login/signup/fb form in the main screen of the game. I did a html form in the index.html of phaser, but I have some doubts. How could I achieve the communication between the html and the scenes of phaser? I created global variables, but I think that is not a good practice. Are there any options to use a state from html like MyGame.MainPage.startGame()? This is the js script of the index, the function is associated to login button: function login(){ user = check_user_in_db(); if(user){ //If the login is correct variable.startGame(); } } This is the MainPage scene of Phaser: /*********************NAMESPACE********************/ var MyGame = MyGame || {}; /**************************************************/ /******************INIT APP SCENE******************/ MyGame.MainPage = function(game) { variable = this; }; MyGame.MainPage.prototype = { init: function() { }, // init preload: function() { //load Sprites }, //preload create: function() { //create Buttons }, // create shutdown: function() { }, // shutdown startGame: function(){ this.state.start("Menu", true, false); } };
  12. I have a sprite jumping if the spacebar is pushed but i also want the same to happen on a mobile if the screen is tapped[Phaser.Keyboard.SPACEBAR]); cursors = this.input.keyboard.createCursorKeys(); this.jumpButton = this.input.keyboard.addKey(Phaser.Keyboard.SPACEBAR) || this.input.onTap.add(onTap, this); what am i missing?
  13. Hello everyone. As I said before on this forum, I am working on a HTML5 Gaming console + API. The feature set that I have in place at the moment is a library for clients and the game. Next to that I have created a dashboard for the console in which games can be selected. The game-view is then loaded into the dashboard window. I also created a client to control the console dashboard (users can open this client on their phone). If a game is selected, the game player view is loaded into the client. The setup uses sockets and emitters to send events from and to the game and clients. I also have some ideas to create a standalone client which contains the socket logic but does not bind the game to the dashboard and client setup. Till now these ideas came from me but I would like to create an actual feedback loop. Filling in this poll would be a first step towards this. If I have a first version online (which will not take long anymore), and people would like to give the platform a try, I would like to setup online developer meetings to get feedback on the platform and new features. Would someone be interested to help me on this journey? Feel free to signup at: or join me on the Xentha slack ( All code is open-source and can be found at If you have any remarks about what audience is interesting to target, how to monetize or what type of games you would like to see for an HTML5 console and you cannot find your options in the poll, please drop me a line. Thank you in advance for answering the poll
  14. Hi I'm trying to put a small text field that the player can type text into and them submit the the text. I've seen so may complicated ( over my head ) ways to do this but I was hoping for a simple solution. Just need to click on a box and be able to type in it, then cluck "subScore". this.subScore = game.add.sprite( + 150, + 100, 'subScore'); this.subScore.anchor.setTo(0.5, 0.5); // Enable input on the subScore button this.subScore.inputEnabled = true; // Attach a function to the input down ( click/tap) { var name = ""; var score = ""; $.ajax ( { url:"/vaultage/publicHTML/score.php", data:{name:name, score:score}, type:"post", success:function(result){ if (result === "success"){ alert ('yes'); } else { alert ('no'); }; } }); }, this); full repo: thank you in advance for you help.
  15. Hey guys! I am coding simple roguelike dungeon crawler: Live version. I have this issue with collisions, whenever a player is positioned like this: ( the lighter tiles are floor tiles and the darker walls obviously ) When he presses down arrow and left arrow at once, he can move on wall tile. This is how I handle input: onKeyDown( event ){ switch ( event.key ){ case 'ArrowUp': this.nextStep( 0, -1 ); break; case 'ArrowDown': this.nextStep( 0, 1 ); break; case 'ArrowLeft': this.nextStep( -1, 0 ); break; case 'ArrowRight': this.nextStep( 1, 0 ); } } nextStep( playerDirectionX, playerDirectionY ){ if ( !this.canMove( this.player, playerDirectionX, playerDirectionY ) ){ return; } this.player.x += playerDirectionX * TILE_SIZE; this.player.y += playerDirectionY * TILE_SIZE; } canMove( unit, dirX, dirY ){ const targetTileX = ( unit.body.x / TILE_SIZE ) + dirX; const targetTileY = ( unit.body.y / TILE_SIZE ) + dirY; return ( targetTileX, targetTileY ) && ! targetTileX, targetTileY ) ); } Here's the whole project's code: Can somebody help me please ?
  16. plugin

    (Made with love from Africa. Now, whether you buy or not, have a good day!) You can get this amazing little plugin on Gumroad for $10. Out of Kontrol - the Phaser Plugin that's actually in control of your controls. What is this? Out of Kontrol (OoK) is a key/input mapper. In other words, it allows you to have different input methods do the same thing. It cuts down on code verbosity and makes your code look neater. So yea,... that's nice too. Why do I need this? Want the WASD keys, arrow keys, and your custom placed buttons to control movement, then OoK is for you. Want to easily allow users to change the controls that you spent hours setting and testing, then OoK is for you!! Included: Minified version of Out of Kontrol. Phaser 2.6.2 + Out of Kontrol (minified) No source code :'( Manual A Basic example of all the functions found in OoK in action Developer love lol. No seriously, under all that minified and unobfuscated code is a lot of love from a dev to a dev. Alert!! We Need You!! OK, more like we need your feedback! Here's how you can help: Tell us about any issues/bugs on our issues page on GitHub. (Did you the favour of removing the source code, you can thank me later) Vote for new features on the same issues page! Also add your email to my newsletter. My emails don't bite (Disclaimer: if the email does end up biting you, I cannot be blamed). Bye!!
  17. Hello gamedevs! I just jumped into Phaser, and feel realy well prepared after the Zenva course, Examples and the help of the Forum. But I just run into a problem where I can't find any solution. I just setup a Emitter who is creating world/another colliding bubbles within a mask. What I now want is to collide them also with my Input (mouse/touch). (Everyone knows the effect of run the mouse into a particle bubble bath :D) I tried following: -Find any Emitter function in the docu -Move a colliding box to the position where I clicked (he doesnt moves bubbles who within the box, just colliding with the ones who newly fall into it) -Add a Drag function to Particles (emitter.input.enableDrag(true); doesnt work; cant find any equal function in docu) Maybe I am just looking for the wrong keywords, but cant understand this common effect of colliding emitter particles with Mouse Input is that hard to find Would be awesome if you can point me!! Thanks in advance, have a nice day //Update #1 It seems like their is a problem with Dragging Sprites and their correct collision detection. For another smilar problem I want a red ball to drag out of this bubble bath. Same problem, but now I let them drag out via follow mouse, collision works now correct.
  18. I am working on a project in which the user creates a system of points by adding them one-at-a-time. These points are also draggable, and clicking on existing points sets the clicked point as active. That's all working fine. When using a simple mouseDownCallback, clicking one of these existing points creates interference between the activities of the new point and the old point. I want to be able to determine what sprites, if any, a clicked point contains and run a function only if the spot is unoccupied. If I can do this via the activePointer versus specifically mouse, that's preferred, but not necessary. Can someone point me in the correct direction?
  19. Iorana! I have just a little question about onInputOut behaivour in mobile/touch devices. I have this scenario in Phaser 2.6.2: A small lovely Sprite with inputEnabled activated to handle events, connected with events.onInputOver and events.onInputOut, just for hover actions. No problems there. If I test it in desktop, the signals are dispatched correctly if I move the mouse over the sprite and then move it away from it. But in mobile/touch the behaivour is different. Obviously, you can't "move" a touch Pointer like a mouse, but anyways if you tap the sprite events.onInputOver is dispatched. BUT, after that, if you tap other place somewhere in the screen there's not any events.onInputDown signal, resulting the game acting if there's still hovering the sprite. But keeping pressed the touchscreen and move Pointer it dispatch the desired signal. I know one can make workaround to handle this (if it is mobile check in the next tap, if the pointer is inside bounds of the sprite: If not, manually dispatch events.onInputOut signal), but I have the doubt in mind if this is the correct behaivour of the signal or not. (Probably not, but there's always a bug possiblity). I checked the docs and there's not much thing to say about the event: As yoy can see, the docs don't cover this particular case. If someone explains me this well if this must be work or not... Thanks in advance
  20. I'm working on a endless runner as my first adventure into phaser but am having some trouble with getting my player sprite to jump. = function() {}; = { create : function() { // physics engine; = 500; // sprites this.ground =, 290,, 8, 'ground'); this.ground.autoScroll(-180, 0); this.player = this.add.sprite(45, 200, 'player'); this.player.animations.add('run');'run', 15, true); // physics on sprites[this.player, this.ground]); this.ground.body.immovable = true; this.ground.body.allowGravity = false; this.player.body.collideWorldBounds = true; // input cursors = game.input.keyboard.createCursorKeys(); jumpButton = game.input.keyboard.addKey(Phaser.Keyboard.SPACEBAR); }, update : function() {, this.ground); if (jumpButton.isDown && this.player.body.touching.down() && > jumpTimer) { player.body.velocity.y = -100; jumpTimer = + 500; } }, shutdown : function() { } } i think its a problem with the way i've write " this.player.bady.touching.down " but I've tried it a couple ways. I'm mostly new to JS so I'm sure its a me problem but some help would be greatly appreciated. Thank you.
  21. Hi, I have an animated ArcRotateCamera who's animation should pause quietly on user input (through PointersInput). At the moment the input components do not announce state changes. I think at the very least, input types should have a `get state` & an `on state change`. IMO the input system could use a rewrite.
  22. Hello. I tried the following code in one state in my game but it didn't work: var x=50,y=300; state1 = function(){}; state1.prototype = { preload: function(){ game.load.image('cover', 'lovely.png'); }, create: function(){ game.stage.backgroundColor = "#ba55ae"; cover1 = game.add.sprite(x+100+0,y,'cover'); cover2 = game.add.sprite(x+100+100,y,'cover'); cover3 = game.add.sprite(x+100+200,y,'cover'); cover4 = game.add.sprite(x+100+300,y,'cover'); cover5 = game.add.sprite(x+100+400,y,'cover'); cover1.scale.setTo(0.35,0.35); cover2.scale.setTo(0.35,0.35); cover3.scale.setTo(0.35,0.35); cover4.scale.setTo(0.35,0.35); cover5.scale.setTo(0.35,0.35);,this); }, update: function(){ }, listener: function() { console.log("lovely"); } }; I base it on this example: Why do you think it is not working?
  23. I'm trying to find a way to use the mousedown event to move the camera forward. I've mapped the keys so that T moves forward and want it to fire whenever there is a mousedown event. I have come up with the following but cannot get the keypress function to fire when there is a mousedown. Any suggestions would be most welcome. In the scene setup I've set the forward key to: camera.keysUp = [84]; // T After the scene setup I've added: document.addEventListener("mousedown", function(e) { var code = 84;//T $('document').trigger( jQuery.Event('keypress', { keyCode: code, which: code }) ); $("#show").append("mousedown creates: " + code + "<BR>"); }); document.addEventListener("keypress", function(e) { var key = e.which; $("#show").append("key code:+key+"<BR>"); //If it's the T key if (key == 84) { $("#show").append("T key has been pressed<BR>"); } }); // I would like the mousedown event to fire the keypress event // as if the T key has been pressed there is a div in the body to display the output: <div id="show"></div>
  24. So, I'm working on a project that will make use of Kinect, and I would like to translate certain coordinates I'm calculating based on the input recieved from the device into x and y values in the screen. In order to simplify the code, I thought the easiest way to handle it would be to use some pointers whose position would be updated by myself in code, and then rely on Phaser's event detections for overlappiing. Of course I can just use Phaser.Point objects and do the overlapping calculations myself, but I was wondering if there's an easy way to control some Pointers myself, as the InputManger pointer list is meant to be read only.
  25. I'm creating a photo manipulation 'game' using Phaser. The user needs to upload a file from their device (desktop, iOS, Android) to start. Searching, I find examples where <input type="file" name="pic" accept="image/*"> transfers the image into the Phaser canvas. And CanvasInput.js works if you only have a text field. But is there any way to get file upload (and file save locally, for that matter) type input from within the Phaser canvas? I want these input fields within the game canvas itself.