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 2
    • melonJS
    • Haxe JS
    • Kiwi.js
  • General
    • General Talk
  • Business
    • Collaborations (un-paid)
    • Jobs (Hiring and Freelance)
    • Services Offered

Found 172 results

  1. Hi guys, I have created some input fields in the DOM and I place them above my phaser game with css. In my game I use game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL; so I use media queries to control the position of the input fields. I do it like this => #inputs { position: absolute; top: 30%; left: 40%; width:100%; } @media only screen and (max-width: 560px) { #inputs{ top: 35%; left: 20%; transform: scale(0.8,0.8); } } But it is almost impossible to follow the Phaser scaling!If you have any tips, please share!
  2. Key just pressed event

    I'm working on a simple platformer in my spare time with Phaser 3 and I'm currently working on trying to tighten up my controls. Currently I'm trying to prevent jump spamming so that every jump is an intentional action taken by the player. One press of the jump button should translate to only one jump being performed (ie, key must be released to jump again). Looking at the `Key` class, each key has a property of interest: `_justDown`. This appears to be the property I should use, however it's always `true`. Digging into the source code for v3.1.0 the only time this property is modified is during the process event (`ProcessKeyDown`) and when manually checking using `JustDown`: function create () { this.cursors = this.input.keyboard.createCursorKeys(); } function update () { if (Phaser.Input.Keyboard.JustDown(this.cursors.up)) { // Do some jumping } } This seems to work--sort of--except `ProcessKeyDown` gets called repeatedly and resets the property.. Is there an alternate approach I should be using? I know I could use a jump timer but that seems like a hack. Perhaps this scenario is simply a bug with Phaser at the moment?
  3. It used to work without problems. Now buttons and sprites will only be clicked/touched if I press ~100 pixels bellow them. I didn't change anything and the problem only exists on android. I think not even on all devices. I use cordova and the newest phaser version. I tried updating cordova but the problem persisted. I think it might have something to do with how I scale the game, but I have no idea how or why this really happens now. It would be great if someone knows why it happens and how to fix it. Here is my code for scaling: var width = window.innerWidth; var height = window.innerHeight; var targetW = 150; var scale = width/targetW; var targetH = height/scale; game.scale.setGameSize(targetW, targetH); game.scale.scaleMode = Phaser.ScaleManager.USER_SCALE; game.scale.setUserScale(scale, scale); game.renderer.renderSession.roundPixels = true; Phaser.Canvas.setImageRenderingCrisp(this.game.canvas) ; And here is how I create buttons: game.add.button(0,50,'play',function(){this.save();game.state.start('Games');},this);
  4. Hi, I have an ECS engine and want to keep the camera, input, and entities separate. In this case the GameCamera is a system that is assigned an entity to read it's position and direction from and update the BabylonJS camera with. I already have a working Controller system that attaches to the scene's `onKeyboardObservable` and I am going to use the `onPointerObservable` for mouse movement. However I don't see how to set the `Camera` view direction, only it's position. Is there no simple way to either specify a normal vector3 for direction or a rotation radian and an up vector? I don't see anything in the documentation or in the source, what am I missing? Thanks!
  5. I've been struggling to figure out if the "_justDown" property of a key is working properly or not. It seems to always be true as long as the key is held just like "isDown" when accessed directly (ex: someKey._justDown). It seems that the intention is to use the Phaser.Input.Keyboard.JustDown() getter method, but it returns the same results as key.isDown and key._justDown (ex: Phaser.Input.Keyboard.JustDown(someKey)) If this is a bug then I'm comfortable enough to try and make a fix, but I figured I should first see if I'm misunderstanding how to use it in the first place. (Using Phaser 3 beta 19)
  6. I've been prototyping a local co-op game that involves multiple players moving around on the same screen. Where my trouble has come, is with inputs and handling multiple key presses and movement. I've tried using the action manager to apply forces, impulses, or setting linear velocity on key down, but all of them seem to feel very buggy, especially when trying to press multiple keys. A sample of my code looks like the following: scene.actionManager.registerAction(new BABYLON.ExecuteCodeAction(BABYLON.ActionManager.OnKeyDownTrigger, function (evt) { console.log(evt.sourceEvent.key); var velocity = player.physicsImpostor.getLinearVelocity(); if (evt.sourceEvent.key == "w" || evt.sourceEvent.key == "W") { //player.applyImpulse(new BABYLON.Vector3(0, 0, 10), player.position); //player.physicsImpostor.applyForce(new BABYLON.Vector3(0, 0, 100), player.position); player.physicsImpostor.setLinearVelocity(new BABYLON.Vector3(velocity.x, velocity.y, 20)); } if (evt.sourceEvent.key == 'a' || evt.sourceEvent.key == 'A') { //player.applyImpulse(new BABYLON.Vector3(-10, 0, 0), player.position); //player.physicsImpostor.applyForce(new BABYLON.Vector3(-100,0,0), player.position); player.physicsImpostor.setLinearVelocity(new BABYLON.Vector3(-20, velocity.y, velocity.z)); } if (evt.sourceEvent.key == 's' || evt.sourceEvent.key == 'S') { //player.applyImpulse(new BABYLON.Vector3(0, 0, -10), player.position); //player.physicsImpostor.applyForce(new BABYLON.Vector3(0, 0, -100), player.position); player.physicsImpostor.setLinearVelocity(new BABYLON.Vector3(velocity.x, velocity.y, -20)); } if (evt.sourceEvent.key == 'd' || evt.sourceEvent.key == 'D') { //player.applyImpulse(new BABYLON.Vector3(10, 0, 0), player.position); //player.physicsImpostor.applyForce(new BABYLON.Vector3(100, 0, 0), player.position); player.physicsImpostor.setLinearVelocity(new BABYLON.Vector3(20, velocity.y, velocity.z)); } })); scene.actionManager.registerAction(new BABYLON.ExecuteCodeAction(BABYLON.ActionManager.OnKeyUpTrigger, function (evt) { console.log(evt.sourceEvent.key + " up"); var velocity = player.physicsImpostor.getLinearVelocity(); if (evt.sourceEvent.key == "w" || evt.sourceEvent.key == "W" || evt.sourceEvent.key == 's' || evt.sourceEvent.key == 'S') { player.physicsImpostor.setLinearVelocity(new BABYLON.Vector3(velocity.x, velocity.y, 0)); } else if (evt.sourceEvent.key == 'a' || evt.sourceEvent.key == 'A' || evt.sourceEvent.key == 'd' || evt.sourceEvent.key == 'D') { player.physicsImpostor.setLinearVelocity(new BABYLON.Vector3(0, velocity.y, velocity.z)); } })); My question is, what is the best practice to handle movement of a simple object (I'm currently just using a cube), and have it work with multiple key presses? Keep in mind this will be repeated for multiple players, so I'd like to to be as modular as possible
  7. Global key event in all states

    Hey there, I'm trying to get a key to always call a certain function, regardless of which state my game is in. At the moment, my code is this: var escKey = null BasicGame.Boot = function (game) { //... }; BasicGame.Boot.prototype = { init: function () { escKey = game.input.keyboard.addKey(Phaser.Keyboard.ESC); escKey.onDown.add(function(){console.log("esc")}, game); } And so on. escKey stays defined in all states, but onDown doesn't trigger. If I move the two lines within init to a state, I can use ESC in that state, but not in any state after that. Is there a way to do this?
  8. Input Events for touch screen

    A game I made that is playable here: http://gametheorytest.com/gerry/ Has the input events defined as such: this.sprite.events.onInputDown.add(onInputDownTile, this); this.sprite.events.onInputOver.add(onInputOverTile, this); this.sprite.events.onInputOut.add(onInputOutTile, this); On a computer it works great. On a touch device, there seems to be a lack of sensitivity. So sometimes if you tap and move your finger, it doesn't register a touch at all. Sometimes it will register the first touch, but not pick up the onInputOver on the next tile. Any ideas why this would not be accurate on touch?
  9. custom input setting for user

    Hi, I am trying to make a menu which lets the user bind the in-game inputs. But I have no idea how to do that... Maybe there is a way to detect which input he presses and then use this information when creating input... Thanks beforehand.
  10. Click event on sprite

    Basically I am making a cookie clicker type game for fun. I am trying to make the counter increase each time the sprite is clicked on but for some reason the click event on the sprite is never fired if i click on the sprite. I can't figure out why the click event isn't firing does anyone know why? Or a better way of doing this? <!doctype html> <html> <head> <meta charset="UTF-8" /> <title>Shook Clicker</title> <script src="https://cdn.jsdelivr.net/npm/phaser-ce@2.9.1/build/phaser.js"></script> </head> <body> <script type="text/javascript"> var game = new Phaser.Game(800, 600, Phaser.AUTO, '', { preload: preload, create: create, update: update }); var clicker; var clicks = 0; var scoreText; function preload() { game.load.image('clicker', 'assets/cookie.png'); } function create() { clicker = game.add.sprite(game.world.centerX, game.world.centerY, 'clicker'); clicker.anchor.set(.5); clicker.scale.setTo(.1,.1); clicker.inputEnable = true; scoreText = game.add.text(16,16, 'Computers Built: 0', {fontSize:'32px', fill: '#555'}); clicker.events.onInputDown.add(listener, this); } function listener() { clicks++; scoreText.text = 'Computers Built: ' + clicks; } function update() { } </script> </body> </html>
  11. So I am new to use Phaser to develop for mobile browser game. I have created the game in a workable state on PC and it does everything I want. It is basically a match3 game where everytime you tap/click on something you interact with the item. But for some reason I can't get any input to work on mobile. I have an iPhone6 and use safari, I have setup Firebug so that I can see the logs, but even if I add a simple "game.input.onDown.add(test, this); with a simple function to display a console message. It never gets fired in the mobile browser. How would I go about making this work? (It does however work on Android, tested it on Chrome, so that puzzles me even more). For each item that is clickable I have: function Gem(x, y, gemType){ this.gemType = gemType; this.spriteName = gemType.spritename; this.x = x; this.y = y; this.gemPhysics = GameManager.getGrid().addToGrid(this); this.gemPhysics.inputEnabled = true; this.gemPhysics.input.enabled = true; this.gemPhysics.events.onInputDown.add(listener, this); } function listener(){ console.log("Touch!!"); if(GameManager.canInteract()){ GameManager.getGrid().canRemoveSameColour(this); } } And the game setup looks as follows: var gameWidth = 800; var gameHeight = 480; var game = new Phaser.Game(gameWidth, gameHeight, Phaser.CANVAS, '', { preload: preload, create: create, update: update }); //var gems; function preload() { game.load.image('sky', 'assets/sky.png'); game.load.image('star', 'assets/star.png'); game.load.image('star_blue', 'assets/star_blue.png'); game.load.image('star_green', 'assets/star_green.png'); game.load.image('star_red', 'assets/star_red.png'); game.load.image('star_purple', 'assets/star_purple.png'); game.load.image('star_lightblue', 'assets/star_lightblue.png'); game.load.image('star_black', 'assets/star_black.png'); game.load.image('star_boost', 'assets/star_boost.png'); game.load.image('reset_button', 'assets/resetbutton.png'); game.load.image('tile', 'assets/gridtile.png'); game.load.spritesheet('explosion', 'assets/explosion.png', 118.2, 118); game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL; game.scale.fullScreenScaleMode = Phaser.ScaleManager.EXACT_FIT; } var gameMngr; var scoreText; var isFullScreen = false; function create() { game.input.enabled = true; game.inputEnabled = true; if (!game.device.desktop){ game.input.onDown.add(gofull, this); } this.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL; this.scale.minWidth = gameWidth/2; this.scale.minHeight = gameHeight/2; this.scale.maxWidth = gameWidth; this.scale.maxHeight = gameHeight; this.scale.pageAlignHorizontally = true; this.scale.pageAlignVertically = true; this.scale.setScreenSize(true); // A simple background for our game game.add.sprite(0, 0, 'sky'); game.physics.startSystem(Phaser.Physics.ARCADE); // Grid var grid = new Grid(14, 10, 175, 100, 30, 'tile'); this.gameMngr = new GameManager(); GameManager.setGrid(grid); GameManager.resetScore(); // Start Game GameManager.startGame(); scoreText = game.add.text(300, 0, "Score", { font: "40px Ariel", fill: "#ffffff", align: "center" }); } function update() { //console.log(game.device.desktop + ", " + game.device.iPhone); scoreText.setText("Score : " + GameManager.getScore()); if (!game.device.desktop && !isFullScreen){ gofull(); } } function gofull() { console.log("Go Full!!"); game.scale.startFullScreen(false); isFullScreen = true; } In there I also attempted to try and force the mobile version to go full screen, but for some reason that also doesn't seem to work properly. All in all, I can't seem to trigger any touch/input events in a mobile browser.
  12. Mouse is down for moble

    I have been looking for a solution for a while now! the idea is to move the zombies to the point i hold the mouse in and stop when i release the mouse, this is my movement code: //check mouse down if (game.input.mousePointer.isDown) { //move all zombies zombies.forEach(function(zombie) { game.physics.arcade.moveToPointer(zombie, 400); //if in box reset velocity if ( Phaser.Rectangle.contains( zombie.body, game.input.x, game.input.y ) ) { zombie.body.velocity.setTo(0, 0); } //end if }, this); //end forEach } else { zombies.forEach(function(zombie) { zombie.body.velocity.setTo(0, 0); }, this); //end forEach } //end else if (game.time.now > nextFire) { fire(); } basically what i want is to check for the same input in mobile devices, i have tried using: game.input.onDown.add(move , this); but it didn't work well for me because the zombies kept on going on that direction forever. please help:( this is the full code: http://github.com/msal4.github.io/increment/
  13. Input not reactivating on mobile

    Hello GameDevs, I am doing a turn-based board game as a college project for both desktop and mobile browsers using PhaserJS framework. However I have ran into a problem regarding the input on mobile. Here's a part of my code: function move (sprite){ //disabling input so the user can't interrupt the moving sprite game.input.enabled = false; //move the selected sprite to a blue tile game.physics.arcade.moveToObject(spriteSelecionado,sprite,60,600); //function to stop the sprite from moving permanently game.time.events.add(600, function () { //stops the sprite spriteSelecionado.body.velocity.x = 0; spriteSelecionado.body.velocity.y = 0; //clean the tiles used for moving the sprite movimentacao.callAll('kill'); /*This is where the problem resides. While on desktop browers it works just fine, the line above doesn't re-enable the input on mobile after a couple times it is used */ game.input.enabled = true; }, this); } I am currently disabling all the input while the moving sprite hasn't reached its destination so the player doesn't end up clicking midway on it and screwing up the game animations. After the turn ends, I reactivate the input so game continues. The problem is that this just works twice on mobile, If I try to move the game sprites twice all my Input stops responding. (if I click on the console whi
  14. Hello, everyone. I am using Phaser 2.8.3 Basically I want to add a sprite to two groups. In my game I want three columns so I have three column groups. this.leftColumn = game.add.group(); this.middleColumn = game.add.group(); this.rightColumn = game.add.group(); Later I add buttons into these groups this.spawnRateButton = []; this.spawnRateButton.push(this.leftColumn.create(0,0,"custom-left-button")); this.spawnRateButton.push(this.middleColumn.create(0,0,"custom-middle-button")); this.spawnRateButton.push(this.rightColumn.create(0,0,"custom-right-button")); for(var i=0;i<3;i++){ this.spawnRateButton[i].inputEnabled = true; this.spawnRateButton[i].events.onInputDown.add(this.buttonPress,this); } However here comes my problem. I want these columns to be scrollable, so I have to utilize this https://github.com/trueicecold/phaser-scrollable . this.scroller = game.add.existing(new ScrollableArea(x, y, width, height, {horizontalScroll: false})); //... this.scroller.addChild(this.leftColumn); this.scroller.addChild(this.middleColumn); this.scroller.addChild(this.rightColumn); this.scroller.start(); The scrolling works, however, the events.onInputDown of the spawnRateButtons do not. I click the buttons and nothing happens. When I take away the scroller everything works fine except for the scrolling, of course. When I add the sprites individually to the scroller it doesn't work either. I am guessing this is because I am trying to add the sprites to two groups? Is there a correct way to do this?
  15. 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?
  16. 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; } }
  17. Input Forms in pixi

    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
  18. 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!
  19. Multiple Clicks

    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.
  20. 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?
  21. 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
  22. 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!
  23. 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.
  24. 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.