Game Development Community

Replacing the chatHudBorderArray?

by mm · in Torque Game Engine · 11/01/2003 (6:19 am) · 41 replies

Hello,

I am trying to replace the chatHudBorderArray.png with my own graphic. But first let me say that I have searched the forums and found somebody else with the same problem. I posted on there but nobody has replied so I decided to post in the private forum. :) So this isn't a double post. Anyways what I would like to do is either replace the current chat hud with my own design or change the one that is there to fit my game style. This is the problem I am having, if I even change the current PNG by one pixel the server will crash when I start a mission. I see now where the PNG links into the GUI but can somebody please help me to understand why the game crashes when I changed the chatHudBorderArray.png. I can't see it being a problem with the PNG's I am using since I have already made buttons, and the other items needed for the screen. If anybody has any ideas what I might be doing wrong please let me know. :)

Thanks,

Matt
#21
04/17/2004 (4:23 pm)
Wow, how did I double post 2 hours apart... hehe

Thanks for that answer!
#22
06/28/2004 (12:01 pm)
I have noticed that the chatHudBorderArray.png file has two diferent colors that are transparent. When I open this file in Corel Photopaint I can see one area as purple [which functions like the RED zone explained above], however there is also a pink area [which corresponds to the color white... somehow...] that is also a tranparent area. The pink areas surround the actual border elements so that they become rectangles.

Can anyone tell me how this is done?

If I make the purple and pink areas in my image tranparent, I get a "Cant create bitmap array error".
If I place only the purple [RED] area transparent, it works fine, but the pink areas that should also be transparent are obviously not....

Some help please??
#23
06/28/2004 (3:51 pm)
That would be the difference between a transparent / seperator color and an Alpha Channel

The "pink" areas are that color due to an Alpha channel
#24
06/28/2004 (7:01 pm)
Thank you.

I managed to figure out my problem by debugging with VS .NET.
The color used as separator, was (255,0,0) with somehow alpha 243 [I say somehow, because I had not intentionally changed it].

However, where the algorithm was supposed to find the separator color again at the first column [between the TL and TR parts], it found (255,0,0) but with a diferent alpha value (214, if I remember correctly). That was why I hadn't noticed the diference with the image editor.

After much meddling with Photopaint I decided to remake a RED background and past all the parts again.
Then I saved as a PNG and selected an image color for transparency. I chose the one I had pasted in the areas I wished to be invisible. Somehow Photopaint had a weird bug and produced an almost correct PNG but with some areas still in that color and not transparent.

I then used GIMP to open the PNG and "cut" those parts away using a color selection tool.

I hope I explained myself properly.

The conclusion is:
1. My PNG image was not correct. The seperator color was diferent along the image. [Which I still dont get how it happened - I assume it was during some image operation...]
2. I still dont know how to make two diferent colors transparent using either Corel Photopaint or GIMP. [For photographers having two diferent colors transparent is much the same, but here we need them to be diferent because of the separator color.
3. If you follow the instructions above, you can produce the desired results.
4. You will still have to mess with the chatHud.gui and .cs files in order for the GUI to fit your size.
#25
07/31/2004 (7:01 am)
I've had a bit more trouble getting this to work than I thought I would. I was modifying the darkborder.png and then torque would not be able to load the array anymore.

I did some digging around and found that Photoshop (7 and cs) was setting the SepColor differently (255,255,255,0 vs. random,0) than it was originally. I guess it handles the alpha channels a bit differently than whatever program was used to generate the image.

I started to use the outline the objects in red method after reading the source code a bit more and came up with this png:

knowhere.net/gg/chatHudBorderArray.png
I just thought it might be helpful for other people using photoshop. I used the marquee tool and fill tool with antialiasing turned off to make the red borders.
#26
11/02/2004 (4:00 pm)
Ok i know this topic is somewhat old now, but here it goes

I followed the instructions to the letter above. But still it crashes when i use my own border graphics. I am at this point getting very angery with this.

I am currently using the head release of late october.

Please help, any clue as to why would be helpfull.

Thanks a bunch
#27
11/02/2004 (6:59 pm)
What graphics tool are you using? Have you tried inspecting the bitmap data that Torque is loading? It really does work - I used it just ten minutes ago.
#28
11/03/2004 (1:46 am)
If ANY single pixel is off by just one it will crash. I found this out the hard way. Having a red pixel with 254 instead of 255 will crash it and you won't be able to see it. Use a color replace brush that is biger than your .png and run it back and forth over the red to make sure they are all 255.
#29
11/03/2004 (10:00 am)
Yup. Your data for this stuff must be clean!
#30
11/03/2004 (2:40 pm)
Roland, if you still haven't gotten it to work, send it to the email in my profile, and I'll tell you exactly what is wrong with it.
#31
03/06/2005 (8:05 am)
*bumped*

I can't get the chat hud border to be invisible. I've tried everything, transparency, 255 0 0 color fill, anything. Can't get the chat hud border array to be invisible without Torque crashing before loading the map.
#32
03/07/2005 (3:55 am)
So, could someone host what the chatHudBorderArray.png would be if I wanted it transparent?
#33
03/07/2005 (4:55 am)
This chathud is easier to use. Now all you have to add is a new bitmap acting as the border around it, without all the pain!

new GuiControl(MainChatHud) {
   profile = "GuiModelessDialogProfile";
   horizSizing = "width";
   vertSizing = "height";
   position = "0 0";
   extent = "640 480";
   minExtent = "8 8";
   visible = "1";
   helpTag = "0";
      noCursor = "1";

   new GuiControl() {
      profile = "GuiDefaultProfile";
      horizSizing = "relative";
      vertSizing = "bottom";
      position = "0 0";
      extent = "400 300";
      minExtent = "8 8";
      visible = "1";
      helpTag = "0";

      new GuiBitmapBorderCtrl(OuterChatHud) {
         profile = "ChatHudBorderProfile";
         horizSizing = "width";
         vertSizing = "bottom";
         position = "0 0";
         extent = "272 88";
         minExtent = "8 8";
         visible = "1";
         helpTag = "0";
         useVariable = "0";
         tile = "0";

         new GuiScrollCtrl(ChatScrollHud) {
            profile = "ChatHudScrollProfile";
            horizSizing = "width";
            vertSizing = "height";
            position = "8 8";
            extent = "256 72";
            minExtent = "8 8";
            visible = "1";
            helpTag = "0";
            willFirstRespond = "1";
            hScrollBar = "alwaysOff";
            vScrollBar = "alwaysOff";
            constantThumbHeight = "0";
            childMargin = "0 0";

            new GuiMessageVectorCtrl(ChatHud) {
               profile = "ChatHudMessageProfile";
               horizSizing = "width";
               vertSizing = "height";
               position = "1 1";
               extent = "252 16";
               minExtent = "8 8";
               visible = "1";
               helpTag = "0";
               lineSpacing = "0";
               lineContinuedIndex = "10";
               allowedMatches[0] = "http";
               allowedMatches[1] = "tgeserver";
               matchColor = "0 0 255 255";
               maxColorIndex = "5";
            };
         };
      };
   };
};
#34
03/07/2005 (1:56 pm)
^--Doesn't work. Border still lives on, and with that, typing a message doesn't work either.

All I need is the nice .png image that would make the border transparent, as Pascal Trahan said he managed to do. My image editors wont let me do the red alpha or whatnot that is needed.
#35
03/07/2005 (8:49 pm)
I will try to send it to you. my email is ptrahan@hotmail.com
#36
03/08/2005 (3:44 am)
Thanks, I'll drop you an e-mail.
#37
05/18/2005 (5:49 am)
About making a transparent border.
I am also a Photoshop user. Making an all red png didn't work for me, so I did the following:

- Take Brians great image (further up in this tread) and copy it into the clipboard
- Make a new PS file, and paste the image into it, effectively making it a new layer, layer1
- In the Layers palette, delete the background
- Use the marquee tool to select all that is not red, pay close attention to follow the division lines exactly
- Delete all non red sections from layer1

Now you should have a file mixing red and transparent. I guess this is what confuses everybody, that the dividers (red) in the original png shows up as transparent in PS.

- DO NOT FLATTEN IMAGE (if you do, transparent becomes white (or background color defined in PS) and you are back to square one).

Instead:

- Select File -> Save as...
- Default file type will be psd. Change that to png in the drop down menu
- Save the file, disregard the warnings, they don't matter
- Close the file. It will ask if you want to save. Answer 'no' since this is only to conserve layer structure, and needs psd format (you don't need the layers any more anyway)

Run you'r game, and voila! Transparent border for you with no script changes, avoiding unforseen concequences.

Hope this was usefull for some of you.
#38
06/28/2005 (8:11 am)
For those who are using an earlier version of Photoshop (5.0/5.5) you can get transparency in a png file by using 'Save for Web'.

-Download and open the file from the link below, or make your own as described above.
-Go to 'File->Save for Web'.
-Select 'PNG-24' under 'Settings' and make sure the 'Transparency' checkbox is ticked. You should see your transparent areas appear in the preview pane on the left hand side.
-Click 'OK' to continue with export.
-Save over the file 'client/ui/chatHudBorderArray.png' (after backing up the file, of course!).

When you restart your game you may have to adjust the size of the semi-transparent background box behind the 'hud' message box if your new border isn't exactly the same size as the default one.

The sample file can be found at:
www.mogshade.com/torque/sample/border_05.psd

Hope this helps...
#39
11/08/2005 (11:00 am)
@MogShade Thanks!
#40
11/09/2006 (12:57 am)
Thanks