[Tutorial] Creating input zones through Kismet (Buttons, joysticks etc.)

[Curious]

First of all, this is my first tutorial here, I sincerely hope it'll help you guys. Mr. Smith asked me to further clarify the implementation of a button through Kismet since the UDN still doesn't have any implementation walkthroughs, so I decided to do somewhat of a tutorial/walkthrough to illustrate how you can create some UI/input here.

This tutorial is more of a practical nature because the whole thing is pretty intuitive once you get a hang of it. We'll implement a button! This is tutorial is meant for those who actually know how to use UnrealEd, it's not an introduction to UDK in general and/or Kismet.

I am not an expert, not even close, just sharing my bits and crumbles as I learn to work with this engine. So, let's begin then!


1. Make a quick map, you have a pretty good starting place with SimpleCourtyard if you wish to use it instead.

2. Now we are going to import a button, you can use mine:
http://www.doublebuffer.org/tut_imaging/button1.png

Really simple, just to make a point. Also, I burned some random text into it. Take that, import it into UDK, make sure it's LOD group is set to UI so it registers the alpha because of it's shape.

If you want to make yours, make sure they are a power of 2 (mine for example is 128x64), otherwise UDK is going to slap you in the face.

3. Alright, it's in? Now it's time to get to the fun stuff. Most of you want to get rid of the standard .ini based, add a Clear Input Zones action from New Action -> Mobile.

http://www.doublebuffer.org/tut_imaging/part1.png

4. Now it's time to actually get busy making new input stuff, go back to New Action -> Mobile. and pick up an action called "Add input zone".

http://www.doublebuffer.org/tut_imaging/part2.png

Looks like this, right? Keep the Add Input Zone selected and move on to the properties window downstairs, give it a unique name something like SuperTurboPressingZone and press the tiny upside-down triangle on the right end of "New Zone" and select "MobileInputZone" which will give you all the properties you can tinker with.

http://www.doublebuffer.org/tut_imaging/part3.png

Got it? Now you should have all this to play with:

http://www.doublebuffer.org/tut_imaging/part4.png

5. Now, let's get some stuff in there, open up the "Zone" category and make sure we are working with a button. As you can see, below it, you can actually add a text caption to render over your UI/input elements.

http://www.doublebuffer.org/tut_imaging/part5.png

6. Next up is the bounds... There a lot of little variables here you can change, like the positioning (left upper corner X and Y), size of the UI element, which is set to 128 and 64, because... Well, that's the size of our button, remember? You can also check some relative placements considering the size of the button, it's location (different devices, different aspect ratios and/or resolutions... iPad - iPhone 4 - iPhone 3GS). It's pretty intuitive, you probably knew this already.

http://www.doublebuffer.org/tut_imaging/part6.png

7. There's a lot of settings in-between Bounds and Rendering, which are important for a basic setup, but these simply consider various transitions, whether stuff is visible etc. Pretty self explanatory, right?

Now it's time to adjust how it renders, and actually overriding the default ugly block with our button1.png which you've nicely imported into the Content Browser and now it's dying to be used. Make sure that the inactive opacity is set to 1.0 (we don't want our button to be half visible, do we? Your choice :P). Also, put the texture into the slot designated for it Override Texture 1 (this is the one while it's not pressed), if you wanted to animate to another image when pressed, create a button2 and then slot it into Override Texture 2.

Also, expand the Override UVs 1 as presented in the image and then adjust UL and VL to 128 and 64 respectively so it knows what's the subregion... Or if we want it in it's fullest, which we do.

http://www.doublebuffer.org/tut_imaging/part7.png

That's it, if you've played ball with me, you should have this when you run it in the MobilePreviewer:

http://www.doublebuffer.org/tut_imaging/part8.jpg

That's it, you now have the basic idea how to get something going on your screen without editing .ini and .uc files. Hope you enjoyed it, and if you'd like to express your gratitude, teach me a thing or two in the comments. Have fun! :D (And I know that the last screenshot does have the joysticks, that's because I haven't cleared the input zones, intentionally.)

[Curious]

And here's how it looks on the iPhone 4:

http://www.doublebuffer.org/tut_imaging/IMG_0424.JPG

Remember, when you are catching events with your new input zone, make sure you use the name you gave it in this tutorial! As the UDN says, it needs to piggyback somewhere and this is the place! If you've got questions, please, forward them here. I'll do my best to answer them, as will the rest of the community!

[Mr. Smith]

Thank you for this great tutorial, it can be posted directly on UDN! :D
I really appreciate it.

Greets,
Mr. Smith

[Curious]

Thank you for this great tutorial, it can be posted directly on UDN! :D
I really appreciate it.

Greets,
Mr. Smith

My pleasure, enjoy! =)

[Mr. Smith]

I have one small problem, the button only renders in DX9 mode with the gametype for PIE set to MobileMenuGame.

I don't know if this is something common.

[Curious]

I have one small problem, the button only renders in DX9 mode with the gametype for PIE set to MobileMenuGame.

I don't know if this is something common.

Well, MobileMenuGame type derives directly from the good old GameInfo and it's implementation is kind of a skeleton for expanding upon (it forbids starting a new match etc.). Uncertain whether it supports rendering the input zones if I'm reading the source code correct. Maybe someone else could shed more light on this.

[R2D5]

Thank you very much for this great tutorial. Dose anybody know how i could do a action when i press the button(show up a text or activate i trigger)?

[Curious]

Thank you very much for this great tutorial. Dose anybody know how i could do a action when i press the button(show up a text or activate i trigger)?

I'll create an another tutorial which will actually make use of any input zones available (whether through ini/code or Kismet). Stay tuned!

[argenzio]

Thank you!
I was waiting for a tutorial like this !!!!
Please make another!
Thank you very much!

[argenzio]

Please how can i ad interaction with this button?
Like i push the button and start an animation?
Thank you!

[ffejnosliw]

Please how can i ad interaction with this button?
Like i push the button and start an animation?
Thank you!
You should watch this tutorial:

http://forums.epicgames.com/showthread.php?t=754555

And read this document:

http://udn.epicgames.com/Three/MobileKismetReference.html

[Mr. Smith]

I've updated my graphics drivers to the latest version.
But the button still only shows up in DX9 mode.

Does anyone have a solution for this?

[Mr. Smith]

The button also doesn't transfer to the device. :(

[Curious]

The button also doesn't transfer to the device. :(

MobileMenuGame doesn't work with input or MobileHUD properly for some reason, maybe someone from Epic could clarify, until someone resolves this or adds more information, use the MobileGame as the game type in the DefaultGame.ini.


[Engine.GameInfo]
DefaultGame=MobileGame.MobileGame
DefaultServerGame=MobileGame.MobileGame
DefaultGameType="MobileGame.MobileGame"

[Mr. Smith]

MobileMenuGame doesn't work with input or MobileHUD properly for some reason, maybe someone from Epic could clarify, until someone resolves this or adds more information, use the MobileGame as the game type in the DefaultGame.ini.


[Engine.GameInfo]
DefaultGame=MobileGame.MobileGame
DefaultServerGame=MobileGame.MobileGame
DefaultGameType="MobileGame.MobileGame"

I've edited the .ini file and now it works like a charm! :D
Thanks.

[Silverchime]

Thanks! really useful for me. my gratitute

[zyndro]

Awesome tutorial!
Thank you so much!

=D

[aZzy]

That is really cool. Input zones seem to be stumping a few people (me included)

Adding interaction wouldnt be that hard to do in Kismet would it?

[Curious]

That is really cool. Input zones seem to be stumping a few people (me included)

Adding interaction wouldnt be that hard to do in Kismet would it?

Nope, go for it... But it's recommended that you implement the actual zone logic in code, this is meant only for one-off levels where you need special stuff :D

[aZzy]

Nope, go for it... But it's recommended that you implement the actual zone logic in code, this is meant only for one-off levels where you need special stuff :D

Ok awesome, im still getting my head around the code so i think i will get something working in Kismet then try it in code ;) i am only going to have one level in my game, its a big level though. But that is just for the moment.

Thanks for your reply.
aZzy

[matticus]

Thank you, great tutorial! For those looking to do things with the button in Kismet, this is what I could find...

New Event > Input > Mobile Button Access

Set up a new 'player' variable as the instigator.

In the 'Mobile Button Access' properties, change 'SeqEvent_MobileZoneBase > Target Zone Name' to the name of your input zone.

Hope that helps!

[aZzy]

Do you know how to get the HUD to show up on my iPod? i have looked through the Chicken Coop game source and i have checked that everything that i have done is right, which it seems to be but it still wont show. Or does iOS not support custom HUD's. Only Input Zones?

Dont worry i got it solved, i was putting DrawGameHUD instead of DrawHUD.

[Curious]

Do you know how to get the HUD to show up on my iPod? i have looked through the Chicken Coop game source and i have checked that everything that i have done is right, which it seems to be but it still wont show. Or does iOS not support custom HUD's. Only Input Zones?

Dont worry i got it solved, i was putting DrawGameHUD instead of DrawHUD.

Yeah, that's it. I hope you'll continue on creating tutorials, I'll get back into it tomorrow with some new ones on how to actually use input zones to make things blow up.

[salochin59]

I have Up and Down arrow buttons successfully showing up on my screen. What do I add to "Mobile Button Access" to make the screen move forward or backward when I press them?

[ObstinatusMiles]

Please how can i ad interaction with this button?
Like i push the button and start an animation?
Thank you!
I want to know that too. And also player can slide over input zone(transparent button) and do animation(like in infinity blade). Can u make tut please?

[salochin59]

I am having an issue of the buttons not changing resolution for the 3Gs and iPad. 4Gs fits fine but 3Gs the buttons are too big and dont fit in the screen and Ipad the buttons are too small. How do I fix this?

[James Douglas]

I'm a complete newbie to this so please bear with me. I am a graphic designer not a programmer hence the move to UDK.

My problem is probably a simple one: I would like to move an object along a horizontal plane either left, right, forward or backward buy touching it on the ipad screen. Is this possible? I have searched for video tutorial but to now avail and I have a client breathing down my neck for a prototype of his program (this is the only hitch we have). Any help is greatly appreciated.
TIA James Douglas, Creative Conspiracy. :

[Naxera]

I am having an issue of the buttons not changing resolution for the 3Gs and iPad. 4Gs fits fine but 3Gs the buttons are too big and dont fit in the screen and Ipad the buttons are too small. How do I fix this?

I haven't tried it but I think you can define the button zone as a percentage of the screen size instead of by pixels by using Relative.




My problem is probably a simple one: I would like to move an object along a horizontal plane either left, right, forward or backward buy touching it on the ipad screen. Is this possible?
Did you try Mobile Object Picker? It might be better/easier to use Simple Swipes, but it would work anywhere on the screen, not just the object.

[Hangman057]

It's been around on another site for a month or so but I couldn't find it again either - THNX!

[damian]

Awesome tutorial. It works absolutely fine for the PC run as well as the mobile simulation, but when I install the game on the device (in my case iPhone 4) I am not able to see the button I designed using this tutorial. Please help.

[damian]

Mr. Curious, could you please help me. I am unable to get this button displayed on the iPhone 4. Are we supposed to change some properties, or mobile settings under buttons to get it displayed? It works fine on the UDK iOS simulator as well as the PC run on the UDK but not when installed on the device. Please help.

[Vawx]

How are you packaging your game damian?

Also, what is it you're experiencing when you put your game on an iDevice. Is it only the button that doesn't show? or is there more stuff missing; such as lighting? Is the button there but the texture you used not? (where you can still touch the button but it has a 'default' texture).

[damian]

How are you packaging your game damian?

Also, what is it you're experiencing when you put your game on an iDevice. Is it only the button that doesn't show? or is there more stuff missing; such as lighting? Is the button there but the texture you used not? (where you can still touch the button but it has a 'default' texture).

Thank you for your reply. Actually my game displays perfectly fine, sir. The texture, lightning and everything else like I never added the button to the game. However when I press the button in the simulator it does exactly what it is supposed to do (increase the speed of my car), but this button does not get displayed on the iDevice. Please help.

[damian]

How are you packaging your game damian?

Also, what is it you're experiencing when you put your game on an iDevice. Is it only the button that doesn't show? or is there more stuff missing; such as lighting? Is the button there but the texture you used not? (where you can still touch the button but it has a 'default' texture).

It's only the button which doesn't show up. I can so clearly see the button on the PC run as well as the UDK iOS simulator run for the game, but it's not visible on the iOS device. One of the comments on the 2nd page recommend changing the DefaultGame.ini to the following

[Engine.GameInfo]
DefaultGame=MobileGame.MobileGame
DefaultServerGame=MobileGame.MobileGame
DefaultGameType="MobileGame.MobileGame"

when I did this, the button ofcourse didn't show up, on top of that the rotation of my car using accelerometer even stopped working.

[damian]

Someone please help me .. please

[Dragon666]

I have .. similar issues with a couple of custom classes that don't get loaded on iPad.
I found this link http://udn.epicgames.com/Three/ContentCooking.html and I hope I'll find the answer there.

I also have big issues with the images compression. For some reason all the images are with way lower quality than in PIE or in console mobile preview.
I guess it has something to do with the packaging again, because I've seen UI elements on other mobile UDK games (Dungeon Defenders for example, and a few others) that show perfectly fine.
Even the original textures from Chicken Coup are getting horribly distorted and compressed when porting to iOS with my setup.

[Vawx]

It sounds like the package isn't being referenced by the iDevice. Check out the link fro Dragon666.

Also, dragon666, when I used my textures for iOS, I had the same issue at first. I ended up using textures that are around 128x128 and then when they are imported into UDK, double click them in the content browser and change their settings to force PVRTC4 and change the LOD dropdown to 'UI'. That helped a lot with the distortion.

[RedEy3]

Hi all,

I've already posted this elsewhere thought i would post it here maybe get some more help...

I'm having problem with trying to replace the joystick images, my own imported images don't display at all even in the mobile previewer, it must be a setting somewhere as when I use a pre installed image that comes with UDK it works fine :S Just not with my own, the images are tga's and are set LOD UI on import and I'm using an add input zone to override the images... I'm using march build.

I've not changed or added any code, it seems that from the tutorial I used you shouldn't have to?

Also does the game type selected in world properties have an effect on these things as at the moment its set to none :S

Help is much appreciated :)

Thanks

Mike

[Mr_Ujastik]

Really liked this tutorial. But I have a question. I want to use the button to make person move and have some problem to handle with it. So I want to learn a bit more about mobile button acces, analog input, key/button pressed, mobile input access, mobile simple swipe. Shortly say I will be pleased if you make some explanation of the input zone.:cool:

[rubendrakkar]

Looks like this, right? Keep the Add Input Zone selected and move on to the properties window downstairs, give it a unique name something like SuperTurboPressingZone and press the tiny upside-down triangle on the right end of "New Zone" and select "MobileInputZone" which will give you all the properties you can tinker with.

I have a big problem. . . the blue inverted triangle does not work. I have edited the defaultgame.ini files and it stills not working. I can put the name on the Zone but when I assign "MobileInputZone" on "New Zone" it does nothing. If theres something inside a script that its blocking or perhaps calling that new zone from another file?. Please let me know if you have an answer