Image button

[Dirso]

Hi,

I'm starting using CEGUI now and I would like to make a button with a image as background and some text in the bottom of this button. How can I do it? I would like to do it dinamicly not with scripts.

Thanks a lot and Happy New Year!
Dirso.

[Pompei2]

I think the most easy way to do it (if you load a layout from a xml blabla.layout file) is the following:

Create a picture with the four button states (normal, over, pressed, disabled). The picture's size should be in powers of two. create an imageset file for that picture and put both the picture and the imageset file into the "imagesets" directory. The imageset file can look somawhat like this:

Code: Select all

<?xml version="1.0" encoding="UTF-8"?>

<Imageset Name="FTSUI" Imagefile="ftsui.png" >
    <Image Name="btnNormal" XPos="0" YPos="0"   Width="256" Height="50" />
    <Image Name="btnHover"  XPos="0" YPos="50"  Width="256" Height="50" />
    <Image Name="btnPushed" XPos="0" YPos="100" Width="256" Height="50" />
    <Image Name="btnDisabl" XPos="0" YPos="150" Width="256" Height="50" />
</Imageset>


That defines four named images: btnNormal, btnHover, btnPushed and btnDisabl that are located in the imageset FTSUI

Now, in your program's initialisation code, load that imageset:

Code: Select all

// Load the FTSUI Imageset.
CEGUI::ImagesetManager::getSingleton().createImageset( "ftsui.imageset" );


This loads the imageset into CEGUI. If later on, for some reason, you need to acces that imageset, you can get it by calling the following function:

Code: Select all

CEGUI::Imageset *m_pImageSet = CEGUI::ImagesetManager::getSingleton().getImageset( "FTSUI" );

Now let's go on creating the buttons. we'll do this in the layout file of your window or UI. We first create an imagebutton using the images we put in the imageset, and then we'll create a child into it of the type StaticText, so we can put some caption into the button. There we go (I assume you know how to work with layouts. If not, just ask ):

Code: Select all

<!-- Create the new button. -->
<Window Type="TaharezLook/ImageButton" Name="btnNewGame">
   <Property Name="UnifiedPosition" Value="{{0.67,0},{0.5,0}}" />
   <Property Name="UnifiedSize" Value="{{0,256},{0,50}}" />
   <!-- Here we choose what images to take. set:FTSUI means they are stored -->
   <!-- in the imageset named FTSUI and image:btnNormal specifies wich image it is. -->
   <Property Name="NormalImage"     Value="set:FTSUI image:btnNormal" />
   <Property Name="HoverImage"      Value="set:FTSUI image:btnHover"  />
   <Property Name="PushedImage"     Value="set:FTSUI image:btnPushed" />
   <Property Name="DisabledImage"   Value="set:FTSUI image:btnDisabl" />
   <!-- Now the button would be ready, but without caption ... So we add a caption. -->
   <Window Type="TaharezLook/StaticText" Name="btnNewGame_text__">
      <!-- We make the text take all the space of the button to center the text. -->
      <!-- You should adapt these values to your pictures, just play a bit with em ;) -->
      <Property Name="UnifiedPosition"   Value="{{0,0},{0,0}}" />
      <Property Name="UnifiedSize"       Value="{{1,0},{1,0}}" />
      <!-- Disable the frame and background, so we got only the text and not a StaticText widget. -->
      <Property Name="FrameEnabled"      Value="False" />
      <Property Name="BackgroundEnabled" Value="False" />
      <!-- Here we center the text into the button -->
      <Property Name="HorzFormatting"    Value="WordWrapCentred" />
      <!-- We MUST disable the text so that it is the button that gets our mouse events, -->
      <!-- and not the static text ! If you forget that line, the buttons graphics will correspond, -->
      <!-- but the clicks on the button won't work ! because they are "eaten" by the staticText. -->
      <Property Name="Disabled"          Value="True" />
      <!-- finally, this is the caption we want the button to have. -->
      <Property Name="Text">New game</Property>
   </Window>
</Window>

That's it basically. Try it out, give me feedback, test it, tell me the typos, ... because I think i'll write a wiki page about this

[Dirso]

Thanks a lot for your answer!
I try it out and I'll give you feedback whether it works or not (I hope it DOES work )

Happy new Year!
Dirso.

[Dirso]

Hi,

I'm starting work with your code and I have a few questions:
1) I have several buttons, one image for each button. Do I need to create a layout for each one?
2) Is there any way to create a template and, in run time, assign a imageset for it?
3) If I have to make a layout for each button, do I need to change its name? I mean:

Code: Select all

<Window Type="TaharezLook/ImageButton1" Name="btnNewGame2">
<Window Type="TaharezLook/ImageButton2" Name="btnNewGame2">
and so on...


Thanks a lot,
Dirso

[Pompei2]

If i understood your post right (i'll go to sleep after writing this hehe), you misunderstood what is an layout file. I saw your other posts, you created everything (window, button, ...) in code. A .layout file avoids you this work: you define the window, its buttons and so one in an xml file (named blabla.layout) and load that xml file and display it via the following code:

Code: Select all

Window *w = CEGUI::WindowManager::getSingleton().loadWindowLayout( "my_nice_window.layout" );
w->setVisible( true );
your_root_window->addChildWindow( w );

Code: Select all

<Window Type="TaharezLook/ImageButton1" Name="btnNewGame2">

Won't work, because that line would mean: "create a window of type TaharezLook/ImageButton1, named btnNewGame2", but TaharezLook/ImageButton1 doesn't exist, TaharezLook/ImageButton exists. Know what i mean ?

If you want, i can give you an example of a full .layout file (the one in my last post is not a full working one .... tought ... thinking about it, i have a nice idea that would go into the direction of your questions ... i'll post it tomorrow

EDIT:
ok here it is. If you want to add the buttons in code (maybe because you create everything else by code), you have to create one layout that looks exactly like the one above, for each button one. The

Code: Select all

Name="btnNewGame2"

should be different in each layout. Then you can load the layout with the function i showed you above and put it into your window. I hope I was clear

About your template idea: i have currently no idea how to do this in a simple way. Just add all pictures in one imageset and name them differently.

To understand how a .layout file works, you can take a look here:
http://www.cegui.org.uk/wiki/index.php/The_Beginner_Guide_to_Creating_a_CEGUI_Window#XML_layouts

[Dirso]

Hi,

First: Thank you very much for your help!
I would like to create the buttons because I would like to make a expansible game, so any user could create a "extension" for the game and just drop the files in the folder, but with the layout idea i think it would work (I would just have to look into some folder and load all the files inside to my game - it would works GREAT!! Am I right?

Thanks a lot,
Dirso

[Pompei2]

I don't know your game but it sounds this would work
Tell me when it works or if you have another question about that

[Pompei2]

wikied

[maitvn]

Hi Pompei2 ,

I just used OGRE to programming Graphic , so i get a trouble with image button . I can't create a imagebutton . so you can give me a full code about imagebutton and files : *.imageset, layout , image file (.tga, ...) ?

Please help me soon !

Thank you very much !
---------------------------

[Pompei2]

Oh yes, the server doesn't exist anymore ! At home, I may have a look if I still have those files, but I can't guarantee you.

I won't be able to help you fast, as I'm very busy these days, but I will try to have a look. As to OGRE, I have no idea about ogre at all, did never use it

[Tooa]

Thx4Thread, but i´ve still a little question. I Want to Create a toolbar with more than 1 Imagebutton e.g 10 Imagebuttons. Is it possible to put alle imagesets about the informations of the Imagebuttons together in one imageset which can be load with CEGUI in one step?


gretz Toa

[CrazyEddie]

An imageset can contain multiple images - in this sense the actual graphics should be in a single file, the xml part can be defined by hand or with CEImagesetEditor. If you require that each image be in it's own image file, then each will be treated as a separate Imageset, though you could group those together in a scheme file so they all get loaded at once.

CE