In the Simple Button tutorial, we covered how to create a simple default button (which comes with text). If you check the API, you’ll notice that FlxButton is extended from FlxTypedButton, which does not include text. This means, we can actually use the functions in FlxTypedButton from FlxButton.
One thing that stumped me as a beginner was that the API did not explain how to use the callback events; the onUp, onDown, onOver and onOut variables are exposed, but there was no example on how to use them. I tried these, but it didn’t work:
|
1 2 3 4 5 6 7 8 |
// This doesn't work myButton.onUp = OnButtonUp; // This doesn't work either myButton.onUp = function () { trace("up"); }; // This doesn't work too myButton.onUp = new FlxButtonEvent(OnButtonUp); |
It turns out, after some Googling, the answer here, in the upgrade guide page, that explains that you have to set the callbacks within those variables:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 |
package; import flixel.FlxState; import flixel.FlxG; import flixel.ui.FlxButton; class MenuState extends FlxState { override public function create():Void { super.create(); // Set the background to something lighter so we can see // the button easily FlxG.camera.bgColor = 0xFF999999; // Create the button var myButton:FlxButton = new FlxButton(50, 50, "", OnClickButton); // Load an image to the button myButton.loadGraphic("assets/images/bnw.png", false, 128, 128); // Add events to button myButton.onUp.callback = OnButtonUp; myButton.onDown.callback = OnButtonDown; myButton.onOver.callback = OnButtonOver; myButton.onOut.callback = OnButtonOut; // Add button to the stage add(myButton); } function OnButtonUp():Void { trace("button up"); } function OnButtonDown():Void { trace("button down"); } function OnButtonOver():Void { trace("button over"); } function OnButtonOut():Void { trace("button out"); } function OnClickButton():Void { trace("clicked!"); } override public function update():Void { super.update(); } override public function destroy():Void { super.destroy(); } } |
Note: the OnButtonUp will replace the OnClickButton callback that was set in the new FlxButton(...) — they use the same onUp event handler.
Okay, we now know how to add callback to the button events. What if you want to trigger the callbacks with arguments? According to the upgrade guide page, you can do this (Let’s reduce the code to just one onDown event for simplicity sake):
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
override public function create():Void { super.create(); // Set the background to something lighter so we can see // the button easily FlxG.camera.bgColor = 0xFF999999; // Create the button var myButton:FlxButton = new FlxButton(50, 50); // Load an image to the button myButton.loadGraphic("assets/images/bnw.png", false, 128, 128); // Add events to button myButton.onDown.callback = OnButtonDown.bind(42); // Add button to the stage add(myButton); } function OnButtonDown(val:Int):Void { trace("button down : " + val); } |
It sounds straight-forward, but … let’s say we have 3 buttons, and we want to know which button the player clicked on. How do we code that? There are two ways I could think of.
The first method is just to add and bind simple values for each button’s callback; In the case below, we use the strings “button 1”, “button 2”, and “button 3”.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
override public function create():Void { super.create(); // Set the background to something lighter so we can see // the button easily FlxG.camera.bgColor = 0xFF999999; // Create the button var myButton1:FlxButton = new FlxButton(50, 50); var myButton2:FlxButton = new FlxButton(200, 50); var myButton3:FlxButton = new FlxButton(350, 50); // Load an image to the button myButton1.loadGraphic("assets/images/bnw.png", false, 128, 128); myButton2.loadGraphic("assets/images/bnw.png", false, 128, 128); myButton3.loadGraphic("assets/images/bnw.png", false, 128, 128); // Add events to button myButton1.onDown.callback = OnButtonDown.bind("button 1"); myButton2.onDown.callback = OnButtonDown.bind("button 2"); myButton3.onDown.callback = OnButtonDown.bind("button 3"); // Add button to the stage add(myButton1); add(myButton2); add(myButton3); } function OnButtonDown(val:String):Void { trace("button down : " + val); } |
However, what if, for each button we click, we want to trigger something else within that button? We can pass the button itself as the value:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
override public function create():Void { super.create(); // Set the background to something lighter so we can see // the button easily FlxG.camera.bgColor = 0xFF999999; // Create the button var myButton1:FlxButton = new FlxButton(50, 50); var myButton2:FlxButton = new FlxButton(200, 50); var myButton3:FlxButton = new FlxButton(350, 50); // Load an image to the button myButton1.loadGraphic("assets/images/bnw.png", false, 128, 128); myButton2.loadGraphic("assets/images/bnw.png", false, 128, 128); myButton3.loadGraphic("assets/images/bnw.png", false, 128, 128); // Add events to button myButton1.onDown.callback = OnButtonDown.bind(myButton1); myButton2.onDown.callback = OnButtonDown.bind(myButton2); myButton3.onDown.callback = OnButtonDown.bind(myButton3); // Add button to the stage add(myButton1); add(myButton2); add(myButton3); } function OnButtonDown(button:FlxButton):Void { trace("button down : " + button.x + "," + button.y); } |
Pretty cool, huh?
Note: There’s something quirky about the button event behaviour — the onDown event triggers even when you hold your mouse button down and hover over/hover out of the button. This also happens for onUp event. If you want the onDown/onUp to trigger only if the mouse is over the button, you can set allowSwiping to false.
One last thing — what about sound? e.g. Play a sound when the mouse hovers over and out of a button? Check the upgrade guide again, I think the example usage is straight forward. However, just in case you need an example, here is one, based on the code we’ve written above so far (assuming you have the audio file in the /assets/sounds folder):
|
1 |
myButton2.onDown.sound = FlxG.sound.load("assets/sounds/referee-whistle.wav"); |
I think that about sums up all there is to know about button handling. In the next post, I’ll attempt to cover 9-slice images, and if possible, 9-slice buttons.
Did you know that website contact page messages like this one are in fact a highly effective way to get more sales for your business? How exactly is this done? Very simple, we create an ad message like this one for your site and we mass post it to millions website contact forms on sites in whatever niche or country you want to target. Do ads like these work well? Well you’re reading this now aren’t you? The awesome thing is, you can do this for less than $25 a week! Interested in more details? write an email to: UlisesMelinav85668@gmail.com