SyntaxBomb - Indie Coders

General Category => Worklogs => Topic started by: Qube on April 09, 2019, 01:19:33 AM

Title: Qube's Game Framework - The dreaded GUI
Post by: Qube on April 09, 2019, 01:19:33 AM
After doing a few games for the comps here the time has come to rewrite my very cheap and cheerful tools into something more productive and useful. I've been tinkering with extending my game framework and tools over the months but the underlining core was always the brute force quickest coding method used to initially create them due to the game comps time length.

So it's out the window with a shed load of code / tools and time to do things in a more orderly fashion \o/

It occurred to me that I'm going to need a GUI, arrrgggghhhhhh. I don't need a huge sophisticated GUI but I do need one that has all the basics that work well. Tonight I started on such GUI... More \o/ blah, I hate GUI's but it's needed.

I thought I'd chart my progress through the creation of the GUI and forthcoming tools in a worklog.

Without further ado, here's day one's progress. Which shows multiple windows and then selection of said windows ( very boring but GUI coders may appreciate it, honest! ). The goal of the GUI's side is to be very performant and I've tested it with 200+ windows and the frame rate remains super smooth.

Next step is to move the Windows around with the mouse. I bet ya can't wait for that video? :P

Title: Re: Qube's Game Framework - The dreaded GUI
Post by: blinkok on April 09, 2019, 02:18:02 AM
What language are you using? Blitz, AGK etc
Title: Re: Qube's Game Framework - The dreaded GUI
Post by: Matty on April 09, 2019, 02:24:57 AM
For a game....(not an editor...a game) - most guis probably just needs buttons, text fields, labels, editable text fields, panels and borders, and that's about all really isn't it?
Title: Re: Qube's Game Framework - The dreaded GUI
Post by: blinkok on April 09, 2019, 02:35:35 AM
Maybe listbox, radio button and checkbox as well
I'm not sure i've ever seen a game that uses drag able windows though. Not that i've seen many games
Title: Re: Qube's Game Framework - The dreaded GUI
Post by: Qube on April 09, 2019, 02:54:31 AM
What language are you using? Blitz, AGK etc
It's AGK as when I get around to doing the tools like the tile map, level editor, sprite / animation editor, particle editor, etc. I want so see exactly how it'll look in the game. The idea is to have hot keys in the game to bring up certain tools so I can make changes, save and continue on testing in a live environment.

My goal here is to finally do a complete game dev toolset framework.

I'm not sure i've ever seen a game that uses drag able windows though. Not that i've seen many games
Me either but at this stage it's for the tools which will be accessible during development and not an in-game GUI. Having said that the GUI will be multi-skinable ( as in multiple skins with the same GUI code base simultaneously ) so the more game based basic features can be used in a game if needed.

For a game....(not an editor...a game) - most guis probably just needs buttons, text fields, labels, editable text fields, panels and borders, and that's about all really isn't it?
I've worked out for the tools I'll be needing moveable windows, buttons, edit boxes, text areas, scroll bars / areas, radio buttons, tick boxes, dropdown boxes, list boxes, toggle switches, main menu, popup menus, progress bars. I don't need things like tabbed groups or multi column lists but if the need arises I'll add them in.

I'll also be doing a GUI designer so I'm not doing boring slow GUI stuff via code all the time. All the tools will be outputting source code and not just some markup language to parse through so for example in the level editor if I setup a sprite to move / animate around then it'll output source code rather than a script which then gets interpreted.
Title: Re: Qube's Game Framework - The dreaded GUI
Post by: blinkok on April 09, 2019, 04:03:14 AM
If you are going to have content outside the size of the window, which can be accessed using a scrollbar ie. clipping, I would suggest you do some extensive testing on the scissor commands.
In my experience this is the only way to clip the contents of the window other than rendering to a canvas (which would mean handling all the inputs independently).
For one i have noticed that the EditBox only clips the text, Not the background or outline.
Title: Re: Qube's Game Framework - The dreaded GUI
Post by: Qube on April 09, 2019, 05:19:57 AM
If you are going to have content outside the size of the window, which can be accessed using a scrollbar ie. clipping, I would suggest you do some extensive testing on the scissor commands.
In my experience this is the only way to clip the contents of the window other than rendering to a canvas (which would mean handling all the inputs independently).
For one i have noticed that the EditBox only clips the text, Not the background or outline.

Never fear, I'm an expert with scissors and having them cut at any location with any dimension ;D
Title: Re: Qube's Game Framework - The dreaded GUI
Post by: blinkok on April 09, 2019, 05:49:22 AM
lol
Title: Re: Qube's Game Framework - The dreaded GUI
Post by: Derron on April 09, 2019, 06:23:14 AM
Next to standard stuff my framework has...as it is used in my games:

Slider
SelectList
SlotList (empty slots can be replaced with items...predefined list size)
Modal Window (disabling underlaying stuff)
ScrollablePanel

Some elements use other base widgets to fullfil their task (scrollbar: two buttons plus interactive click area. Etc.).

Also the lists etc have dragndrop support between the widgets.

Bye
Ron
Title: Re: Qube's Game Framework - The dreaded GUI
Post by: Qube on April 09, 2019, 06:48:22 AM
Also the lists etc have dragndrop support between the widgets.
Yeah, I’ve thought about drag and drop stuff but at the moment I can’t see a good reason for it to speed up dev during game development. Time will tell as the GUI becomes production ready and tools are created. I may need more than anticipated.

Very early days yet but I hope the initial thoughts and pre planning work out :)
Title: Re: Qube's Game Framework - The dreaded GUI
Post by: Derron on April 09, 2019, 07:14:49 AM
Dunno much about AGK but as widgets need to inherit functionality you need to think about such stuff before if you cannot simple extend a type from another in your language.

My widget system also based on events to allow loose coupling (A doesn't need to know about B to still receive the information about an action in B). This might not be needed in AGK as you include everything so A knows about B,C,D ....


And I forgot about a "textarea" widget - which means blocktext, scrolling - and in a later incarnation maybe even a caret/cursor for editing. Where do you use it? Map editor: "description block" or ingame-script-edits.
If you do not need that, then your "label" widget must allow multi-line.


bye
Ron
Title: Re: Qube's Game Framework - The dreaded GUI
Post by: Steve Elliott on April 09, 2019, 10:45:39 AM
Good luck with this addition to your framework.  It might not be as interesting as game making, but will facilitate quick production when these features are required for a project.
Title: Re: Qube's Game Framework - The dreaded GUI
Post by: Qube on April 12, 2019, 03:42:20 PM
Finally spent some more time to make a little progress on my GUI. I can now move windows around, set text labels and hover over buttons in active windows, thrilling :P

Still loads to do yet adding in all the gadgets but I'm glad I have the basic underlying code up and running. I would like to say all the hard work is done but being a GUI I just know it's going to kick me when ever it gets the chance to throw in bugs :P

The GUI is skinable but as this is only for me and will be used in a dead of night then I've gone for a dark basic look over a happy shiny one.

Video goodness :

Title: Re: Qube's Game Framework - The dreaded GUI
Post by: Qube on April 22, 2019, 10:45:36 PM
The GUI is coming along well and I've not much more to do now *finally* - I can then move onto the GUI designer and then start on a shiny new map / level maker \o/

Quick performance test with 24 active windows which is about 1000+ sprite draws to make up the GUI elements + background logic and running at a silky smooth 60fps. Who said AGK was slow? ;D

( scaled down image )

(https://www.syntaxbomb.com/images/QubesGUIMadness.gif)
Title: Re: Qube's Game Framework - The dreaded GUI
Post by: Steve Elliott on April 22, 2019, 10:58:28 PM
Looking very swish, and other coding software to follow.  Cool.   8)
Title: Re: Qube's Game Framework - The dreaded GUI
Post by: Qube on April 22, 2019, 11:47:28 PM
Looking very swish, and other coding software to follow.  Cool.   8)
Thanks. Yup, I have to fight the boredom of GUI writing so I can use it to make the dev tools I have planned :P.

Cool thing about the GUI is I can use it in both low res ( that's the version in the screen shot ) and HD resolutions by just changing two variables, 1) The GUI sprite atlas to use and 2) Which font to use.
Title: Re: Qube's Game Framework - The dreaded GUI
Post by: Qube on May 09, 2019, 02:43:21 AM
Another super exciting update on my GUI adventures ;D

Tonight I put the finishing touches to the event system and implemented timers \o/

For the timer test I create a window, a label and a timer set to trigger once per second. When the event fires I update the text of the label with the current time. The code is as per below. Quite happy with how it's all turning out and soon I'll have enough to start creating some shiny new game making tools.

Code: [Select]
If gui_Event_Get( thisEvent ) = gui_Event_Match( gui_Event_Window, "timer 1" )
gui_Gadget_Find( gui_Event_Window, "label 1" )
If guiFoundGadget > 0
guiGadgets[ guiFoundGadget ].text = GetCurrentTime()
EndIf
EndIf

The code above is simply "look at the event" > "is it's label called 'timer 1'" > "yes - find 'label 1' in the window of the event" > "update it's text". Not bad considering AGK has no fancy frilly language gymnastic features :P

Soon I'll move on to the GUI designer which will output the source code to create the window & gadgets and also have blank If / EndIf's ready to fill in what happens if things are clicked etc.

Full on action video :

Title: Re: Qube's Game Framework - The dreaded GUI
Post by: Qube on May 10, 2019, 10:29:15 PM
Phew, finally at a stage where I can begin on the GUI designer. I've enough gadgets coded up to move on to the next step of this mind numbing project.

Early screen shot of my GUI designer ;D :P

(https://www.syntaxbomb.com/images/QubeGUIDesigner001.gif)
Title: Re: Qube's Game Framework - The dreaded GUI
Post by: GaborD on May 11, 2019, 12:50:52 AM
This looks really great!

Title: Re: Qube's Game Framework - The dreaded GUI
Post by: Qube on May 11, 2019, 12:58:17 AM
This looks really great!
Thanks :) - It's turning out well and will be useful for in-house tools. I know a GUI based thread is very boring for many people and also a very boring theme to watch video's of GUI stuff :( - But I must inflict my personal pain on others ;D

Hopefully the next updates with the GUI designer and then level maker in action will be somewhat more, erm exciting? :P
Title: Re: Qube's Game Framework - The dreaded GUI
Post by: iWasAdam on May 11, 2019, 12:13:05 PM
Well impressed :)
Title: Re: Qube's Game Framework - The dreaded GUI
Post by: Qube on May 15, 2019, 01:17:43 AM
For those still following the thread that haven't fallen into a coma yet...

I've finally got enough gadgets done to warrant moving on to the next dull, I mean exciting phase ... "The GUI Designer"

Below is a 1st steps video demonstrating adding gadgets to a window. Super exciting I know but even more exciting is the next step of being able to drag those gadgets around and setting their properties. After that will be the code generation part of the GUI designer.

It's all happening at a slow pace but I don't want to over excite myself at this old age :P

Title: Re: Qube's Game Framework - The dreaded GUI
Post by: blinkok on May 15, 2019, 04:12:15 AM
Looks very nice! Can you resize the window smaller than the area used by the controls.
Title: Re: Qube's Game Framework - The dreaded GUI
Post by: Qube on May 15, 2019, 04:22:45 AM
Looks very nice! Can you resize the window smaller than the area used by the controls.
You sure can :) - All clipping is pixel perfect and will be demonstrated in a later video once I add in the visual side of editing gadgets.
Title: Re: Qube's Game Framework - The dreaded GUI
Post by: GaborD on May 15, 2019, 05:42:14 AM
For those still following the thread that haven't fallen into a coma yet...

Well, I am sure not falling into a coma after that last vid.
The amount of functionality you already have in there is amazing.
Very impressive.
Title: Re: Qube's Game Framework - The dreaded GUI
Post by: Steve Elliott on May 15, 2019, 10:18:17 AM
GUI Designer, very nice. I'm all for writing code rather than running through menus, but this is an exception that will save a ton of time - just drag n drop.
Title: Re: Qube's Game Framework - The dreaded GUI
Post by: Qube on May 15, 2019, 03:20:13 PM
Quote
The amount of functionality you already have in there is amazing.
Very impressive.
Thanks. Lot's to do yet but its slowly taking shape :)

Quote
GUI Designer, very nice. I'm all for writing code rather than running through menus, but this is an exception that will save a ton of time - just drag n drop.
Yes, hand coding GUI windows is very slow going and so this mind numbing exercise ( not a big fan of GUI coding ) will speed up that side, especially when I start coding game related tools.
Title: Re: Qube's Game Framework - The dreaded GUI
Post by: Derron on May 15, 2019, 05:54:46 PM
Have fun to include all the property-widgets so you can setup the "special" stuff of each widget (custom font, custom text limitations, min/max of spinners, ...). THIS is the nasty stuff of a GUI designer ;-)

Blueprints would be cool too (so you can "click together" that eg. a button is set to "hidden" if another one is clicked). This is all GUI stuff, so it should not be stuff the coder has to have a look at - it is a matter for the designer dude. Also it is easier to do stuff by mouse (if possible) than wiring it up by hand in code, compile, try ...


bye
Ron
Title: Re: Qube's Game Framework - The dreaded GUI
Post by: Qube on May 15, 2019, 08:15:52 PM
Quote
Have fun to include all the property-widgets so you can setup the "special" stuff of each widget (custom font, custom text limitations, min/max of spinners, ...). THIS is the nasty stuff of a GUI designer ;-)
That's the part I'm working on now. I don't need custom fonts per gadget as I like a uniformed look for GUI text and I'd never use that feature.

Quote
Blueprints would be cool too (so you can "click together" that eg. a button is set to "hidden" if another one is clicked). This is all GUI stuff, so it should not be stuff the coder has to have a look at - it is a matter for the designer dude. Also it is easier to do stuff by mouse (if possible) than wiring it up by hand in code, compile, try ...
I have group support for things like buttons, so I can enable / disable all in that group. Also radio groups are of course automatically handled. The idea to link x with 1 2 3 4 sounds a cool feature on the surface but I can't see a scenario where I'd use it over and over again to speed up GUI coding.

The GUI designer will have all the basics to quickly make GUI's and generate the source code with blank If / EndIf statements for events related to that window. It'll save a load of manual creation of GUI stuff. If / when it becomes apparent that additional features are needed then they'll get added based on need rather than "wouldn't it be cool if" as I'll be adding funky pointless stuff forever :P
Title: Re: Qube's Game Framework - The dreaded GUI
Post by: Qube on May 15, 2019, 09:27:45 PM
Looks very nice! Can you resize the window smaller than the area used by the controls.

Here you go, just for you :) - early video of widgets in action :P

Title: Re: Qube's Game Framework - The dreaded GUI
Post by: blinkok on May 16, 2019, 01:25:29 AM
Super awesome. Really looks neat. Do you do that with the scissor command or render to a canvas?
Title: Re: Qube's Game Framework - The dreaded GUI
Post by: Qube on May 16, 2019, 02:03:25 AM
Super awesome. Really looks neat. Do you do that with the scissor command or render to a canvas?
Thanks :) - It's with the scissor command which is a pain as the container also needs a scissor command to allow for window dimensions that are larger than the container and you can't have a scissor within a scissor so it took a little faff about to work smoothly.

Writing a GUI really needs some form of OOP but AGK doesn't have OOP. When I set about this I didn't want to have any part of the GUI in a DIM or have any limits on the amount of windows or gadgets. So what was the solution?. AGK does have Types which in a way can act like a sudo OOP for referencing, so I can have things like window.xpos window.ypos etc etc. Granted types only return things like integers, floats or string etc, but it offers enough to allow you to create a dynamic system with no hard limits or crazy DIM usage.

Insert a few lookup routines and you have a close enough OOP system to create a fully dynamic no limits GUI system ;D
Title: Re: Qube's Game Framework - The dreaded GUI
Post by: blinkok on May 16, 2019, 03:16:45 AM
I was thinking of using separate apps for each window and using comms to pass the data. That way no worrying about windows as such and the panels could be dragged onto another screen
Title: Re: Qube's Game Framework - The dreaded GUI
Post by: Qube on May 16, 2019, 03:25:10 AM
I was thinking of using separate apps for each window and using comms to pass the data. That way no worrying about windows as such and the panels could be dragged onto another screen
That sounds like an odd complex idea. What's your thinking behind it rather than in-app where each and every data is easily accessible?
Title: Re: Qube's Game Framework - The dreaded GUI
Post by: blinkok on May 16, 2019, 04:56:58 AM
Mostly for the ability to drag the windows outside the primary window. If you look at any IDE now days they have that functionality (which is great for multiple screens). It also separates out most of the processing from the main app. So all you are doing is passing data from one app to another which would be super easy with json strings. The window would have a very low FPS so as not to drag on the CPU and less chance of conflict with data names within the main app
Title: Re: Qube's Game Framework - The dreaded GUI
Post by: Derron on May 16, 2019, 06:28:20 AM
You could just use the widget system of your desktop. This is like an ingame gui.

Bye
Ron
Title: Re: Qube's Game Framework - The dreaded GUI
Post by: Qube on May 17, 2019, 02:27:45 AM
Tonights work was adding interaction between windows and GUI gadgets. This is super easy to code in a fixed environment but not so much when it comes to a more dynamic GUI. The below video is boring but at the same time shows a working interaction that can be applied to any amount of windows.

Title: Re: Qube's Game Framework - The dreaded GUI
Post by: blinkok on May 17, 2019, 05:24:13 AM
It looks very very smooth. very nice work
Title: Re: Qube's Game Framework - The dreaded GUI
Post by: Qube on May 20, 2019, 03:48:55 AM
It's that exciting time again ;D

Moved on to GUI code creation \o/ - This video shows creating a basic window, editing the gadgets and the outputted code with event handlers. Not all events will be needed so I'll just delete the ones I don't want.

Creating a GUI designer was a lot more work than I first thought. I've never done one before but it's going to be a great time saver when it comes to whipping up GUI bits for the upcoming tools adventure.

Here's the video ( ooops, spelling mistakes included )

Title: Re: Qube's Game Framework - The dreaded GUI
Post by: iWasAdam on May 20, 2019, 06:31:28 AM
text:align - you deserve a medal :) none of that Taxt:gravity rubbish!
Title: Re: Qube's Game Framework - The dreaded GUI
Post by: Derron on May 20, 2019, 07:29:50 AM
In my bitmapfont-class I have a "DrawBlock" function too - and you can align text with simple "0-1.0" values with "0.5" meaning "center". That way you could even do something like "bouncing texts" within a given boundary.
"left, center, right" are then just constant values.
"ALIGN_TOP_LEFT" is then a vector (0, 0)
"ALIGN_CENTER_LEFT" is then a vector (0, 0.5)
...

This is needed as you most probably WILL land in the situation in which you need to align multi-line-labels to some widgets - and this is not always "top left".

Sometimes it would even be needed to access "font baseline" (so not the bottom of "Qg" in "Quaagg" but the bottom of the letters "uaa"). But this is advanced stuff which could be added when really needed.



@ gui designer
Yes it is heavy stuff. Writing GUI/editor code is what I find most time consuming too. Which is why we have no DB-Editor for TVTower yet, it is just too complex what you need to pack into the editor - all the interaction code (events), editor effects (add an entry needs to update lists and other elements). I kind of dislike it ;-)



bye
Ron
Title: Re: Qube's Game Framework - The dreaded GUI
Post by: Qube on May 20, 2019, 01:26:29 PM
text:align - you deserve a medal :) none of that Taxt:gravity rubbish!
You made it that far into the video, congrats ;D

Quote
Sometimes it would even be needed to access "font baseline" (so not the bottom of "Qg" in "Quaagg" but the bottom of the letters "uaa"). But this is advanced stuff which could be added when really needed.
The text function I wrote for this handles font kerning too ( as can be seen at the end of the video when it shows the generated source code ). I could of cheated and used the built in text commands but they don't allow for bitmap fonts which are kinda key for games.

Quote
@ gui designer
Yes it is heavy stuff. Writing GUI/editor code is what I find most time consuming too.
It turned out to be a lot more work than I first thought and a lot harder to write a flexible GUI but as I'll be writing many game based tools it'll be a big time saver in the end. Oddly enough the source code generation side turned out to be a piece of cake and I thought that would be the hard part.

Lots to do yet but at least it's finally taking shape. Just have to power through till all the gadgets are coded up and then off I go ;D
Title: Re: Qube's Game Framework - The dreaded GUI
Post by: Qube on June 05, 2019, 04:45:46 AM
Small update... Couple more days and I should have the GUI and GUI designer finished \o/ \o/ \o/ \o/ \o/ \o/ ;D

It's been a long hard slog and some parts of the "behind the scenes" code isn't as elegant as I'd like but from the user end it all works pretty smoothly. As this is my first full on GUI plugin it miraculously worked better than I thought it would as going into this I wasn't too sure where the pitfalls would be.

The GUI designer ended up being a whole heap more work than anticipated but worth doing as it'll save loads of time when it comes to doing the GUI for the upcoming game based tools.

As always, once you've done something for the first time you always have a better approach for the next time. I've coded simple GUI's before but they've always been very ridged and fixed with a bunch of user based code to handle things. This time around I wanted a much more flexible GUI ( and GUI designer ) and sheesh, they are a lot of work and way more than first thought.

I'll shove up another video soon showing the final result of the GUI + designer + the source code generation + making apps with it. I know GUI's are boring stuff but just wait till you see my map maker / level editor in a couple of months time ;D
Title: Re: Qube's Game Framework - The dreaded GUI
Post by: Derron on June 05, 2019, 05:54:35 AM
Welcome in the GUI coder club ;-)

And glad you experience the GUI-lib-user moments of boring repetitive grunt work when setting up a designer or editor. It is not my cup of tea either.
Nonetheless it is a good test for your lib and you surely spotted bugs here and there while developing the editor.


Bye
Ron
Title: Re: Qube's Game Framework - The dreaded GUI
Post by: Qube on June 05, 2019, 07:01:31 AM
Quote
And glad you experience the GUI-lib-user moments of boring repetitive grunt work when setting up a designer or editor. It is not my cup of tea either.
That's the perfect phrase "boring repetitive grunt work". I tried to streamline parts but each gadget can have it's own unique bits and pieces so I just decided in the GUI designer to handle each gadget separate ( just in case ).

Quote
Nonetheless it is a good test for your lib and you surely spotted bugs here and there while developing the editor.
Yup, quite a few issues popped up during the coding of the GUI designer as that's the main app to interact with the GUI lib. Kind of worked out good to do the GUI designer as that ended up showing up logic errors with the GUI library.

While mind numbing repetitive stuff always being deep in code I'm determined to get this side finished so I can move on to more exciting things ;D
Title: Re: Qube's Game Framework - The dreaded GUI
Post by: Qube on June 12, 2019, 03:46:22 AM
Oh what a fun day this has been.. So I finally begin to add in GUI windows via code that the GUI designer outputs. Up pops the window but not as a focused one ( why not!, why? ), the buttons are disabled and the text boxes won't accept input :o completely fubared for some reason.

The GUI creation code is fine but there is an issue with just inserting windows + gadgets into the mix. This is really odd as the test GUI functions ( you've seen the videos ) does exactly that and that has been rock solid since day one. Really really weird.

I bet this turns out to be a tiny crappy super quick bug to fix but finding where sucks the life out of you.

I've stress tested the GUI via the test function and created 5000 windows and it works fine, yet something is causing a massive problem with adding a new window which oddly is the exact method as the working stress test. Gah!, as said it's more likely something really stupid that I'm just missing but I'm giving up tonight to recharge the old brain cells. I'll aim for the "code in your sleep" solution ;D

Hopefully I'll find the stupid cause of this stupid issue later today but if you say "Hi Qube" today and I rip your head off you'll know I'm still bug hunting ;D
Title: Re: Qube's Game Framework - The dreaded GUI
Post by: Derron on June 12, 2019, 06:06:56 AM
Is AGK code position dependent (include vs import) and now definitions are done later?
Are some code lines called differently now? (Split update / Draw)?

Bye
Ron
Title: Re: Qube's Game Framework - The dreaded GUI
Post by: blinkok on June 12, 2019, 07:14:25 AM
Sounds like a job for AGK Studio monitoring variables at a really slow frame rate
Title: Re: Qube's Game Framework - The dreaded GUI
Post by: Dabz on June 12, 2019, 06:27:01 PM
Hi Qube

*Dabz runs*

Dabz
Title: Re: Qube's Game Framework - The dreaded GUI
Post by: Steve Elliott on June 12, 2019, 06:42:54 PM
You wouldn't like me when I'm angry lol   ;)
Title: Re: Qube's Game Framework - The dreaded GUI
Post by: Qube on June 12, 2019, 10:35:32 PM
Hi Qube

*Dabz runs*

Dabz
I'm OK now, I've pinned down the bugs and reworked a few sections and it's all back to working how it should be ;D
Title: Re: Qube's Game Framework - The dreaded GUI
Post by: Steve Elliott on June 12, 2019, 10:38:27 PM
\o/
Title: Re: Qube's Game Framework - The dreaded GUI
Post by: Qube on June 16, 2019, 02:14:32 AM
Finally in the final stages of what turned out to be a beast to code and get all working together :(

The GUI designer was a hell of a lot more work than I thought and as I've never done a full on proper GUI before it's been a bit of a fight at times with some really odd bugs cropping up. I did write a very basic GUI on the Amiga but it was all static windows with very few controls and limited in so many ways.

At least I'm now 95% complete on both the GUI and GUI designer, yay!.. No doubt there will be more to add over time which I'll do as and when certain gadgets / features need adding.

No thrilling videos today ( sorry :P ) but a couple of screen shots :

1.. Creating a very simple dialog box to test the code creation.

(https://www.syntaxbomb.com/images/qGUI001.gif)

2.. Using the created source code by the GUI designer to aid in making GUI designer forms :P

(https://www.syntaxbomb.com/images/qGUI002.gif)

I can save and load forms into the designer in case I need to tweak or alter them at a later date and also output to the source code. The source code is split up into form and logic code

Form :

Code: [Select]
// Create the Window and Gadgets for Window "Load GUI Window"

gui_Create_Window( 1, 188, 17, 152, 200, "Load GUI Window", 255, 255, 255, 0, 0, "", 1, 0 )
gui_Create_TextLabel( 1, "label 1", 8, 129, "Filename", "left", 255, 255, 255 )
gui_Create_Button( 1, "button 1", 1, 8, 158, 56, "Load", 1 )
gui_Create_Button( 1, "button 2", 1, 89, 157, 56, "Cancel", 1 )
gui_Create_TextBox( 1, "textbox 1", 44, 124, 100, "", defaultCharset, 256, 255, 255, 255, 1 )
gui_Create_ListBox( 1, "listbox 1", 8, 8, 136, 112, 1 )

// gui_Window_Show( 1 ) // window is not shown by default

Logic :

Code: [Select]
// Event code for the Window "Load GUI Window"

// ListBox - Label 'listbox 1'
If gui_Event_Get( thisEvent ) = gui_Event_Match( 1, "listbox 1" )
    gui_Gadget_Find( 1, "listbox 1" )
    // code here if you need to take action when an item is selected
    // itemID = guiGadgets[ guiFoundGadget ].itemId
    // itemText = guiGadgets[ guiFoundGadget ].itemText
    // To add items to a listbox : gui_ListBox_Add_Item( label_of_listbox, item_text )
EndIf

// TextBox Clicked - Label 'textbox 1'
If gui_Event_Get( thisEvent ) = gui_Event_Match( 1, "textbox 1" )
    gui_Gadget_Find( 1, "textbox 1" )
    // code here if you need to take action when this textbox is selected
    // text = guiGadgets[ guiFoundGadget ].text
EndIf

// Text Label Clicked - Label 'label 1' - 'Filename'
If gui_Event_Get( thisEvent ) = gui_Event_Match( 1, "label 1" )
    gui_Gadget_Find( 1, "label 1" )
    // code here if you need to take action when this label is clicked on
    // labelName = guiGadgets[ guiFoundGadget ].text
EndIf

// Button Clicked - Label 'button 1' - 'Load'
If gui_Event_Get( thisEvent ) = gui_Event_Match( 1, "button 1" )
    gui_Gadget_Find( 1, "button 1" )
    // code here if you need to take action when this button is clicked on
    // buttonName = guiGadgets[ guiFoundGadget ].text
EndIf

// Button Clicked - Label 'button 2' - 'Cancel'
If gui_Event_Get( thisEvent ) = gui_Event_Match( 1, "button 2" )
    gui_Gadget_Find( 1, "button 2" )
    // code here if you need to take action when this button is clicked on
    // buttonName = guiGadgets[ guiFoundGadget ].text
EndIf

All the possible events are included with helper information for each gadget. Just delete what you don't need and code where you do. I've still to add more helper info to some gadgets but most are done.

Overall this will save a lot of time when I start the tools as manually writing out GUI stuff is very slow.
Title: Re: Qube's Game Framework - The dreaded GUI
Post by: Dabz on June 16, 2019, 06:14:42 AM
This looks brill, very swish Qubey hey!  8)

Dabz
Title: Re: Qube's Game Framework - The dreaded GUI
Post by: blinkok on June 17, 2019, 02:19:09 AM
Looking very nice.
The code looks good too
Title: Re: Qube's Game Framework - The dreaded GUI
Post by: Qube on June 17, 2019, 02:35:09 AM
This looks brill, very swish Qubey hey!  8)

Looking very nice.
The code looks good too
Thanks :) - It's been a months+ worth of sometimes mind numbing / brain twisting work but it'll save a lot of time having the visual side create the source over hand coding such things.

All this work to create a few game based tools :o - I could of written the tool in something like VS or Delphi but I want to me able to jump in and out of game dev and see the real onscreen results, hence this mad venture.

Luckily I'm not too far away now from this side being all complete as up until towards the end it became very boring to do :P
Title: Re: Qube's Game Framework - The dreaded GUI
Post by: MikeHart on June 17, 2019, 05:18:13 AM
Good job Qube.
Title: Re: Qube's Game Framework - The dreaded GUI
Post by: Qube on June 17, 2019, 07:06:47 AM
Good job Qube.
Cheers :) - I know it's a very boring subject and not exciting but soon I can start on the swishy whishy new level maker which will have some cool features in it which should make for more exciting postings / videos, like visually drawing enemy paths and actions and it'll output pure source code. Another big time saver is where you can quickly create the basics of a game and then dive in and alter / tweak it to how you want without being limited to what the level maker can do or manually having to create huge amounts of code repeatedly over games.

The main reason for all this was while dabbling with Unity I thought it'd be great to have visual tools to build basic parts of games and then output the pure optimised source code with no big back end runtime.

That's my overall goal and sadly why I had to start with doing a boring GUI and a designer. Not sure how all these plans will turn out but what I've worked out in my head the end result should be a big time saver.

Loads to do and it may all end up as a shit show but we'll see. As for now it's heading in the right direction. Next up are the game making tools which will be more fun to do as the crappy GUI side is almost done and I can start on the more visual fun side.
Title: Re: Qube's Game Framework - The dreaded GUI
Post by: Xerra on June 17, 2019, 05:26:19 PM
This reminds me of the time I wrote a program in Blitz on the Amiga to read in files created by GadTools library GUI creator and export Blitz source code files that formed the start of a new application. I did a pretty basic program and then found someone had already beaten me to it and done a much better job of it too. I bought his tool and my version went to the code graveyard in the sky. Oh the days before we had the internet and could preserve all our old crap :-)
Title: Re: Qube's Game Framework - The dreaded GUI
Post by: Rick Nasher on June 17, 2019, 09:19:38 PM
Looking good Qube!
Title: Re: Qube's Game Framework - The dreaded GUI
Post by: Qube on June 24, 2019, 04:54:18 AM
IT'S DONE!!! ;D

Just over two months ago I started this project :o - Squeezing in every bit of spare time I had I'm finally finished with phase 1 of the project ( the GUI and GUI designer ).

Quick outline of how it all flows.

The GUI designer - A bit of a nightmare at times to write and 50% more code wise than the actual GUI :

(https://www.syntaxbomb.com/qGUI/qGUI001.gif)

You can save the window to reload at a later date for any additional tweaks :

(https://www.syntaxbomb.com/qGUI/qGUI002.gif)

The designer also creates the full source code for the window and control logic. You can save the source code or dump it into the clipboard for easy pasting direct into your app :

(https://www.syntaxbomb.com/qGUI/qGUI003.gif)

Let's create a super simple test of a window with a text box and a button. When you click the button is simply adds "Hello" into the text box :

(https://www.syntaxbomb.com/qGUI/qGUI004.gif)

The designer outputs the code to create the window and gadgets :

(https://www.syntaxbomb.com/qGUI/qGUI005.gif)

And also creates the logic for all possible events for each gadget in that window with a little helper text :

(https://www.syntaxbomb.com/qGUI/qGUI006.gif)

But as all we want is the action from a button click we'll delete most of it and add to the button click action :

(https://www.syntaxbomb.com/qGUI/qGUI007.gif)

Here's what the main control loop looks like to control the GUI. Simply insert your created GUI and off you go :

I've split it up into sections in case I need to do any custom work in between ( you never know ).

#Note : The "qGameFramework" handles setting up the screen and stuff, hence why no commands are in this example.

(https://www.syntaxbomb.com/qGUI/qGUI008.gif)

The final working result of this advanced test :

(https://www.syntaxbomb.com/qGUI/qGUI009.gif)

Thrilling I know :P

I'm sure I'll be adding more gadgets and features over time but for now I have everything I need to build the game tools I want. It's a massive time saver to visually do a GUI and have the source code spat out as all you have to do then is code where needed.

Now I can start on my next project which is a shiny new map maker with some swishy wishy features ;D
Title: Re: Qube's Game Framework - The dreaded GUI
Post by: iWasAdam on June 24, 2019, 01:49:13 PM
Just, really well done on completing this  8)
No suggestions, just admiration.
Title: Re: Qube's Game Framework - The dreaded GUI
Post by: Steve Elliott on June 24, 2019, 02:03:00 PM
Great stuff.  Congrats on completing  :D
Title: Re: Qube's Game Framework - The dreaded GUI
Post by: Dabz on June 24, 2019, 02:52:03 PM
Lovely! :)

Dabz
Title: Re: Qube's Game Framework - The dreaded GUI
Post by: Qube on June 24, 2019, 03:33:16 PM
Thanks :) took way longer than anticipated. I first thought about 3 weeks and not over two months :o - At least I can get on with the good stuff now ;D
Title: Re: Qube's Game Framework - The dreaded GUI
Post by: Rick Nasher on June 25, 2019, 09:20:46 PM
Very nice. Way to go Qube!  8)

Time to serve yourself a brewski!  ;)
SimplePortal 2.3.6 © 2008-2014, SimplePortal