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.
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".
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.
Got it? Now you should have all this to play with:
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.
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.
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.
That's it, if you've played ball with me, you should have this when you run it in the MobilePreviewer:
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!
(And I know that the last screenshot does have the joysticks, that's because I haven't cleared the input zones, intentionally.)
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.
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".
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.
Got it? Now you should have all this to play with:
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.
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.
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.
That's it, if you've played ball with me, you should have this when you run it in the MobilePreviewer:
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!
(And I know that the last screenshot does have the joysticks, that's because I haven't cleared the input zones, intentionally.)
Comment