Game Development Community

Image Buttons

by Minesh · in Torque Game Engine · 09/24/2009 (5:49 pm) · 25 replies

Well i need help on making a set of Image Buttons like
Instead of having a plain button Saying Start
I made a Image of text saying Start and have another one when u put your mouse over it but i dont know how to get it working.
Page «Previous 1 2
#1
09/25/2009 (10:00 am)
Use a GuiBitmapButtonCtrl for the button and the different states for the button are all automatic based on the art. You just have to follow a certain format when naming them and setting the bitmap field.

Bitmap buttons have up to four states, normal, down, hover, and inactive. You create an image for each of them and name them like this:

yourbutton - normal state
yourbutton_d - down state
yourbutton_h - hover state
yourbutton_i - inactive state

After you've got those, set your button's bitmap field to the normal state image and remove the file extension. Voila, instant button states. Also I should note that each state, except for normal, are optional. The engine will look for them but nothing will break if it doesn't find one, so if you don't want to bother having an inactive state you don't have to make one.
#2
09/25/2009 (11:14 am)
new GuiControlProfile (GuiBitmapButtonProfile)
{
fontSize = 14;
bitmap = "./SSN";
hasBitmapArray = true;
};
#3
09/25/2009 (11:49 am)
But how do i get it work


new GuiButtonCtrl() {
profile = "GuiBitmapButtonProfile";
horizSizing = "right";
vertSizing = "top";
position = "108 327";
extent = "97 38";
minExtent = "8 8";
visible = "1";
command = "Canvas.setContent(startMissionGui);";
helpTag = "0";
text = "";
groupNum = "-1";
buttonType = "PushButton";
};
#4
09/25/2009 (1:56 pm)
I believe add in
bitmap = "myButtonImage";
and as stated, you need four image files named:
myButtonImage_n.png
myButtonImage_h.png
myButtonImage_d.png
myButtonImage_i.png

be sure Not to include the file type extension (.png) .
#5
09/25/2009 (1:58 pm)
new GuiButtonCtrl() {
profile = "GuiBitmapButtonProfile";
horizSizing = "right";
vertSizing = "top";
position = "108 327";
extent = "97 38";
minExtent = "8 8";
visible = "1";
command = "Canvas.setContent(startMissionGui);";
helpTag = "0";
image = "";
groupNum = "-1";
buttonType = "PushButton";
};

Something like that?
#6
09/25/2009 (2:02 pm)
Put the "bitmap" line in your GuiButtonCtrl.

#7
09/25/2009 (2:05 pm)
When i try that in the menu i still get a button appearing for some reason
#8
09/25/2009 (2:09 pm)
new GuiButtonCtrl() {
profile = "GuiBitmapButtonProfile";
horizSizing = "right";
vertSizing = "top";
position = "108 327";
extent = "97 38";
minExtent = "8 8";
visible = "1";
command = "Canvas.setContent(startMissionGui);";
bitmap = "SMN";
text = "Start Server...";
groupNum = "-1";
buttonType = "PushButton";
};

Thats my Final product after that but i still get a button
#9
09/25/2009 (2:26 pm)
It should look like this.

new GuiBitmapButtonCtrl(YourButton) {
         canSaveDynamicFields = "0";
         Profile = "GuiDefaultProfile";
         HorizSizing = "right";
         VertSizing = "bottom";
         position = "220 0";
         Extent = "198 41";
         MinExtent = "8 2";
         canSave = "1";
         Visible = "1";
         Command = "canvas.setContent(startMissionGui);";
         hovertime = "1000";
         groupNum = "-1";
         buttonType = "PushButton";
         bitmap = "./yourButton";
      };

Edit: Fixed typo in snippet.
#10
09/25/2009 (2:28 pm)
new GuiControlProfile (GuiBitmapButtonProfile)
{
opaque = true;
border = false;
hasBitmapArray = true;

};

What about this part
#11
09/25/2009 (2:31 pm)
You shouldn't need that at all since everything is already taken care of by the GuiBitmapButtonCtrl. Quick question, are doing this all via script or via the GUI editor?
#12
09/25/2009 (2:51 pm)
Script
#13
09/25/2009 (3:14 pm)
Ah, well that snippet I posted is what the editor generates. Use it and replace the names and you should be good to go.
#14
09/25/2009 (3:23 pm)
hmm well im having problems.
The Button does not appear at all Well here is my Entire Code
First Part is from the Defaultgameprofiles.cs

new GuiControlProfile (GuiBitmapButtonProfile)
{
opaque = true;
border = false;
};

And this is the GUI File

new GuiBitmapButtonCtrl(StartMissionButton) {
canSaveDynamicFields = "0";
Profile = "GuiDefaultProfile";
HorizSizing = "right";
VertSizing = "bottom";
position = "220 0";
Extent = "198 41";
MinExtent = "8 2";
canSave = "1";
Visible = "1";
Command = "canvas.setContent(startMissionGui)";
hovertime = "1000";
groupNum = "-1";
buttonType = "PushButton";
bitmap = "./SMN";
};
#15
09/25/2009 (3:49 pm)
Do you get any warnings or errors in the console? What are the names of your textures?
#16
09/25/2009 (3:54 pm)
SM_d
SM_n
SM_h
#17
09/25/2009 (3:57 pm)
i renamed them to SM in the gui aswell
#18
09/25/2009 (3:58 pm)
Are the textures in the same directory as your gui/script file? If not, you would have to adjust/provide the path that you have used.
#19
09/25/2009 (4:00 pm)
So this line:

bitmap = "./SMN";

look like this now right?

bitmap = "./SM";
#20
09/25/2009 (4:00 pm)
yes
Page «Previous 1 2