Search the Community

Showing results for tags 'input'.



More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

  • 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 158 results

  1. Hi, I have made a game in resolution 1000:600px, but I realized that it's to big, and I want to scale it by ~0.7, and here is a problem because when I do this: game.camera.setSize(1000*0.7,600*0.7); game.stage.width*=0.7; game.stage.height*=0.7; game.width*=0.7; game.height*=0.7; game.camera.setSize(center.x*2*0.7,center.y*2*0.7); game.scale.refresh(); the game is scaled, but mouse pointer doesn't seem to be in the right position. How can I fix it?
  2. Hey, Everyone I'm dying making attempts to scale canvas for high dpi mobiles and get everything work correctly. Problem: When I start Phaser with 100% width/height for canvas it will be created according to css pixel size of device (window.innerWidth/innerHeight). So iPhone 6S for example, gets, 375x667 canvas, but in fact, of course it should be 2x bigger because devicePixelRatio is 2. Result, everything is blurry and not as expected. Ok, I decided to set width and height with devicePixelRatio included and then set CSS size of canvas to 100% of view port. let w = window.innerWidth * window.devicePixelRatio; let h = window.innerHeight * window.devicePixelRatio; let game = new Game(w, h) // And then in style sheet: canvas { width: 100vw !important; height: 100vh !important; } Now, it seems like everything looks perfect and as expected (is it correct way to do it?). But, another problem rises. Seems like after this events.onInputDown do not work correctly. When I click on sprite nothing happens, but in different location click handled. Seems like coordinates of input arena is messed up. Can someone help me this 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. Hi everyone, I'm trying to make a sprite moving when the mouse is over it and I'd like it to stop when the mouse is not over it anymore. Here is my code: mySprite.events.onInputOver.add(() => touchMouse = true); mySprite.events.onInputOut.add(() => touchMouse = false); and update() { if (touchMouse) { mySprite.x += 5; } } My sprite is correctly moving but the onInputOut signal is not dispatched if I don't move the pointer out of the initial position of the sprite !! This result in my sprite moving out of my pointer and continuing its journey until I move my mouse... Is it a phaser bug? Has anyone a solution to make this work? Thank you very much and have a good day, Simon Edit: I just tried to use the Phaser.InputHandler object instead but I got the same kind of bug. Here is the code: update() { if (mySprite.input.pointerOver()) { mySprite.x += 5; } }
  5. Hello everyone, first of all I am almost completly new to the whole javascript world, especially pixi.js. But due to I am planning to get a graphic intense project done, I try to figure out wheater pixi is the right choice. I will have a lot of user interaction, where I want to store certain input in my database. There will be a php backend handling ajax request and answering with json. I am looking for convenient ways to get user input. Is there any option to create input fields directly in pixi? I saw another approach where inputs are handled in modals, and therefore are "independent" from pixi. e.g. https://de2.big-bait.com/ What is the most common approach to get various data from the pixi frontend to my php backend? Best Regards Queue
  6. Hi guys, I'm having a hard time figuring out how to move a given object to the destination of a clicked mesh. Playground link (similar recreated scenario): http://www.babylonjs-playground.com/#2CFAMI#13 As you can see, the first two actions (hovering mouse in/out effect) work fine with every tile, but the animating action seems to always extract the position of the last added tile. I'm suspecting it's because I'm overwriting the tile variable (and thus its position values) or something. I also suspect that using instances for the tiles might be a better option, since in the game they also just use 5 different materials that are loaded before-hand...but first things first. Thanks in advance for taking a look!
  7. Hello. I'm new here and finally found a reason to post. I'm also new to this kind of development. To the point: I am creating a transition using Tween and a container. My issue is when the play/user clicks on the hit box to start the animation/tween it doesn't account for multiple clicks which then plays the animation again. How do I not allow the function to execute when is it already running? I'm developing with CreateJS in case that matters. Thanks in advance.
  8. 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?
  9. Howdy, In my game I lock the cursor to canvas, so I use a pointer lock and then track/draw a "virtual cursor" manually. However, this causes sprite click callbacks to no longer trigger: sprite.inputEnabled = true; sprite.events.onInputUp.add(this.OnSpriteClick, this); Is there any way to get it working ? As a workaround, I figured I can manually check but I am having a hard time since figuring it out. sprite.getBounds() returns local bounds - how do I translate the my cursor position to sprite's local space? I couldn't find a matrix member under Sprite definition in the docs... Any
  10. Hi! I'm currently implementing some actions via the ActionManager class in my project. I want to control a sprite with the keypad, and so I'm mixing the actual sprite animation (player.playAnimation) with a position animation where the sprite is moving a certain distance (custom animation with easing via scene.beginAnimation). Problem is, I'd like to have successive inputs blocked until the movement animation has finished so that the functions don't get called again during that time. Is that somehow possible ? Thanks in advance!
  11. I bought Construct 2 to see how good i am in drag-and-drop game development. It's not that i sucked, but with a programmer background i hate it. So i tried out Phaser and loved it from the beginning. But now after working for 5 days on my game i had to find out that there is no microphone input for phaser. Am i correct? I need it to work on my mobile device. At the moment i thought that i build the game via phoengap, but how do i activate a microphone input? Anyone of you had any chance in making this possible? Greetings from this croner of the planet and thanks for your time.
  12. How can I find the pointer's x/y coordinates in the world? Can I convert between camera and world coordinates?
  13. 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.
  14. 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
  15. 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?
  16. 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?
  17. 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?
  18. 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 !
  19. 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: https://phaser.io/examples/v2/input/gamepad-buttons 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!
  20. 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; sprite.events.onInputDown.add(function(){console.log("parent clicked")}); var child = game.make.sprite(0, 0, 'phaser'); child.width = 10; child.width = 10; sprite.addChild(child); child.inputEnabled = true; child.events.onInputDown.add(function(){console.log("child clicked")}); //child.input.priorityID = 1; } http://phaser.io/sandbox/edit/pfAcVgtC 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?
  21. 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); } };
  22. 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 this.game.input.keyboard.addKeyCapture([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?
  23. 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: www.xentha.com or join me on the Xentha slack (http://xentha.slack.com). All code is open-source and can be found at https://github.com/bdekk/xentha 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
  24. 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(this.game.world.centerX + 150, this.game.world.centerY + 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) this.subScore.events.onInputDown.add(function() { 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: https://github.com/craftycal/vaultage thank you in advance for you help.
  25. 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 ( this.map.isInBounds( targetTileX, targetTileY ) && !this.map.isWall( targetTileX, targetTileY ) ); } Here's the whole project's code: https://github.com/pietrzakacper/Roguelike-Dungeon-Crawler/tree/master/src/Game Can somebody help me please ?