solved onPointerClickObservable Button Not firing.

[Pryme8]

****** HIDDEN LINK NOW *******

If you go into the console, you should see an object "StartGame" which is the GUI element button that should console.log on a click.

It shows it in the objects onPointerClickObservables and the callback is registered correctly, yet clicking does nothing.

What would cause it not to fire?  

[Guest]

I see no startGame:

Where in your code are you creating the button?

[Pryme8]

Try again, I was messing with it and deleted that output.

 

class GUI extends ASSET{
   		constructor (parent) {
        		super(parent)
        		this._compileMsg = "Creating User Interface"
    		}
    		
    		compile(){ 
    			var s = this.parent.scale
    			var size = this.parent.textureSizeFromQuality
    			var asset = BABYLON.Mesh.CreatePlane("In-Game-UI-Plane", s*5)
    			asset.renderingGroupId = 3
   			
    			asset.position.z = s*5
    			
    			var ui = BABYLON.GUI.AdvancedDynamicTexture.CreateForMesh(asset)    			
    			
    			var url = this.parent.assets['UI-Texture'].rawImage.src
    			
    			var stack = new BABYLON.GUI.StackPanel()
    			ui.addControl(stack)
    			
			function createButton(name, downshift=1){
			let result = new BABYLON.GUI.Button(name)
			result.thickness = 0
			result.height = (100/3)+"%"
			
			result.pointerOutAnimation = result.pointerEnterAnimation = result.pointerDownAnimation = result.pointerUpAnimation = null;
			
			// Adding image
			let iconImage = new BABYLON.GUI.Image(name + "_icon", url)
			
			iconImage.width = "100%"			
			
			iconImage.stretch = BABYLON.GUI.Image.STRETCH_UNIFORM			
			iconImage.horizontalAlignment = BABYLON.GUI.Control.HORIZONTAL_ALIGNMENT_CENTER
			
			iconImage.sourceWidth = size.x*0.21
			iconImage.sourceHeight = size.x*0.06	
			
			iconImage.sourceLeft = size.x*0.11-(iconImage.sourceWidth*0.5)
			iconImage.sourceTop = (size.x*0.035*downshift)-(iconImage.sourceHeight*0.5)
								
			result.addControl(iconImage) 
			
			result.onPointerOutObservable.add(()=>{
				iconImage.sourceLeft = (size.x*0.11)-(iconImage.sourceWidth*0.5)	
			})
			
			result.onPointerEnterObservable.add(()=>{
				iconImage.sourceLeft = (size.x*0.11*3)-(iconImage.sourceWidth*0.5)	
			})			
			
			result.onPointerDownObservable.add(()=>{
				iconImage.lastSourceLeft = iconImage.sourceLeft
				iconImage.sourceLeft = (size.x*0.11*5)-(iconImage.sourceWidth*0.5)	
			})
			
			result.onPointerUpObservable.add(()=>{
				iconImage.sourceLeft = iconImage.lastSourceLeft				
			})			
			
			return result
			}			
			
			var sb = createButton('StartGame')			
			
			
			sb.onPointerClickObservable.add(()=>{
				console.log('start')		
			})			
    			 
    			stack.addControl(sb)   			
    			
    			console.log(sb)
    			    			
    			ui.name = "UI-Controls"
			this.asset = ui
			this.isReady()
	}
}

 

[Guest]

Where are you creating the button?

[Guest]

Nevermind I found it

[Pryme8]

I think it odd, that the pointer Over and out stuff works but not the click.

[Guest]

This is because your image object is overlapping the button (the image is over the button structure and its stackpanel)

You should use BABYLON.GUI.Button.CreateImageOnlyButton():

http://doc.babylonjs.com/api/classes/babylon.gui.button#createimageonlybutton

[Pryme8]

>_<... dumb da dumb dumb...

[Pryme8]

No Sir, that did not do it.
 

let result = new BABYLON.GUI.Button.CreateImageOnlyButton(name, url)
			result.thickness = 0
			result.height = (100/3)+"%"
			
			result.pointerOutAnimation = result.pointerEnterAnimation = result.pointerDownAnimation = result.pointerUpAnimation = null;
			
			// Adding image
			//let iconImage = new BABYLON.GUI.Image(name + "_icon", url)
			let iconImage = result._children[0]
			
			iconImage.width = "100%"			
			
			iconImage.stretch = BABYLON.GUI.Image.STRETCH_UNIFORM			
			iconImage.horizontalAlignment = BABYLON.GUI.Control.HORIZONTAL_ALIGNMENT_CENTER
			
			iconImage.sourceWidth = size.x*0.21
			iconImage.sourceHeight = size.x*0.06	
			
			iconImage.sourceLeft = size.x*0.11-(iconImage.sourceWidth*0.5)
			iconImage.sourceTop = (size.x*0.035*downshift)-(iconImage.sourceHeight*0.5)
			
			iconImage.onPointerClickObservable.add(()=>{
				console.log('start')		
			})		

I even added the click to the image Not the button and it still did not work.

Odd part is shouldn't all the pointer events on the button not work if the image was hiding their activation? 

[Pryme8]

Ok I have noticed now the Pointer In/Out are the only ones working... The odd part is when I started all of this a month ago it all worked.

[DylanD]

Just now, Pryme8 said:

Ok I have noticed now the Pointer In/Out are the only ones working... The odd part is when I started all of this a month ago it all worked.

a lot changes in a month?

tested it, when I click the start button it says TEST

[Pryme8]

I got it.

Its not the image or the Button itself... its because I have a foreground overlay plane that Hyjacking the click events.

Just needed to set the forground and background to isPickable false.

[DylanD]

planes.dispose();  

 

 

[Guest]

haaaa! I prefer that  Glad that you found it