9 piece resizable rectangle GUI

[eri0o]

Hello,

I am  trying to recreate something like the current TextGUI, html border-image (or Unity 9-Slices). Essentialy this box / rectangle will be so that:

• The four corners do not change in size.
• The top and bottom edges stretch or tile horizontally.
• The left and right edges stretch or tile vertically.
• The center section stretches or tiles both horizontally and vertically.

The idea is to use it with a custom function that's not the current text functions (like Say, and Display). Instead I want to make my own custom MySay that will exhibit a label with text, and a box around it.

Ok, now, how is the best way to go on to make this? Can I just have 9 buttons with a label on top? How I would stretch the image for drawing the borders?

I am trying to figure out the less resource intensive way to do this.

[Dualnames]

Imho, draw string on a surface works, i mean that's how i do it. I'm also using a few other things.
But I'd say the pseudo code would be define a rectangle size, height and width, place text within rectangle, possibly before that draw whatever you have to draw on a rectangle, you have to be more specific, and then, just use a UI? use an overlay to print out the result. or a button, or whatever have you.

[eri0o]

So four surface draws for doing the stretch of each edge, and a four more draws for each corner, and then doing a ninth draw for the stretch of the background, and then applying this sprite in a single button on the background.

I am avoiding doing the text together because I plan to either use typed text or doing transparency tween on the text... Right now just figuring out the box stuff.

Trying to figure out a bit of the logic of the TextGUI

Code: ags

  //draw background
  bgSurface.DrawImage(Game.SpriteWidth[gTextGui_Edge0.NormalGraphic], Game.SpriteHeight[gTextGui_Edge0.NormalGraphic], 
                      gTextGui.BackgroundGraphic, 0, 
                      totalWidth-Game.SpriteWidth[gTextGui_Edge0.NormalGraphic]-Game.SpriteWidth[gTextGui_Edge3.NormalGraphic], bubbleHeight-Game.SpriteHeight[gTextGui_Edge0.NormalGraphic]-Game.SpriteHeight[gTextGui_Edge3.NormalGraphic]);

  // Top Left Corner
  bgSurface.DrawImage(0, 0, gTextGui_Edge0.NormalGraphic);
  
  // Top Right Corner
  bgSurface.DrawImage(totalWidth-Game.SpriteWidth[gTextGui_Edge2.NormalGraphic], 0, gTextGui_Edge2.NormalGraphic);
  
  // Bottom Left Corner
  bgSurface.DrawImage(0, bubbleHeight-Game.SpriteHeight[gTextGui_Edge1.NormalGraphic],  gTextGui_Edge1.NormalGraphic);
  
  // Bottom Right Corner
  bgSurface.DrawImage(totalWidth-Game.SpriteWidth[gTextGui_Edge3.NormalGraphic], bubbleHeight-Game.SpriteHeight[gTextGui_Edge3.NormalGraphic], gTextGui_Edge3.NormalGraphic);
  
  // Top Edge
  bgSurface.DrawImage(Game.SpriteWidth[gTextGui_Edge0.NormalGraphic], 0, 
                      gTextGui_Edge6.NormalGraphic, 0, 
                      totalWidth-Game.SpriteWidth[gTextGui_Edge0.NormalGraphic]-Game.SpriteWidth[gTextGui_Edge2.NormalGraphic], Game.SpriteHeight[gTextGui_Edge6.NormalGraphic]);
  // Left Edge
  bgSurface.DrawImage(0, Game.SpriteHeight[gTextGui_Edge0.NormalGraphic], 
                      gTextGui_Edge4.NormalGraphic, 0, 
                      Game.SpriteWidth[gTextGui_Edge4.NormalGraphic], bubbleHeight-Game.SpriteHeight[gTextGui_Edge0.NormalGraphic]-Game.SpriteHeight[gTextGui_Edge1.NormalGraphic]);

  // Right Edge
  bgSurface.DrawImage(totalWidth-Game.SpriteWidth[gTextGui_Edge5.NormalGraphic], Game.SpriteHeight[gTextGui_Edge2.NormalGraphic], 
                      gTextGui_Edge5.NormalGraphic, 0, 
                      Game.SpriteWidth[gTextGui_Edge5.NormalGraphic], bubbleHeight-Game.SpriteHeight[gTextGui_Edge2.NormalGraphic]-Game.SpriteHeight[gTextGui_Edge3.NormalGraphic]);
  
  // Bottom Edge  
  bgSurface.DrawImage(Game.SpriteWidth[gTextGui_Edge1.NormalGraphic], bubbleHeight-Game.SpriteHeight[gTextGui_Edge7.NormalGraphic], 
                      gTextGui_Edge7.NormalGraphic, 0,
                      totalWidth-Game.SpriteWidth[gTextGui_Edge1.NormalGraphic]-Game.SpriteWidth[gTextGui_Edge3.NormalGraphic], Game.SpriteHeight[gTextGui_Edge7.NormalGraphic]);

Edit:
I used the above code on SierraSpeech, a module I was making forked from Snarky's Speech Bubble.

[Snarky]

Just noticed this thread. There's already a version of the SpeechBubble module that does this: https://www.adventuregamestudio.co.uk/forums/index.php?topic=56121.msg636585653#msg636585653

[eri0o]

That wasn't on your github right? (I literally forked your code)

[Snarky]

Probably not. That version is a hack to support that particular game. To incorporate it into a more general-purpose module took a major rewrite of the module, and while I completed most of it there were some bugs or things missing (in unrelated parts of the code) that I wanted to fix before releasing it, and I never finished it.

Also, the limitation on addressing things in static structs proved to be really annoying (I wanted to do things like SpeechBubble.Format.MaxWidth = 500, which the compiler doesn't accept), and now that it's finally being addressed in the engine I think I'll hold off on any update until I can use it. Apparently it's a one-line fix, so I hope it'll be in the next minor release.