In need of a Panel Designer
kingnoob

The attachment is a screenshot of the game that I am writing using Allegro. It is a Space Conquest game. I just got done clicking the Human home world (dark blue) and then the planet at the upper right of the panel. The panel is (will be) a send ships panel. The problem is it took me way to long by hand just to make that close panel button. Is there a visual panel designer for Allegro? If I have to write one myself what is the best way to get the panel data into my program? Could a library be written that loads data for the panels from a file. There is a reason I have the user name, kingnoob. This is my first real attempt at graphics, ever. And I'm almost completely clueless about these things. Thanks in advance!

P.S. I searched for Allegro panel designer but found nothing.

P.P.S. Second attachment is after the game has run in demo mode for a few minutes. As soon as the send ship panel is done the Human's can be controlled by a well a human player!:)

RmBeer2

You can use 0x0.st for send any images, and late you use 'img src=""' (From Formatting Help) for show the image in the forum.

Regarding the design of the panels, it can be whatever you want, although it's worth hiring a graphic designer for your team and making the appearance look more beautiful. Since this is your first time, a simple filled rectangle and border of another color (which can be achieved with 2 primitive functions) is enough.

For now, don't try to create an external file to customize the panel in some way, because it could be enormously complicated. Do something simple and straightforward from the code until it works.

amarillion

What do you mean when you say panel designer?

Are you talking about designing icons? There are loads of free icons out there. For example, https://fontawesome.com/ Anything you can convert to PNG images can be loaded into allegro.

Or are you talking about putting buttons and checkboxes and text inputs together in a dialog window? I'm not aware of any good tools that do that for Allegro.

kingnoob

"Or are you talking about putting buttons and checkboxes and text inputs together in a dialog window?" Yes, this one. I call it a panel. Maybe I should call it a popup or even a dialog. I think the easiest approach would be to just display the x and y offsets on the screen after visually designing the panel and then just adding the offsets manually to the game code.

Edgar Reynaldo

I have a GUI library you might be interested in. There are others as well. Mine is Eagle. jmasterx has AGUI, SiegeLord has one, Mark Oates has one, just depends on what you need.

You can find Eagle here :

https://github.com/EdgarReynaldo/EagleGUI

And there is a binary release available here :

https://github.com/EdgarReynaldo/EagleGUI/releases

In my GUI, a WidgetHandler is what you refer to as a panel. You add widgets to it and then just do a little housekeeping in your main loop to display it and keep it up to date.

EDIT
In other news, Eagle has reached 500 commits! :)

kingnoob

First the game was prototyped in QB64 (Quick Basic to C compiler with simple built in graphics) a year ago. It was slow as molasses in January. It was January, ;D! It is a fun and challenging game! I wanted the option to have more players and more stars. So now a year later I'm writing it in C, now that I know how to use a graphics toolkit.

I'm old and my goal is to upload my game to an Indie Game site and to sell it to at least one person for $4.99 before I die, ;D.

Attached is an example of a popup panel from the QB64 prototype. Also crafted totally by trial and error and it took forever. I really need a visual designer to help with this.

Thanks Edgar, I'll take a look!

Edgar Reynaldo

A panel like that could be done easily with Eagle, or any other GUI library.

The only widgets I see are buttons and a color panel with text. Eagle provides Grid and Table layouts that would take care of that easily. Along with a relative layout to position each set of elements and it would be handled simply.

EDIT
To address your needs of a visual layout designer, Eagle doesn't come with a GUI editor (yet). But it's easy enough to design it on paper first and then just code it up.

kingnoob

This is the send ships panel (attachment). It took me all day and I'm not done. I have to tweak the positioning some more. Shrink the checkbox line so a clear button and a backspace button can be added. Create a new font size because the bottom row looks a bit crowded, ect, ect, etc.

I understand this is my agenda and not anyone else's. But I could have finished this in an hour or less with a visual designer. I'll probably have to write one myself. However, if someone wanted to help they could write one. A lot of people could benefit because of it. I'm on borrowed time and I'd prefer not to have to attempt it. All the designer would have to do is write the code for copy and paste. In my scheme each panel is its own dedicated draw function. So the designer would write the function and one would just copy it. The panel's processing is in a separate dedicated function! This makes program design very easy (for me). I have no idea how standard it is to do it this way? I won't trouble further about this. I just wanted to put the idea out into the ether!

EDIT: I tweaked the send ships panel and it is good enough for now to allow a human player to play the game. There is no game panel yet so there are no other features. At least game play will be able to be tested. I'll probably try to write a visual designer for version 2 of the game! Bye for now unless someone wants to talk! :)

Edgar Reynaldo

That took me 5 minutes to draw on paper. Think outside the box.

I have everything you need except for a flow layout for the text buttons at the bottom. I'll try to come up with an example for you using Eagle.

kingnoob

Thanks Edgar! If you could make a little working example close to the Send Ships panel it would help me out a lot. I don't learn new things as easily as I once did. :) Maybe draw two circles with ships, etc. Thanks! Hold on I'll attach how I do my selector. Just for information. The game is in gui selector mode. Left clicking on the destination planet puts it in Send Ships mode. Then it draws the send ships panel and will only process clicks and key presses for that panel.

Edgar Reynaldo

The key is to use a RelativeLayout as your root layout for the widgethandler gui. For example, I can divide it into 7 rows of widgets. Tell me, in the attached image, what are these two widgets? Sliders? Percent bars? Text? The one in the third row from the top and the fifth row from the top on the right.

Also, I can show you how to connect them together using listeners, or event queues.

{"name":"612845","src":"\/\/djungxnpq2nug.cloudfront.net\/image\/cache\/f\/c\/fc79fbb70528f928b5558208bfe2a92f.png","w":479,"h":541,"tn":"\/\/djungxnpq2nug.cloudfront.net\/image\/cache\/f\/c\/fc79fbb70528f928b5558208bfe2a92f"}612845

kingnoob

"Tell me, in the attached image, what are these two widgets? Sliders? Percent bars? Text? The one in the third row from the top and the fifth row from the top on the right."

From the top.

1. Name of Origin star
2. Number of ships on origin "to" Number of ships on destination.
3. Name of destination.
4. 0123456789 use mouse to enter number of ships
5. Number of ships to send. After hours of play ships can number in the millions.
6. % of ships to send. Can be instant if checkbox is checked. Otherwise click "Send".
7. % of ships to send using slider. Can be instant when clicked. "
8. After check boxes a Clear button for 4. in case of mistake or just a backspace.
9. Two instant commands, No Retreat highlighted with RED background if selected, send ships.

:)

P.S. I edited my post above.

P.P.S. Um, this is a real time game if that is important to know!

Edgar Reynaldo

I'm working on a solution for you. Tell me, if I code it, will you use it? Or am I just writing an example?

I take it the light blue bar is a text input area? That stores the number of ships to send? I understand the rest of it too. It may take a few hours to wire it all up, but I think it's doable.

kingnoob

If it works, sure I'll use it. I'll need a static link version for the final release. In The Depot I attached an exe of my first playable compile. The send ships panel is mostly done. But you will have to supply the DLL's and DejaVuSans.ttf file, all in the same directory as the exe. I've already been chewed out for doing it that way, ;D.

P.S. The keyboard can also be used to enter the number of ships. So that is 5 ways the ships can be entered.
1. clicking on the numbers 0 - 9
2. By the % boxes
3. By the % bar arrows
4. By clicking directly on the % bar
5. By the keyboard

If the radio buttons for the boxes and/or bar are on then clicking on the boxes and/or bar immediately sends ships without having to click send. And the enter key will also act as clicking send.

{"name":"Capture3.pgn","src":"\/\/djungxnpq2nug.cloudfront.net\/image\/cache\/1\/8\/18b5cf84b5996fd536a879dd20acdc92.png","w":1921,"h":1080,"tn":"\/\/djungxnpq2nug.cloudfront.net\/image\/cache\/1\/8\/18b5cf84b5996fd536a879dd20acdc92"}Capture3.pgn

Edgar Reynaldo

You've already got it done,... why should I do it again?

???

amarillion

The trouble is that any "panel designer" must be very closely linked to the GUI system that is used. Allegro has no built-in GUI system, but there are a few options like Eagle GUI, and a few other that Edgar mentioned.

kingnoob, you have a clear choice to make. Either adopt a GUI system like Eagle GUI, and benefit from tools and examples that Edgar is providing. Or not, and be free to do everything your own way. But there is no off-the-shelf "panel designer" that matches your personal way of doing things.

kingnoob

"You've already got it done,... why should I do it again?

???"

I thought that you wanted the exposure and a credit in my game. I would use it for your benefit as well as my own. I still have to build the game panel which is bigger and more complicated than the send ships panel.

"amarillion:
The trouble is that any "panel designer" must be very closely linked to the GUI system that is used. Allegro has no built-in GUI system, but there are a few options like Eagle GUI, and a few other that Edgar mentioned."

But I was not asking for a gui system. I was just asking for something that would give me x and y bounds. Or better yet just write the draw code as well. It could even write a separate function that was just basically an if () {} else if () {} skeleton that functionality can be added to. It is just very simple and generic what I am doing. I have a switch statement one each for the draw gui in the draw frame code and one switch for the panel that is active to get input. Then there is gui[8] so that gui[ui] points to the panel on top if there is one.

"kingnoob, you have a clear choice to make. Either adopt a GUI system like Eagle GUI, and benefit from tools and examples that Edgar is providing. Or not, and be free to do everything your own way. But there is no off-the-shelf "panel designer" that matches your personal way of doing things."

Well thank you, that answers my question. :)

amarillion
kingnoob said:

It is just very simple and generic what I am doing.

It doesn't matter how simple it is. What matters is, how many other people are doing it exactly the same way you do it? If nobody else does it the same way, then why would there be a panel designer?

kingnoob

"It doesn't matter how simple it is. What matters is, how many other people are doing it exactly the same way you do it? If nobody else does it the same way, then why would there be a panel designer?"

How was I to know that? I've never done anything like this before. All I did was ask a question and you sick your attack dog attitude on me. You answered the question, finally. Just leave it there!:-X

Edgar Reynaldo

Truth is, I've never found a need for a panel designer, so I never got around to coding one. You're the first person in 10 years that has asked for one, so it's not like they're totally in demand or reqiured to make your own gui panel.

As you showed, it can be far simpler to code it manually. Sometimes you don't always need a full function gui.

I just didn't see what the point of it would be for me to continue coding something you've already got working. I've got plenty of my own projects to work on, but I was willing to do an example in Eagle for you. To keep my word, I'll finish a prototype for you, but you would have to hook up the events. And if you want I could show you how to integrate it into your code. Eagle is a state engine. Nothing happens if you don't feed it an event.

Thread #618343. Printed from Allegro.cc