Search the Community

Showing results for tags 'button'.



More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

  • HTML5 Game Coding
    • News
    • Game Showcase
    • 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

Found 80 results

  1. I've just started learning pixi.js 2 days ago and I'm stuck with this. I'm trying to register mouse button events on 3 different buttons which I generate this way. function initializeButtons(bg: PIXI.Graphics) { let xPos = (canvasWidthHeight/2) - 130; for(let i = 0; i < 3; i++) { let temp = PIXI.Sprite.fromImage(BOX_SPRITES[0]); temp.scale.set(0.5); temp.anchor.set(0.5, 0.5); temp.position.x = xPos; temp.position.y = canvasWidthHeight / 2; temp.interactive = true; temp.buttonMode = true; temp.on('pointerdown', function() {onClick(i);} ); rewardBoxes.push(temp); bg.addChild(temp); xPos += 120; } } However, everytime I try to click on any button, it's always the last button that gets clicked. What is the proper way to achieve this? Thank you!
  2. Hello, I recently started working on a small game using Phaser 3. I started of by creating a new scene for my mainmenu with a "play" button. And there is my problem: I can't add a button to my scene. My main JS file looks like this: var dimensions = { height: window.innerHeight, width: window.innerWidth } var config = { type: Phaser.AUTO, width: dimensions.width, height: dimensions.height, scene: [Mainmenu], physics: { default: 'arcade', arcade: { gravity: {y: 200} } } }; var game = new Phaser.Game(config); My mainmenu class looks like this: class Mainmenu extends Phaser.Scene { constructor() { super({key: 'Mainmenu'}); } preload() { this.load.image('sky', 'assets/sky.jpg'); this.load.image('startBtn', 'assets/button.jpg'); } create() { console.log(this); this.sky = this.add.image(window.innerWidth / 2, window.innerHeight / 2, 'sky'); this.startBtn = this.add.button(100, 100, 'startBtn', startGame, 2, 1, 0); } } function startGame() { console.log('Game started!'); } But the console is stating that "this.add.button is not a function" at line 14. So I ask you where my error is and how can I make it work? With best regards, Techassi
  3. Button with different size images.

    Hi, I am first time user of Phaser (v2.6.2) and I need to create a help button and art has provided me with the attached atlas. when i am creating a button, it's states(over, down and out) are not aligned. Can some body help me how can I create a button with the following atlas. Thanks and Regards, Ankush Sharma. info_button.json
  4. Hi, do you plan on adding button masks for gui buttons, so that we can have buttons that are only clickable on the desired areas? Here's an example: http://www.babylonjs-playground.com/#WWBIKZ The button image is a circle, but the clickable area is actually a rectangle. Buttons can also have other different shapes, like cut off edges. I guess the best way would be to add some kind of button mask, maybe an optional second image that contains information about the clickable/hover area (like white color => clickable, alpha=0 => gets ignored) Thanks.
  5. OK, this is weird. I spent a lot of time trying to figure out why my image objects wasn't firing when I tapped on it (it works on desktop). After several tests I noticed that it happened that on mobile screen the clickable area was off of the image (displaced). I found that someone had a similar issue and figured that it had something to do with devicepixelratio when using Phaser.CANVAS. I couldn't test with Phaser.AUTO because my mobile throws a WebGL error when I try to use it. Any idea how to fix this issue? Thanks!
  6. Hi, I'm still pretty new to Phaser and I'm making a character select screen that shows all of the characters (only 3). Each one has a button that looks like a power on/off switch. When you click the button it should toggle the button to the correct frame ("on"), but if you click another character it should switch "off" the button of the previously chosen character and turn the currently chosen button to "on." The toggling was one issue, this was the best thing I could think of (it works, but it ends up being repetitive since there are 3 characters): //Button this.pickPink = game.add.button(game.world.centerX, game.world.centerY+105, "buttons", this.pinkStart, this); this.pickPink.anchor.set(0.5, 0.5); //Start with Pink pinkStart: function () { if(this.pickPink && character !== "pink"){ //set button frame to "ON" this.pickPink.frame = 1; character = "pink"; } else if(this.pickPink && character === "pink"){ //set button frame to "OFF" this.pickPink.frame = 0; character = undefined; } console.log(character); }, But now I need to figure out how I would detect that if another button gets picked, turn the previous one (or all others) to OFF. I don't want more than one of these toggled on at a time. Is there anyway of achieving this? Many thanks and much appreciated!!
  7. button mute sound problem

    hi, I'm searching to have a mute sound button see my attachement. The problem is that the frame of the button is disturbed by the mouse over it => so the button is always activated . The desired behavior is if i click the sound is on mute and if i reclic the sound is activated. Do you have a tip for that. //class button for mute sound _button_stay=function(posx,posy,image){ this.image=image; this.posx=posx; this.posy=posy; this.button=game.add.button(this.posx,this.posy,this.image,this.anim_on_click,this,1); this.button.visible=false; this.button.anchor.setTo(0.5,0.5); this.button.scale.setTo(0,0); this.flag=true; this.sound_click=game.add.audio('click'); }; _button_stay.prototype.audio_click = function() { this.sound_click.play(); }; _button_stay.prototype.show_button=function(){ this.button.visible=true; this.tween_scale_button = game.add.tween(this.button.scale).to({x:1,y:1},500,Phaser.Easing.Bounce.Out,true,0); }; _button_stay.prototype.anim_on_click=function(){ if(this.button.frame==1){ this.button.frame=0 this.audio_click(); music.pause(); music_ambiance_mute(); return true; }else{ this.audio_click(); music.resume(); music_ambiance_activate(); this.button.frame=1 return true; } };
  8. Hi, I have a button in my game which has two child elements(a text aligned top center in and another text aligned bottom center). The issue is the child texts are also taking click of the button which should not happen. Here is the code for this: Fiddle : https://jsfiddle.net/3sf1b2zL/18/ var game = new Phaser.Game(480,320,Phaser.AUTO,''); var gameStates = {}; gameStates.Main = function(game){}; gameStates.Main.prototype = { preload: function() { this.load.crossOrigin = "Anonymous"; this.load.image('shop','https://s1.postimg.org/6fz3duzc0r/user_input_box.png'); }, create:function(){ var btnText = this.add.text(0,0,"Game Loaded",{fill:"#ffffff"}); var infoText = this.add.text(0,0,"This is a description of the game. It is only an informative text and it should not take click of its parent button. Try clicking this text",{fill:"#ffffff", wordWrap:true,wordWrapWidth:450}); var shopBtn = this.add.button(0,0,'shop', function(){ btnText.text = "Shop Clicked";}, this); shopBtn.anchor.setTo(0.5, 0); shopBtn.addChild(infoText); shopBtn.addChild(btnText); btnText.alignTo(shopBtn, Phaser.TOP_CENTER); infoText.alignTo(shopBtn, Phaser.BOTTOM_CENTER,0,20); shopBtn.x = this.game.width/2; shopBtn.y = this.game.height*0.2; } } game.state.add('main',gameStates.Main); game.state.start('main'); Please help me so that only the button takes click and text should not take the click Thanks
  9. Hi, I have a button in my game which has two child elements(a text aligned top center in and another text aligned bottom center). The issue is the child texts are also taking click of the button which should not happen. Here is the code for this: Fiddle : https://jsfiddle.net/3sf1b2zL/18/ var game = new Phaser.Game(480,320,Phaser.AUTO,''); var gameStates = {}; gameStates.Main = function(game){}; gameStates.Main.prototype = { preload: function() { this.load.crossOrigin = "Anonymous"; this.load.image('shop','https://s1.postimg.org/6fz3duzc0r/user_input_box.png'); }, create:function(){ var btnText = this.add.text(0,0,"Game Loaded",{fill:"#ffffff"}); var infoText = this.add.text(0,0,"This is a description of the game. It is only an informative text and it should not take click of its parent button. Try clicking this text",{fill:"#ffffff", wordWrap:true,wordWrapWidth:450}); var shopBtn = this.add.button(0,0,'shop', function(){ btnText.text = "Shop Clicked";}, this); shopBtn.anchor.setTo(0.5, 0); shopBtn.addChild(infoText); shopBtn.addChild(btnText); btnText.alignTo(shopBtn, Phaser.TOP_CENTER); infoText.alignTo(shopBtn, Phaser.BOTTOM_CENTER,0,20); shopBtn.x = this.game.width/2; shopBtn.y = this.game.height*0.2; } } game.state.add('main',gameStates.Main); game.state.start('main');
  10. Generally when you click or tap a button on mobile devices and then don't do mouse-up or lift touch on the same button and do it elsewhere the action is cancelled. But the Phaser buttons don't behave like that. Do the mouse-down on the button, drag and do the mouse-up outside the button, the button-click is still triggered. Is there a way to fix/change that behaviour? PS: I just tested that when you use the event.onInputUp on sprite etc, it is still fired when the onInputUp happens outside the object.
  11. 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
  12. Hi, Any doubt how to align GUI.Button horizontally inside GUI.StackPanel. I was playing around but no luck. Playground: https://www.babylonjs-playground.com/#4P8PJY#1
  13. 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 this.game.add.group(ourGroup) 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.
  14. 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.
  15. 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>
  16. 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
  17. 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.
  18. 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?
  19. 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 https://phaser.io/sandbox/edit/2) 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 = game.add.group(); 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 } btn.events.onInputOut.addOnce(function(){ game.add.tween(btn.scale).to(coord, 100, Phaser.Easing.Linear.In, true) }) } else{ console.log(4) } }); }
  20. 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 Phaser.io. 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
  21. 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
  22. 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?
  23. 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() { this.game.paused = true; this.game.add.text(this.game.world.centerX - 150, this.game.world.centerY - 100, "game over", { font: "60px Raleway"} ); // place the reset button this.rePlay = game.add.sprite(this.game.world.centerX - 150, this.game.world.centerY + 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);; } }
  24. 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 = this.game.add.button(50, 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() { this.game.state.start('LevelTut'); },
  25. 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 = game.world.height - (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?