Can I create a textual overlay with a border/outline?

Started by bx83, Fri 23/07/2021 11:38:08

Previous topic - Next topic

bx83

I have:

Code: ags
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?

Khris

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
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
  ovCoords = CreateOverlayText(50, 720, 1356, eFontNormal, 51520, 17, "TEXT");

bx83

Code: ags
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'

Crimson Wizard

Code: ags

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.

bx83

GlobalScript.asc
Code: ags
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

Code: ags
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.

Crimson Wizard

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

I did - I want a black outline around red text.

Crimson Wizard

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

Code: ags
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

Khris

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.

SMF spam blocked by CleanTalk