Adventure Game Studio

AGS Support => Beginners' Technical Questions => Topic started by: bx83 on Fri 23/07/2021 11:38:08

Title: Can I create a textual overlay with a border/outline?
Post by: bx83 on Fri 23/07/2021 11:38:08
I have:

if (ovCoords != null && ovCoords.Valid) ovCoords.Remove();
      ovCoords = Overlay.CreateTextual(50, 720, 1366, eFontNormal, 51520, "TEXT"


This create a nice red 'TEXT' on any background. But what if the background's red? I then need a black (or whatever colour) border around the text. How do I add this?
Title: Re: Can I create a textual overlay with a border/outline?
Post by: Khris on Fri 23/07/2021 12:51:32
You can't customize a textual overlay beyond the options from the command.

What you can do however is create a DynamicSprite, draw whatever you want to it, then use Overlay.CreateGraphical() instead.

Code (ags) Select
DynamicSprite* textOverlay;

Overlay* CreateOverlayText(int x, int y, int width, FontType font, int color, int bgColor, string text) {
  int border = 5;
  textOverlay = DynamicSprite.Create(width + border * 2, GetTextHeight(text, font, width) + border * 2);
  DrawingSurface* ds = textOverlay.GetDrawingSurface();
  ds.Clear(bgColor);  // background color
  ds.DrawingColor = color;
  ds.DrawStringWrapped(border, border, width, font, eAlignCentre, text);
  ds.Release();
  return Overlay.CreateGraphical(x, y, textOverlay.Graphic);
}


Use it like:
Code (ags) Select
  ovCoords = CreateOverlayText(50, 720, 1356, eFontNormal, 51520, 17, "TEXT");
Title: Re: Can I create a textual overlay with a border/outline?
Post by: bx83 on Fri 23/07/2021 14:55:01
ovCoords = CreateOverlayText(50, 720, 1356, eFontNormal, 51520, 17,
                     String.Format("room %d  mouse x%d,y%d   ft %d   translation %02d:%02d   puppet %02d:%02d   smallone %02d:%02d",
                     player.Room, mouse.x,mouse.y, FutureTime, BMin, BTimerSec, PMin, PTimerSec, SMin, STimerSec) );


Error: Type mismatch: cannot convert 'String*' to 'string'
Title: Re: Can I create a textual overlay with a border/outline?
Post by: Crimson Wizard on Fri 23/07/2021 15:01:20
Code (ags) Select

Overlay* CreateOverlayText(int x, int y, int width, FontType font, int color, int bgColor, string text)


the last parameter should be either "const string" or "String" with capital S.
Title: Re: Can I create a textual overlay with a border/outline?
Post by: bx83 on Fri 23/07/2021 15:20:35
GlobalScript.asc
Overlay* CreateOverlayText(int x, int y, int width, FontType font, int color, int bgColor, String text) {
  int border = 5;
  textOverlay = DynamicSprite.Create(width + border * 2, GetTextHeight(text, font, width) + border * 2);
  DrawingSurface* ds = textOverlay.GetDrawingSurface();
  ds.Clear(bgColor);  // background color
  ds.DrawingColor = color;
  ds.DrawStringWrapped(border, border, width, font, eAlignLeft, text);
  ds.Release();
  return Overlay.CreateGraphical(x, y, textOverlay.Graphic, true);
}

...

String overlayString = String.Format("room %d  mouse x%d,y%d   ft %d   translation %02d:%02d   puppet %02d:%02d   smallone %02d:%02d",
                                            player.Room, mouse.x,mouse.y, FutureTime, BMin, BTimerSec, PMin, PTimerSec, SMin, STimerSec);
     
if (ovCoords != null && ovCoords.Valid) ovCoords.Remove();
ovCoords = CreateOverlayText(50, 720, 1000, eFontNormal, 51520, 17, overlayString);


demo:
(https://bluekeystudios.com/img/overlay1.png)

No outline, whether I make the last argument for CreateOverlayText() true or false (missing in original, had to add it).
Title: Re: Can I create a textual overlay with a border/outline?
Post by: bx83 on Fri 23/07/2021 15:36:32
Overlay* CreateOverlayText(int x, int y, int width, FontType font, int color, int bgColor, String text) {
  int border = 2;
  textOverlay = DynamicSprite.Create(width + border * 2, GetTextHeight(text, font, width) + border * 2);
  DrawingSurface* ds = textOverlay.GetDrawingSurface();
  ds.Clear(COLOR_TRANSPARENT);  // background color
  ds.DrawingColor = bgColor;
  ds.DrawStringWrapped(border, border, width, font, eAlignLeft, text);
  ds.DrawingColor = color;
  ds.DrawStringWrapped(0, 0, width, font, eAlignLeft, text);
  ds.Release();
  return Overlay.CreateGraphical(x, y, textOverlay.Graphic, true);
}


It's pretty bad but there's sort of a shadow. IDK, colouring background black seemed counter productive.
Title: Re: Can I create a textual overlay with a border/outline?
Post by: Crimson Wizard on Fri 23/07/2021 15:50:23
The function written by Khris creates an overlay with background.

Did you mean to not have a background, but having the font outline instead?
Title: Re: Can I create a textual overlay with a border/outline?
Post by: bx83 on Sat 24/07/2021 03:05:37
I did - I want a black outline around red text.
Title: Re: Can I create a textual overlay with a border/outline?
Post by: Crimson Wizard on Sat 24/07/2021 03:17:15
Well, you can use a font with an outline. Or make an outline yourself by drawing same text with offset.

I can see you have an outlined text near the cursor, don't know how exactly it's done, but you might just use same method.
Title: Re: Can I create a textual overlay with a border/outline?
Post by: bx83 on Sat 24/07/2021 13:14:24
Overlay* CreateOverlayText(int x, int y, int width, FontType font, int color, int bgColor, String text) {
  int border = 2;
  textOverlay = DynamicSprite.Create(width + border * 2, GetTextHeight(text, font, width) + border * 2);
  DrawingSurface* ds = textOverlay.GetDrawingSurface();
  ds.Clear(COLOR_TRANSPARENT);  // background color
  ds.DrawingColor = bgColor;
  ds.DrawStringWrapped(border, border, width, font, eAlignLeft, text);
  ds.DrawStringWrapped(-border, border, width, font, eAlignLeft, text);
  ds.DrawStringWrapped(border, -border, width, font, eAlignLeft, text);
  ds.DrawStringWrapped(-border, -border, width, font, eAlignLeft, text);
  ds.DrawingColor = color;
  ds.DrawStringWrapped(0, 0, width, font, eAlignLeft, text);
  ds.Release();
  return Overlay.CreateGraphical(x, y, textOverlay.Graphic, true);
}


Close enough :P
Title: Re: Can I create a textual overlay with a border/outline?
Post by: Khris on Mon 26/07/2021 08:25:20
I made this a while back: http://khris.ddns.net/agsfont/

You can use it to turn a TTF or OTF into a custom bitmap outline font.