Adding Text To Widget Blueprint / Journal

Hi,

I was wondering if there was a way to add text to a scroll box in the widget blueprint after pressing a key?

What I am trying to do is update a journal page. For example if you pick up a teapot pressing the F key, the journal widget would get updated and say something like “you picked up a teapot” in the scroll box.

So here the key is pressed, then prints a string saying “clue added to journal”, then the teapot is removed from the world, and finally I create the journal widget. What I don’t know is what comes after that to add text to the journal widget. Am I going about this all wrong?

This is what the journal widget looks like.

What you are trying to achieve is definitely possible, but I think you’re approach could be better.

Here’s the flow that I would take.

Step #1 - Creating the UMG Widgets
You will need two UMG widgets to achieve this with ease.

  1. Create a “Journal” UMG/Slate widget. This widget will contain a scroll box and a vertical box inside of the scroll box. The vertical box should be exposed as a variable so your UMG Journal widget’s event graph can dynamically add/remove child widgets.

Create an event in the Journal UMG widget called “AddMessage”, this will be called by the PlayerController to add a new Journal entry.

Basically you already have this created per your picture here (https://answers.unrealengine.com/storage/temp/118725-text2.png), but you will need to make some adjustments to the scroll box, compare yours with mine (see below).

  1. Create a “Journal Entry” UMG/Slate widget. This widget will represent a single row in the journal. Each time a Journal entry is added a new “Journal Entry” widget is created and added to the end of the vertical box that we created in the “Journal” widget.

In my example I have two Text nodes in my UMG widget – one for a time stamp and the other for the actual message. Both need to be exposed as a variable because their text values change dynamically during the game which means we will need to get an instance to each one so we can call SetText later. Make sure you expose as a variable, any of your text nodes in your Journal Entry UMG widget.

You will also need to create two class variables and set them both to Expose On Spawn, Editable and optionally set them to Private. These variables will be set by the “Journal” widget when it creates the new “Journal Entry”. During the Construct event for the Journal Entry we will grab the values of these exposed on spawn variables and use them to set the text for the actual Text nodes.

Step #2 - Storing the Actor that is interacted with in the PlayerController

  1. In your Interactable object, catch the OnActorBeginOverlap and OnActorEndOverlap events. On each of these events you want to take the “Other Actor” parameter, cast it to your Character/Pawn and then get the Character’s “Player Controller”.

Note: The OnActorBeginOverlap and OnActorEndOverlap events will only trigger if you have your actor setup with a Box Collision. You can quickly add a box collision Component to your Actor the same way you would add a static mesh.

  1. Once you have the PlayerController instance within your Interactable Actor, call a function/event on your PlayerController to notify your controller that it’s currently overlapping an interactable object. Store a reference to this interactable Actor in the Player Controller.

  2. Configure the Interactable Actor to replicate by going into it’s class settings and check “Replicates”. When we destroy the actor on the server later this allows it to replicate to the clients.

Step #3 - Adding Journal widget to view port and adding messages to the journal

  1. In your PlayerController.BeginPlay event, create the Journal HUD/Widget, add it to the view port and store a reference to this widget in your PlayerController. Make sure to check if this is a local player controller before you spawn the widget, this will make sure the current instance of the player controller is on a client’s machine with a monitor. (Widgets can’t be added to a view port on a dedicated server).

  2. Add the SetOverlappingActor event to the player controller, this event is being called by the interactable object from Step #2 so you may have to go back and wire this up.

  3. Add in the final piece to the interactable object handling, on F key press, if there’s a valid actor being overlapped, add a message to the Journal UMG widget by calling AddMessage" in the Journal widget we created earlier. After the Journal message is added we can send a replicated event to the server so the server can delete the actor that was interacted with.

Thank you sooooooo much for the very detailed answer on how to go about do this!!! I do have a few questions though.

I received this error after running the game. Do you have an idea as to why it is not reading the vertical box 0?

I assume the journal widget is a reference to the journal widget blueprint, but I am unsure as to what the Overlapping actor is a reference to, an actor maybe?

118920-text5.png

I did everything exactly as you wrote and my journal, journal entry, Intractable object, and player controller look just like your screen shots, but it is not working for me. When you talk about calling the AddMessage with the F key, is this what you meant or am I still missing the boat?

Again I TRULY appreciate you taking the time to help me!!

You put the Destroy Actor, AddMessage and CreateJournal nodes in your Interactable Object when you should have put that code in your PlayerController.

Go through my steps again and this time look at the blueprint that I have opened in the screenshot. That will tell you whether the code should be added to your Interactable Object, or your Player Controller.

Here you go, I created this video for you. Unreal Engine 4 Blueprints - Create a scrolling journal/log HUD widget. - YouTube

Your video helped clear up some confusion!!! I TRULY appreciate you taking the time to make this video.

The journal system works, thank you again, and you are just a wonderful person for helping me!!!

Awesome, thanks for going a step further. Really helpfull.

Thank you for taking the time to this, super helpfull!