Let's create a Message Box!

Out of the box, there is no "standard" message box in RPG Architect. Like most things, you will have to use a template, copy it from an existing (e.g. sample) project, or create one from scratch. This post describes how to create your own message box from scratch.

1713411310057.png


1. Like just about everything, we start by opening the database by pressing F8 on the keyboard (or Tools >>> Database from the menu). Click on User Interfaces under User Interfaces.

2. Choose an empty slot in the list of User Interfaces. If there are none, click on Resize to add database records. Give your user interface a name (like "Let's Message"), and choose Message Box for the User Interface Type. You will see a small Message Box pane pop up below with Header Element, Body Element, and Picture Element. For people familiar with RPG Maker, these are equivalent to the name, text, and portrait, respectively. We need to create at least these three.

1713411936178.png


3. Let's start with the Body Element. The body element consists of at least a text box for the body text. But because we also want a border, let's start with that. Click on the plus sign to add a element, and choose Pane. Once the (empty) pane has been added, click on it to set the properties. Something like the below should now pop up. Give it a name (e.g. background).

1713412702898.png


4. First, we need to have a background for the pane. Click on the [...] to choose a background. From there, select a interface of choice. If you do not have any, you can use the assets provided with RPGA. Choose a UI (e.g. ComponentBoxes-Full.png) and click on OK.

1713413059134.png


5. The preview window in the top right will show the chosen UI. It's filling the entire screen now, so we need to set the dimensions under Position. For example Relative X: 15%, Relative Y: 60%, Relative Width: 70%, Relative Height: 35%. The UI in the preview window will adjust as you set the dimensions, showing you how it will appear in-game.

1713413522797.png


6. Next, we want to add the body text. Press the plus icon next to Elements again, and this time choose Text. Again, there's lots of options to configure, but for now let's forget about Context and Effects. Give it a name (e.g. bodytext) and configure the dimensions of the textbox so that it fits inside the background that we created earlier. You also want to make sure that the Font Family is selected, and Use Word Wrapping is turned on. You can enter some random words inside the Text field so that it will show in the preview. Below is an example of the Position configured to Relative X: 37%, Relative Y: 64%, Relative Width: 46%, Relative Height: 30%, keeping in mind that we want to add a picture frame for a portrait later on.

1713414491298.png


7. Next, let's add a picture frame for the Picture Element. For this you can either add a separate Pane to house the portrait, or just choose to have the portrait appear inside the text box. If you want a separate Pane for the portrait, make sure it is positioned above the Picture element in the list of Elements, otherwise the Picture will be covered by the Pane on screen. For now, let's add a picture. Give it a name (e.g. portrait), choose either an Image or a Sprite, and configure the dimensions so that the portrait will fit inside the box nicely. Note that as with Text in the previous step, the Image or Sprite chose here is just for preview purposes. Below is a preview when Position is set to Relative X: 18%, Relative Y: 64%, Relative Width: 25%, Relative Height: 25%.

1713415380227.png

8. The Header Element (textbox for the name) is added in much the same way. In the example below, a separate Pane was added for this.
1713416050834.png


9. The final step is to populate each of Header Element, Body Element, and Picture Element with the elements you have just created. Make sure to select the Text and Picture elements, and not the panes they are resting on. If the pull-down appears empty, close the database by clicking OK, reopen with F8 and try again.

1713416310588.png


And that's it! Now you should be able to select this as a template whenever you want to have your entity talk using the Display Static Message script.

1713416508555.png


If you would like to use the above configuration as a starting point, copy the string of text below and paste it into your database. Be aware that you will most likely have to reassign all the graphics.

JSON:
{"Data":{"Elements":[{"$":"PaneUserInterfaceElement","BackgroundImage":"UI\\Monster and Robot - Generic\\ComponentBoxes-Full.png","BackgroundStrategy":0,"ColorMask":"1,1,1,1","HueShift":0,"UseTemplateBackgroundImage":0,"ID":"42d56981-f982-4f35-9b6b-a4d63086e8f7","IsLinkedToSelectionContext":0,"IsLinkedToUserInterfaceContext":0,"IsRelativelyPositioned":1,"IsVisible":1,"Margin":{"Bottom":0,"Left":0,"Right":0,"Top":0},"Name":"background","PixelHeight":0,"PixelWidth":0,"PixelX":0,"PixelY":0,"RelativeHeight":0.35,"RelativeWidth":0.7,"RelativeX":0.15,"RelativeY":0.6},{"$":"TextUserInterfaceElement","CharacterDelay":"00:00:00","Font":{"Color":"1,1,1,1","DropShadowOffset":"1,1","DropShadowColor":"0,0,0,0","Family":0,"HorizontalAlignment":0,"IsBold":0,"IsItalic":0,"IsStrikethrough":0,"IsUnderlined":0,"Size":24,"UseDropShadow":0,"VerticalAlignment":2},"HorizontalAlignment":0,"Text":"Next, we want to add the body text. Press the plus icon next to Elements again, and this time choose Text. Again, there\u0027s lots of options to configure, but for now let\u0027s forget about Context and Effects. Give it a name (e.g. bodytext) and configure the dimensions of the textbox so that it fits inside the background that we created earlier. You also want to make sure that the Font Family is selected, and Use Word Wrapping is turned on. You can enter some random words inside the Text field so that it will show in the preview. Below is an example of the Position configured, keeping in mind that we want to add a picture frame for a portrait later on.","UseTemplateText":0,"WordWrap":1,"VerticalAlignment":0,"ID":"bf320e1d-9914-4117-9cd7-89f3472482b9","IsLinkedToSelectionContext":0,"IsLinkedToUserInterfaceContext":0,"IsRelativelyPositioned":1,"IsVisible":1,"Margin":{"Bottom":0,"Left":0,"Right":0,"Top":0},"Name":"bodytext","PixelHeight":0,"PixelWidth":0,"PixelX":0,"PixelY":0,"RelativeHeight":0.3,"RelativeWidth":0.46,"RelativeX":0.37,"RelativeY":0.64},{"$":"PictureUserInterfaceElement","ColorMask":"1,1,1,1","HorizontalAlignment":0,"HueShift":0,"Sprite":{"BackfaceCullingMethod":0,"HueShift":0,"IsCycling":0,"IsModel":0,"Name":"Portraits\\Misha_faces.png","SpriteBorderThickness":0,"SpriteDuration":100,"SpriteFrames":1,"SpriteLayers":{},"SpriteOrientation":1,"SpriteOrientedAroundCenter":1,"SpriteRegion":"0,0,200,200","UseSpriteLayers":0,"Scale":"1,1,1","Translation":"0,0,0"},"StretchToDimensions":0,"UseTemplateImage":0,"UseTemplateSprite":0,"VerticalAlignment":0,"ID":"acc9d73c-28c7-4219-a38d-0c4557f213f1","IsLinkedToSelectionContext":0,"IsLinkedToUserInterfaceContext":0,"IsRelativelyPositioned":1,"IsVisible":1,"Margin":{"Bottom":0,"Left":0,"Right":0,"Top":0},"Name":"portrait","PixelHeight":0,"PixelWidth":0,"PixelX":0,"PixelY":0,"RelativeHeight":0.25,"RelativeWidth":0.25,"RelativeX":0.18,"RelativeY":0.64},{"$":"PaneUserInterfaceElement","BackgroundImage":"UI\\Monster and Robot - Generic\\ComponentBoxes-Full.png","BackgroundStrategy":0,"ColorMask":"1,1,1,1","HueShift":0,"UseTemplateBackgroundImage":0,"ID":"51eb6299-9839-4764-a1f3-f7cdfeef4f01","IsLinkedToSelectionContext":0,"IsLinkedToUserInterfaceContext":0,"IsRelativelyPositioned":1,"IsVisible":1,"Margin":{"Bottom":0,"Left":0,"Right":0,"Top":0},"Name":"name_background","PixelHeight":0,"PixelWidth":0,"PixelX":0,"PixelY":0,"RelativeHeight":0.1,"RelativeWidth":0.22,"RelativeX":0.15,"RelativeY":0.52},{"$":"TextUserInterfaceElement","CharacterDelay":"00:00:00","Font":{"Color":"1,1,1,1","DropShadowOffset":"1,1","DropShadowColor":"0,0,0,0","Family":0,"HorizontalAlignment":0,"IsBold":0,"IsItalic":0,"IsStrikethrough":0,"IsUnderlined":0,"Size":36,"UseDropShadow":0,"VerticalAlignment":2},"HorizontalAlignment":0,"Text":"Good Luck With","UseTemplateText":0,"WordWrap":1,"VerticalAlignment":0,"ID":"5aba6840-ff81-4e4d-93f6-aea7e414f98b","IsLinkedToSelectionContext":0,"IsLinkedToUserInterfaceContext":0,"IsRelativelyPositioned":1,"IsVisible":1,"Margin":{"Bottom":0,"Left":0,"Right":0,"Top":0},"Name":"nametext","PixelHeight":0,"PixelWidth":0,"PixelX":0,"PixelY":0,"RelativeHeight":0.09,"RelativeWidth":0.19,"RelativeX":0.18,"RelativeY":0.545}],"EnterTransition":{"$":"InstantUserInterfaceTransition","Duration":"00:00:01"},"ExitTransition":{"$":"InstantUserInterfaceTransition","Duration":"00:00:01"},"ID":"197eb97e-9b01-4177-a7e8-5da6585cf0fc","Locals":{"Switches":[],"Variables":[]},"LoadedScript":{"Commands":[],"Conditions":[],"Interactions":[]},"Name":"Let\u0027s Message","UnloadedScript":{"Commands":[],"Conditions":[],"Interactions":[]},"UserInterfaceType":{"$":"MessageBoxType","HeaderElementID":"5aba6840-ff81-4e4d-93f6-aea7e414f98b","IsCollatingMessages":0,"MessageElementID":"bf320e1d-9914-4117-9cd7-89f3472482b9","PictureElementID":"acc9d73c-28c7-4219-a38d-0c4557f213f1","TextStrategy":0}},"TypeName":"MAR.Game.Shared.Models.UserInterfaces.UserInterface"}
 
Last edited:
Thanks! Had intended on having a Let's 2D-map by now, but Golden Week and family obligations and RPG Maker, plus myself having doubts as to what works best for RM converts (especially whether structure tiles are best not used at all), got in the way ~.
 
Back
Top