[SOLVED] Inserting image into text / String

[rongel]

Hello!

Is there a way to insert an image into text (more specifically into TextWindow)?
I have a tutorial messages in my game that simply use the Display command. It works well, but I would like to insert an image of a keyboard button into it (rather than use a letter).

I don't want to use a custom GUI for the tutorial messages, because the amount of text changes a lot in them. Display and the TextWindow works well adjusting to the right size. I tried playing around with the Dynamicsprite, but couldn't create the sprite on top of the TextWindow.

So is this possible at all, without using custom GUIs for the messages? Thanks!

[Khris]

You can do this by editing one of the fonts. You can't use more than one font in a Display() message so you would have to use a bunch of special characters for this.

Download FontEdit to edit AGS fonts.

To add a font, open your game and create a new font. Save the game and close AGS. Now open the .WFN file of the font you want to use in FontEdit, draw the keyboard key characters, then save it over the newly created WFN file (if your game had three fonts previously, save the font over agsfont3.wfn, that's the fourth font you just created in AGS).
Now use that font for your Display messages.

[rongel]

Thanks Khris!

That's a clever approach, I would have never thought of it. I'll try it soon and let you know if it works, or if run into problems.

[rongel]

Ok, tested the font edit tool, it's pretty neat and simple to use. But it seems that you can only draw white pixels (or erase them). My keyboard button image that I want to use is small, but made in Photoshop and has several colors and shading. Is it somehow possible to add that image to a font? I'm not very familiar with font editing unfortunately.

[Khris]

Ah, no, unfortunately bitmap fonts only support a single color.

You can look into the SpriteFont plugin though, that should work: https://www.adventuregamestudio.co.uk/forums/modules-plugins-tools/another-plugin-spritefont-renderer-native-bitmap-fonts/
Github: https://github.com/CalinLeafshade/ags-spritefont

It allows you to use arbitrary sprites for characters and can be used with native commands like Display().

[rongel]

Thanks for the tip! Downloaded it, I'll test it tomorrow!

[Crimson Wizard]

Besides the above methods with the fonts, using DrawingSurface and DynamicSprite, which you paste onto a custom GUI's background (or set as a GUI button's graphic), is a most flexible method, as that would allow you to draw virtually anything, both text, geometric primitives and images combined. With certain amount of extra scripting you could do even embedded animation (for example: make some parts of the message glow to bring player's attention, and so forth).

In order to replace Display calls, for instance, you may write your own custom function that
* generates the dynamic sprite;
* shows a GUI with that sprite on it;
* waits until player's input (WaitMouseKey, or WaitForInput in 3.6.0);
* hides GUI and disposes the sprite.

[Snarky]

And to add to Crimson Wizard's suggestion...

It sounded like the main reason you didn't want to use a GUI was that TextWindow resizes itself to fit the text. Does that mean you're using a decorated TextWindow with a frame and tiled background?

If so, there are a number of modules and code samples that draw a background and border frame for an arbitrarily sized window. CustomDialogGUI is one, SpeechBubble 0.8.10 another. (You may have to just borrow the relevant code, since both modules have other logic that doesn't quite fit your use-case.)

It's not super-difficult to do yourself, in any case. It basically amounts to:

• At setup, store the sprite numbers for the window background, borders and corners
• Draw the text + graphics as CW suggests (this is the hardest part, but it has been done before) to a DynamicSprite
• Measuring the size of the DynamicSprite and the window borders and corners, determine how large the window should be
• Draw the borders, corners and tiled background onto another DynamicSprite the size of the window, using loops
• Draw (copy) the content sprite on top of the background sprite
• Set the window background to the combined sprite

[rongel]

Thanks for the answers!

Because my game is almost completed and I'm just doing final touches, I'm looking for the simplest / safest a way that doesn't introduce any new problems. So I'm still figuring which approach to take.

It sounded like the main reason you didn't want to use a GUI was that TextWindow resizes itself to fit the text. Does that mean you're using a decorated TextWindow with a frame and tiled background?

Yes, that's the reason! And yes, I use a TextWindow with custom graphics (8 different corner sprites). Works well and looks nice enough. Little hesitant to use a new module at this point, but I might take a look.

Besides the above methods with the fonts, using DrawingSurface and DynamicSprite, which you paste onto a custom GUI's background (or set as a GUI button's graphic), is a most flexible method

I didn't know I could do this! What command should I use to paste the DynamicSprite to the GUI's background? I only managed to do it in room's background. Would it be possible to to paste it into my TextWindow GUI, it has a background image sprite in the editor. That would be the perfect solution!

[Khris]

Here's how to draw stuff on a GUI's background:

Code: ags

DynamicSprite *gbg; // we need a persistent pointer

function game_start() {
  gbg = DynamicSprite.Create(200, 200);
  gSomeGUI.BackgroundGraphic = gbg.Graphic;
}

function DisplayStuff() {
  DrawingSurface* ds = gbg.getDrawingSurface();
  // draw stuff
  ds.Release();
}

[rongel]

Here's how to draw stuff on a GUI's background:

Thanks, I managed to change the TextWindow background with this! Is there a way to place the DynamicSprite on to the background, like with the Room.GetDrawingSurfaceForBackground command, instead of replacing it?

I'll continue fiddling with these!

[Khris]

Once you have the DrawingSurface of the background, you can do the same things you can do with any DrawingSurface.
If you want to place a sprite, just draw that (2nd) sprite to the surface at any position.

[rongel]

Looks like I got it working, this is just what I was looking for! Now I have my keyboard button image inserted into my TextWindow GUI, and everything works with the Display command.

Here's my code, does it seem alright ?

Code: ags

dynamic_test = DynamicSprite.CreateFromExistingSprite(6472, true);
    
gMessage_Box.BackgroundGraphic = dynamic_test.Graphic;
    
DrawingSurface* ds = dynamic_test.GetDrawingSurface();
    
// draw stuff
ds.DrawImage(5, 57, 13525);
ds.Release();

Thanks for all the help everyone!

[rongel]

Here's what it looks now in the game:

[Crimson Wizard]

Hah, I actually did not know that you can do that directly to TextWindow . I was thinking more about having fully custom gui where you'd also have to draw the borders yourself, but if this works with TextWindow, that's even better.

[rongel]

Yes, this seems to work well! I just need to remove the dynamic sprite / restore the GUI after displaying the message, otherwise the symbol will stay there in the later messages.
I'll mark this as solved!