[Solved] Image buttons on CEGUI 0.8.3

[PoulpyBlast]

Hello everyone,
I apologize in advance concerning my quite stupid questions, I guess.

I'm starting using CEGUI 0.8.3, along with SDL and OpenGL. I want my buttons to be PNGs that I'd previously load, but the tutorials I found about it are a little bit obsolete, and I didn't understand what I actually needed to do. Of course, I want the characters of my "game" to react when I click on the corresponding buttons (I got this point, events are OK for me).

So, I have a PNG spritesheet, and I created an Imageset which looks like this :

Code: Select all

<Imageset autoScaled="vertical" imagefile="C:/CEGUI/datafiles/imagesets/myImageset.png" name="myImageset" nativeHorzRes="304" nativeVertRes="38" version="2">
    <Image height="38" name="Jump" width="38" xPos="0" yPos="0" />
    <Image height="38" name="Crouch" width="38" xPos="38" yPos="0" />
    <Image height="38" name="Left" width="38" xPos="76" yPos="0" />
    <Image height="38" name="Up" width="38" xPos="114" yPos="0" />
    <Image height="38" name="Right" width="38" xPos="152" yPos="0" />
    <Image height="38" name="Down" width="38" xPos="190" yPos="0" />
    <Image height="38" name="Change" width="38" xPos="228" yPos="0" />
    <Image height="38" name="Shoot" width="38" xPos="266" yPos="0" />
</Imageset>


From here, I am lost... I red something about layouts on the wiki, but it didn't light me up. Can someone kindly explain to me how to do ?

Thank you very much

[thomas]

I haven't done any layouts, I usually organize everything within my code. My understanding is a layout is meant to either create one type of Window out of a set of others, like VanillaConsole or to setup a layout of the overall gui.

Unless someone here wants to take the time to teach you, which won't be me, I'd suggest learning from the examples included in CEGUI's samples, trying to find some tutorials or information on the wiki (or the api if you feel comfortable enough). Even if the tutorials are outdated some information is likely to apply you'll just have to deal with things that don't work.

Or you can download and use CEED since it will make layouts for you: http://cegui.org.uk/wiki/CEED

I use CEED to build my imagesets, and I really like the tool. Unfortunately the reason I don't use it even more at this point is because as sweet as it is, the features are limited. It won't use custom widgets (from looknfeel) in layouts, and it won't build looknfeel widgets (which would be awesome). I believe they are working on that though. Perhaps I overlooked something though, and it does more than I saw.

Anyway, good luck

EDIT: Correction, from the layout screenshot on CEED I see the Vanilla widgets on the left side there, so maybe it can use looknfeel widgets. So CEED may be your best bet for creating layouts.

[PoulpyBlast]

Thanks Thomas ! It helped me a little bit, but I still don't have it.
I already red a lot of pages on the wiki, even the old ones, but I still have a little comprehension problem

Anyway, I let the layouts down for the moment, since I've found a piece of code which might work for what I want to do. But... it doesn't work In any case, I'm doing something wrong.

Here is the latest code I wrote.

Code: Select all

CEGUI::Texture* m_texture;
CEGUI::BasicImage* m_image;

GUIButton::GUIButton(std::string _name, CEGUI::Window* _mother)
{
   m_button = CEGUI::WindowManager::getSingleton().createWindow("TaharezLook/Button", _name);

   _mother->addChild(m_button);
   
   if (_name == "Test")
   {
      m_texture = &CEGUI::System::getSingleton().getRenderer()->createTexture("testTexture", "../Datas/Buttons/Up.png", "");
      m_image = (CEGUI::BasicImage*)( &CEGUI::ImageManager::getSingleton().create("BasicImage","testImage"));

      m_image->setArea(CEGUI::Rectf(CEGUI::Vector2f(0.0f, 0.0f), m_texture->getOriginalDataSize()));
      m_image->setTexture(m_texture);
      m_button->setProperty("NormalImage", "testImage");
   }
}

No build fail, the PNG and the property seem to be found, m_texture and m_image are defined, but the picture still doesn't want to show its face !

Maybe need I to call a render function or something ? I haven't found much more by now...

[Kulik]

EDIT: Correction, from the layout screenshot on CEED I see the Vanilla widgets on the left side there, so maybe it can use looknfeel widgets. So CEED may be your best bet for creating layouts.

CEED will let you edit anything, even custom widgets with custom LNF. You just have to set it up to load your scheme.

[thomas]

EDIT: Correction, from the layout screenshot on CEED I see the Vanilla widgets on the left side there, so maybe it can use looknfeel widgets. So CEED may be your best bet for creating layouts.

CEED will let you edit anything, even custom widgets with custom LNF. You just have to set it up to load your scheme.

Oh that's awesome, thanks for correcting me on that. I apologize for my ignorance on the fact

@PoulpyBlast - I am not familiar with using textures/image within code on CEGUI, so there's not much I can help you with on doing that in code.

What exactly are you trying to accomplish? Are you wanting a button to a different graphic depending on its purpose? If that is the case, I would just use a basic graphic button, and define all your graphics within an imageset (easily set up through CEED). You have already done this like you've mentioned in your first post.

So then just:

Code: Select all

m_button->setProperty("NormalImage", "Up");

A layout just tells CEGUI where to place the buttons relative to a parent.

I'm not sure I follow what you are trying to accomplish with your last post. Are you trying to get an overlay graphic on top of the one that's already there? Or just trying to do an image within code?

[PoulpyBlast]

What exactly are you trying to accomplish? Are you wanting a button to a different graphic depending on its purpose?

Yes, this is it ! Like this, for instance :

If that is the case, I would just use a basic graphic button, and define all your graphics within an imageset (easily set up through CEED). You have already done this like you've mentioned in your first post.

So then just:

Code: Select all

m_button->setProperty("NormalImage", "Up");

Yep, that's what I actually tried to do in the first place. I load the imageset earlier (in another file) using this command :

Code: Select all

CEGUI::ImageManager::getSingletonPtr()->loadImageset("C:/CEGUI/datafiles/imagesets/myImageset.imageset");

Then, when I call setProprety with "Up" as parameter, Visual Studio doesn't find it. But it does find when I use the code I wrote in my latest post... In both cases, the image isn't drawn on screen, I still see the basic TaharezLook one

Are you trying to get an overlay graphic on top of the one that's already there? Or just trying to do an image within code?

That's kind of that, I think (I just "think" because my English skills are not perfect ^^ and I'm afraid to misunderstand)
I have a really basic 3D game, I want some GUI buttons to click on, and I want these to be PNGs that are in my computer. As simple as that

[Kulik]

You are using TaharezLook/Button, you need to be using TaharezLook/ImageButton.

See https://bitbucket.org/cegui/cegui/src/5 ... -8#cl-3829 for a list of properties you can then use.

[PoulpyBlast]

Thank you Kulik, it works perfectly !

Problem solved, thanks to you two !

[thomas]

Glad to hear you got it worked out