Search the Community

From what I've read I need PIXI text input plugin to use that feature. I need to write input text module as I don't want to use plugins. I'd be thankful if you help me out to understand if I can use HTML tags in Pixi.js somehow (Everything's build up on canvas, and I haven't seen any example this far that does so, maybe I'm missing sth) if not could you provide some resources that can help me figure it out? Are there any finished components I can use or do I need to write anything from scratch? (not only input related but also buttons and stuff like that) Thanks in advance!

Hello, I got allot further in my goal to make a ribbon like menubar. But for some reason i had a error saying Sprite.On do not exist, so i had to edit the tsconfig file and add the line: "allowSyntheticDefaultImports": true, to the compiler options so after adding that i was able to use that methode. But here comes the problem: When i hit the Sprite Button -> it go's to the required function and print's in the console the message i provided, But when i want to acces the container from the UIMananger within the onButtonClick -> this.uiContainer i get error saying it's undifiend Anyone have a clue how to fix this? UI Manager Snippit (See: onButtonClick ) export class UiManager { private demoScene: Boolean = false; private uiContainer: Container = new Container; constructor(demo:Boolean) { this.demoScene = demo; this.uiContainer = this.GenerateMenuBar(); } public getUI(): Container{ return this.uiContainer; //Return the ui Correctly } private onButtonClick() :void { console.log("clickt on button"); let btnTest = this.createMenuButton(); // <<-- Error: this.createMenuButton is not a function console.log(this.uiContainer); // <<-- Error: Undefined this.uiContainer //Launch a event to show a sprite... } private GenerateMenuBar(): Container{ this.uiContainer.addChild( this.createMenuBackground(), this.createMenuButton(), this.createWallsnWindow(), ); return this.uiContainer; } private createMenuButton():Sprite{ console.log("Create MenuButton") var tmpSrite = Sprite.from('./src/Engine/assets/ui/btn_NewScematic.png'); tmpSrite.interactive = true; tmpSrite.buttonMode = true; tmpSrite.name = "menuButton"; tmpSrite.position.x = 10; tmpSrite.y = 59; tmpSrite.hitArea = new Polygon([40,0, 100,0, 100,40,40,40]); //Setup Hitbox tmpSrite.on('pointertap', this.onButtonClick); //Interaction... return tmpSrite; } Engine File -> Everything in here renders ok and uses the UIManager export class Engine { public renderer: Renderer; public loader: Loader; public world: Container; public graphics: Graphics; public fpsMax: number; public canvas: HTMLElement; public uiManager: UiManager; private assetsLoaded:boolean; // // constructor constructor(options: IEngineOptions) { this.loader = Loader.shared; this.renderer = new Renderer(options); this.world = new Container(); this.graphics = new Graphics(); this.fpsMax = options.fpsMax; /// * UI Manager * this.uiManager = new UiManager(true); this.canvas = options.containerId ? document.getElementById(options.containerId) || document.body : document.body; this.canvas.appendChild(this.renderer.view); /// /// Loader Setup /// this.loader.onComplete.add(() => { this.assetsLoaded = true; console.log("Assets Loader State:" + this.assetsLoaded); }) this.loader.load(); this.render(); } get view(): HTMLCanvasElement { return this.renderer.view; } public render(){ while (this.assetsLoaded = false) return; console.log(utils.TextureCache); let tmpWorld = new Container(); this.world.addChild( this.uiManager.getUI(), <<-- Render Fine and returns the Ui Container ); } } // Engine

I am trying to make a toggle button. So I made a spriteSheet with the two frames with the positions that the button can have. this.load.spritesheet('buttontog', 'assets/tbspr.png', {frameWidth: 160, frameHeight: 47}); It works when I click it once, toggling it. this.buttontog = this.add.sprite(660,420, 'buttontog', this.frame = 0) .setInteractive({useHandCursor: true}) .on('pointerup', () => {if (this.frame == 0) this.buttontog.setFrame(1); if(this.frame == 1) this.buttontog.setFrame(0);}); What I can't do is to "untoggle" it, and is why I am here, so I can ask for your help. since I am new to this framework. This is the spriteSheet:

Hello, i have got a question. I am created a gui simple button and also i want to take the button properties from CSS file. I tried so many things, but i couldn't reach my aim. I need helps from masters.

Hey, just started to use Babylon.js, and I am wondering if there is a way to disable or modify the animation on the GUI Button when it is pressed down. Thanks.

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

Hello all, I am making a project and i need to play animations on a button click. but for some reason after the animation is played the first time it will never play again. I have been able to replicate the basics in a PG - https://playground.babylonjs.com/indexStable.html#V19ZT2 if you open console and enter window.startAnim.restart() then watch the animation play. then enter window.startAnim.reset(); it will reset, if you then do the restart command again. nothing will happen. why is this? also the version of babylon i am using (i cant find a version number?) has scene.Animatables where it seems all of the animatables (which to my understanding control the animations) are stored. and once the animation is played, it seems the animabable in scene.Animatables is deleted. however in the PG i cant find this variable so i assume its been changed since? however the outcome is the same still. hope this makes sense!! many thanks

for example i have: html button <button id="objButton" onclick="fileExport()"></button> result of var objtext = BABYLON.OBJExport.OBJ(OBJexport); // this is *.obj file syntax with meshes from scene what syntax should i use inside fileExport function, that popup window savefile in browser? I have syntax with link a href which work , but i need use button, because the program gui with buttons usually, but not with text links. this is a href syntax: function download(text, name, type) { var a = document.getElementById("a"); var file = new Blob([text], {type: type}); a.href = URL.createObjectURL(file); a.download = name; } after this, click link and can save file. I need button way. If possible not way where button press call a.click()

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!

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

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.

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!

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!!

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; } };

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

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.

Hi everyone! I want to extend Phaser.Button to make it scale automatically upon creation. Therefore I've got a global variable SCALE which contains the game's scale factor. I've done the same with Phaser.Sprite already and it works fine, but it seems I can't get it right with the buttons. Here's my ScaledButton.js: var ScaledButton = function(game, x, y, key, callback, callbackContext, overFrame, outFrame, downFrame, upFrame, group) { x*= SCALE; y*= SCALE; Phaser.Button.call(this, game, x, y, key, callback, callbackContext, overFrame, outFrame, downFrame, upFrame, group); this.scale.setTo(SCALE, SCALE); game.add.existing(this);};ScaledButton.prototype = Object.create(Phaser.Button.prototype);ScaledButton.prototype.constructor = ScaledButton;In my Game state, I create it like so: var button = new ScaledButton(this, 2, 146, 'button-texture', doSomething, this, 0, 0, 0);The button is created and added to the stage, but on mouseover/mouseout it throws the following error into my Chrome console: Uncaught TypeError: Cannot read property 'style' of undefined [phaser.js:17276]Any ideas? Oh, and an additional "best pratice" question: In my extended class, I add the object directly by game.add.existing(this). Is this a good practice or should this be handled outside the class definition?

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

Please bear with me, this is very likely going to be a long post. In my quest to implement a pause system with an active ui I found myself investigating input/Pointer.js. Here I discovered the reason that my Buttons were useless when the game was paused. Specifically: input/Pointer.js if (this.game.paused){ return this;}My first, and simplest fix for my use case, was simply to comment out all of the above lines. This allows me to still process Pointer callbacks when the game is paused. In my case, the UI is already set up using callbacks, but the rest of the game uses polling. So it was a convenient way to allow UI interaction without allowing other in game actions. Offhand this method seems to have some limitations. If you're implementing first person controls your character might still spin around while you interact with the UI, though I haven't looked into it. Also if you use Pointer callbacks on any objects you want to actually pause that can cause issues. After some more thought I came up with the following solutions: First: input/Pointer.js while (i-- && !this.game.paused){ this.game.input.moveCallbacks[i].callback.call(this.game.input.moveCallbacks[i].context, this, this.x, this.y, fromClick);}All I did was add a check if the game was paused before running any moveCallbacks. Correct me if I'm wrong, but I believe this would solve the issues with a first person style camera. Honestly though I'm not sure what all uses there are for moveCallbacks so some examples for context would be nice. Next: input/Pointer.js else if (!this.game.paused || (this.game.paused && candidateTarget.sprite.nopause && candidateTarget.sprite.nopause == true))This allows you to set a nopause member on any sprite. This allows you to specify exactly which objects you want to respond while the game is paused. I went ahead and added a nopause member to the sprite constructor as follows: gameobjects/Sprite.js this.nopause = false;Then I can clean up the checks from before: input/Pointer.js else if (!this.game.paused || (this.game.paused && candidateTarget.sprite.nopause == true))What do you guys think?

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

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.

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.

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>

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

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.