MobileHUD how to create simple button?

[zero4]

Making button is simple using kismet, but anyone know how to do it with MobileHUD? I mean just draw the button and attach some function to it?

Because of Scaleform I'm blind now. Maybe some of you got it working

Thanks for help!

[ffejnosliw]

I'm working on some documentation for this that will be up soon-ish. In the meantime, check out the MobileMenu*.uc classes in the GameFramework and MobileGame folders. MobileMenuScene is a base menu class and there are different controls you can add to a scene, i.e. MobileMenuButton, MobileMenuLabel, etc. GameFramework is where you will find the components of the menu system. MobileGame has some example implementations. The MobilePlayerInput class is responsible for running the whole system.

[zero4]

Thanks for info that's giving me some understanding. Documentation would be great. If you will have time can you please just post a very basic how-to create an Button using these classes? (I know that I'm asking for something that you don't have time :P )

BTW. You need to know that you are changing game dev word there at Epic. Cheers for that!

[Curious]

@ffejnosliw - Looking forward to some organized info on the subject! Keep up the good work!

[ffejnosliw]

Create a new menu class extending from MobileMenuScene (or MobileMenuBase if you want the extra functionality it includes).

MobileMenuScene has an array of MobileMenuObjects called MenuObjects. This will hold all the controls for the menu. You set these controls up in the defaultproperties of the menu class as subobjects.

There is also an OnTouch() event in MobileMenuScene which gets called by the engine whenever a touch occurs. It passes in the control that was touched, the location of the touch, and whether it is a new touch or the touch was canceled. You can use this to determine which control was activated and do whatever you want that control to do.

Here is a very basic example menu class:

class MobileMenuExample extends MobileMenuScene;

/**
 * Handle menu input
 * 
 * @param Sender The object clicked on
 * @param TouchX X location in screen space
 * @param TouchY Y location in screen space
 */
event OnTouch(MobileMenuObject Sender,float TouchX, float TouchY, bool bCancel)
{
	if (Sender == none)
	{
		return;
	}

	if (bCancel == true)
	{
		return;
	}

	if (Sender.Tag ~= "Next")
	{
		InputOwner.Outer.ConsoleCommand("open SimTest");
	}
	else if (Sender.Tag ~= "Resume")
	{
		InputOwner.CloseMenuScene(self);
	}
}

defaultproperties
{
	Begin Object Class=MobileMenuButton Name=NextButton
		Tag="Next"
		bRelativeLeft=true
		Left=0.1
		Top=20
		Width=100
		Height=20
		Caption="Next Map"
		CaptionColor=(R=1.0,G=1.0,B=1.0,A=1.0)
	End Object
	MenuObjects.Add(NextButton)

	Begin Object Class=MobileMenuButton Name=ResumeButton
		Tag="Resume"
		bRelativeLeft=true
		Left=0.1
		Top=60
		Width=100
		Height=20
		Caption="Resume Game"
		CaptionColor=(R=1.0,G=1.0,B=1.0,A=1.0)
	End Object
	MenuObjects.Add(ResumeButton)
}

You can see it has two buttons. One opens a new map.

InputOwner.Outer.ConsoleCommand("open SimTest");

The other closes the menu.

InputOwner.CloseMenuScene(self);

These buttons just display text, but you can have them display images as well. Each button can have 2 images. One is displayed when it is not being touched. the other is displayed when it is being touched. To add images for the buttons, you would add lines similar to these to the default properties where the button is being created:

Images(0)=Texture2D'CastleUI.menus.T_CastleMenu2'
Images(1)=Texture2D'CastleUI.menus.T_CastleMenu2'
ImagesUVs(0)=(bCustomCoords=true,U=354,V=562,UL=310,VL=48)
ImagesUVs(1)=(bCustomCoords=true,U=676,V=562,UL=310,VL=48)

That tells which texture and the coordinates within that texture to use for each image.


To open a menu, you call the OpenMenuScene() function in the MobilePlayerInput of the PlayerController passing it the class of the menu to open. To close a menu, you call CloseMenuScene() passing it a reference to the menu to close. In my example, I just passed self since I was closing it from inside itself, but you can also keep a reference when you open a menu as OpenMenuScene() returns a reference to the menu being opened.


Hopefully, that is enough to get you started. I'll go into much more detail in the actual documentation.

[zero4]

many thanks ffejnosliw!

but now my MPI is null:

Accessed None 'MPI'.
Function MyController.PostBeginPlay

I will be grateful if you can tell us where we should to create Scene.

[ffejnosliw]

It really depends on what type of menu it is and when you want to open it. You'll have to be specific about what yuo are doing and where you are wanting to open this menu from.

[zero4]

It's just my hud with couple of buttons visible from start the level.

I've created exec function to do open my scene, but I'm not sure where should it activate it. (PostBeginPlay() can't open my scene)

I will be grateful if you can tell me where should I trigger it to have it visible on my level from start. I know that I can use Kismet for this, but well I would like to learn something and use US.

Edit:
And another thing - OnTouch is executing after I've untouched it...

[ffejnosliw]

OnTouch is only called on an untouch. That is just how it is designed.

To open a menu, you need to have access to the MobilePlayerInput. That would probably be sometime after InitInputSystem() is called by the engine on the PlayerController to initialize the input system. Of course, this is assuming you want to call it from the PlayerController.

[zero4]

OnTouch is only called on an untouch. That is just how it is designed.

It would be nice to have more functions there. (OnTouch, UnTouch etc) but I'm still working with zones, trying to combine buttons/zones and find out why it's separated stuff.

[ffejnosliw]

This is a generalization, but input zones are for controlling gameplay and interacting with the world where it requires fine control while the menu system is for interfaces whose functions can be performed with less detailed controls. There is still fairly flexible control provided in the menu system, however. Using the OnSceneTouch() gives you more generic control without having to rely completely on actual controls.

[FlameHaze]

You wouldn't happen to have a .zip file with this packaged available? I'm just having an issue of seeing it when I deploy it to the device.