Sorry your browser is not supported!

You are using an outdated browser that does not support modern web technologies, in order to use this site please update to a new browser.

Browsers supported include Chrome, FireFox, Safari, Opera, Internet Explorer 10+ or Microsoft Edge.

AppGameKit Chat / Seeking ideas for user interface approach

Author
Message
DavidAGK
4
Years of Service
User Offline
Joined: 1st Jan 2014
Location:
Posted: 5th Jan 2018 08:22
Hi,

I've got to create a user interface for my game. It will require various inputs (buttons, tick boxes etc) and outputs (stuff shown/updated when buttons are clicked) and the ability to move the focus around from button to button that don't necessarily all line up neatly. I'm keen to learn how you guys manage setups like this. I'm not after code but wondering if there are neat high level conceptual tricks you use or data types / data structures that allow you to keep track of what's going on. I can code something but fear it'll be a brute force method that will be much much slower to develop and more hassle to implement changes!

Using Tier 1 AppGameKit V2
Started coding with AMOS (Thanks Francois Lionet)
BatVink
Moderator
14
Years of Service
User Offline
Joined: 4th Apr 2003
Location: Gods own County, UK
Posted: 5th Jan 2018 08:44
Firstly, I save my configuration (position, sizes, text etc) in a config file. This allows you to finetune the layout without recompiling. Maybe the Visual Editor can help with this
Secondly, I associate every entity with an array of tween effects. This allows you to easily fade, scale and move things into view using a unified method. I have an In, Out and Activated effect as a minimum
Thirdly, all of my entities are in a UI array, with their type and state. A single function checks all entities, changes their states where appropriate and feeds back to the caller if anything changed.
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Quidquid latine dictum sit, altum sonatur
TutCity is being rebuilt
Scraggle
Valued Member
14
Years of Service
User Offline
Joined: 10th Jul 2003
Location: Yorkshire
Posted: 5th Jan 2018 08:50 Edited at: 5th Jan 2018 08:56
I use a parent/child system, so each 'gadget' has both a parent (even if it's just the screen) and could have zero or more children. Each of those children could also be parents to other children.

Doing that vastly reduces the number of checks you need to make to see which gadget the mouse is over or has clicked.

The image below is from a visual editor that is currently on hold while I watch the fate of TGC's own visual editor. The GUI system is fully functional though and I continue to use that in other tools.

To explain the parent/child relationship with the below image, there are 6 main parents:
1. The design area
2. The menu bar
3. The quick info bar (below the menu)
4. The tool bar (down the left)
5. The properties panel (down the right)
6. The media panel (along the bottom)

I check each of those and only those for mouse events and in that order. We can stop checking parents when we have determined which one the mouse is over. So, if the mouse is over the design area then there is no need to check any gadgets at all.
If the mouse is over the Toolbar, then we've only made 4 checks so far and have determined that we now only need to check the children of the toolbar, which is a maximum of 10 more checks (of course we stop checking once we've found the one we care about)

The Properties panel on the right which is by far the most complex is also subdivded into parent/child to reduce the number of checks.
So, for example, if the mouse is over the flip sprite vertically button we will only need to make 12 mouse area checks. The first five to determine we are over the properties panel, then check 6 (is it over the sprite info area) is FALSE. Check 7 (is it over the sprite offset area) is FALSE etc. down to check 10 (is it over the Flip Sprite are) is TRUE then we can go into the children of this subpanel - Is it over Flip Horizontally = FALSE, is it over flip vertically = TRUE. So display the mouse over image for that button.

Attachments

Login to view attachments
Mobiius
Valued Member
14
Years of Service
User Offline
Joined: 27th Feb 2003
Location: The Cold North
Posted: 5th Jan 2018 09:16 Edited at: 5th Jan 2018 09:16
I designed my UI engine a lot like how I perceive Powerpoint to work,

I have an array of screens, each screen has in inward and outward transition, as well as scripts that can run in certain events. (OnActivate, OnTranstitionComplete, OnTimer, OnSwipeLeft/Right/Up/Down)
Each screen can have 0, 1 or many elements. these elements can be either text, text input or graphics. Graphics will automatically become buttons if you set the image to have 1 column and 3 rows. (For button face, onMouseover, and OnClick) unless you tick the animated option, then it simply animates. Again, each element can have a script assigned to an event. (OnClick, OnDoubleClick, OnLongClick, etc)

Although I don't specifically have things like check boxes, I can script that behaviour using what I have now. Eventually I plan to include more elements then perhaps sell it as an AppGameKit plugin.

Here's a video of it in action, the editor was written in DBPro, but the UI engine is cross language. (Works in DBPro and AGK.)

Attachments

Login to view attachments
MikeHart
AGK Developer
14
Years of Service
User Offline
Joined: 9th Jun 2003
Location: Germany
Posted: 5th Jan 2018 10:37
@Scraggle: Is this editor done in AppGameKit or a different tool? It looks beautiful!
Running Windows 7 Home, 64 bit, 8 GB ram, Athlon II X2 255, ATI Radeon HD 4200. Using AGK2 Tier 1.
Scraggle
Valued Member
14
Years of Service
User Offline
Joined: 10th Jul 2003
Location: Yorkshire
Posted: 5th Jan 2018 11:01
It's entirely AppGameKit - and thanks
It's actually theme based (I have 6 themes created so far) and I just have to change the name of the theme when initialising to make it look different.
MikeHart
AGK Developer
14
Years of Service
User Offline
Joined: 9th Jun 2003
Location: Germany
Posted: 5th Jan 2018 11:43
That definitely shows that you can create professional looking apps with any tool as long as the visuals are good.
Looks like you have covered a lot of gadgets in your GUI.
Running Windows 7 Home, 64 bit, 8 GB ram, Athlon II X2 255, ATI Radeon HD 4200. Using AGK2 Tier 1.
MikeHart
AGK Developer
14
Years of Service
User Offline
Joined: 9th Jun 2003
Location: Germany
Posted: 5th Jan 2018 11:44
Btw. I would love to see a fullsize screenshot like you have posted, not the scaled down one.
Running Windows 7 Home, 64 bit, 8 GB ram, Athlon II X2 255, ATI Radeon HD 4200. Using AGK2 Tier 1.
BatVink
Moderator
14
Years of Service
User Offline
Joined: 4th Apr 2003
Location: Gods own County, UK
Posted: 5th Jan 2018 11:52
Some nice apps displayed there, but I agree, that's a fantastic looking interface Scraggle!
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Quidquid latine dictum sit, altum sonatur
TutCity is being rebuilt
Scraggle
Valued Member
14
Years of Service
User Offline
Joined: 10th Jul 2003
Location: Yorkshire
Posted: 5th Jan 2018 12:00
Thanks.
I've been meaning to put it on the Showcase for a while now. I'll try to find some time this weekend.
DavidAGK
4
Years of Service
User Offline
Joined: 1st Jan 2014
Location:
Posted: 5th Jan 2018 17:47
Cheers for the inputs - super helpful. And yes, Scraggle - UI is top!

Using Tier 1 AppGameKit V2
Started coding with AMOS (Thanks Francois Lionet)
puzzler2018
Recently Online
Joined: 8th Oct 2017
Location:
Posted: 5th Jan 2018 18:05
WOW - these editors are awesome - and especially written in agk - take my hat off to you all
blink0k
AGK Developer
4
Years of Service
User Offline
Joined: 22nd Feb 2013
Location: the land of oz
Posted: 19th Jan 2018 05:10
Super cool interface work scraggy!

Login to post a reply

Server time is: 2018-01-21 12:32:18
Your offset time is: 2018-01-21 12:32:18