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. mtburdon

    Grouping buttons

    Hi all, I'm looking for a way to group buttons so I can animate between them. For example I have 15 levels in my game split between 3 worlds so 5 levels per world. I want to show buttons to these levels with 5 on the screen at one time, when the user clicks an arrow, the first 5 buttons slide left off screen and the next 5 slide in from the right. I initially thought of adding buttons to a group much like you do with sprites, then animating the groups on/off screen but it doesn't seem as though I can do this. What would be the correct way of doing this? Thanks, Martin
  2. mtburdon

    Pass parameter to button callback

    Hi there, I'm trying to do something which I think should be rather simple but I don't seem to be able to achieve it. When a button is clicked, I'm trying to pass a parameter to the button callback function, however if I pass anything to the function and console.log it out, it's always the clicked button. Is there a way to pass a parameter other than the button to the button callback? Thanks! Martin
  3. Hey so i moved away from the gameControler.js So instead i tried this. lftButton = game.add.button(0, 300, 'button', actionMoveLeft, this, 2, 1, 0); rhtButton = game.add.button(200, 300, 'button', actionMoveRight, this, 2, 1, 0); //but i know that it has to keep update alive cause when you only use this you have to press the button like crazy to make the player move. tried too add an extra pointer, and then check for active input and so on but still no good came from it. So please any better solutions too this would be awesome thanks! function actionMoveLeft() { player.body.velocity.x -= 900;'left');}function actionMoveRight() { player.body.velocity.x += 900;'left');}-Learning
  4. Hi! I'm new programming and I suppose this is a simple question but I've been looking around and couldn't find much. I have some png images with irregular forms to create buttons. I need the transparent part to be ignored (not clickable). How can I do this? I think I have, some way, to map the image, or I've been thinking in creating objects (like rectangules and triangles) over the image to aproximate to its shape. I've been reading about HTML5 canvas, but not sure if that's the solution. Thanks.
  5. cheshirepuss42

    When to use groups?

    I'm making a game where you make words by clicking letters. Eventually these letters will be images, but for now I'm trying to make something like a button: a clickable square with some text over it. I was familiar with how to do this in AS3, but now I don't have addchild at my disposal to build a combination of sprites. I thought that maybe I had to use groups to combine the button and the text, but this would mean that for every lettersquare I make a new group, which seems wrong. In examples I only see groups being used to handle multiple sprites, but the real use of them is unclear to me. So i guess I have two questions: - How do I make a button with dynamic text? - When and how do I use groups?
  6. Hi all! I have an interesting question today: I am making a game that requires me to build some buttons that use the same callback: this.buyButtons = []; for (var n=0; n<8; n++) { var y = 10 + (n * 35); this.buyButtons.push(this.add.button(10, y, 'buyButton', this.dealButton, this, 2, 1, 0)); }The buttons perform the same task with a modifier counter, how can I pass an "Index" or similar value to the Callback so it knows which of the 8 buttons was clicked? dealButton: function (pointer) { // which button was clicked this time? // setting a custom property value on each button object would work // but then I need a reference to the button to test against. },Thank you
  7. devilzk

    Button HitAreas

    Hi, I am using an existing sprite sheet (generated by TexturePacker originally for a starling based project). Actual sprite canvas is bigger and contains some transparent area. However, while creating the sprite sheet in TP, "Trim" option was selected and result is a subtexture entry like below: <SubTexture name="button1" x="63" y="1171" width="60" height="110" frameX="-12" frameY="-20" frameWidth="160" frameHeight="160"/>In Phaser, I am using following code to add this button : var tab1 = new Phaser.Button(, 18, 34, 'mysheet');tab1.frameName = 'button1';grp.add(tab1); //group is created in my game scene.My button is being added fine at the desired location. However, when I do mouseover I find that hitArea of button is off by exactly frameX and frameY value of atlas XML. So some area of button is not getting hand cursor at all while some "transparent" area near button is showing it. I tried changing value in XML for this button to 0 for both frameX and frameY and button was added at correct location. However, I feel thats not right solution, given that same assets are being used for starling project and I don't want to make manual changes. There must be something which I am missing in this process. Any clue, what I am missing? Thanks in advance
  8. Maxime

    Using button as toggle

    Hi everyone, I'm starting to use Phaser to play with html5 development. I'm trying to make a toggle for sound, for muting. Is it possible to use a button as a toggle? I found but I wanted to know if there is a solution that is not a tricky for doing it.
  9. I have just updated to the latest in the dev branch, and was going over my existing code to make sure it all still works, and I found a problem with some buttons. I have a Phaser.Button that use an image (720px by 249 px) with 3 frames (720px by 83px). During execution, I change the size of the button using the width and height properties. this.button.width = 300;this.button.height = 50;On some occasions, the buttons need to be half the width of the frame, and about two thirds the height. On these occasions, I notice that the hit box for the button is still the original frame size, while the sprite is being drawn at the expected size. In the previous version of Phaser I had, the hitbox was resizing with the rest of the button. After some small investigation, I found that I could get this to work as expected by slightly altering the checkPointerOver function in Input/InputHandler.js. When checking to see if the pointer is over the button, the code uses this.sprite.texture.frame.width and this.sprite.texture.frame.height, and that is always set to the original size of the frame. It doesn't take into account that I have resized the button to be smaller than this. This is my revised code, from line 478. I commented out the existing lines and added my modification below them to show the difference. checkPointerOver: function (pointer) { if (this.enabled && this.sprite.visible) { this.sprite.getLocalUnmodifiedPosition(this._tempPoint, pointer.x, pointer.y); // Check against bounds first (move these to private vars) //var x1 = -(this.sprite.texture.frame.width) * this.sprite.anchor.x; //Original Line var x1 = -(this.sprite.width) * this.sprite.anchor.x; var y1; //if (this._tempPoint.x > x1 && this._tempPoint.x < x1 + this.sprite.texture.frame.width) //Original Line if (this._tempPoint.x > x1 && this._tempPoint.x < x1 + this.sprite.width) { //y1 = -(this.sprite.texture.frame.height) * this.sprite.anchor.y; //Original Line y1 = -(this.sprite.height) * this.sprite.anchor.y; //if (this._tempPoint.y > y1 && this._tempPoint.y < y1 + this.sprite.texture.frame.height) //Original Line if (this._tempPoint.y > y1 && this._tempPoint.y < y1 + this.sprite.height) { if (this.pixelPerfect) { return this.checkPixel(this._tempPoint.x, this._tempPoint.y); } else { return true; } } } } return false; },I don't know if this has any other effects in other places, but my testing so far has not come up with any other unexpected behaviours. I'm not using pixelPerfect checking anywhere, so I didn't look at that.. Also, now that I have updated phaser, my entire phaser source folder is showing that I have made changes, so I dont want to try sort it out to make a pull request. Git be scary.