More fun… pointer event handling…
(I wonder if that border-flicker when camera pan, is normal. I should know… I’ve been here forever.)
Anyway, I added the name that is sent to createBtn()… to the button.name property. (line 76)
Lines 95-98… added a onPointerDownObservable to each button. No matter which button was pressed, anyButtonPressed() is called.
Lots of people label thing1 and thing2… as ‘d’ and ‘s’… two objects that arrive in observables… sent by the BJS observer system. Both objects have various good properties on them. We most-want thing2.currentTarget.name. Let’s look WHY…
Lines 39-71… there’s our pointer-down event handler for ALL buttons. Look how we use thing2.currentTarget.name… for LOTS of things… like knowing WHICH button was pressed. Pretty easy.
Remember that btn.thickness can be used to set fatter borders on your rectangles, or NO border.
Also, there is a CreateSimpleButton() that is useful… sort of a text button that is already in a rectangle (it has a .thickness setting available)… and it has “animations” already set on it. The 4 current animations set-by-default on simpleButtons…
- Down-scale the button slightly when clicked.
- Return to full-scale when click is released.
- Make button slightly transparent when mouse-over.
- Return to no-transparency when mouse-out.
BECAUSE you are sort-of making your own simpleButtons from rectangles and textBlocks… I think you have NONE of those animations available. Only “button controls” have those animations. You… are essentially making labels, not buttons. The difference between a clickable label… and a button… not very much.
Animation examples: Button goes red-background on pointer down, back to green on pointer up. Maybe .thickness increases a little when mouse-over, and goes back to normal when mouse-out. I think you can even change the pointer to a “finger pointer”… when moused-over, and back to standard pointer when moused-out.
Aww heck, let’s try it:
Line 75 - I’m using the handy CreateSimpleButton() method, but you could use JUST a new Button, too. I set name as both the name of the button, and the text of its label.
Line 88, there’s our 4 handy button-animations… customized to non-default… for full hacking power. I defined them to do what I mentioned earlier… playing with border thickness and background colors.
We’re using the same click-handler system as last-time… watch console as buttons are clicked. Things are looking pretty good, huh? Fun with BJS GUI.
The Button class is nice. Simple buttons can be used as bordered un-clickable LABELS too, because you can set btn.isHitTestVisible = false. After that, the button ignores all mouse pointer stuff (ups, downs, overs, outs, clicks). Handy, huh? Great way to disable/enable click-ability of any button.