Announcement

Collapse
No announcement yet.

UI Render To Texture

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

    UI Render To Texture

    A simple way to use a render target and scene capture component to render to a Scaleform4/AS3 based HUD without color masking or other kind of complex material.

    Download: RTT20130413.7z 4Shared



    There is only really one bit of AS3 to worry about, which is the addRTT function:

    Code:
            public function addRTT(name:String, source:String):void {
                var RTTParent:DisplayObject = getChildByName(name);
    
                // Only proceed if we have a valid object.
                if (RTTParent) {
                    var ViewLoader:UILoader = new UILoader();
                    ViewLoader.name = name + "_RTT";
                    ViewLoader.source = source;
                    // If you need to turn them on/off etc, enabled this.
                    ViewLoader.enableInitCallback = false;
                    // Not a mistake - don't think it cares if its true or false.
                    ViewLoader.visible = false;
                    // Enabling this will make you have a bad day.
                    ViewLoader.autoSize = false;
                    // Make sure the alpha is set correctly!
                    ViewLoader.alpha = 255;
                    ViewLoader.x = RTTParent.x;
                    ViewLoader.y = RTTParent.y;
                    ViewLoader.width = RTTParent.width;
                    ViewLoader.height = RTTParent.height;
                    addChild(ViewLoader);
                }
    Note the alpha.
    If your mesh is translucent, adjust it.

    In your GFx related UScript class, you will need call the AS3 function with the follow:

    Code:
    function AddRTT(string ParentName, string RTTPath)
    {
        ActionScriptVoid("root1.addRTT");
    }
    This can be in a Widget or Movie - you just need to adjust the string a bit.
    See RTTGFxHUD:AddRTT() for more information.

    When creating the TextureRenderTarget2D, you must make be sure that its background color matches the SceneCapture2DComponent's clear color.

    Code:
    UIRenderTexture = class'TextureRenderTarget2D'.static.Create(width, height, , MakeLinearColor(0.0f, 0.0f, 0.0f, 1.0f));
    And finally, the SceneCapture2DComponent needs one important change - the far plane.
    You need to set this far enough to encompass what you want to render. Beyond this distance nothing will be sent to the renderedtexture, thereby eliminating the need to mask out colours etc.

    Code:
    defaultproperties
    {
        Begin Object Class=SceneCapture2DComponent Name=RTTComponent
            ViewMode=SceneCapView_Lit
            NearPlane=10
            FarPlane=128
            ClearColor=(R=0,G=0,B=0,A=255)
            bEnablePostProcess=False
            bEnableFog=False
            FrameRate=1000
            bUpdateMatrices=False
        End Object
        UICapComp=RTTComponent
        Components.Add(RTTComponent);
    And there you go - done.
    No need for a material or even a background mesh.

    Included in the source is a simple actor that you can spawn that with an attached SceneCapture2DComponent that also creates the TextureRenderTarget2D and keeps a reference to it for usage in a HUD/UI. The only thing you need to remember to do is create it out in an unused part of the map or use the bOnlyOwnerSee variable etc.

    Hope you find this useful.

    #2
    My brother! You are the man!!! I will find it useful for my portrait actors.

    Comment


      #3
      Nice Work ! added into favorites

      Comment


        #4
        Awesome! I remember lots of threads a while ago asking for just this.
        now I'll need to rethink how my inventory screen works but in any case I'd need to port it to AS2 - if I ever do I'll let you know and give it to you so you can add it to your tutorial
        anyway thanks for sharing this great peace of work

        Comment


          #5
          Sorry for the necroing. I'm a bit of an AS3 noob, has somebody ported this to AS2? If so could you please share your code?

          Comment


            #6
            @SkydiveX: Sticking with AS2 due to lack of AS3 documentation?

            Comment


              #7
              Looks great! So far we use a masking technique to display 3D objects on 2D planes. We would love to use your method, but our whole system is done in AS2. Would this be also possible in AS2?

              Comment


                #8
                I supplied the AS3 and UScript for those who haven't got anything in place yet. If you already have your render texture to flash path setup, all you need to do is update your screen capture components to use the new approach - adjusting the far plane and making sure the scene captures clear color - ClearColor=(R=0,G=0,B=0,A=255) - and render textures background color - MakeLinearColor(0.0f, 0.0f, 0.0f, 1.0f) - are the same.

                Comment


                  #9
                  hi Kris,
                  I attempted to download this.. but got lost in a maze of (which link to click) jungle, and stuff asking me to give out my facebook friends list, and other irritations.

                  Would you mind making it available through some other channel please?
                  Maybe mediafire.com, which, while it shows a buncha ads in the webpage, does not require any kind of registration, "special downloader", or anything else to just download the original file

                  Comment


                    #10
                    @philbrown: Has it always asked for a login?
                    I hate that!
                    *sigh*
                    Guess I'll find somewhere else.
                    I had some issues wit hmediafire, but I have forgotten what they were... doh!

                    The code on this page/blog is good as-is anyway.
                    The download simply places it in convient files for you.

                    Still, I'll find somewhere else.

                    Comment


                      #11
                      Which blog "is good as-is"?

                      A reminder: i came to this thread when you mentioned elsewhere that there were clues about rendering to texture in here.
                      (And by "render", I mean "display a 3d staticmesh on it")
                      My goal is to show them in the same way that the Content Browser does.


                      In your blog at http://krisredbeard.wordpress.com/tu...exture/‎ (and above) you mention the existance of class'TextureRenderTarget2D', but it isnt made clear how you actually *use* one, once you have gotten an instance of it.

                      Comment


                        #12
                        My bad - I was assuming prior knowledge of using render targets.
                        With prior knowledge, its good as-is :P
                        I should really get a good place to upload stuff.

                        Comment


                          #13
                          Hi,
                          It is really a good tutorial.
                          I have tried it, it works great on PC. But it shows nothing on xbox360.
                          Do you know what could be the issues?

                          Comment


                            #14
                            Noice, but how do you get this guy to switch between capture actors?

                            Comment


                              #15
                              Originally posted by weiping.zhao View Post
                              Hi,
                              It is really a good tutorial.
                              I have tried it, it works great on PC. But it shows nothing on xbox360.
                              Do you know what could be the issues?
                              I have no experience with the xbox360 & UDK.
                              All I can do is suggest that it is a 360 related Scaleform/UScript issue that you'd need to talk to Epic/someone with 360 experience to fix.

                              Originally posted by Kelt'ar View Post
                              Noice, but how do you get this guy to switch between capture actors?
                              Should just be able to change the 'source' of the loader.

                              Enable the callback in your RTT loader:
                              Code:
                                              // If you need to turn them on/off etc, enabled this.
                                              RTTLoader.enableInitCallback = true;
                              Catch it in WidgetInitialized(), then call SetString():
                              Code:
                              var GFxClikWidget MyScaleformRTTObject;
                              
                              function SetMyRTTTexture(string NewTexturePath)
                              {
                                  local string FinalTexturePath;
                                  
                                  FinalTexturePath = "img://" $ NewTexturePath;
                                  
                                  MyScaleformRTTObject.SetString("source", FinalTexturePath);
                              }
                              
                              event bool WidgetInitialized(Name WidgetName, Name WidgetPath, GFxObject Widget)
                              {
                                  local bool bResult;
                                  
                                  switch(WidgetName)
                                  {
                                      case 'MyScaleform_RTT':
                                          MyScaleformRTTObject = Widget;
                                          bResult = true;
                                          break;
                                  }
                                  
                                  return bResult ? bResult : Super.WidgetInitialized(WidgetName, WidgetPath, Widget);
                              }            
                              
                              defaultproperties
                              {
                                  SubWidgetBindings.Add((WidgetName="MyScaleform_RTT",WidgetClass=class'GFxObject'))
                              }

                              ^ Untested.
                              First thing I thought of and it seems logical.

                              I don't use the RTT's in Scaleform for any sort of remote camera - just the inventory/loadout manipulation. As a result, can just swap out the actors that are in front of the SCA's view. The only extra tweak I do is to adjust the the SCA's FOV and nearplane depending on the size of the actor in front of it.

                              Comment

                              Working...
                              X