After happily creating your first message box and starting to create a world with lively NPCs talking about all kinds of things, you may want to be able to talk back to the NPC. So you open the entity, right-click and choose Message >>> Display Dialogue Option aaaannnnd... "Oh, I need a template for that, too?"
Yes, Jim, you can't do anything without a template in Architect. Naturally, in practice you would copy one from an existing project or use a template, but it can't hurt to know how to create one from scratch. I mean it's not that much of a chore once you get used to it, and the basic workflow of placing elements is the same as creating message boxes.
1. Let's open the database by pressing F8 , choose User Interfaces under User Interfaces and select an unused database entry. Give it a name (e.g. "Let's Dialogue" and choose Dialogue from User Interface Type pull-down. Once you do this, a small pane will appear giving you some additional options.
2. As you can see, this time we need to create at least two elements, namely the Background Element and the Options Element. Note that unlike the Message Box, with a Dialogue the Background Element is mandatory. We further see a couple more options to shrink the Dialogue as needed, this will be discussed later.
3. Let's first create our Background Element. 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. choices_bg), choose a graphic for the Background (e.g. ComponentBoxes-Full.png), and configure the dimension as you see fit. Typically, the choices will float at the right side of the screen, for example Relative X: 64%, Relative Y: 20%, Relative Width: 25%, Relative Height: 50% will result in something like below.
4. Next, let's set up the Options Element. Click on the plus sign to add a element, and choose List. Give it a name and dimensions so that it will fit inside the Background Element, e.g. Relative X: 67%, Relative Y: 23%, Relative Width: 19%, Relative Height: 47%. To the right of where you set the dimensions of this list, you will see an empty Items section. Because for a Dialogue these choices will be added automatically depending on how many choices you have scripted in the entity, you do not need to add any items here. However. Since you will not see anything in the preview screen, you may want to add one or two just to see how things will look.
5. To be able to choose, we need a cursor. This can be set in the section Cursor Appearance, and offers quite a range of choices. For this how-to, let's limit ourselves to a pointer appearing to the left of the choice. Select a graphic (e.g. FELINAPIXELSELECTICON.png) under Sprite and, choose Pointer - Left under Type.
6. Finally, specify the Pane and the List you just created as the Background Element and the Options Element, and you are good to go! Choose the template you just created when scripting the choices in the entity.
7. Oh... that's... disappointing...
What happened here is that because by default Shrink Horizontally and Shrink Vertically are turned on, the Background Element will be shrunk to fit the text. The problem here is that there is substantial whitespace outside the borders, because of how this UI graphic is designed:
RPGA decides on how much to shrink based on the border of the file (marked red for clarity), and has no way of knowing where the actual inner margins are supposed to be. We need to tell RPGA, so let's go back into the database and configure that.
8. Press F8 again to open the database, and go back to the Dialogue you were working on. Select the Background Element, and under Position you should see some options to set the margin. Fill in some values for the margins here, and test again.
9. The result should look something like this. Now you have a basis to work on, and from here you will most likely have to do fine-tuning to get it just right for your project. It may also be an idea to turn off Shrink Horizontally and/or Shrink Vertically. When you do so, make sure to set the respective margins as configured in step 8 to 0! The margin will function differently depending on whether shrinking is enabled or not.
And that's it! As you can create as many templates as you want, you can for example give an elevator a Dialogue that resembles an actual elevator panel with some work.
Yes, Jim, you can't do anything without a template in Architect. Naturally, in practice you would copy one from an existing project or use a template, but it can't hurt to know how to create one from scratch. I mean it's not that much of a chore once you get used to it, and the basic workflow of placing elements is the same as creating message boxes.
1. Let's open the database by pressing F8 , choose User Interfaces under User Interfaces and select an unused database entry. Give it a name (e.g. "Let's Dialogue" and choose Dialogue from User Interface Type pull-down. Once you do this, a small pane will appear giving you some additional options.
2. As you can see, this time we need to create at least two elements, namely the Background Element and the Options Element. Note that unlike the Message Box, with a Dialogue the Background Element is mandatory. We further see a couple more options to shrink the Dialogue as needed, this will be discussed later.
3. Let's first create our Background Element. 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. choices_bg), choose a graphic for the Background (e.g. ComponentBoxes-Full.png), and configure the dimension as you see fit. Typically, the choices will float at the right side of the screen, for example Relative X: 64%, Relative Y: 20%, Relative Width: 25%, Relative Height: 50% will result in something like below.
4. Next, let's set up the Options Element. Click on the plus sign to add a element, and choose List. Give it a name and dimensions so that it will fit inside the Background Element, e.g. Relative X: 67%, Relative Y: 23%, Relative Width: 19%, Relative Height: 47%. To the right of where you set the dimensions of this list, you will see an empty Items section. Because for a Dialogue these choices will be added automatically depending on how many choices you have scripted in the entity, you do not need to add any items here. However. Since you will not see anything in the preview screen, you may want to add one or two just to see how things will look.
5. To be able to choose, we need a cursor. This can be set in the section Cursor Appearance, and offers quite a range of choices. For this how-to, let's limit ourselves to a pointer appearing to the left of the choice. Select a graphic (e.g. FELINAPIXELSELECTICON.png) under Sprite and, choose Pointer - Left under Type.
6. Finally, specify the Pane and the List you just created as the Background Element and the Options Element, and you are good to go! Choose the template you just created when scripting the choices in the entity.
7. Oh... that's... disappointing...
What happened here is that because by default Shrink Horizontally and Shrink Vertically are turned on, the Background Element will be shrunk to fit the text. The problem here is that there is substantial whitespace outside the borders, because of how this UI graphic is designed:
RPGA decides on how much to shrink based on the border of the file (marked red for clarity), and has no way of knowing where the actual inner margins are supposed to be. We need to tell RPGA, so let's go back into the database and configure that.
8. Press F8 again to open the database, and go back to the Dialogue you were working on. Select the Background Element, and under Position you should see some options to set the margin. Fill in some values for the margins here, and test again.
9. The result should look something like this. Now you have a basis to work on, and from here you will most likely have to do fine-tuning to get it just right for your project. It may also be an idea to turn off Shrink Horizontally and/or Shrink Vertically. When you do so, make sure to set the respective margins as configured in step 8 to 0! The margin will function differently depending on whether shrinking is enabled or not.
And that's it! As you can create as many templates as you want, you can for example give an elevator a Dialogue that resembles an actual elevator panel with some work.
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":"63709cdc-dd30-4d84-a56e-8ceddf791fc9","IsLinkedToSelectionContext":0,"IsLinkedToUserInterfaceContext":0,"IsRelativelyPositioned":1,"IsVisible":1,"Margin":{"Bottom":0,"Left":0,"Right":0,"Top":20},"Name":"choices_box","PixelHeight":0,"PixelWidth":0,"PixelX":0,"PixelY":0,"RelativeHeight":0.5,"RelativeWidth":0.25,"RelativeX":0.64,"RelativeY":0.2},{"$":"ListUserInterfaceElement","AnimateCursorWhenUnfocused":0,"CursorBuzzerSoundEffect":{"Pan":0,"Pitch":0,"Volume":1},"CursorColorMask":"1,1,1,1","CursorConfirmSoundEffect":{"Pan":0,"Pitch":0,"Volume":1},"CursorFitsContents":0,"CursorMaskMargin":0,"CursorMaskStrategy":0,"CursorMovementSoundEffect":{"Pan":0,"Pitch":0,"Volume":1},"CursorOffset":"0,0","CursorSprite":{"BackfaceCullingMethod":0,"HueShift":0,"IsCycling":0,"IsModel":0,"Name":"UI\\Saint Edwards Games\\FELINAPIXEL UI\\FELINAPIXELSELECTICON.png","SpriteBorderThickness":0,"SpriteDuration":100,"SpriteFrames":1,"SpriteLayers":{},"SpriteOrientation":1,"SpriteOrientedAroundCenter":1,"SpriteRegion":"0,0,32,32","UseSpriteLayers":0,"Scale":"1,1,1","Translation":"0,0,0"},"CursorType":2,"FocusScript":{"Commands":[],"Conditions":[],"Interactions":[]},"HideCursorWhenUnfocused":0,"HideWhenUnfocused":0,"InteractionLoops":1,"IsItemRelativelyPositioned":1,"IsItemSizeDefined":0,"IsRenderingCursorBehindItem":0,"ItemFont":{"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":1},"ItemPixelHeight":0,"ItemPixelWidth":0,"ItemRelativeHeight":0.5,"ItemRelativeWidth":0.5,"ItemSpriteHorizontalAlignment":0,"ItemSpriteVerticalAlignment":0,"ItemSpriteMargin":{"Bottom":0,"Left":0,"Right":0,"Top":0},"ItemTextMargin":{"Bottom":0,"Left":0,"Right":0,"Top":0},"ItemUseDropShadow":0,"Items":[{"ColorMask":"1,1,1,1","DisabledEffect":{"ColorMask":"1,1,1,1","Grayscale":0,"InvertConditionValue":0,"IsEnabled":0,"Opacity":1,"SwitchIndexCondition":-1,"UseSwitchCondition":1,"UseTemplateCondition":0,"Visibility":1},"ExecuteScript":{"Commands":[],"Conditions":[],"Interactions":[]},"FocusScript":{"Commands":[],"Conditions":[],"Interactions":[]},"OverrideStyles":1,"SpriteMargin":{"Bottom":0,"Left":0,"Right":0,"Top":0},"SpriteHorizontalAlignment":0,"SpriteVerticalAlignment":0,"Text":"Dialogue Option","TextMargin":{"Bottom":0,"Left":0,"Right":0,"Top":10},"UnfocusScript":{"Commands":[],"Conditions":[],"Interactions":[]},"UseSpaceIfHidden":0,"UseSpriteOnly":0},{"ColorMask":"1,1,1,1","DisabledEffect":{"ColorMask":"1,1,1,1","Grayscale":0,"InvertConditionValue":0,"IsEnabled":0,"Opacity":1,"SwitchIndexCondition":-1,"UseSwitchCondition":1,"UseTemplateCondition":0,"Visibility":1},"ExecuteScript":{"Commands":[],"Conditions":[],"Interactions":[]},"FocusScript":{"Commands":[],"Conditions":[],"Interactions":[]},"OverrideStyles":0,"SpriteMargin":{"Bottom":0,"Left":0,"Right":0,"Top":0},"SpriteHorizontalAlignment":0,"SpriteVerticalAlignment":0,"Text":"Dialogue Option","TextMargin":{"Bottom":0,"Left":0,"Right":0,"Top":0},"UnfocusScript":{"Commands":[],"Conditions":[],"Interactions":[]},"UseSpaceIfHidden":0,"UseSpriteOnly":0},{"ColorMask":"1,1,1,1","DisabledEffect":{"ColorMask":"1,1,1,1","Grayscale":0,"InvertConditionValue":0,"IsEnabled":0,"Opacity":1,"SwitchIndexCondition":-1,"UseSwitchCondition":1,"UseTemplateCondition":0,"Visibility":1},"ExecuteScript":{"Commands":[],"Conditions":[],"Interactions":[]},"FocusScript":{"Commands":[],"Conditions":[],"Interactions":[]},"OverrideStyles":0,"SpriteMargin":{"Bottom":0,"Left":0,"Right":0,"Top":0},"SpriteHorizontalAlignment":0,"SpriteVerticalAlignment":0,"Text":"Dialogue Option","TextMargin":{"Bottom":0,"Left":0,"Right":0,"Top":0},"UnfocusScript":{"Commands":[],"Conditions":[],"Interactions":[]},"UseSpaceIfHidden":0,"UseSpriteOnly":0},{"ColorMask":"1,1,1,1","DisabledEffect":{"ColorMask":"1,1,1,1","Grayscale":0,"InvertConditionValue":0,"IsEnabled":0,"Opacity":1,"SwitchIndexCondition":-1,"UseSwitchCondition":1,"UseTemplateCondition":0,"Visibility":1},"ExecuteScript":{"Commands":[],"Conditions":[],"Interactions":[]},"FocusScript":{"Commands":[],"Conditions":[],"Interactions":[]},"OverrideStyles":0,"SpriteMargin":{"Bottom":0,"Left":0,"Right":0,"Top":0},"SpriteHorizontalAlignment":0,"SpriteVerticalAlignment":0,"Text":"Dialogue Option","TextMargin":{"Bottom":0,"Left":0,"Right":0,"Top":0},"UnfocusScript":{"Commands":[],"Conditions":[],"Interactions":[]},"UseSpaceIfHidden":0,"UseSpriteOnly":0},{"ColorMask":"1,1,1,1","DisabledEffect":{"ColorMask":"1,1,1,1","Grayscale":0,"InvertConditionValue":0,"IsEnabled":0,"Opacity":1,"SwitchIndexCondition":-1,"UseSwitchCondition":1,"UseTemplateCondition":0,"Visibility":1},"ExecuteScript":{"Commands":[],"Conditions":[],"Interactions":[]},"FocusScript":{"Commands":[],"Conditions":[],"Interactions":[]},"OverrideStyles":0,"SpriteMargin":{"Bottom":0,"Left":0,"Right":0,"Top":0},"SpriteHorizontalAlignment":0,"SpriteVerticalAlignment":0,"Text":"Dialogue Option","TextMargin":{"Bottom":0,"Left":0,"Right":0,"Top":0},"UnfocusScript":{"Commands":[],"Conditions":[],"Interactions":[]},"UseSpaceIfHidden":0,"UseSpriteOnly":0}],"Orientation":1,"UnfocusScript":{"Commands":[],"Conditions":[],"Interactions":[]},"UseDefaultCursorSounds":1,"ID":"bc4b7dda-4386-408b-88f8-8be9e3bdf1e3","IsLinkedToSelectionContext":0,"IsLinkedToUserInterfaceContext":0,"IsRelativelyPositioned":1,"IsVisible":1,"Margin":{"Bottom":0,"Left":0,"Right":0,"Top":0},"Name":"choices_list","PixelHeight":0,"PixelWidth":0,"PixelX":0,"PixelY":0,"RelativeHeight":0.47,"RelativeWidth":0.19,"RelativeX":0.67,"RelativeY":0.23}],"EnterTransition":{"$":"InstantUserInterfaceTransition","Duration":"00:00:01"},"ExitTransition":{"$":"InstantUserInterfaceTransition","Duration":"00:00:01"},"ID":"a469d8cf-ce16-4c99-bf3d-b4f06ec53258","Locals":{"Switches":[],"Variables":[]},"LoadedScript":{"Commands":[],"Conditions":[],"Interactions":[]},"Name":"Let\u0027s Talk","UnloadedScript":{"Commands":[],"Conditions":[],"Interactions":[]},"UserInterfaceType":{"$":"DialogueType","BackgroundElementID":"63709cdc-dd30-4d84-a56e-8ceddf791fc9","IsFitToSizeHorizontal":0,"IsFitToSizeVertical":1,"IsGameplayPaused":1,"OptionsElementID":"bc4b7dda-4386-408b-88f8-8be9e3bdf1e3"}},"TypeName":"MAR.Game.Shared.Models.UserInterfaces.UserInterface"}
Last edited:
