Language:
Page Info
Tags:
Skill Level:
Engine Version:

2 - Creating and Displaying a Blueprint Map

Choose your OS:

Now that you've set up a TextRender actor in your newly created project, you're ready to create a Blueprint Map container, the contents of which you'll display in-game.

  1. From your project's Content Browser, double-click the Display Set TextRender Actor to open its Blueprint Event Graph.

    Click for full image.

  2. If you see the following screen, go ahead and click the Open Full Blueprint Editor link to get started.

    Click for full image.

  3. You should see the Display Set TextRender Actor Blueprint Event Graph, where you'll be able to add a Blueprint Map and its display logic.

    Click for full image.

    If you don't see the aforementioned screen, go ahead and click the Event Graph tab to open the Actor's Blueprint Event Graph Editor.

    Click for full image.

  4. Now is the time to create a Blueprint Map container, where you'll store some key-value pairs that you'll display later on. To create a new Blueprint Map, click the + Add New button (located in the My Blueprint panel) and select Variable from the drop-down list.

    Step2_4.png

  5. Name your new variable, Instruction Map.

    Step2_5.png

  6. Click the variable's pin type button, which is located next to the variable's name.

    Step2_6.png

  7. Now, select the Integer variable type from the drop-down list.

    Step2_7.png

  8. Click the variable's container type button, which is located next to the Variable Type drop-down list in the Details panel.

    Step2_8.png

  9. Select the Map container type from the drop-down list.

    Step2_9.png

  10. Now, it's time to define our Map's key-value property types. Currently, the key is an Integer type, which is the desired property type. The value type, however, isn't a String variable type, though. To change the value from being an Integer to being a String, go ahead and click on the value property type drop down list.

    Step2_10.png

  11. Select String from the drop down list.

    Step2_11.png

  12. At this point, you have a key-value pair that is of Integer and String types (respectively). Also, the Blueprint Graph reminds you that you need to compile the Blueprint in order to the define the items that you're going to store inside of the container. Go ahead and click the Compile button to get started.

    Click for full image.

    Compiling the Blueprint replaces the container's Default Value message with an interface, enabling you to populate your container with key-value pairs, wherein the Map's keys are Integers and the values are Strings.

  13. If you already haven't done so, go ahead and click the Save button to save all of the work that you've done so far.

    Click for full image.

    In general, it's always a good practice to save early, and save often.

  14. Click the + (Adds Element) button (located in the Default Value menu of the Details panel) to add a new key-value pair to the newly defined Instruction Map container.

    Click for full image.

  15. Define your container's new key-value pair, defining the key as 1, and defining the value as WASD to run.

    Step2_15.png

  16. Repeat the previous two steps, making sure to fill your Instruction Map container with the following key-value pairs:

    Step2_16.png

Scripting the Logic

Before you can display the contents of your newly created Blueprint Map, you'll need to write the necessary logic.

  1. Now that you've defined your container, go ahead and drag the Instruction Map variable into the Blueprint Event Graph.

    Click for full image.

  2. Select Get from the Instruction Map drop-down list.

    Click for full image.

  3. Drag off the Instruction Map node and add the Find node from the Map Utilities interface.

    Click for full image.

    There are several ways to get values from a Map. For this part of the tutorial, we'll go ahead and increment an integer key to display the associated values contained in the Instruction Map.

  4. With the aforementioned note in mind, go ahead and click the + Add New button, selecting Variable from the drop-down list.

    Step2_20.png

  5. Makes sure to set the variable's type to an Integer type, giving it the name, Key.

    Step2_21.png

  6. After you've declared and defined your new Integer variable, drag Key into the Blueprint Event Graph, and select Get from the drop-down list.

    Click for full image.

  7. Drag off the Key node, search for, and add the IncrementInt node.

    Click for full image.

  8. Now, go ahead and connect the IncrementInt node to the Find node.

    Click for full image.

    For the purposes of this tutorial, you're going to use a time function to increment the Key variable.

  9. Drag off the Event Tick node, search for, and add the Delay node.

    Click for full image.

  10. After you've set the delay duration to 2 seconds, connect the Delay node to the IncrementInt node.

    Click for full image.

  11. Go ahead and drag off the Event BeginPlay node, search for, and connect to the Branch node.

    Click for full image.

  12. Connect the IncrementInt node to the Branch node.

    Click for full image.

  13. Now, connect the Boolean return value belonging to the Find node to the Branch node's Condition pin.

    Click for full image.

    If the Find node successfully locates the item in the Map, the node returns true. Otherwise, if the Find node returns false, there is no item contained in the Map that uses the provided key.

  14. Drag off the Branch node's True pin, search for, and connect to the Set Text(TextRender) node.

    Click for full image.

    This branch of your logic means that if there are valid key-value pairs in the container, go ahead and display the container's associated value(s).

  15. To display your container's values in-game, connect the Find node's return Value pin to the Set Text node's Value pin.

    Click for full image.

  16. Now, drag off the Branch node's False pin, search for, and connect the Set Text(TextRender) node.

    Click for full image.

    This branch of your logic means that if there are no valid key-value pairs in the container, go ahead and display something else.

  17. Drag off the Branch node's Value pin, search for, and connect to the ToText(string) node.

    Click for full image.

  18. Now, define the string to read, Now, shoot the blocks!.

    Click for full image.

  19. After inspecting your completed script, go ahead and click the Compile button before going back to the Editor's Viewport interface.

    Click for full image.

  20. From the Editor's Viewport interface, click the Play button to see your newly implemented script at work.

    Click for full image.

End Result

At this point in the guide, you've defined a new Blueprint Map, filled the container with key-value pairs, and displayed the values with some basic logic that you created in your TextRender Actor's Blueprint Event Graph. If you want to learn how to perform a slightly more advanced operation, please continue onto the next step, where you'll learn how to Add a key-value pair to a Map, subsequently displaying the Map's values.

Tags