Search the Community
Showing results for tags 'inputhandler'.
-
I'm working on an on-screen touch controller similar to the one in Phaser examples page: http://examples.phaser.io/_site/view_full.html?d=input&f=virtual+gamecontroller.js&t=virtual%20gamecontroller My game (this is for a new Phaser tutorial!): http://static.pablofarias.com/monster-kong/ I'm experiencing the following issue on a Nexus 5 with Android L (Chrome, Firefox and the Intel XDK App Preview app), when I do this sequence without taking the finger off the phone: right arrow button -> left arrow button -> right arrow button -> left arrow button --> lift the finger After I lift the finger, the character keeps on moving to the left, because the left arrow button never triggers a "out" event. Console output on the phone when doing this "right left right left" sequence without lifting the finger: right input down main.js:200 right input out main.js:195 left input out main.js:174 --> we see an "out" event for the left button, but no "over" event was ever triggered for this element right input over main.js:190 right input out main.js:195 left input over main.js:169 right input up main.js:205 --> no "up" or "out" event is triggered for the left button even after lifting the finger, that's why the character will keep on moving to the left after lifting the finger. (note: if you do the sequence in the opposite order, the same thing happens just to the other side) Version of Phaser 2.2.2 Code: //this game will have only 1 statevar GameState = { //initiate game settings init: function() { //adapt to screen size, fit all the game this.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL; this.scale.pageAlignHorizontally = true; this.scale.pageAlignVertically = true; //init physics system this.game.physics.startSystem(Phaser.Physics.ARCADE); //define some constants this.RUNNING_SPEED = 220; this.JUMPING_SPEED = 550; }, //load the game assets before the game starts preload: function() { this.load.image('ground', 'assets/images/ground.png'); this.load.image('platform', 'assets/images/platform.png'); this.load.image('player', 'assets/images/player.png'); this.load.image('fire', 'assets/images/fire.png'); this.load.image('goal', 'assets/images/goal.png'); this.load.image('arrowButton', 'assets/images/arrowButton.png'); this.load.image('actionButton', 'assets/images/actionButton.png'); }, //executed after everything is loaded create: function() { //size of the game world this.game.world.setBounds(0, 0, 360, 700); //floor this.ground = this.game.add.sprite(0, 638, 'ground'); //enable physics properties (the floor wont move) this.game.physics.arcade.enable(this.ground); this.ground.body.immovable = true; //level data. location of elements var levelData = { platformData: [ {x: 0, y: 430}, {x: 45, y: 560}, {x: 90, y: 290}, {x: 0, y: 140} ], fireData: [ {x: 200, y: 538}, {x: 60, y: 408}, {x: 190, y: 408}, {x: 180, y: 268}, {x: 200, y: 118} ] }; //group to keep all the hard platforms this.platforms = this.game.add.group(); //enable physics properties this.platforms.enableBody = true; //create each platform var self = this; var platform; levelData.platformData.forEach(function(element){ platform = self.platforms.create(element.x, element.y, 'platform'); //we don't need to enable body on each element, as we enabled body for the entire group, so body will be present here platform.body.immovable = true; }); //group for fire this.fires = this.game.add.group(); this.fires.enableBody = true; //create fire var fire; levelData.fireData.forEach(function(element){ fire = self.fires.create(element.x, element.y, 'fire'); }); //create goal this.goal = this.game.add.sprite(20, 90, 'goal'); this.game.physics.arcade.enable(this.goal); //create player this.player = this.game.add.sprite(10, 545, 'player'); this.game.physics.arcade.enable(this.player); this.player.body.gravity.y = 1000; //object for custom parameters we might want to add this.player.customParams = new Object(); //don't leave the world boundaries this.player.body.collideWorldBounds = true; //the camera will follow the player in the world this.game.camera.follow(this.player); //arrow keys this.cursors = this.game.input.keyboard.createCursorKeys(); //add touch control this.createButtons(); }, update: function() { //the player collides with the ground and platforms this.game.physics.arcade.collide(this.player, this.ground); this.game.physics.arcade.collide(this.player, this.platforms); this.game.physics.arcade.overlap(this.player, this.fires, this.burn, null, this); this.game.physics.arcade.overlap(this.player, this.goal, this.win, null, this); //platformer controllers this.player.body.velocity.x = 0; //get the active input id var activePointer = this.game.input.activePointer.id; //moving to the left with the keys or touch if(this.cursors.left.isDown || this.player.customParams.isMovingLeft) { this.player.body.velocity.x = -this.RUNNING_SPEED; } //moving to the right with the keys or touch else if(this.cursors.right.isDown || this.player.customParams.isMovingRight) { this.player.body.velocity.x = this.RUNNING_SPEED; } //jumping with the up arrow or action button if((this.cursors.up.isDown || this.player.customParams.canJump) && this.player.body.touching.down) { this.player.body.velocity.y = -this.JUMPING_SPEED; //if action button is kept pressed it wont jump more times this.player.customParams.canJump = false; } }, //burn player burn: function(player, fire) { console.log('auch!'); game.state.start('GameState'); }, //win the game win: function() { alert('you win!'); game.state.start('GameState'); }, render: function() { this.game.debug.bodyInfo(this.player, 0, 100); }, //create touch pad and enable input createButtons: function() { this.leftArrow = this.game.add.button(20, 535, 'arrowButton'); this.rightArrow = this.game.add.button(110, 535, 'arrowButton'); this.actionButton = this.game.add.button(280, 535, 'actionButton'); //fix to camera this.leftArrow.fixedToCamera = true; this.rightArrow.fixedToCamera = true; this.actionButton.fixedToCamera = true; //left arrow button this.leftArrow.events.onInputOver.add(function(){ this.player.customParams.isMovingLeft = true; console.log('left input over'); }, this); this.leftArrow.events.onInputOut.add(function(){ this.player.customParams.isMovingLeft = false; console.log('left input out'); }, this); this.leftArrow.events.onInputDown.add(function(){ this.player.customParams.isMovingLeft = true; console.log('left input down'); }, this); this.leftArrow.events.onInputUp.add(function(){ this.player.customParams.isMovingLeft = false; console.log('left input up'); }, this); //right arrow button this.rightArrow.events.onInputOver.add(function(){ this.player.customParams.isMovingRight = true; console.log('right input over'); }, this); this.rightArrow.events.onInputOut.add(function(){ this.player.customParams.isMovingRight = false; console.log('right input out'); }, this); this.rightArrow.events.onInputDown.add(function(){ this.player.customParams.isMovingRight = true; console.log('right input down'); }, this); this.rightArrow.events.onInputUp.add(function(){ this.player.customParams.isMovingRight = false; console.log('right input up'); }, this); //action button this.actionButton.events.onInputDown.add(function(){ this.player.customParams.canJump = true; }, this); this.actionButton.events.onInputUp.add(function(){ this.player.customParams.canJump = false; }, this); }};//initiate the Phaser frameworkvar game = new Phaser.Game(360, 592, Phaser.AUTO);game.state.add('GameState', GameState);game.state.start('GameState');