Search the Community

Showing results for tags 'Button'.

More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


  • HTML5 Game Coding
    • News
    • Game Showcase
    • Facebook Instant Games
    • Coding and Game Design
  • Frameworks
    • Phaser 3
    • Phaser 2
    • Pixi.js
    • Babylon.js
    • Panda 2
    • melonJS
    • Haxe JS
    • Kiwi.js
  • General
    • General Talk
  • Business
    • Collaborations (un-paid)
    • Jobs (Hiring and Freelance)
    • Services Offered

Find results in...

Find results that contain...

Date Created

  • Start


Last Updated

  • Start


Filter by number of...


  • Start



Website URL





Found 84 results

  1. SwanUp

    Remove Button

    Hi, I'm new to programming in Phaser so I'm having a few problems. A lot of them I could have figured out using the API or this forum here. But now I'm facing a problem which I can't solve. It's basically an easy thing but I just can't solve it. It's just the simple removing of an button. I tried everything using .destroy() or .kill() or even pendingKill() which I've seen on the examples on I've also tried things like making it invisible or use an invisible sprite or just a blanc picture but I can't set the frame to this. So is there anyone who can help me figuring that out I would really appreciate it. Hope to get some good replys, Luca
  2. Hey there! I'm extending the button class right now and I was wondering if it is possible to call a custom function when the mouse hovers over the button, since it already does the checking to change the pointer. MyButton.prototype._pointerOverHandler = function() { console.log("check"); }; This doesn't do the trick, I guess because _pointerOverHandler is a protected internal function. If there is no better way then to check for mouseover myself in the buttons update cycle, then so be it, just tell me - I just want to make sure I don't miss anything. Any help is greatly appreciated! Thank you
  3. The default setup for buttons in Phaser is that if you click on a button, then move the mouse (or finger on mobile) off the button, when you let go it still registers as a click/tap. Is there a way to have Phaser buttons perform like most buttons - where if you move the input off the button before you release, it does not activate the button?
  4. hi. I'm having a bit of a brain dead moment!!! I need a super simple if button is clicked restart the game state in the pause menu. (Im using the game pause as a cheat end game screen) this is the function I'm working on - all I need is to be able to click 'rePlay'. endGame: function() { = true; - 150, - 100, "game over", { font: "60px Raleway"} ); // place the reset button this.rePlay = game.add.sprite( - 150, + 100, 'rePlay'); this.rePlay.anchor.setTo(0.5, 0.5); // if replay is pushed --- this if (this.rePlay.event) { game.state.start(game.state.current);; } }
  5. Continuation of my Phaser game that I've been working on for the last few months. Working on a menu system now and trying to polish up the buttons with a hover state. I based my button code off of the example from Phaser. My issue stems from it doesn't work as it should. Right now it doesn't do any hover over change unless you hold down the mouse button and then move your mouse off and on the button. So rather than being able to change between the over and out images and then on click images it currently only has a change for on click and if you hold down the mouse button on a button and move the cursor out and over the button it changes.I know it is super wordy but I don't know how else to explain it. Here is my code: var newgameButton; this.newgameButton =, 50, 'NewGame', this.newGameOnClick, this, 1, 0, 2); this.newgameButton.onInputOver.add(this.over, this); this.newgameButton.onInputOut.add(this.out, this); this.newgameButton.onInputUp.add(this.up, this); up: function() { console.log('button up', arguments); }, over: function() { console.log('button over'); }, out: function() { console.log('button out'); }, newGameOnClick: function() {'LevelTut'); },
  6. I don't know how to call a class member function from a button declared within the same class. Here is my code: class Player { constructor() { this.sprite = game.add.sprite(0, 0, "player"); this.sprite.scale.setTo(scale.x, scale.y); this.sprite.x = gameWidth / 2; this.sprite.y = - (this.sprite.height / 2); game.physics.p2.enable(this.sprite, false); this.sprite.body.setCircle(45 * scale.x); this.sprite.body.setCollisionGroup(playerCollisionGroup); this.sprite.body.collides(bubbleCollisionGroup, playerHitBubble, this); this.sprite.body.static = true; this.button = game.add.button(0, 0, "player", onClick); this.button.scale.setTo(scale.x, scale.y); this.button.anchor.setTo(0.5, 0.5); this.button.x = this.sprite.x; this.button.y = this.sprite.y; this.shootingMode = ShootingMode.SPLIT; } onClick() { console.log(this); if (this.shootingMode == ShootingMode.SPLIT) { this.shootingMode = ShootingMode.BOUNCE; this.sprite.tint = 0x000000; } else { this.shootingMode = ShootingMode.SPLIT; this.sprite.tint = 0xffffff; } } } As it is, I get the error message that onClick is not defined. But if i call it as "this.onClick", then "this" in the onClick function is the button, not the class instance. Any ideas?
  7. How to set background color and text for a button in Phaser? Or it is possible only using Sprites?
  8. scriptkid

    Pause Button

    I am creating an HTML, JS ,CSS game for android. Can someone write an example for a pause button. PS:I have a timer and it need to be stoped when button is presst.
  9. When using v2.4.7 I was able to use onInputOver to change the button's tint. Now, in v2.4.8 the onInputOver is no longer triggered. Also, the mouse pointer no longer turns into a finger pointer on mouse over. Is anyone else experiencing these issues with the Button in v2.4.8? Example of code: ClassX = function() { ... this.button = game.add.button(100, 1000, null, actionOnClick, null, 2, 1, 0); this.button.onInputOver.add(this.mouseOver, this); }; ClassX.prototype.mouseOver = function() { this.someSprite.tint = 0x88d5ea; };
  10. Hello! I have 2 issues with buttons behaviour 1. If I press the button and move the mouse out of the button when I realease the mouse the action is fired 2. In Desktop, the button action is fired with right and left click but i just need left click, it can be configured? thanks for your help
  11. I have tested already on Safari on Mac, Chrome on both desktop and mobile and various Android default browsers, and FB.login works fine (on desktop it's the modal and on mobile it's a new browser window/tab). However, it's not working on any iOS 9 device I've tested. My code looks like this (TypeScript, "this" in the code it's a Phaser.State object): var playbtn =, 0, 'play-btn'); playbtn.inputEnabled = true; playbtn.onInputDown.add(() => { console.log("INPUT! Calling Facebook login..."); FB.login(() => { var response = FB.getAuthResponse(); console.log(response); /* REST OF LOGIN CODE */ }, {scope: 'public_profile, email', return_scopes: true}); }, this); The game is online right now ( for testing. It's a mini game I'm making for a local store Has anybody called FB.login from inside Phaser? What do I have to do for it to work?
  12. Hi, I would like to understand which option should I choose for a clickable image: My assumptions are: if I want my "button" to participate in physics, I should go with a Sprite. If my "button" does not involve physics, I can choose either Button or Image. Button from images differs that they have functionality to show different image frames for different states of a button (out, over, up). If I do not want my button to have different states, i should go with Image. Are my assumptions correct? Can you provide more real life scenarios when you have chosen one type of clickable image or the other and reasons behind that decision. For example, currently I would like to implement inventory item which is a rectangle shaped image. When user clicks it, button should show that the inventory item is selected by showing a dashed red rectangle with rounded corners around the item. As I understand, I should go with Image because I need "selected" state, which Button does not currently have and I have to implement it myself anyway. I do not know whats the best way to implement that dashed rectangle around the inventory item though - I would like to have it reused since all inventory items presumably have the same dimensions.
  13. Hi, I am trying to figure out whats the best way to create an inventory item (which could be an image, sprite or a button) with partial semi-transparent overlay. The idea is that user clicks on (enabled) inventory item, and then clicks on game area which puts that item on game area. That inventory item should be disabled for a specific period of time. What I am thinking is adding grey semi-transparent overlay on a button, which grows from bottom to top proportionally by be time elapsed. When time elapses, button is enabled again and overlay is removed. What's the correct way to do that?
  14. I can post some code if needed but, when testing my game on a Nexus 7 tablet whenever I press a button it stays in the down state, never returning to the out state. This situation doesn't occur on my Xperia V phone or on Google Chrome.
  15. Not sure why this happens, but spontaneously, say once every 15 loads, my buttons that are using spritesheets load the whole spritesheet instead of one individual frame (like they're supposed to, like they do most of the time). When it happens they still function normally as buttons, they still trigger their function, but the frames don't change on hover and they remain displaying the whole sheet. Attached a screenshot of three buttons in the state I'm talking about. They are supposed to be just the red rings, but the yellow frame is showing. Any ideas? Ever seen this happen before? I looked around but didn't find anyone else with this problem.
  16. Hi all, I am trying to extend the Phaser.Button to have different hit-areas depending on it's state: this.onInputDown.add(() => {this._isDown = true;let tempPhaserFrame = game.cache.getFrameByName(key, frameDown);if (tempPhaserFrame instanceof Phaser.Frame) {this.hitArea = tempPhaserFrame.getRect();// this.hitArea.offset(-this.anchor.x * this.hitArea.width, -this.anchor.y * this.hitArea.height);console.log(this.hitArea);}});However, when I do this the button immediately gets unpressed once the hitArea is changed. Why is this? How could I achieve a variable sized button hit check? Thanks.
  17. Greetings people smarter than myself. This is my first phaser self-guided exercise. I'm also very new to object oriented programming - and that may be the issue at hand. I have a single gamestate, "playgame", which has a placeTiles() function that I don't want to execute until a user clicks a "Begin" button. However, my code is not working as intended because the placeTiles() function is executing immediately upon loading. I think there is a fundamental concept that I'm missing. As you can see, I'm using preload, create, then some of my own - placetiles, showtile. Is it SOP for all of the functions inside playGame.prototype to run on initialization? If I don't want something running at that time, how do I prevent it or where should I move that block of code? Wouldn't it need to go within playGame somewhere? playGame.prototype = { myMoney: null, theEmpire: [], preload: function(){ game.stage.setBackgroundColor(0xEBEBFF); game.load.spritesheet("gadgets", "gadgets.png", tileSize, tileSize); }, create: function(){ // I've removed some code here where I create my background and color scheme // Create the Begin Button which should place the other tiles. var beginButton = game.add.button( 20,50,"gadgets",this.placeTiles(),this); beginButton.frame = 10; // There's a bunch more code here I've removed for this forum post */ }, placeTiles: function(){ for(var i=0; i < numCols; i++){ var serialButton = game.add.button( 250 * (i+1) , game.height/5 + (i*tileSpacing) , "gadgets" , this.showTile , this); serialButton.frame = i+1; serialButton.value = this.theEmpire[i]; }//i++ }, showTile: function(target){ //More functions, etc... },}; game.state.add("PlayGame", playGame); game.state.start("PlayGame"); };Any explanation or guidance would be most appreciated. Thank you for your time!
  18. Hello there, I was trying to switch states for my game with buttons. It was working for a moment and then now it throw me this error after I return Uncaught Error: Phaser.Signal: listener is a required param of add() and should be a Function. I looked into this link but it doesn't seem to fix despite try to call it differently Can anyone help me with this? RENAME_ME.MainMenu = function (game) {};var text;var counter = 0;RENAME_ME.MainMenu.prototype = {create: function () { = '#cb191f';text =, 16, '', {fill: '#fff'});var btn_startGame =,, 'cwa', this.toStartGame, this);btn_startGame.anchor.set(0.5);var btn_leaderboard =, + 100, 'cwa', this.toLeaderboard, this);btn_leaderboard.anchor.set(0.5);},update: function(){},toStartGame: function(){"Game");},toLeaderboard: function(){'Score');}};
  19. I created a mobile app using phaser JS and used keyboard key (up/down/right/left) to move my player (hero) and it is working fine eg: if (cursors.up.isDown) { player.body.velocity.y = -100; } hero is moving upward smoothly on press and hold the up key when i used the button for moving the player up/down/right/left : game.add.button(0,0,'btnUp',function(){ player.body.velocity.y = -400; },this); I have added function on click.. but for moving the player I need to press that up button again and again , there is no such 'HOLD' . Also pressing again and again the button player is not moving smoothly.. Can some one help me that how can i move the object (Player) on hold the button..
  20. Sakuk3

    Dragging Buttons

    I´m trying to add a button to a draggable sprite but as soon as i do that i´m not able anymore to click the button. Is there any solution to this problem?
  21. The Phaser buttons seem to have a bug, as onInputOver doesn't fire for a short time after any part of the game area is clicked. This becomes a problem very often for me, since I'm making a menu for my game and when I click on 'New game' button for instance, 3 save file buttons pop up and if I move my mouse over one of them the highlighting effect doesn't appear. And I also have a UI that shows the description of what the button does to the player on mouse over, which doesn't appear in this situation since the onInputOver hasn't fired. You might be thinking that perhaps I'm holding the click down as I move the mouse, but no, I have let go of the click even before moving the mouse. I made a simple code to test if this happens even in simple situations, to check if my own code isn't somehow creating this behaviour and yes it still the case. Here is the code, a video with audio cues on when I click and how the button highlighting doesn't happen after the click. var game = new Phaser.Game(window.innerWidth, window.innerHeight, Phaser.AUTO, '', { preload: preload, create: create, update: update });function preload() { game.load.spritesheet('main_menu_game', 'assets/menu_items/main_menu_game.png', 128, 40);}function create() { var button; button = game.add.button(30, 30, 'main_menu_game', function () { }, this, 1, 0); () { }, this); () { }, this); button = game.add.button(200, 80, 'main_menu_game', function () { }, this, 1, 0); () { }, this); () { }, this);}function update() {}
  22. HI Guys, Need a help. How can I make a button collidable object? I am using a group of buttons each having a different label. when a bullet hits any button i want to extract that label of that particular button. var bullets; bullets =; bullets.enableBody = true; bullets.physicsBodyType = Phaser.Physics.ARCADE; game.physics.enable(bullets, Phaser.Physics.ARCADE); var button = game.add.button(100, 400, 'button'); game.physics.enable(button, Phaser.Physics.ARCADE); game.physics.arcade.collide(bullets, button, collisionHandler, null, this); function collisionHandler (bullet, button) { button.kill();bullet.kill();} But my bullet is not colliding with the button. Please help!!!!!
  23. I am having issues getting the click events to fire for a basic Phaser.Button when running in canvas+ with cocoonJS. I am testing the app (using phaser v2.2.2) with the cocoonJS launcher (using cocoonJS v2.1.1.1) on iOS 8.1.2 on an iPhone 6. Here is what I have on a basic menu game state: var button = - 100, 215, 'assets', null, this, 'button_play_02.png', 'button_play_01.png', 'button_play_02.png', 'button_play_01.png');button.inputEnabled = true;button.fixedToCamera = true;button.smoothed = false; { console.log('button event onInputOut');}, this); { console.log('button event onInputDown');}, this);The button image displays in canvas+ but does not fire anything when clicked/touched. In webview+ and webview it works fine. The 'assets' is a texture atlas with the images being displayed for the buttons based on transparent pngs. I have seen similar issue on other topics (see below) but found no solution that worked. Any help would be greatly appreciated. Related topics:
  24. Hi guys im working on a really basic memory game , i am using buttons as the cards in order to make it work properly, my question is , at the beginning have all my cards face down, so its the same image for everycard, but when i dont know how to change the image in the button when its clicked? I've been searching but i am unable to find a solution. Thanks
  25. Gods

    tweening a button

    I am not familiar with tween but I am trying to tween a button when its clicked When I click it the tween works but the button doesnt work? I am not sure if I am doing it the best way either as I want all my buttons to have this tween effect. lmk thanks