Search the Community

From what I've read I need PIXI text input plugin to use that feature. I need to write input text module as I don't want to use plugins. I'd be thankful if you help me out to understand if I can use HTML tags in Pixi.js somehow (Everything's build up on canvas, and I haven't seen any example this far that does so, maybe I'm missing sth) if not could you provide some resources that can help me figure it out? Are there any finished components I can use or do I need to write anything from scratch? (not only input related but also buttons and stuff like that) Thanks in advance!

I'm using melon 6.3.0 and I'm self hosting my game. If I run the game via Firefox, it works just fine. (I've also tested MS Edge and the latest version of Opera, they also work) However, when using chrome, the keyboard input acts as though it is 'stuck'. If I push one of the keys I have bound for movement to the left (A or the left arrow), the game behaves as though the key is still pressed even after it has been released. This makes it impossible to move to the right, as the game no longer seems to respond to pressing D or the Right arrow key. However, I can still press the spacebar and the player shoots.

I would like to make a group interactive. The following did not work groupOfZombies.setInteractive(); Then just to add the resulting code to discover which sprite was clicked needs to me access the sprite-key, i have been looking for it but I can't seem to find it (mainly because most code functions using 'this') spriteCat2.setInteractive(); spriteCat2.on('pointerdown', function () { var thisSpriteName = this.key; console.log(thisSpriteName); }); any help would be appreciated!

How can i enable input for bitmap

Whether Camera is the parent of a Mesh (in example below), or the other way around (in my personal project), when moving "fast" at speed = 1000, eventually there is some (discrepancy) jitter visible on the mesh - although it's probably the camera that isn't set correctly (some matrix?) http://www.babylonjs-playground.com/#P1YTR#1 Just click, rotate some, then hold Up and Left arrows and wait til the jitters come, at a few seconds in. Just an example of keys used. Even after stopping, if you try to move a bit or look-around, the jitter is already there. A painful bug for my space sim, where I need to move sonic faaaaast!

Hi, this is really simple, I just want to include an HTML text input for my hi score entry page where the player can enter their name. I want the text input to appear right in the middle of my game canvas. But I am having trouble positioning any HTML element in relation to the game canvas, or any items within the game div. (I can't seem to even make the input appear on the top left corner of the game canvas). Is there a simple example for displaying an html INPUT element within a Phaser game? Or is there maybe a better way of grabbing text input within a Phaser game? Any ideas? Thanks Owen

Hi everyone, are fine ? Sorry if this question is too simple but I'm losing my sanity for some hours and I don't reach solve the problem alone. I migrating a old project made in Phaser2 to Phaser3 and maybe I the lost the way to do things in Phaser3 way. I trying to the something bellow(phaser2) in Phaser3: input.keyboard.addKey(Phaser.Input.Keyboard.LEFT).onDown(callback); But it don't work on Phaser3, Key don't have onDown method (don't have any method that I see in source code) and I don't know a way to add eventListener to keys. I really don't espect to use verifications on update function, has another way to process keyboard input events ? Thanks for any help.

Hi all, I'm having an issue where sometimes .onup isn't registering after releasing a key, has anyone else encountered this? Is there a workaround that will still allow multiple keypresses? Any help is greatly appreciated, many thanks!

I have stared in the face of madness with this little problem, converting some old games from a different engine I used phases to space out calls, but I hadn-t realised this wouldn-t work with the underlying js... eg I had a function with pointerdown that reset which sprite was selected input.on('pointerdown', function... following calling that function I LATER call a second function on pointerdown which relied on getting a possible new sprite selection (but the two functions couldnt be merged for technical purposes) input.on('pointerdown', function It didnt work well, it seemed the code was a click 'behind' , I tore my hair out, I drank coffee until i started itching all over, then i realised this was mitigated by a double click... ah ha! I simply made the second function pointerup. input.on('pointerdown', function... input.on('pointerup', function... Ok it isnt essential for me right now, but I would like to know how i could guarantee that two event driven functions are called in a certain order, is it possible? I appreciate this was probably javascript ignorance!

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!

I'm using PhaserCE 2.10.0 and I've setup my game in (256) x (256*aspectRatio) in portrait mode using the SHOW_ALL scale method to size up to the screen. Everything's been going pretty well, but now I've run into a weird issue. I'm just not sure if it's a bug I should report or if I should just be doing something different. On android(in chrome and the cocoon dev app) pointer coordinates(read via input.pointer#.x|y) max out at 104. On desktop, it works just fine, with x coordinates maxing at 255 and y maxing dependent on the screen aspect ratio. Here's a debug shot of my input dev view where I touched 2 fingers down near the center of the screen and moved them to opposite corners of the view. I've tried a few different versions of Phaser 2.10.1, 2.7.10, and 2.4.9 and found that the issue goes away with 2.4.9. Obviously, I could just use an old version for now but... I don't wanna. Anyone with more Phaser experience know what might have changed to cause this? If it helps, here's my init call: App.game = new Phaser.Game({ width: scale.width, height: scale.height, renderer: Phaser.AUTO, antialias: false, resolution: 1 }) Boot state setup: Boot.prototype.create = function _Boot_create() { this.game.time.advancedTiming = App.debug this.game.renderer.renderSession.roundPixels = true this.game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL this.game.scale.pageAlignHorizontally = true this.game.scale.pageAlignVertically = true this.game.scale.refresh() this.game.state.start("load") } Play state create: Play.prototype.create = function _Play_create() { var scale = Util.scale() this.world.resize(scale.width, 5*scale.height) this.physics.arcade.gravity.y = 750 this.stage.backgroundColor = "#aaddff" this.player = new Player(this) new Floor(this, this.game.world.height) new Platform(this, 64, this.game.world.height - 64, 64, 1) this.camera.follow(this.player.sprite) this.controls = new Input(this) } Input setup for Play state: var Input = function _Input ( scene ) { this.scene = scene this.cursors = this.scene.input.keyboard.createCursorKeys() this.scene.input.gamepad.start() this.pad1 = this.scene.input.gamepad.pad1 this.p1 = this.scene.input.pointer1 this.p2 = this.scene.input.pointer2 this.butt = 0 this.scene.input.gamepad.onDownCallback = function (e) { this.butt = e } }

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?

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)

Hi guys! See my example of input text in Canvas using Phaser with CanvasInput! Codepen: http://codepen.io/jdnichollsc/pen/waVMdB?editors=001 Regards, Nicholls

Hey all, Just wanted to let you know that I created a phaser text input plugin. Should work like a normal input text box, and unlike CanvasInput it also works in WebGL renderer. It's also tested on iOS9 and mobile Chrome. There are some limitations right now for using it, but the basic concept works. Head on to github to check it out :)

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);

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!

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?

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

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?

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.

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/[email protected]/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>

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.

Hi, Is is possible to drag many objects at once? Together? I would think that putting all sprites into one group and adding drag to the group would work, but drag doen't work on groups... Any ideas? Thanks.

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/