Continuing this series of articles about how to make use of LUA scripting in scenarios, this time we’re going to take a look at how you can pop up a message box that contains HTML, including images and formatting.

If you haven’t read the previous two articles or seen the YouTube video recording from the live Twitch session then I would strongly recommend doing so first. The aim of these articles is really to dig a bit deeper and be a bit more detailed, so it might miss out some steps (all of which should be covered in the video).

Where are HTML files placed?

You cannot place the HTML files directly in the Scenario folder, it is important to note that they are localised (meaning you can display different files for different languages, such as having a German HTML file shown to a German user, or an English one to an English user).

If you want to include any images then they should be in the base scenario folder (i.e. one folder above where the HTML files are).

For most cases, images should be 128×128 in size, if you want something bigger then note that they need to be multiples of 128, e.g. 256×256 or 128×256. If you go above 128×128 then you must always pop up LARGE message boxes (more on that in a moment).

It’s important to note that the HTML files shown in in-game message boxes cannot be very complex and only a minimal amount of HTML is supported.

Here’s an example, simple, HTML file to get us started:

<html><bodybgcolor="#ff0000"><fontcolor="#ffff00"face="Arial"size="3"><table><tr><td><imgsrc="../professor.png"width="128"height="128"></td><td><p><b>Welcome to this scenario</b></p><p>Can you <i>finish</i> it in one piece??</p></td></tr></table></font></body></html>

In this file, we’ve used a table to create two columns, in the left hand column is an image (which must be placed in the main scenario folder) and the right hand column has some example text with basic formatting options.

Save that file as “introtext.html” in the En folder.

Scripting

The next step is to update the script so that it will call up our HTML message box.

I’ve included a copy of the “OnEvent” function just to remind you how we get to the “OnEventIntroduction” function.

So you can see that to open a message box, we use ScenarioManager:ShowInfoMessageExt and pass in a bunch of parameters.

Let’s just dig in to each one of those, starting from after the name of the function.

The title of the message box
The HTML file that you want to display (the En or De etc bit will be added automatically)
MSG_VCENTER means center it vertically, this could also be MSG_TOP or MSG_BOTTOM.
MSG_CENTER means center it horizontally, this could also be MSG_LEFT or MSG_RIGHT.
MSG_REG means make a middle-sized regular box, this could also be MSG_SMALL or MSG_LRG.
Finally, the “TRUE” at the end means that while this message box is displayed, the game should be paused. If this is FALSE then the game will continue even though the message box is still displayed.

If you want to use an image of greater size then 128×128 then you will need to use a MSG_LRG if you want to avoid an unsightly scrollbar appearing.

That’s really all there is to it, in the next article, i’ll talk about how to make it so that these pop-up messages can be recalled by the player any time they want to re-read through the instructions you’re giving them as they go.

Don’t forget to follow the blog so that you are kept immediately up to date with new posts and if you have any feedback I’d love to hear it in the comments section!