Creating a Clickable user interface with Canvas.

[Graylord]

Hi, I am looking to create a canvas interface with clickable buttons.

Well, I only need a way to create buttons really, I already have the mouseclicking and the interface itself. I just need a way to define an area, and to do something if the cursor within that area and the mouse button is clicked.

I already know about the interface gem, but that seems to be aimed towards iOS. I'm needing a mouse and keyboard interface.

[Rogdor]

Well I think the mouse interface gem does have most of the bits you need. You can just ignore the Scaleform bits and concentrate on the Canvas usage. That won't give you buttons by default, but it can steer you in the right direction in creating your own.

For reference to anyone else reading this that may want the convenient link: http://udn.epicgames.com/Three/Devel...Interface.html

[Graylord]

Can't say I can see anything I can use. Could you point me to anything of interest?
I already have a mouse interface, I just need a button.

[thommie]

maybe the link in my sig could help you. (shameless self promotion detected)

it might be able to give you ideas on how to create a button.

[Spoof]

class UIWidget extends Object
    abstract;


var Vector2D Location, Size;
var string Label;
var delegate<ClickCallback> Click;

delegate ClickCallback();

function Update( Canvas C, Vector2D mouse, bool bMouseClicked );

function bool MouseOver( Vector2D mouse )
{
    return ( mouse.x > Location.x && mouse.y > Location.y && mouse.x < Location.x + Size.x && mouse.y < Location.y + Size.y );
}

class CustomHUD extends HUD;

var array<UIWidget> AllWidgets;


// called from PostRender
function Update()
{
    local UIWidget W;
    foreach AllWidgets(W)
    {
        W.Update(Canvas, mousePosition, bMouseWasClicked);
    }
}


event PostBeginPlay()
{
    local UIWidget W;

    W = new (self) class'UIButton';
    W.Location.x = 100;
    W.Location.y = 100;
    W.Size.x = 128;
    W.Size.y = 48;
    W.Label = "Click me!";
    W.Click = ButtonHandler1;

    AllWidgets.AddItem(W);
}


function ButtonHandler1()
{
    `log("Hurrah!");
}

class UIButton extends UIWidget;

function Update( Canvas C, Vector2D mouse, bool bMouseClicked )
{
    // button rendering here...
    // ...

    if( bMouseClicked && MouseOver(mouse) )
    {
        Click();
    }
}

[Solid Snake]

Why not just use the existing menu system?

[Graylord]

Thanks, I imagine that will be perfect. But I am having a hell of a time incorporating it into my hud.

What sort of variable should MousePosition be? I have a Vector2d, but that's not working.

[Spoof]

My post is just a basis for learning one, simple approach. As Snake points out you could also use the existing system, which I'm not familiar with.

Yes, Vector2D for mouse coords. In what way isn't it working? You should just be able to plug them straight in. The only part you need to figure out is how to set bMouseClicked for the one tick.

Btw the code is untested so there may be hiccups. All the buttons are updated by passing the canvas, mouse position and click state. Each object then renders it's own button through the canvas reference. If bMouseClicked is true it will check if the mouse coords are within the button's rectangle, calling the assigned delegate if so.

It's the sort of thing you can flesh out to accomodate different types of widgets, though that can lead to a lot more work - if you're heading in that direction it may be better to go with whatever's available in the API.

[tegleg]

make sure you update the mouse position vector2d every draw. it doesnt work if you just call the function (the one from udn anywayz)

[Graylord]

Ah, yes. I already have mouseclicks implemented myself. I think I can figure it out.
I think I am on the verge of implementing it in one of my huds now.

Can't say I'm familiar with any existing system myself. Other than the mobile interfaces.

Edit: I am completely new to widgets, so I apologize if this should be obvious.
But is there more I need to do? I implemented your example base class widget, but I am not seeing anything being drawn. I have also bound my left and right mouse buttons to a custom exec function (for my custom weapon systems and the interface buttons).
Would that break the delegate ClickCallback(); stuff?

I have implemented all you have pointed out except for the button example.

[Graylord]

Hi, I'm afraid I still don't quite understand the example and I am still having the issue explained above.

[Damage Inc.]

I'm having some issues with this too.. I can get the button to render and work but only
if i add it inside of PostRender() the issue I'm running into is performance related.. When
its iterating through the Array my fps drops ~1-2 fps a sec until its around ~9 fps

[Graylord]

I'm afraid I cannot see it even if I add it within the PostRender function.

(I understand how all of it works now by the way, that delegate stuff is a really nifty feature. And how to do the mouseover detection is so obvious when you see it)

Edit: Got it working by doing the update in the postrender instead. Everything is working perfectly now

[Damage Inc.]

and u don't see any frame rate drop at all doing it like that ? now i don't have the best
when it comes to a GPU(HD4000 Ivy bridge) but i get a pretty solid 50 fps as long as i
don't go to crazy with the resolution when playing UT.. so i don't get how 1 iterator in
my HUD is killing my fps unless i am doing something wrong

[Spoof]

I'm having some issues with this too.. I can get the button to render and work but only
if i add it inside of PostRender() the issue I'm running into is performance related.. When
its iterating through the Array my fps drops ~1-2 fps a sec until its around ~9 fps

Sounds like you are adding the same button to the array each tick, producing multiple copies. Hence the slowdown over time. You shouldn't be adding widgets during PostRender.

I suggest implementing Crusha's solution http://forums.epicgames.com/threads/...y-Code-Project since its complete and well supported. I only offered mine as an example pattern, and there's no point in me taking it any further.