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

  1. Hi All, Need help AGAIN. I have 2 Viewports, when I,m switching between cameras (scene.activeCamera=camera;) my buttons stop working. I don't know what I'm doing wrong. PlayGround
  2. Hi, Any doubt how to align GUI.Button horizontally inside GUI.StackPanel. I was playing around but no luck. Playground:
  3. Just noticed an issue. Lets say we have a group named OurGroup with three buttons (represents settings window with buttons 'soundOn', 'pause', 'close'). Each button have its own inputDown listener (or any else like inputOver, inputOut etc.). Then we add this group to the game via It works perfect, all the buttons are clickable and so on. Some time later, we want to remove the group from the game (i.e. user clicked the close button on our window) by itself: /*somewhere in the OurGroup class*/ if(this.parent) { this.parent.removeChild(this); } OK, the OurGroup has succesfully removed from the game, it's invisible. But! The listeners attached to the group's buttons are still active and react the input events! Could someone explain me is it a bug or I'm doing something wrong? I migrated to Phaser from flash, and there after have removed a DisplayObject from a stage, all listeners attached to it were removed as well.
  4. Is it possible to make a button input that ignores the transparent area of the image? I have several buttons on the same position and the transparent areas overlaps so it is not allowing me to press the buttons on the bottom.
  5. Change material colour

    Hi everyone, I need help. Could someone write for me function 'myFunction' which changes the colour of the material. I don't know in which place I need add this. Commented function setTimeot change the colour. When I added function 'myFunction' in this place i have error 'myFunction is not defined'. Do you have good tutorials for the beginners? <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html" charset="utf-8"/> <title>Babylon - Getting Started</title> <!-- link to the last version of babylon --> <script src="js/babylon.2.5.js"></script> <link rel="stylesheet" href="css/style.css"> </head> <body> <canvas id="renderCanvas"></canvas> <div> <button onclick="myFunction()">Click me</button> </div> <script> window.addEventListener('DOMContentLoaded', function() { // your code here var canvas = document.getElementById('renderCanvas'); var engine = new BABYLON.Engine(canvas, true); var createScene = function() { // create a basic BJS Scene object var scene = new BABYLON.Scene(engine); // create a FreeCamera, and set its position to (x:0, y:5, z:-10) var camera = new BABYLON.FreeCamera('camera1', new BABYLON.Vector3(0, 5,-10), scene); // target the camera to scene origin camera.setTarget(BABYLON.Vector3.Zero()); // attach the camera to the canvas camera.attachControl(canvas, false); // create a basic light, aiming 0,1,0 - meaning, to the sky var light = new BABYLON.HemisphericLight('light1', new BABYLON.Vector3(0,1,0), scene); // create a built-in "sphere" shape; its constructor takes 4 params: name, subdivisions, radius, scene var sphere = BABYLON.Mesh.CreateSphere('sphere1', 16, 2, scene); // move the sphere upward 1/2 of its height sphere.position.y = 1; // create a built-in "ground" shape; its constructor takes 5 params: name, width, height, subdivisions and scene var ground = BABYLON.Mesh.CreateGround('ground1', 6, 6, 2, scene); // Define a material var material = new BABYLON.StandardMaterial("std", scene); material.diffuseColor = new BABYLON.Color3(0.5, 1, 0.5); //setTimeout(function(){ material.diffuseColor = new BABYLON.Color3(0.5, 1, 2); }, 3000); // Apply the material sphere.material = material; // return the created scene return scene; } var scene = createScene(); engine.runRenderLoop(function() { scene.render(); }); window.addEventListener('resize', function() { engine.resize(); }); }); </script> </body> </html>
  6. Hi, I have several buttons in my game and I want them to disappear when I click on it. But it seems that the event "onInputOut" is not fired when I set the property button.visible = false in the callback function of the button. Is this a normal behaviour ? Because this causes some problems in my game logic. Is there a way to force the event "onInputOut" to be launched ? I tried button.onInputOut.dispatch() but it does not work. Thanks
  7. Context: in my game i got the setup you can see in the image. I got an image larger than the window, so i'm able to displace the image with the window's scroll bar, in the lower part of the image I got a button so it's initially hidden. Problem: When I scroll down to see the button and put the pointer over it, it doesn't work for a few seconds (it doesn't execute input events. No hand cursor), after moving the cursor a little while over the button, it works again. I also checked the variables "visible" and "inputEnabled" in the update() but they are always true, so I suppose Phaser do something else to disable elements which are off-screen, and re-enable them once they are on-screen. Any suggestion would be highly appreciated.
  8. Hello. I managed to create code that draws a button along with a textfield and also with the four states that a button have, onInputUp, onInputDown, onInputOver and onInputOut. However, it is still experimental, and since I add text object as a child of Phaser.Graphics, the text is a bit blurry. But the bigger issue is, new graphical elements are added without removal, so I have a bug somewhere, or it is just not possbile to create dynamically drawn button with text and all states and to add custom click event handler. I will post another topic for the code itself, but here i just want to ask if there is a plugin for Phaser that draws buttons dynamically, or buttons on which I can change the text dynamically? Or how can I create button and be able to change its text dynamically? Should I just place Graphics object below and on top a text field both pointing to the same click listener?
  9. Button things

    Lets say that i want to scale button if i over and scale back if out. And i want to set callback when click. It is my realisation, but she is ugly. Any idea to make it pretty? (put it into phaser sandbox function create() { var button1 = game.add.button(0, 0, 'phaser', function(){console.log(1)}, this); var button2 = game.add.button(0, 50, 'phaser',function(){console.log(2)}, this); var button3 = game.add.button(0, 100, 'phaser',function(){console.log(3)}, this); var menu =; menu.addMultiple([button1, button2, button3]) menu.callAll('events.onInputOver.add', 'events.onInputOver', function(btn){ if (btn.isTweening !== true) { btn.isTweening = true; let coord = { x: btn.scale.x * 1.1, y: btn.scale.y * 1.1 } let tween = game.add.tween(btn.scale).to(coord, 100, Phaser.Easing.Linear.In, true).onComplete.add(function(){btn.isTweening = false}); coord = { x: btn.scale.x * 1, y: btn.scale.y * 1 }{ game.add.tween(btn.scale).to(coord, 100, Phaser.Easing.Linear.In, true) }) } else{ console.log(4) } }); }
  10. 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
  11. Call function on Button Mouseover

    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
  12. 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?
  13. simply click button to restart

    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);; } }
  14. Button Hove Effect Isn't Working

    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'); },
  15. 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?
  16. Button Background Color

    How to set background color and text for a button in Phaser? Or it is possible only using Sprites?
  17. 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.
  18. v2.4.8 Button onInputOver

    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; };
  19. Unexpected button behaviour

    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
  20. 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?
  21. Image, Button or Sprite?

    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.
  22. 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?
  23. Button staying down once pressed

    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.
  24. 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.
  25. Multi-hitbox Phaser Button

    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.