Author Topic: Can I create a textual overlay with a border/outline?  (Read 351 times)

bx83

  • benjamin.rich@protonmail.com
I have:

Code: [Select]
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?

Re: Can I create a textual overlay with a border/outline?
« Reply #1 on: 23 Jul 2021, 12:51 »
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: Adventure Game Studio
  1. DynamicSprite* textOverlay;
  2.  
  3. Overlay* CreateOverlayText(int x, int y, int width, FontType font, int color, int bgColor, string text) {
  4.   int border = 5;
  5.   textOverlay = DynamicSprite.Create(width + border * 2, GetTextHeight(text, font, width) + border * 2);
  6.   DrawingSurface* ds = textOverlay.GetDrawingSurface();
  7.   ds.Clear(bgColor);  // background color
  8.   ds.DrawingColor = color;
  9.   ds.DrawStringWrapped(border, border, width, font, eAlignCentre, text);
  10.   ds.Release();
  11.   return Overlay.CreateGraphical(x, y, textOverlay.Graphic);
  12. }

Use it like:
Code: Adventure Game Studio
  1.   ovCoords = CreateOverlayText(50, 720, 1356, eFontNormal, 51520, 17, "TEXT");

bx83

  • benjamin.rich@protonmail.com
Re: Can I create a textual overlay with a border/outline?
« Reply #2 on: 23 Jul 2021, 14:55 »
Code: [Select]
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'

Re: Can I create a textual overlay with a border/outline?
« Reply #3 on: 23 Jul 2021, 15:01 »
Code: Adventure Game Studio
  1. Overlay* CreateOverlayText(int x, int y, int width, FontType font, int color, int bgColor, string text)
  2.  

the last parameter should be either "const string" or "String" with capital S.

bx83

  • benjamin.rich@protonmail.com
Re: Can I create a textual overlay with a border/outline?
« Reply #4 on: 23 Jul 2021, 15:20 »
GlobalScript.asc
Code: [Select]
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:


No outline, whether I make the last argument for CreateOverlayText() true or false (missing in original, had to add it).

bx83

  • benjamin.rich@protonmail.com
Re: Can I create a textual overlay with a border/outline?
« Reply #5 on: 23 Jul 2021, 15:36 »
Code: [Select]
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.

Re: Can I create a textual overlay with a border/outline?
« Reply #6 on: 23 Jul 2021, 15:50 »
The function written by Khris creates an overlay with background.

Did you mean to not have a background, but having the font outline instead?

bx83

  • benjamin.rich@protonmail.com
Re: Can I create a textual overlay with a border/outline?
« Reply #7 on: 24 Jul 2021, 03:05 »
I did - I want a black outline around red text.

Re: Can I create a textual overlay with a border/outline?
« Reply #8 on: 24 Jul 2021, 03:17 »
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.

bx83

  • benjamin.rich@protonmail.com
Re: Can I create a textual overlay with a border/outline?
« Reply #9 on: 24 Jul 2021, 13:14 »
Code: [Select]
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

Re: Can I create a textual overlay with a border/outline?
« Reply #10 on: 26 Jul 2021, 08:25 »
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.