Adventure Game Studio

AGS Support => Advanced Technical Forum => Topic started by: eri0o on Fri 17/05/2019 20:19:44

Title: 9 piece resizable rectangle GUI
Post by: eri0o on Fri 17/05/2019 20:19:44
Hello,

I am  trying to recreate something like the current TextGUI, html border-image (https://developer.mozilla.org/en-US/docs/Web/CSS/border-image) (or Unity 9-Slices (https://docs.unity3d.com/Manual/9SliceSprites.html)). Essentialy this box / rectangle will be so that:
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.
Title: Re: 9 piece resizable rectangle GUI
Post by: Dualnames on Fri 17/05/2019 20:35:04
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.
Title: Re: 9 piece resizable rectangle GUI
Post by: eri0o on Fri 17/05/2019 20:46:45
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) Select

  //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 (https://github.com/ericoporto/SierraSpeech), a module I was making forked from Snarky's Speech Bubble.
Title: Re: 9 piece resizable rectangle GUI
Post by: Snarky on Mon 03/06/2019 16:53:34
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
Title: Re: 9 piece resizable rectangle GUI
Post by: eri0o on Mon 03/06/2019 21:33:29
That wasn't on your github right? (I literally forked your code)
Title: Re: 9 piece resizable rectangle GUI
Post by: Snarky on Tue 04/06/2019 08:13:49
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.