Canvas-based GUI Framework in UnrealScript [Community Code Project]

[thommie]

The input is now working, when i open the menu and just press enter the exit button is activated and i return to the main menu

there are some things that need to be figured out however, when i press enter and the menu is closed, it gives an error that i don't have a pawn (because i don't). The problem is, when i press enter when the menu is opened, and i'm clicking a component (not the exit button) it still gives that error. my goal was to completely remove any other functions being called on keypress when the menu is active.

on a sidenote, the Menu is no longer opened through the exec function, don't know if that could cause any problems for anyone, not being able to use the ini's anymore... One solution to bring more problems it seems...

[thommie]

i'm more or less satisfied with how the input now works, menu opened through exec function again, no longer the error when pressing enter

Had some problems with the Textbox, first time i completely failed, so i had to start all over again. Second try was actually not bad, but i had no idea how to fix what was wrong. Third try started with a shameless copy of Console , turned out i had most of it right the second try. only thing from epic's code that confuses me is "if (Character >= 0x20 && Character < 0x100)", i never would have thought of that, i don't even understand it

anyway, need to do some more tweaking and testing, i expect to be able to upload it somewhere this weekend

[gardian06]

"if (Character >= 0x20 && Character < 0x100)"

those look like hex values, and If this appears in a foreach (character in string) then it might be checking to see if the "character" being entered is even an acceptable character to check against an exec function. kinda like back in c++ working with cin making sure that what was entered was even more then just a line return before checking the actual value of what was entered.

[thommie]

thanks for clearing that up gardian06, it has been a while since i've used c++.

small update today:
Added a Textbox that can be used for the input of text.
added key functionality to the components.
-pressing enter while in the ExampleMenuScene now activates the exitbutton.
left and right arrow also work when the scrollbox is selected to browse through the list.

now i need something for the ToDo list

[Crusha K. Rool]

I got a PM from a guy who was wondering why the example content didn't work for him. Had to explain him that the example content is currently referencing textures that are not provided with the download and that he needs to use some of his own textures for that.

And yeah, 0x20 should equal 32 and 0x100 should equal 256. And those are exactly the non-printable (whitespace) characters of the ASCII table.
Most compilers automatically parse hex (starting with 0x) or octal values (starting with 0) into their decimal (or actually binary, since that's how it's stored anyway) pendant. So some programmer was simply flexing with his brain.

[thommie]

i've adjusted the example content, and added a picture at the downloads section. Import the file in udk at GUI.GUI_Buttons_02 and it should work without any problems. doesn't look like much, but it's something

[thommie]

Crusha, did you try the display of text in a button yet? i have some problems with it, and i have no idea how to fix it. it will probably be something easy i'm missing.

i know i forgot to add a part in the GUIButtonComponent, in DrawCaption() (the bold part)

if(bLocalizeCaption)
			DrawString = Localize(LocalizationHeading,CaptionInfo[DrawIndex].Caption,LocalizationFileName);
		else
			DrawString = CaptionInfo[DrawIndex].Caption;

which would enable you to use non-localized strings in a button, though this is only part of the problem (i think).

Problem:
i've added a button in the defaultproperties, with a localized caption, working perfectly.
i've added a button in the InitMenuScene() of the MenuScene, setting the exact same properties as the one in the defaultproperties. it only displays the texture, not the caption.

Checked that the position at which the string is drawn is correct and inside the component's boundaries.
Checked the DrawString in the button's DrawCaption(), it's correct, as is the font.

i have no idea how to fix it, since everything seems to be correct and it is still not working


Edit:
like i said, it was something easy i had missed. the part where i said it had the exact same properties... i forgot to include the alfa of the drawcolor of the caption.....

[Crusha K. Rool]

Massive update:

• Fixed severe memory leaks that could cause the editor to crash after playing a round in PIE. Among other things.
• Mouse cursor is now also affected by XBox pad control stick. It's sensibility can be individually set but there is not real support for the console buttons yet.
• GUIButtonComponent and it's subclasses can now specify a SoundCue to play on MouseEntered, Exited, Pressed and Released.
• Added option bForceNormalDrawInfo and bForceNormalCaptionInfo, which will force the Component to always use the Info at index 0. This is useful if you intend to not use any else as it will avoid redundant code and makes things more readable.
• Fixed FindComponentByName (now renamed to "ByTag") to work properly. Using this will allow you to get references to the Components any time and anywhere in the menu scene (and regardless of their hierarchy depth) by recursively checking for their Tag property (which is a new string property that is specified manually and is reliable compared to the Name property). That way can we get completely rid of hard object references to the Components, which would need to be cleared up properly in the end.
• Added function GetComponentSize() which returns the current Width and Height of the Component as part of a 2D vector.
• Added function MoveComponent() which handles the creation and maintenance of a GUIComponentModifier that moves the component to a specified location over time.
• Added event Moved() which is called after MoveComponent finished.
• GUIHUD assures now that the HUDs' PostRender() is called, thus also calling DrawHUD() and others to properly show Kismet messages, errors, debug stats and calculate the screen size value correctly.
• GUIHUD.CheckViewPortAspectRatio() now falls back to Canvas Clip values in case ViewX or ViewY should ever be 0 due to some issue with subclassing certain HUDs.
• If you don't specify a Font to use in the CaptionDrawInfo, it will fall back to GUIHUD.PlayerFont as the globally used Font in your menu. Useful to save some writing.
• TogglePauseMenu() is now stubbed to prevent the Scaleform menu from coming up.
• Renamed ScrollBox Components to an appropriate GUI-version to follow our old naming scheme.
• Added EditInLine(New) support for the system, allowing to test it in real time using the Remote Control.

You can now design the GUI in real time by using the Remote Control functionality of the UDK. Simply add -remotecontrol to the parameters of your UDK shortcut and you get this menu where you can edit values of each exposed property at run time. You still need to type the values out yourself in the DefaultProperties after you set them there, but it's an enormous help if you want to experiment with this stuff.

Here is my example (I obscured it to not disclose our game yet):

GUIMenu.jpg

This is the code that was used to create it:
http://pastebin.com/1LMyAxwT

[thommie]

And i was just about to start studying...

anyway, i am getting some errors currently, mainly with the font.

or others like

ScriptWarning: Accessed None 'UTPlayerOwner'
	GUIExampleHUD DM-Deck.TheWorld:PersistentLevel.GUIExampleHUD_0
	Function UTGame.UTHUDBase:PostBeginPlay:0294

ScriptWarning: Attempt to assign variable through None
	GUIExampleHUD DM-Deck.TheWorld:PersistentLevel.GUIExampleHUD_0
	Function UTGame.UTHUDBase:PostBeginPlay:02E5

and some weird thing to do with the sound, which has little to do with the map i'm on.

ScriptWarning: Accessed None 'PlayerOwner'
	UTMusicManager DM-Deck.TheWorld:PersistentLevel.UTMusicManager_0
	Function UTGame.UTMusicManager:Tick:05A6

it's hard choosing between studying and diablo 3, but now you just had to go and do this

good job and i will try to find some more errors so others won't.


EDIT:
Had to fix the font issue, it already started to annoy me.

[Crusha K. Rool]

Hmm, got to look into that later. I honestly didn't pay attention to change the ExampleHUD according to these changes. If the ExampleHUD extends from UTGame stuff and I changed the default GUIFramework to actually use one of the earlier parent classes, things might go a bit wonky.


The MusicManager issue is one related to the UTMapMusicInfo and has not really something to do with this system. I think it's rather because Epic doesn't check if you actually use UTPlayerController subclasses when you have a MapMusicInfo in the map.

[thommie]

indeed it seems that they are connected to the UT* classes.

I intend to expand the example content a bit, seeing as the current ExampleMenuScene doesn't look like much, to show more of the potential of this framework. (hoping more people will start using it)

[Crusha K. Rool]

Quite some changes in such short time:

• Added GUILabelComponent. A Label is a Component that is solely responsible for drawing text. No textures, no button functionality. It's a lightweight for performance and usability.
• Added GUIPage, which is basically the same as a GUIContainerComponent (and extending from it). What makes it "special" is the concept that it introduces. GUIPages can be pushed and popped on a Stack that is separate from the usual GUIComponents array (they are still in that array, the Stack just keeps track of their order). Pushing a GUIPage on the Stack will automatically take care of disabling the one that was last on top of it. Popping it from the Stack will disable it, remove it from the Stack and enable the one below it.
  The advantage of this is that you don't need to remember what page came before the new one - as soon as you pop the new one again, the previous one will appear again without any changes and that all with the single same command. (This actually becomes useful with the next big change in this update.)
• Fixed Input Event not working.
• Added functionality to intercept specific keys (as defined in DefaultProperties) and convert them to specific events in the MenuScene itself. This allows us to also navigate menus with gamepad and keyboard now instead of with just mouse. It's not fully finished yet, hence why I still have some logs in it. But this is where the Stack system from above becomes useful: I can now intercept a button for "Abort" (in my case Escape or Xbox_B) and all that the MenuScene needs to do now is to call PopPage() and I am back in the previous menu, regardless of which page was open.
  Other keys that are intercepted are Enter or XBox_A for "Confirm", which does the same as clicking LMB, and Up/Down/Left/Right on the keyboard as well as the XBox_DPad for navigating to the next button in that direction. XBox control sticks are not tracked yet. Would be easy but I am not sure yet if I should do that or leave the control sticks with a mouse cursor navigation tool.

[Crusha K. Rool]

Some minor bug fixes in the latest release now.


And here is my latest example code:
http://pastebin.com/br8gUPbc


I am running into one issue with that, though. When I have a key press like Enter or Escape and intercept it, it will cause a click on the next clickable Component that I hover across and also doesn't accept any new input before that happened. Not sure yet what might be causing that.

[thommie]

i just discovered some issues in the textbox. once you activate it, you can not deactivate it...
also it's cursor doesn't show up.

i'll create a new examplemenuscene that will also include all the new options.

EDIT: fixed the textbox problem.

and also, i noticed that the menuscene will still pass keys to the defaultinputcomponent even though i have already clicked other components. i had meant to have this component to only accept input when nothing had been done since the menu was opened. now i've got a menu that keeps going back to the main menu whenever i press enter and don't have the textbox selected

and... sadly i haven't been able to replicate your problem, but i will keep on trying.


EDIT:
should we not return true by default with the inputkey function in the menuscene? at the end of the function, when no component has accepted the key, it will revert to the original action from the *Input.ini files, which in the case of pressing enter means that the pause stops.

EDIT (again):
this didn't work, menu wouldn't close anymore... why can't it ever be that easy?

[Crusha K. Rool]

Hmm, I made some slight changes myself as well. Got to see if I can merge things. :>

EDIT: But I will wait for you to upload your changes first.

[thommie]

sorry you had to wait, i was gone so i only saw your post a few minutes ago. anyway, R22

-Fixed the Textbox not working properly.
-Made some changes to the DefaultInputComponent's properties, still WIP


i've been messing with the DefaultInputComponent, and some things don't make any sense to me. Also, the return value isn't even required since the HUD automatically returns true when the menuscene accepts input, regardless of the return value from the menuscene or a component.

[Crusha K. Rool]

Ok, updated with some minor improvements, mainly to prevent possible memory leaks again.

[thommie]

i see now what i was doing wrong with the key input and all. I was taking a look at how you were doing things in your menu, and realised you were using the DefaultInputComponent for something else, so it might not work properly for you now, will change that.

to make the example content work properly i will have to rework it so it uses the pages, because currently there is no way to close the menu except for a console command.

[Crusha K. Rool]

Yeah. Also, what is the sense of calling MouseEntered on the DefaultInputComponent when initializing the menu scene?

[thommie]

i had in mind to have the DefaultInputComponent to be a button, or something similar, that is already selected when you open the menu. So when you open the menu you see which component is selected, and that all your key input will go to that component. Your use of the DefaultInputComponent however i had not thought of, and with the current setting, seems the better one.

[thommie]

R24:
-Fixed a Divide by zero error in the GUIBaseSliderComponent.
-Added the option to use non-localized texts to be displayed on the buttons.
-Fixed the button not using the correct font when none was set in the defaultproperties.
-Fixed an error due to the PlayerController not extending a UT* class.
-Returned the GUIMenuScene to it's previous state, with a correct working DefaultInputComponent.
-Cleaned GUITextBox and added some comments.
-Small rework on the ExampleMenuScene, it is now working properly.
NOTE: Currently the only way to stop the GUITextBox from receiving input is pressing Enter, any component clicked before that is done will not receive any input.

so far i haven't been able to find a solution for the TextBox problem.

[thommie]

One thing makes me sad, i can't seem to be able to use moving materials since the game is paused.

and i really wanted to make the new ExampleMenu something special

EDIT:
oh and also, i get an error that it can't find the second page i add. The first one worked without any problems, only when i add a second one, it can't seem to find it. it will still work, but gives me some errors.

ScriptLog: Could not find Tag: TitlePage
ScriptLog: Could not find Tag: TitlePage
ScriptLog: Could not find Tag: ResumeButton
ScriptLog: Could not find Tag: ExitButton
ScriptLog: Could not find Tag: ShowButton

The last four are from the PostbeginPlay in the MenuScene.
The first one simply because i added the "TitlePage" as a second page.

still works without any problems, just made me curious if you've had anything similar.

i have these logs because i added it to the FindComponentByTag() since i made a lot of spelling mistakes today, and that made it hard to see why it wasn't working.

oh and the last four errors are gone whenever the TitlePage is the first one to be added in the defaultproperties.

[Crusha K. Rool]

Nope, never got those errors. Did you make sure that all Components are either in the GUIPage's ChildComponents array or in the MenuScene's GUIComponents array? Since that's where the function starts to look.

[thommie]

I must admit that i shamelessly copied part of one of your examples and edited to my needs

i removed the log, and that takes away all of the visual problems...

[thommie]

Another problem, it seems the only place where you can intercept the Released even of the Escape button is the first page you add.

so now i'm stuck having to use the Pressed event of escape to pop a page and set the defaultinput so it will work...

[Crusha K. Rool]

Hmm, that might have been the trouble that I have run into in my system. :/

Anyway, I added a Wiki main page to the project, so we can now document it more in depth and give also examples of usage there.

[Crusha K. Rool]

Not 100% bug free revision. In my main menu is a mouse button press not recognized after pressing the Enter key without pressing Enter again. In the actual in-game menu seems everything to work fine, though. I left some debug logs for KeyInputs in to get onto the track of things. I also tried to shift the actual mouse input functionality entirely to the InputKey event instead of relying on properly configured exec functions to help with that. This might have caused the issue, though I was paying pretty much attention and it works in a simple in-game menu without Page pushing and popping after all.

Anyway, this release is quite a massive overhaul on the code. That is because I extended it to be no longer 100% dependent on a HUD. Instead does it also work with a new Actor, the GUIScriptedTextureHandler. This little comrade is supposed to allow you to set up individual MenuScenes to be used with ScriptedTextures that you can place as MaterialInstanceConstants in meshes in the map. That way can you make actual consoles in game that have a menu and open a door, or keypads or anything like that.
The ScriptedTextureHandler has a function SetActiveHandler(bool), which will cause the input to be routed to this Handler instead of the actual HUD. Calling it with a False parameter will give control back to the HUD, but you can of course also override your Pause Menu opening function to get the control temporarily back yourself.

It's neither tested nor finished yet, so don't expect it to work right now. This is just to show where the journey is going. Some Scaleform-functionality with the Canvas.


Oh, and Components can now also set to use a radial mouse check pattern instead of their box shape. The diameter of the radial check is the height of the Component. This is useful for real radio buttons and the like.

[thommie]

looks nice and i'll have to give it a try soon, though i see you didn't quite update the classes from my last revision?

i changed the playercontroller to extend UTPlayerController, since everything else was extending from UT classes.
and you've undone my work with the examplemenuscene

[Crusha K. Rool]

Oops. :/

I probably changed it away from UTPlayerController again because I don't extend UT classes in my project, except those that are not too deep buried in and where it makes sense (UTHUDBase). You probably want to change things back then. :>

EDIT: Done.

[Eliot]

Anyway, this release is quite a massive overhaul on the code. That is because I extended it to be no longer 100% dependent on a HUD. Instead does it also work with a new Actor, the GUIScriptedTextureHandler. This little comrade is supposed to allow you to set up individual MenuScenes to be used with ScriptedTextures that you can place as MaterialInstanceConstants in meshes in the map. That way can you make actual consoles in game that have a menu and open a door, or keypads or anything like that.
The ScriptedTextureHandler has a function SetActiveHandler(bool), which will cause the input to be routed to this Handler instead of the actual HUD. Calling it with a False parameter will give control back to the HUD, but you can of course also override your Pause Menu opening function to get the control temporarily back yourself.

It's neither tested nor finished yet, so don't expect it to work right now. This is just to show where the journey is going. Some Scaleform-functionality with the Canvas.

But how will you handle the collision detection when they are displayed on different angle? Also thought of doing this in my GUI framework "Forms" but never did due that issue

[Crusha K. Rool]

But how will you handle the collision detection when they are displayed on different angle? Also thought of doing this in my GUI framework "Forms" but never did due that issue

What do you mean? In this system you set up a MenuScene that has it's own buttons and own mouse coordinates within the ScriptedTexture. It's a container in itself and by default is not interacting with anything in the outside world, fully separated from other ScriptedTextures or the HUD.
You first need to pass the input control to the ScriptedTextureHandler with a function call, which could be caused by a SeqAction when the player presses Use in a TriggerVolume around the object or simply gets close to it.

But you could probably still get such interaction with the outside world as done in Hard Reset's in-world menus by checking at which UV coordinate a trace hit the ScriptedTexture. The coordinates should then translate 1:1 to the screen coordinates.

[thommie]

after some adjustments i got everything working again, and without any problems in the example content.
you must be doing something wrong in your main menu, since i haven't had that problem (yet).

I've started working on a new example menuscene, one that uses (almost) all possible functions currently available.
work is slow, i wanted to use the label for an options menu, but i forgot that it centers the text, so i'm going to add alignment options.
and probably some other things i found but currently can't think of...

and after that i'll give the GUIScriptedTextureHandler a try.

[thommie]

Click Me!

started building an options screen for the example content, it can set and read the system settings in some way

Click Me!

and what happens when you don't set the playercontroller to extend UTPlayerController.

also, i'm working on alignment for labels, and probably buttons.

and probably something else, but i can't currently remember.

EDIT:

and it seems that the mouse input/hovering is also not working 100%...

[Crusha K. Rool]

Yeah, encountered some weird bugs on my side as well. My MenuScene is no longer spawned for my in-game menu or it's really fast destroyed at some point. But that's probably not related to the framework itself.

And the cursor doesn't seem to be able to move around the whole screen anymore, so something is wrong with the Canvas' Clip values (and the function that returns them since my last update).

[Crusha K. Rool]

On a side note: did you ever try to check out the SVN repository without password (using the HTTP link that is somewhere mentioned on the project page)? I tried once, but TortoiseSVN couldn't really find anything there.
I am wondering if our system is actually accessible to users who are not registered as contributors.

Having to set up SVN might scare scripting newbies away as well, so maybe we should consider to provide all source files as Zip package in the Download section of the project page so that they are easier to access. That would of course require some manual updating every now and then, but the best system doesn't help much if the hurdle to get it is actually too high.


The opening post should probably also be restructured to be a bit nicer and more inviting. With example images and more links and progress updates.
Wiki pages with tutorials on the project page would be helpful as well.
I guess we need to cater to the people. :>

[Eliot]

What do you mean? In this system you set up a MenuScene that has it's own buttons and own mouse coordinates within the ScriptedTexture. It's a container in itself and by default is not interacting with anything in the outside world, fully separated from other ScriptedTextures or the HUD.
You first need to pass the input control to the ScriptedTextureHandler with a function call, which could be caused by a SeqAction when the player presses Use in a TriggerVolume around the object or simply gets close to it.

But you could probably still get such interaction with the outside world as done in Hard Reset's in-world menus by checking at which UV coordinate a trace hit the ScriptedTexture. The coordinates should then translate 1:1 to the screen coordinates.

In that case I don't see the purpose of using a ScriptedTexture then.

[Crusha K. Rool]

In that case I don't see the purpose of using a ScriptedTexture then.

Did you see Scaleform Tutorial Videos Part 1-5? (Ok, that example in their video is not really a menu, but you get the idea that more is possible)
They are able to plug a SWF file onto BSP to have interactive menus integrated in the game world. And now we can do the same with the menus of this framework. (Well, except for that we require a StaticMesh instead of BSP to put it on)

[thommie]

I've added R30 to the download page, and as for the images... i tried yesterday, but nothing i do works when trying to capture a screenshot in fullscreen.

i'm busy until friday morning, so in the weekend i'll be able to add some to the wiki. The starting page however, that i can't change. If i can help with that in any way, feel free to tell me.

[IllpIll]

ive downloaded the latest upload and compiled it, in the editor i set gametype to guiexamplegametype or whatever. how do i open the menu while ingame?

[thommie]

that's a problem in the editor, since when playing you press escape, the window closes. but by default it should open when you press escape.

you could however also type "ShowMenu" in the console, this should also start the menu.