Is it possible to have a transparent GUI?

#1 Randy, do some searches. There are a few threads about this from a couple of months ago. Instead of using a bitmap as the parent for your GUI, use the SceneView. This will overlay you text, buttons, etc over your scene.

Actually, here is the thread that I worked this out in www.garagegames.com/community/forums/viewthread/99201

#2 Hmm I'll have to try that.

I read the link, not sure that applies exactly but I will have to read through it again if using a SceneView doesn't work.

Thanks!

#3 I think I am just confused on GUIs in general. I've learned a bit from various places but no one really hits on a GUI for non text / non menus. I need something for a graphical gauge that I am adding to our game.

My artist has supplied me with a gauge on a transparent background but whenever I add this into the scene as a bitmap it doesn't have the transparency. Something Jake said above made me think that this is the problem because I don't think bitmaps have an alpha channel but what other options do I have? I've set up GUI texts and GUI spalsh screens but have never seen anything on setting up an image with transparencies.

Also, Jake's code above and one of the main resources on this topic is working in XML. I have no experience with this and because the resource does not cover what I need, I cannot really expand on it. Does anyone know a C# way of doing this?

Thanks for any insights on this.

#4 Randy, why don't you convert your bitmap to PNG with alpha for the transparency. You can then easily put that on a layer in your scene.

Did you read this static.garagegames.com/static/pg/blogs/michael-perry/An%20Introduction%20to%20th...

#5 Ah yes I've read that. Doesn't seem to relate. I'm trying to create a HUD with C#. I'm going through the chapter on this in John's book though so that should help.

I am acutally using a PNG. It has an alpha channel. I'm just not sure how to use it in game so that the transparent background shows, right now it renders on a solid background despite my original file being opaque.

#6 When I refer to bitmaps above I was speaking about the GUIbitmap control. Is there a control for PNGs that I am not seeing?

#7 Randy, I think I know the problem that you are having as I had the same problems when trying to figure this out. The thread I mentioned previously explained all of this. I think that the other link to the Intro the GUI PDF is better to study than John's book - I have it also and it does not really explain it as well as the PDF.

If you look at your levelData.txscene file, you will notice that there is no SceneView object. Torque will automatically create one of these for you when you load it. Now, if you then create your GUI and set control to it, it then somehow takes precedence over your default sceneview and renders over it (not overlayed) - i'm not entirely sure but it might create another sceneview of its own.

What you need to do is to create your own sceneview, attached it to the DefaultSceneGraph in your levelData.txsence file and then make your GUI elements children of that sceneview which will be rendering your game.

I suggest trying the following and reading the tutorial PDF to get an understanding of the XML. You can then translate that to C# if you want.

Create a new xml file and name it something like GUI.xml and add it to your data project along with your level data. This sample is simply adding text to the screen that will overlay over your scene. You can change this to add a GUIBitMap instead if you want. Try with the text first to see if that works for you. Notice that the sceneview has properties for SceneGraph and Camera - these are the ones defined in your levelData.txscene file.

<GUIStyle name="gsvs" />  
     <GUITextStyle name="TextStyle">  
       <FontType>Arial22</FontType>  
       <TextColors>  
         <Color>  
           <X>1</X>  
           <Y>1</Y>  
           <Z>0</Z>  
           <W>1</W>  
         </Color>  
       </TextColors>  
       <SizeToText>true</SizeToText>  
     </GUITextStyle>  
   
     <GUISceneView name="gsv">  
       <Style nameRef="gsvs"/>  
       <SceneGraph nameRef="DefaultSceneGraph"/>  
       <Camera nameRef="Camera"/>  
       <Position>  
         <X>0</X>  
         <Y>0</Y>  
       </Position>  
       <Size>  
         <X>128</X>  
         <Y>72</Y>  
       </Size>  
       <ChildControls>  
         <GUIText name="TestText">  
           <Style nameRef="TextStyle"/>  
           <Text>Test Text</Text>  
           <Position>  
             <X>0</X>  
             <Y>0</Y>  
           </Position>  
           <HorizSizing>Left</HorizSizing>  
           <VertSizing>Top</VertSizing>  
         </GUIText>  
       </ChildControls>  
     </GUISceneView>

Now, load your levelData.txscence, then load your GUI file and set control to your scenceview

SceneLoader.Load(@"datalevelslevelData.txscene"); // scene with camera and scenegraph from the builder  
 SceneLoader.Load(@"dataGUIGUI.xml"); // has my GUI scene view and child controls - be sure to load after main scene  
               
 GUICanvas.Instance.SetContentControl("gsv");

#8 Thanks again Jake, you might just be right. I've gonna through that entire tutorial before but it has been a while. Maybe I should do it that way. I'm just not a big fan of the XML.

I have one more thing that I want to try that I just learned from John's book. If that doesn't do it then I'll try doing it from scratch using the tutorial.

#9 John's tutorial for an in-game map did not help me. I had to tweak it obviously because I wasn't actually needing to track enemies or anything but I'm pretty sure I pulled out the appropriate code and yet my HUD won't even show up. No compiler errors or anything like that. I've messed with it for a while with no luck. I'm probably just gonna scrap it.

I'll do that tutorial now. Hopefully I'll have a giant revelation in the middle of that.

#10 Here is the GUI I am placing over my game screen to hold the HUD.

<?xml version="1.0" encoding="utf-8" ?>
<TorqueSceneData>
  <Version>1.0</Version>
  <SceneData name="PlayScreenSceneData">
    <GUIBitmapStyle name="PlayScreenStyle">
      <SizeToBitmap>false</SizeToBitmap>
      <PreserveAspectRatio>true</PreserveAspectRatio>
    </GUIBitmapStyle>
    <GUITextStyle name="TextStyle">
      <FontType>Arial18</FontType>
      <HasBorder>false</HasBorder>
      <BorderColors>
        <Color>
          <X>0</X>
          <Y>0</Y>
          <Z>0</Z>
          <W>255</W>
        </Color>
      </BorderColors>
      <TextColors>
        <Color>
          <X>255</X>
          <Y>255</Y>
          <Z>255</Z>
          <W>255</W>
        </Color>
      </TextColors>
      <SizeToText>true</SizeToText>
    </GUITextStyle>
		<GUISceneview name="PlayScreen">
			<Style nameRef="PlayScreenStyle"/>
      <Size>
        <X>1280</X>
        <Y>720</Y>
      </Size>
      <HorizSizing>Width</HorizSizing>
      <VertSizing>Height</VertSizing>
      <ChildControls>
          <GUIBitmap name="cluster">
            <Style nameRef="PlayScreenStyle"/>
            <Bitmap>content\UI\gauge_cluster</Bitmap>
            <Size>
              <X>1280</X>
              <Y>720</Y>
            </Size>
            <HorizSizing>Width</HorizSizing>
            <VertSizing>Height</VertSizing>
          </GUIBitmap>
      </ChildControls>
    </GUISceneview>
  </SceneData>
</TorqueSceneData>

For the <Bitmap> I'm using a PNG file (1280x720) with most of the screen being transparent and just part of it at the bottom is opaque for score, etc.

This is the code that loads my GUI and the game level.

SSG_Game.Instance.SceneLoader.Load(sceneGui);
            GUISceneview sceneView = TorqueObjectDatabase.Instance.FindObject<GUISceneview>("PlayScreen");
            FreeCameraComponent camera = TorqueObjectDatabase.Instance.FindObject<FreeCameraComponent>("CameraComponent");
            sceneView.Camera = camera;

            sceneLevel = path;
            SSG_Game.Instance.SceneLoader.Load(sceneLevel);
            GUICanvas.Instance.SetContentControl(sceneView);

--Tom