I am back again, I guess I am trying to do way too much than my current knowledge is letting me but I am learning so much so here goes.

I am coding a little side scrolling shooter game while I am learning allegro/C++/Programming in general. I've managed to get a lot accomplished thanks to the people in this forum and in the internet in general but I have run into a new issue. I wanted to try and make a clickable button, but I quickly learned that that isn't as simple as it sounds. So I dove into the world of GUI's and all that and am a tad overwhelmed, mostly because I haven't found anything that is beginner friendly. I downloaded and installed AGUI (I think successfully but I don't know how to operate it. So I have a few questions:

1. Is working with GUI's too advanced for me now? Should I just draw a box to the screen and use collision-like detection to find out if the area has been clicked or being hovered over?

2. Is AGUI a good lib to start learning about GUI's?

3. I actually can't get AGUI's example to run and it is giving me an error on line 157 saying the vector is out of range. However I haven't modified the source code at all so I am wondering if I missed something installing the library or if the example has a bug?

I am sure more questions will come up as the discussion starts. Thanks in advance!

Hi

1. Guis are pretty complex. When I made Agui, I had only been programming for 1 year and only 6 months with C++. But, they are very useful. While the old collision-box method will solve your problem, you'll eventually need more.

2. I would say Agui is a good library for GUIs. But it is intended for small to large projects, and has a little bit of a learning curve. In addition, like I say to everyone, Agui is intended as a generic GUI solution that should be fit to your needs. So, for example, if you dont like how buttons look, you are responsible for making them look pretty. For an example on a pretty GUI, check out the calculators demo I made to showcase this.

In addition, there are a few principals to understand for GUIs to be useful. One of these is understanding that Widgets (ex, buttons) should be thought of as notifications systems. So, you'll need to understand that, when you click the button, Agui will dispatch an Action trigger, hence the action listeners. You'll want to familiarize yourself with listeners. http://www.oodesign.com/observer-pattern.html

I don't want to overwhelm you with information. For now, let's try to get the example working and get a button in your project!

3. I suspect the problem you might be getting with the example is that the font absolutely needs to be in your execution directory. So, try to stick the ttf file that comes with Agui into the directory of your exe and run it straight from the folder. In Visual Studio, if you Start Debugging (F5) then the font needs to be in the solution folder (same folder as your cpp's usually).

Let me know what problems you encounter and I'll see what I can do to help!

Oh also, please make sure you use Agui 0.2.0

Well, I took some more time to play with it and I haven't found the solution to the example, however I found out that it seems to run fine in release mode. I am running Visual Studios 2010 and when I run it in debug mode it gives me a debug assertion failure because "vector iteration + off sets out of range". Regardless I don't need to worry about it because now I can get it to run through release and start studying the code.

Thanks for the other information you gave, it was very helpful. I do think I will try and learn agui because I will eventually need something to do more complex things like you said and it would be a good think to learn for future projects as well. I'll study up on this and see if I find any questions. Thanks again for releasing this for others to use, it seems very well done.

EDIT: I lied, when I scroll down to the bottom of your terms and copyright information the release version breaks. Not sure why, I should be using the 0.2.0 I did it through SVN (which was an experience) because I saw you posted how to install agui for someone else on another thread (I did look for help before I posted)

Could you post your msvc solution and binary? If I get some time tomorrow I can try to see what might be going wrong. The example used to have trouble in vs 2010, but I was sure that had been resolved.

If you want to work on the shooter, then yes to:

If you want to sidetrack working on the shooter, and are OK with taking time to learn more about programming in other areas, then go ahead and think about GUIs and GUI libs.

(On a side note, it's a shame that we don't have a dumb-simple GUI that plops into Allegro somewhere... or maybe we do?)

You just wanted the things in my project folder?

And I am ok stepping away from my project to learn because I am doing my project in order to learn.

As a side note, I started playing around with the example (changing code, adding new things based on documentation) and I found out that all the locations of the buttons seem to depend on the layout that you have going. I was wondering what the best one to use for a single Colosseum of buttons in the center of the screen would be, If I used a grid I would have to make a bunch of empty widgets it seems? Also is there a way to make the buttons not fill up the entire grid square? I tried set size but that didn't seem to work.

Thanks!

Yes, send me your project folder.

To do what you're asking, I think the FlowLayout might be what you want.

setMaxOnRow to 1.
setHorizontallyCentered to true

But, there's no setVerticallyCentered.

Really, this should be solved with a BoxLayout, but, I never made one.

You will have to manually solve for the FlowLayout's Margins to make it vertically centered.

The other option is to do the above, but,make a GridLayout with 3 rows. Put the FlowLayout in the second row and shove an empty widget for the first row.

This way, your menu always takes 1/3 of the screen without you having to calculate it.

The Layout system was added in as a last minute feature and unfortunately I have only made it as flexible as I needed. But, a BoxLayout would be a nice future addon. Either that or add setVerticallyCentered to FlowLayout.

Note, you can always directly add buttons to the gui objects itself, and manually set the position of the button with button->setLocation().

The layouts are for games that are dynamically resizable and do not used a fixed resolution.

Append:

To have them not take up the whole grid square:

Change the horizontal and vertical spacing of the grid
or
Change the button's margins.

Thanks for the info I think I am getting the hang of this. Also, I tried zipping the folder and putting it in this post but the upload keeps failing. Want me to send an email to ya? Or do you want to just try it yourself?

You could upload it to a place like mediafire http://www.mediafire.com/

Here it is

Thanks

It turned out to be a bug. When I added color support to the extended textbox, I forgot to add code that would add the colors to the color array when calling the setText function. This would leave it in an inconsistent state and cause an array out of bounds problem.

I just fixed it in SVN. Recompile from SVN sources and let me know how it goes

I created a simple GUI in C which checks the mouse position against where the buttons are, it's really quite simple and for what I am doing, all I need.

This is my level editor for a pacman style game I am working on...
{"name":"607888","src":"\/\/djungxnpq2nug.cloudfront.net\/image\/cache\/a\/f\/af418517367dd36ef43ab07b908c23e5.png","w":1030,"h":796,"tn":"\/\/djungxnpq2nug.cloudfront.net\/image\/cache\/a\/f\/af418517367dd36ef43ab07b908c23e5"}

I just check the mouse position, if it is over one of the buttons, it changes the button graphic to one for when it is hovered over. If it is over it and the mouse button is clicked I have a button for when it is clicked, so they light up as it moves over them etc... it looks quite nice and works well. IN the events I simply flag the button that was click on or hovered over then react to that later on in my code.

It's definitely not GUI library coding! But it's all one needs for a video game.

That's a really nice looking editor. What do you use to make your graphics? I'm using MS paint atm and it doesn't look great.

GIMP is nice on Linux, but there is even a Windows version of it, which is OK.

http://gimp-win.sourceforge.net/

There's also Inkscape for vector graphics.

http://inkscape.org/download/

I use a variety. For my game characters and some of my pills I actually rendered them with TruSpace 6. For my line graphics I made them by hand mostly with Tile Studio, although I could have rendered them as well, I just wasn't happy with the results and found it easier to just do them by hand. I also done much of my background tiles with Tile Studio. I used Photoshop for my buttons, although I have GIMP which would work just about as well (Edit: I also like Inkscape).

Here are examples of how I did my two styles of buttons.
The top graphic is what is displayed normally. The second one down (middle) is when the mouse hovers over it (very simple to detect), then the third is when the mouse button is clicked while over the button.
{"name":"607892","src":"\/\/djungxnpq2nug.cloudfront.net\/image\/cache\/5\/3\/5338bd184b07884d1243644476908c9c.png","w":256,"h":159,"tn":"\/\/djungxnpq2nug.cloudfront.net\/image\/cache\/5\/3\/5338bd184b07884d1243644476908c9c"}

I'm not much of a C++ programmer yet, this project is in pure C, but it works well for what I need. I use the following struct for the buttons...

typedef struct BUTTON {
   int x;                  // upper left corner horizontal position
   int y;                  // upper left corner vertical position
   int w;                  // width of button
   int h;                  // height of button
   int state;              // Button state: 0 up, 1 over, 2 down
   int old_state;          // store the old state to see if it changed
   bool is_switch;         // is this a switch (true) or button (false)?
   ALLEGRO_BITMAP *bmp;    // main bitmap with button images
   ALLEGRO_BITMAP *up;     // subbitmap for button up graphic (when it isn't active)
   ALLEGRO_BITMAP *over;   // subbitmap for button that is being hovered over by mouse
   ALLEGRO_BITMAP *down;   // subbitmap for button after it has been clicked
} BUTTON;

And these are the functions I use to handle them... they're fairly self explanatory. I can post more code if you wish. It's probably not the best way to do things but it works and I am fairly certain this could easily be converted to a C++ class. I may try that actually some time.

bool new_button(BUTTON *b, bool is_switch, const char *file, int x, int y);
bool check_button(BUTTON *b, ALLEGRO_MOUSE_STATE *mouse);
void draw_button(BUTTON *b);
void destroy_button(BUTTON *b);

EDIT: If you're curious, you can download the editor here. The game isn't finished yet, I always create the editor first before I make the game.
Pace2.7z
Note: Turn the mouse wheel to change the background tile.
To draw lines you simply click on the map and start "drawing" the lines, no need to place individual tiles. Left mouse draws, right mouse erases.

I have also thought about using Allegro 5 exclusively to actually draw the buttons rather than load them in. It's got some nice functions for drawing that could do the job quite nicely and probably make for a more portable GUI.

That's awesome thank you so much! I love it

Once you run the editor it creates an INI file, if you change "fullscreen=0" to "fullscreen=1" you can use it in fullscreen mode. Thanks to Matthew Leverton, it uses a function he created for stretching the screen to match your desktop resolution. Something to keep in mind for your game as well.

Hmmm... the game and the editor use the same INI file, I should probably change that.