Announcement

Collapse
No announcement yet.

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

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

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

    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.)

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



    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!

    Comment


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

      Greets,
      Mr. Smith

      Comment


        #4
        Originally posted by Mr. Smith View Post
        Thank you for this great tutorial, it can be posted directly on UDN!
        I really appreciate it.

        Greets,
        Mr. Smith
        My pleasure, enjoy! =)

        Comment


          #5
          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.

          Comment


            #6
            Originally posted by Mr. Smith View Post
            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.

            Comment


              #7
              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)?

              Comment


                #8
                Originally posted by R2D5 View Post
                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!

                Comment


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

                  Comment


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

                    Comment


                      #11
                      Originally posted by argenzio View Post
                      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/Mobil...Reference.html

                      Comment


                        #12
                        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?

                        Comment


                          #13
                          The button also doesn't transfer to the device.

                          Comment


                            #14
                            Originally posted by Mr. Smith View Post
                            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.

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

                            Comment


                              #15
                              Originally posted by Curious View Post
                              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.

                              Code:
                              [Engine.GameInfo]
                              DefaultGame=MobileGame.MobileGame
                              DefaultServerGame=MobileGame.MobileGame
                              DefaultGameType="MobileGame.MobileGame"
                              I've edited the .ini file and now it works like a charm!
                              Thanks.

                              Comment

                              Working...
                              X