Announcement

Collapse
No announcement yet.

[Tutorial] HUD Status / Debug text

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

    [Tutorial] HUD Status / Debug text

    LINK TO EXAMPLEFILE: http://dl.dropbox.com/u/15196514/Debugtext.fla

    Introduction:
    So what I'm about to explain to you now is how to make a small area of your choice to dynamically be populated with text which is sent in from UnrealScript. This might be useful for:
    • Logging purposes, you won't need to tab out to the log window everytime you need to check a `log statement
    • Ingame information to the player such as killnotices or item pickups.


    I'll have a few assumptions about your setup when going through this tutorial, and these are:
    • You know how to communicate between the HUD and Unrealscript
    • You implement the status / Debug text in the HUD


    Description:
    So what we actually are doing is to display text on the HUD.
    Each time a text is sent in to the HUD, the messages that got sent in before gets pushed upwards, like in a chatwindow. We would like to dynamically be able to change the amount of messages that can be shown at the same time, and also for some stylistic purposes, we can change the _yrotation to make the text look more 3D and stylistic.

    So let's Begin!
    • Create an empty movieclip that will be the container for all the textfields that will soon spawn and name it Debugwindow (the name isn't really important)
    • Drag this movieclip onto the stage in a new layer in the root. Name the instance 'debug_mc'
    • There will be only one frame in this movieclip. Make sure there are two layers. Name one layer Code and the other one Textfields.
    • Make a new movieclip and name it something like "Debugtext".
    • Inside this movieclip, put a textfield aligned to your liking (I put the left side of the text close to the cross, the centerpoint). Name the textfield 'debug_1_txt'
    • Format this textfield to your liking with color, size, etc. This will become our template.
    • Back to debug_mc, now drag the Debugtext object from your library into the scene on the Textfield Layer we created beforehand and name the instance 'textFieldTemplate_mc'
    • Paste the following code in the codefield on frame 1:

      PHP Code:
      // The template for the textfield we will be using to duplicate.
      var textfieldTemplate:TextField
      // This number will rise the more textfields are in the array, just for naming purposes
      var identifier:Number 1;
      // Change this to allow more or less textfields to be visible at the same time
      var maxFields:Number 5;
      // The array which will hold the moviclips containing the textfields.
      var textFields:Array =[];
      // Holds the formatting of the text we will duplicate, like font, color and size.
      var textFormat:TextFormat;

      var 
      messageHeight 18// adjust me as necessary

      function Init()
      {
              
      //Saving a reference to the template
          
      textfieldTemplate textFieldTemplate_mc.debug_1_txt;
              
      //Saving the text formatting for future reference
          
      textFormat textfieldTemplate.getTextFormat();
              
      //Make sure that the movieclip is at the Depth 0, otherwise when applying _yrotation it might vanish.
          
      textFieldTemplate_mc.swapDepths(0);
              
      // Remove the template as we've saved all the information we need
          
      textFieldTemplate_mc.removeMovieClip();
      }

      //This function will display a new text.
      function PushNotification(notif:String)
      {
          var 
      tempTextField:TextField;
              
      //Creating a new textfield with uniqe name.
          
      tempTextField createTextField("debug_"+identifier+"_txt"identifier+100100030);
          
      identifier++;
          
      tempTextField.text notif;
              
      //Apply the format of the textfield template.
          
      tempTextField.setTextFormat(textFormat);
              
      //Push the textfield into the Array which manages all visible messages
          
      textFields.push(tempTextField);
          
      UpdateArray();
      }

      function 
      UpdateArray()
      {
              
      //removes the textfield as it exceeds the max number we defined.
          
      if(textFields.length maxFields)
          {
              
      textFields[0].removeTextField();
              
      textFields.reverse();
              
      textFields.pop();
              
      textFields.reverse();
          }
              
              
      //Positions the textfields accordingly, and the less recent the message, the less the alpha it gets.
          
      for(var a:Number textFields.length>= 0;a--)
          {
              
      textFields[a]._y a*messageHeight;
              
      textFields[a]._alpha 20a*16;
          }
      }

      Init(); 


    We are all setup! All we need to do now is to get a reference in unrealscript to our Messagehandler where the code resides, so first, declare the global variable at the top:

    Code:
    var  GFxObject DebugMC;
    in your Init() function, add this line:

    Code:
    DebugMC = GetVariableObject("_root.debug_mc");
    and also add this function:

    Code:
    function Debug(string text)
    {
    	DebugMC.ActionScriptVoid("PushNotification");
    }
    Now if you ever want something debugged, just call the Debug function in the HUD class, I hope this helps!

    Optional:
    In Flash, in your Root, you can add this line as initialization to make a cool 3d effect to the text:

    Structure
    debug_mc contains: textFieldTemplate_mc
    textFieldTemplate_mc contains: debug_1_txt

    Code:
    debug_mc._yrotation = 7;
    If there is any function you would like to be added, or if you have questions, comments, or maybe my example didn't work? don't hesitate to comment

    #2
    Good addition to the community Charleon, will try it now.

    Comment


      #3
      Very Nice something i needed :P

      Comment


        #4
        Hmm doesn't seem to work for me. It works in Flash but doesn't take my text format. I found out it didn't take my text format because i forgot to call init.

        So now it "takes the format" and removes the MC. Problem is. When i call it from Flash i don't see the text appear.

        And in Unreal i call it right when the HUD loads but it doesn't show either. Also you didn't make it too clear that the textmc and the text go inside of the Debug_MC. :P

        Either way glad you made this hehe.

        Comment


          #5
          Originally posted by TheAgent View Post
          Hmm doesn't seem to work for me. It works in Flash but doesn't take my text format. I found out it didn't take my text format because i forgot to call init.

          So now it "takes the format" and removes the MC. Problem is. When i call it from Flash i don't see the text appear.

          And in Unreal i call it right when the HUD loads but it doesn't show either. Also you didn't make it too clear that the textmc and the text go inside of the Debug_MC. :P

          Either way glad you made this hehe.
          Give me a sec and I'll upload an example FLA

          Done. Look at first post, and for reference sake: http://dl.dropbox.com/u/15196514/Debugtext.fla

          Did you get it to work Agent? the textfield must be a Dynamic textfield. Check the file for reference

          About calling it from Flash: this is one thing I am not realy sure about yet, ebcause sometimes it works, and sometimes it doesn't: let's say we have all this code in debug_mc, then we try to do debug_mc.PushNotification("Test"); from the Root, then it doesn't recognise debug_mc as a class and hence can't find the PushNotification function, whereas getting a reference to the GFxObject from UnrealScript and calling the function supposedly works fine. And sometimes you can call it from the root and still get it through, It seems totally random for me , anyone that can clarify this?

          Comment


            #6
            Sweet, thanks for your contribution :P

            Comment


              #7
              Thank you it worked. I just had the MC in the wrong places i believe :P

              Comment


                #8
                Charleon, thanks so much for this!

                Can you show us uber newbs how to call the Debug function in the HUD Class? Or maybe just direct me to a tutorial that shows how to do it.

                Thanks!

                Comment


                  #9
                  Originally posted by m3fs View Post
                  Charleon, thanks so much for this!

                  Can you show us uber newbs how to call the Debug function in the HUD Class? Or maybe just direct me to a tutorial that shows how to do it.

                  Thanks!
                  Well, IF you've gotten so far that you've implemented you're own HUD, you SHOULD have a custom HUD class wrapping the swf File. In that file, just make the additions of Code that i Pointed out. Where would you like to call the function from?
                  an almost surefire way of doing it though is to get a reference to your playercontroller from where you want to debug the text from, and add this function in your extension of the playercontroller:
                  Code:
                  function DebugHUD(string text)
                  {
                  	if(myHUD != none)
                  		LSHUD(myHUD).HudMovie.Debug(text);
                  }
                  where LSHUD is your own custom class extending UTHUDBase

                  Comment

                  Working...
                  X