Skip to content

TutorialUIElements

Jump to bottom
Quantumrunner edited this page May 1, 2021 · 1 revision

Tutorial for creating UI Elements

As you’ve crafted your scenario you may have decided that you want to create an intro or finale that has a little more energy than just text boxes. One of the most recent updates to Valkyrie has created a new system on the menu called UI that allows you to create stackable pieces of art to create a more colorful page in your story.

Putting it Together

Start by selecting the UI option from the main menu and then click on ‘New UI’. From here give this a new name as you would any other token or event. Then click in the empty line below to select a piece of art from the FFG catalog. This has many images that can be stacked to create something akin to what is used in the official FFG scenarios. UI2

For this demonstration, we can use ImageCutsceneBG. This will provide a green decorative background with a window for placing a smaller image in. UI3

For the next part I’ve chosen to use the ImageTome as the image to be displayed in the cutout area of the background. I’ve made changes to several of the position and size variables to put it where I want it to be seen. UI4

This next image shows how to use the UI to create a Text layer. UI5

  1. Size changes the size of the text box. X,Y can still be used to manipulate the location.
  2. Enter your text as you would for any other event.
  3. You can change the text size and color as you would like.
  4. This is the display for the text that you’ve entered.

You can create an optional UI button to be displayed. The reason that it’s optional is because you can click where ever the top layer of the UI is at to move things forward. However, this can make things cleaner for easier navigation from a players point of view. UI6

Once you have all the parts of your slide created, you can now create an Event to display everything. Make sure that you Add Components from the bottom up so that everything displays correctly. UI7

And don’t forget to have your next event remove the components so that you can see your game board. UI8

And the final display will look something like this: UI9

Using Custom Images in UI Elements

You can add custom artwork to your UI if you choose to. Simply find the following location on your computer:

  • PC users C:\Users<username>\AppData\Roaming\Valkyrie\EditorScenario
  • MAC users ~/.config/Valkyrie/EditorScenrio

The UI supports JPG and PNG file types. Simply move the image file into the correctly numbered scenario folder.

When you click the blank line to add an image in the UI you will find the new image among the files that can be selected for display. UI10

A few things to keep in mind.

  • Stack your UI layers in the correct order. In the event you are using a matte make sure that it is put on after your picture layer.
  • Don’t forget to make an event that removes the components when done. Otherwise the board will be obscured.
  • When using custom artwork keep fair use in mind. At least try to give the creator a chance to allow you to use their work with a credit in your scenario before just taking something off the internet.
  • Check out the Image Tutorial for more tips how to pick good images.
  • Test your layout at 16x9 and 19x10 resolution. If you want it stretched vertically not horizontally change the units, but make sure that everything that needs to line up uses the same units.
Clone this wiki locally