Replacing the chatHudBorderArray?

#1 Matt,

Its been a while, but here goes. You are talking about using the GuiBitmapBorderCtrl? When you use this control, you specify a 'bitmap'/image to use as the border. If one looks at the image, you will see that there are portions of the 'GUI Frame' organized thus (excuse my ASCII art):

|-------------------------|
|      TL  | TR | TT      |                       
|-------------------------|
| L  | R  | BL | BB |  BR | 
|-------------------------|

TL - Top Left
TR - Top Right
TT - Top
L  - Left
R  - Right
BL - Bottom Left
BB - Bottom
BR - Bottom Right

So far so good? OK. So you say that you load your image, change a pixel, save it and suddenly it doesn't work? Let me guess. When you load it, the image is arranged as above, but the background looks like it is transparent? Regardless, the problem is this:

In my ASCII arbove are dashes '-' and pipes '|'. They respresent the space between the gui parts. If yo look closely at the drawing, you will see that all parts are separated by blank space, furthermore the lower group of parts is separated by an unbroken line of blank space. The way this control works is it loads the bitmap and searches it from left to right, top to bottom like a grid. The blank space you see is like the row and colum separators. The rule is that all rows must be separated by at least one pixel and all elements in a row must be separated by one at least one pixel, otherwise the algorithm gets confused. Also, it always looks for parts in the following order: TL TR TT L R BL BB BR. This means the image can have as many rows and columns as you like as long as
- the aspect ratio is no more than 1:16
- the image is a power of 2 in both dimension (X and Y)
- there is a pixel separating all rows
- all elements in the rows.

OK, hopefully that is clear. The question still exists. Why does changing a single pixel and resaving hose it up? I only have part of the answer, but I have the solution.

Answer: Something in the format of that image is hosed up. In my experience when you load it and then save it (no need to change anything at all) it will not load any more. This is because the separator pixels no longer meet the requirements of the control. i.e. it can't identify them as spearator pixels. As I said, I don't know exactly why this happens, but I do know how to fix it.

Make all your separator spaces RED (255 0 0). Save that. Now it should work. Note: Don't just try to dump red into the empty spaces. I don't think that will work and it will likely screw up the border images.

Summary (more exact rules here): 

To make your own borders, 
- start with an image of sufficient size 
 -- max aspect ratio (len by width) of 16
 -- len and width are power of 2
 -- image is completely RED
- draw your border parts in the following order: TL TR TT L R BL BB BR
 -- make as many rows and columns as you like, but make sure that:
  --- no parts touch left or top border of image (except)
   ---- The TL part in the first row can (should) touch the left border 
  --- parts that end a row go all the way to the right edge of the image
  --- all rows have a single pixel or more between them
  --- all parts in a row are separated by at least a pixel
  --- all parts in a row have their tops at exactly the same height 
   ---- Having one part lower than the rest will crash the engine (algorithm fails)  
  --- bottom left most part must touch bottom of image 
  --- bottom right most part should not touch right edge of image (no more rows)

OK, I think that's it. I hope I got all this right. If anyone wants to correct me or add stuff
please do.

Good Luck!

PS - The question should arise. What If I want a RED border. The real key here is that the algorithm will use the color it finds in the images upper left corner as the divider color. So, in reality it can be anything, but since pure RED is not a usual color to see in interface borders, it is a good color to use.

#2 Hey Edward,

Thank you very much for your help, it is greatly appreciated! I see now how the Array works, your explanation really helped me allot! I just tried it and it doesn't crash :D Thanks again :)

Matt

#3 YW, glad I could help.

#4 That should really be posted as a resource. Its pretty useful :D

#5 I agree. This should really be a resource. :)

#6 Better yet, have the last quoted section be part of the code and appear in the doc generation...

#7 Yes, that is better :D

#8 Very useful information - thanks :)

#9 Hey, Ed, do you mind if I adapt your explanation to the docs? No guarantee I'll get to it in finite time, just want to have your permission. :)

#10 Wow. Thanks to all for the responses. Glad it was of help

@Ben - Feel free to take this and add it to the docs, but I can't guarantee 100% correctness. I'm pretty sure I got all the rules in there (and that they're right), but I did it from memory and some scratched notes in my research notebook so...

-Ed

#11 Ed - no worries, I'll proof read it. Are you sure that those notes are directly for GuiBitmapBorderCtrl? It seems like it just uses code from some higher level class...

#12 Ok, I finally had a chance to play around with this. I'm having problems :)

I loaded the existing image and changed the top bar. It crashed as you described above. I filled all the areas between the pieces with red and it still crashed.

So I tried creating a new image from scratch. I started with a total red background, pasted the pieces of the border onto it and saved it, making all the red portions transparent. It worked, but my image was a different size, so the parts don't line up with the existing chat HUD gui. Where do I change this gui to match my existing picture?

#13 Also, you need to use an image editor that supports the png format with its transparency options. I found that Photoshop 6 doesn't really support it fully. Paint Shop Pro 7 and up handles the transparency of PNGs well. If someone knows of other editors that support the png format fully, please tell us :)

#14 I'm using Paintshop Pro 8.1, so that shouldn't be the problem.

In fact, I got all the pieces I want, with transparency where it should be and all laid out like described above. Problem is, it's not the same size as the original graphic so the GUI is displaying it wrong. Are there some size numbers in there that need changed someplace (a script or code maybe?)?

#15 Did you look at the torque\example\starter.fps\client\ui\chathud.gui file ?
You can tweek the hud in there.

Also there is the hudfill.png that we must not forget. Thats what fills the inside of the hud. It has a size of 16 x 16. So the fill size inside the borders must be in multiples of 16, else it will extend outside the borders.

#16 I'm using Gimp. It is freeware and handles png's, but is it a 'full' png, I have no clue. I'm just barely scratching the surface of the Torque engine, and yes one day want to modify the gui's appearance. Let me know if Gimp is a good tool for it.

#17 Stupid question here: How about getting rid of it altogether?

I would think that changing one of the visible properties to "0" would do it, but that only makes the whole hud disappear. Even if I do it to "MessageHud_Frame"

Thanks

#18 Stupid question here: How about getting rid of it altogether?

I would think that changing one of the visible properties to "0" would do it, but that only makes the whole hud disappear. Even if I do it to "MessageHud_Frame"

Thanks

#19 Stupid question here: How about getting rid of it altogether?

I would think that changing one of the visible properties to "0" would do it, but that only makes the whole hud disappear. Even if I do it to "MessageHud_Frame"

Thanks

#20 We managed to do it by using a png that has only the transparent background and nothing else. Its invisible. There are probably better ways to really get rid of it though...