Using the GuiBitmapButtonCtrl

#1 Maybe the path is not correct.
Try setting the bitmap field to starter.fps/client/ui/blue.

Or if you're doing it in script:
bitmap = "./blue";

Nick

#2 That was it. The default directory that the GUI Editor appears to be searching in isn't game/client/ui, but common/ui
I hard-coded game/ui/client/blue and it loaded just fine. Thanks, Nick!

#3 I thought I'd summarize this since there were a number of threads on how to use GuiBitmapButtonCtrl and none of them contained all of the information I needed.

(1) I wanted a button with a custom "look".
(2) I created a GuiBitmapButtonCtrl and assigned to the "Bitmap" field the name of my button, and it didn't work.
(3) I did some research here, and discovered that you need 4 images per button. And the engine does some black magick to determine which one to use. Let's say for now that you want a custom "Quit" button. You're going to call it "Quit.png". Well, don't.
(3.a) First, make a button image file called Quit_n.png. This image should be what the button looks like when it's not being mouseovered, clicked, or disabled.
(3.b) Now make Quit_h.png, which is what the button looks like when the mouse hovers over it.
(3.c) Now make Quit_d.png, which is what the button looks like while it's being pushed.
(3.d) Finally, make Quit_i.png, which is what the button looks like when it's disabled.
(4) Now you need to put these files in the appropriate directory. My game is in C:\Torque\SDK\example\siders\, and I put the buttons in C:\Torque\SDK\example\siders\client\ui.
(5) Go into the GUI Editor (load your game, hit F10)
(6) Click on your button, and in the "bitmap:" field, enter "Quit". No .png, no _i, _h or anything, just the "base" name of the button.
(7) I did all this, and it still didn't work. The directory that the engine appears to search in by default is C:\Torque\SDK\example\common\ui. I copied the buttons there and it worked just fine.
(8) Now, I don't want my graphics in common/ui, so I changed "Quit" in the Bitmap: field to be siders/ui/client/Quit and it also worked fine. Now I know how to store my GUI graphics wherever the hell I want.

#4 @Ben: Thanks for taking the time to list out the steps you went through, it's very useful for those that search for the same topic in the future!

#5 I saw this thread and hadn't messed around with the UI stuff yet so I thought I would give it a try and had no luck, even with the detailed steps.

Here is what I tried. I renamed the lagIcon.png included with the SDK to test_n.png. Then made copies of it so I then had test_n, test_h, test_i, and test_d. I then copied them to my c:\torque\sdk\example\common\ui directory.

I ran the game and at the main menu I created a new GuiBitmapButtonControl and set the bitmap name field to "test" and got nothing but the default background.

So then I opened up Gimp and just made a new image, colored it red, and named it red_n.png. I made copies of this for the other images required. I changed the bitmap name to "red" and still got nothing.

So i still don't know what I am doing wrong. The only thing I can think of is that the engine doesnt like my image for some reason.

#6 Todd>
I just tried the common/ui directory on my Linux install and it's not working there either. Try specifying the full path. Move the files into c:\torque\sdk\example\starter.fps\client\ui and then in the GUI editor, set the Bitmap: field to "starter.fps/client/ui/test and see if that works.

#7 @Ben
Nope that didnt work either

#8 Hmm.. This is dumb but you never know - did you remembe to click "Apply"?

I just tried it on Linux.
1. Grabbed a .png off the internet (I got this one: http://www.libpng.org/pub/png/pngvrml/pal_rgb.png)
2. Put it into ~/Torque/example/starter.fps/client/ui
3. Renamed it to 'button.png'
4. Copied it to button_n.png, button_i.png, button_h.png, and button_d.png
5. Did a chmod 644 on *.png
6. Went into ~/Torque/example
7. Ran ./torqueDemo.bin
8. Went to the main page with the orc on it.
9. Hit F10 to enter GUI Editor
10. Clicked "New Control"
11. Picked GuiBitmapButtonCtrl
12. In the Inspector, entered into the Bitmap: field: "starter.fps/client/ui/button"
13. Clicked "Apply"
14. The new control now contains the rainbow pattern from step #1.

I'll double-check my setup at home on Win32 when I get a chance and post any differences between it and what I've got here.

#9 Ok this is just too bizarre. I had done all the steps above for several different images, saved the ui and exited and restarted the game multiple times and nothing worked.

So I closed the game went to lunch and came back. I decided to look around the web for a different png to test. Found one and made the files. Launched the client and the pal_rgb button test from the post above worked. Then I tried some of the other ones which previously didnt work and they all worked.

I don't know why it works now, I didn't change anything, but it does. Shrug.

#10 I followed the steps of Ben's tutorial and the image apear im my program, but the effects don't work. For example the if i pass the mouse over the image, don't happens nothing.What I have to do to make the effects work?

#11 I followed the steps of Ben's tutorial and the image apear im my program, but the effects don't work. For example the if i pass the mouse over the image, don't happens nothing.What I have to do to make the effects work?

#12 I'm not sure what's going on here, but I have many different buttons I need to display and all of them are of different sizes. When I enter one button it comes up fine; when I enter a larger size, thats when I get the default button. I was wondering how to get the engine to accept a larger size?

#13 I'm not sure what's going on here, but I have many different buttons I need to display and all of them are of different sizes. When I enter one button it comes up fine; when I enter a larger size, thats when I get the default button. I was wondering how to get the engine to accept a larger size?

#14 Is this size specific? I am assuming that the different files appear different so you can see the changes. I have the files just like listed above. My file name is button_quit_n, button_quit_h, button_quit_d, button_quit_i. The file structure is... bitmap = ".{name of game}/client/ui/button_quit_n";


The button works fine. The image is there......but I cannot get the button to change on hi-light, depress or inactive.

#15 The reason you can not get the the image to change is because your bitmap path is wrong. It should be like this

bitmap = ".{name of game}/client/ui/button_quit";

I tested this in Torque 1.5.0. You do not need _n, _i, _d, and _h, if you put them there Torque will only load the one image file.

#16 Sorry, I actually got this to work and forgot to post.