Where to start with my project

Ive just been given a project in work and I’m convinced Unreal would be perfect for it in the long run. Problem is my boss doesn’t quite see it that way. So I was hoping to put something together to show off what Unreal can offer.
Problem is I’m still a bit of a novice and I’ve only got until the end of October to get something made (at least for this event, there may be further opportunities in the future).

Basically what I want to create is something for our sales department that shows off our products and how they inegrate with the world.

So what I can picture in my head currently is a sort of interactive ‘world map’ that shows off different products and different areas of society (homes, business, vehicles). When you select one area/item it becomes slightly larger and also highlights the different links to other sections of the map. You can then go in for a closer more detailed look of the selected item.

This should be more than enough to keep me occupied for the next month, so if anyone knows what might be a good starting point or some good tutorials that would be helpful in producing something like this then please let me know.

Obviously I’m not expecting to have it all singing all dancing in less than 30 days given my current skill level, but if I can produce something that I can show to my boss that at the very least could give me more time to work on it, then I’d count that as a win.

Thanks in advance.

1 Like

Hey PX54, welcome to the forums!

We really appreciate you having us in mind for your project, and from the sound of it you’ll be able to do what you want and far more, hopefully we can assist you with impressing that boss of yours!

Now something you might see a lot while searching for information is Blueprint vs C++. For your purposes you’ll want to stick with our robust Blueprint system, created with designers in mind, not programmers!

Firstly, let’s get you started with something to just give you a general idea of how to get around. It’s going to have you create a game, but the important thing here is that most of what you’re learning will be carried over to your project. Pay particular attention to the Widget section, as I assume you’re imagining you’ll have buttons to click, which is all in the Widgets!

Avoid learning anything extra about lighting/Lumen or Nanite, as they are going to be more useful after this month, should you get an extension. Keep it simple.

After all this, go to the Unreal Learning page and look into:
how to change levels
how to import to your project (there are massive amounts of free assets on the store that you can use for this)
and how to utilize Widgets to your desired efficacy.

And always remember, if you get stuck, you need help, you’re looking for opinions, anything… the forums are here to help!

Ok, I watched the suggested course. I didn’t see anything specific to widgets it all seemed like a quick intro to Unreal - which I’ve seen multiple different versions of.
There was 7 videos;

  • installing the editor
  • creating an new project and navigating the editor
  • creating and importing assets
  • lit/unlit working and adding a floor and player start
  • different types of lights
  • blueprints player controls/interactions
  • conclusion

Then I’ve tried to search the community learning for widgets but only get results of other asking specific questions or mid-course videos of other widget tips. Nothing about creating.
Also I’ve searched the Unreal documentation on Widgets, and my editor doesn’t appear to show the same options. To begin with, I can’t see anything that says ‘anchors’ anywhere (even after searching in the details panel). The documentation appears to show them listed above the ‘content’ section in the details panel - though this is the top section in my panel*.
*edit - I think I’ve solved this issue, the documentation says to simply add a text box to begin with, nothing is mentioned about a ‘canvas panel’ going in first - which I’ve found out elsewhere. I now appear to have the anchors options.

I know how to navigate and add things, I’m not a complete beginner - I just don’t know enough about where/how to find/do things off the top of my head to know where to go looking for information about what I’m trying to do. I know what Unreal can do, I just don’t know what those things are called, where to find them, how to utilise them or how to connect them all together coherently so that it does what I want.

I’ve got assets into my world. So I need to know;

  • how to set up the camera, to show an overview (locked to position so user can’t manually move it), then move around when things are selected (zoom in on selected item, maybe have the asset begin rotating to one side with text the other).
  • How to have hidden items react when things are selected (like glowing lines connecting different assets together when certain ones are selected, and other lines when others are selected)
  • create a HUD for menu options (‘back’, ‘more info’, ‘show connections’, maybe also use this as another way to select the assets rather than clicking directly on them)

Hey again PX54!

Ok, good to know you’ve got the basics! It sounds like you’re going to be using a lot of “On Click” Events, and you’ll be spending a lot of time in the Level Blueprint!

For the camera:
image

image
Grab a camera asset and put it in the scene. This will be your main (only?) camera for the scene. Now you’ll need it referenced in the Level BP.

You’ll go into the level BP here (different from UE4)
image

And just drag the CameraActor from the world outliner into the LevelBP like so.

Grab a “Set View Target With Blend” node and chuck it in there, and you’ve got your camera! You’ll want to put in a “Set World Position” node to give your camera a definite start point, because you’re going to be moving it around to find your other camera positions.

Next you’ll find things to be clickable and put them in the world. Your big camera position changing stuff.

After that you’ll need to set up an interface to interact with the Clickable things. Every object can have an “on click” event, and you can send signals to the level blueprint using that. Make sure to give the Level BP and every clickable thing this Blueprint Interface!

I’d make 2 functions in the BP Interface: 1 saying go to start and 1 saying “Go To New Location” and make it have an input of a vector. Then pass that vector through and in the level BP, use the BP Interface “Go To New Location” to set the camera to that new location. You can do a moving camera with a timeline if you want but for now try just teleports to get the basic functionality in.

The text pop-ups can also go in the “On Clicked” function on each actor with an interface call to the HUD, to enable/disable parts of a widget and even set widget text. You can just use one interface for all of it, and as a bonus the HUD could use the “Go To Home” function on a button. You can just plug the “Go To Home” function into the stuff in the screenshot above, right after Begin Play.

You could also look up some tutorials to create outlines on actors (usually this is a material) and create lines going between things. These will be splines.

I hope I covered all your questions, get back to us with your progress or if you need any expansion on what I’ve given you here!

I almost forgot! How are you going to do any of this without being able to click on things?!

Here’s the official UE documentation on setting that up with a new player controller :smiley:

Thanks for these. I’ve not got to giving them a go just yet, I just thought I’d add a few simple images of what I’m envisaging right now. I know that with just text descriptions it can sometimes be quite difficult to know exactly what someone means.
(Note these images have been made using AutoCAD)

So initially I want an overview of our products, any of which can be clicked on directly or using the menu down the side.

When an object is selected, it highlights that object and those to which it connects. Allowing the user to then also go further into the detail of that object itself

Finally the detail. Possibly with the product rotating next to the text.

I changed the colours in the final image because I’m not sure if the first ones should be a sort of stylised rendering of everything so there’s a bit of consistent design across all products, and then in the detail section a more realistic visualisation is shown.

Some of these steps might be a bit much for me to get done in the next 20 days, so as long as I can get the basic functionality I should be able to get the go-ahead for further development.

This is more or less what I was thinking as well!

I gave you a pretty large amount of homework to look through, but once you get through all that it’ll just be ironing out the details! The Unreal Motion Graphics UI Designer - or simply UMG - can do all of what you’re wanting with the buttons on the side with some pretty simple widget work. I’m pretty sure what I gave you should be enough to accomplish the functionality, leaving next month to work on getting better models and sharpening out the dull edges!

It might seem like a lot but it’s an illusion, you should be able to get a grasp on things fast. If you don’t, that’s what we’re here for!

1 Like

So when creating the cascading menus, is it better to have separate ‘back’ buttons for each menu - hiding the previous and showing the new - or is there a way to have just 1 back button that will work regardless of which menu is currently visible?

So I have the initial layout with the different product options, and the user selects one.
That hides the main menu and makes the product specific menu visible, along with ‘back’ and ‘more info’ buttons. If they then select ‘more info’ to move into that menu there’s still the ‘back’ option, but this should just go back to the product specific menu rather than the main menu (which a home button would).

Will I need to make a ‘back’ button for each separate menu and code them all separately? Is there a way to make one ‘back’ button that hides the current visible menu and makes the previous one visible again? - sort of like a hierarchy of the menu order.

Also how do I code the home button? i.e. reset to begin play layout.

I’m also struggling to set up the camera changing position. I’ve followed through a few different tutorials but they don’t explain each part of the blueprint so it’s been a bit of trial and error in getting the right parts connected - for example they each end with a ‘set’ command but whenever I search for ‘set’ I get hundreds of items in the list, and I don’t know which to select.

@PX54 I’ve mostly got you. Some things I’ll need screenshots to see where you’re at, though. There’s a lot of ways to go about things and if I say “do this” with no context it’s very unlikely it will work. So, as for the things I won’t need more information! (By the way, go you! It sounds like you’re gonna do well with this.)

What I would suggest is instead of a “Back” like in a web browser, use an “Up”, like go up the hierarchy, with the home page being the top. After getting the basic functionality on one widget, I’d suggest drawing things out in a tree before setting up the hierarchy. So for example:

Home widget can go down to
House, car, pool. <each of these have a button to go Up to “Home” as well as a “Go To Home” button.
House can go down to:
Washing machine, dryer, dishwasher, microwave. <each of these have a button to go Up to “House” as well as a “Go to Home button”.
And so on.

You’ll do that by using this process:

Open up any widget that isn’t your “Home”. Highlight your back button, and scroll to the bottom of the Details window. You’re looking for “On Click”.

image

It should create an Event (You can tell these by the red top). Drag off that and search Create Widget.

Now use the drop down to find your Home Widget you’ve created. As long as you have created a widget you can begin this process, but you’ll obviously need to deal with each widget eventually.

image

Next we add the widget we want to be at to the viewport like so:
image

And then remove the current window from the viewport. I don’t know why it’s called “remove from parent” instead but it is what it is.

image

This code can be copied from the original to serve every “Home Button”.

If you replace the Widget Class on the Create Widget node you can determine what widget to open, so you can go down, up, wherever!

Here’s the whole thing together, but don’t just copy my code because the Create Widget part is wonky - do the steps.

As far as the “Set” issue you were talking about, I’m not sure. Any “Set” node would say what variable is being Set. Screenshots are worth a thousand words. Please get us some! :smiley:

Sorry, I was getting quite frustrated yesterday (and not just with the tutorials I was watching, there were external factors too with a colleague’s behaviour in the office).

I’ve read through your response but not tried anything yet, as with before, I’ll get back to you if I struggle with anything.

This is the tutorial I was following for the camera https://www.youtube.com/watch?v=DCKnZ70qA0o, but they didn’t create the code in the video - it’s already set up and they just talk through it, but don’t mention the ‘set’ at the end. So when I drag off of the Cast function and search for set I get lots of options.

image_2022-10-13_075757442

No worries! Let me clarify what’s going on there.

So in that pic you sent, you’re setting the “Camera 2” variable on the Main Menu Game Mode to be “Camera 2”.
If your Main Menu Game Mode hasn’t been given the variable “Camera 2”, you won’t be able to drag off of Main Menu Game Mode to set it. To get that node you would drag off “As Main Menu Game Mode” and type “Set Camera 2”. So if that doesn’t work, go into your created game mode and give it that Camera variable, so it can be set here by this blueprint.

Then you’d drag in CameraActor2 from your World Outliner (list of objects on the main window) into this graph so it knows what camera to use.

I hope that cleared some things up for you!

Really appreciate all your help with this so far. I feel like I’ve learnt more with my own project than I have with any of the courses I’ve tried to follow in the past. (also feeling a little like it’s really been your project, and I’ve just been going “how’d you do that?” over and over, haha)

So I’ve got the menus working and the camera doing what I want (for now).

By the way I didn’t end up using the full method described in the camera tutorial I was trying to follow. In the end, just adding the ‘create level sequence player’ and ‘play’ (or 'play reverse) functions onto the ‘on click’ event for each button did the trick. Didn’t need to change the level blueprint or create a new game mode for the camera as the tutorial described.

  • Let me know if this is issue that might come back to haunt me. I did it this way, because it wasn’t working following the tutorial.

  • What I did find was that if you interrupt the camera movement (press a button before it’s finished) then there’s a bit of a glitch as it’s not sure where to go, it does end up in the right place. May just rectify this by simply delaying the appearance of the next menu.

  • Also I’m noticing that when I click somewhere that’s not the menu I lose the cursor and need to press Shift + F1 to get it back. Users won’t have this functionality, so will this be an issue in a final build or is this something that only happens in the editor? Ideally it will be used on a touch screen, but may be used with a mouse until that equipment is sorted.

Just need to work on highlighting each object now when selected, so maybe colour change or emit, or move them in some way as well as connecting them to other objects as required with lines/splines.
I do want the other objects to also disappear when we zoom in and move into the detailed selection of each item, and then have it slowly rotating next to the menu.

Possible further development ideas???

  • Create a camera loop, so it’s not just a static camera when on any menu, there’s a slight sway back and forth. Ultimately I will probably want it panning along each object or maybe slowly fade to closeups (like a screen saver) while not in use. But for now I like the camera sway loop idea.
  • Time out back to ‘home’. So this will (if I get approval) eventually be used at conventions for display of our products, and I imagine most people won’t return to the home page once they’ve finished flicking through. So I want something that will return to home automatically after a period of inactivity.

Hey man, that’s what we’re here for!

Before you go any further, write those ideas down, and put them on the backburner. They’re definitely nice for an end product, and they’re 100% doable. BUT! There’s this concept called Feature Creep. If one keeps adding and adding things, your workload increases enough that the basic features get overlooked. Every single thing you add increases the chances of something going wrong. So let’s make sure you have something showable by the 30th, save and back-up that version, then work on increasing the “wow-factor” one feature at a time up until your due date. Then, any ideas you’ve come up with that didn’t get put in, you can add to your presentation as “soon-to-be-implemented if given the go-ahead”!

Ok, to confirm, you do not need to change the level BP or gamemode for this. Ever. You’re totally fine there! You would only need to do that if you wanted to make a new “world map” for a different set of things.

For the use of the mouse and it getting lost if you click on a non-button, did you set up the mouse like shown in the link I posted?

This one here


This part in particular needs to be heeded

Along with this part in the gamemode setup

Regarding the skipping because it doesn’t know what to do, use a Get Player Controller and a Disable Input node before your Sequence player, and an Enable Input node with the same setup as an Event on your sequence, near (not AT) the end of the sequence. Don’t just put it on that blueprint after Play because it’ll fire right after the start of the sequence playing. :slight_smile: Here’s the nodes you need:
image

Edit: added the part about the Disable/Enable input.

Sorry I must have skipped over the mouse controls earlier while trying another section. I’ve added that now.

I’m not quite sure I’m understanding where to put the disable and enable input functions, as when I did it didn’t seem to do anything. The play function is at the end of the blueprint and so I tried rearranging things but couldn’t get it to work as required. I just used a delay before the new menu shows up and I think this works well. It also creates a clean window for the camera move, which I think I prefer anyway.

I did quickly show where I’m up to, to my boss and overall I think he was impressed. Overhearing him talk during the past few weeks I think he thought Unreal could only make videos (that’s what I’ve been making for him, while also working on this). He questioned ‘knowing the software’ to be able to use the interactive elements of what I’m making - before I pointed out that the end user wouldn’t see the editor, just the interactive window, that I’ve made as straight-forward as possible.

I think I’ve got the go-ahead for progression, even though he didn’t officially say anything, but it sounded like he liked it.

So it’s just the emphasising the selected objects and connections that I need to do now. You mentioned before about outlines and splines?

I’ve followed a tutorial on the outlines, and it suggests to reduce the anti-aliasing jitter, change the Blendable Location in the output to Before Tonemapping. When I do this I appear to lose all colour data and the outlines just appear black.
CodeLikeMe - Outline Tutorial
Blendable_Location

I also need to know now, how to enable/disable the CustomDepth Pass on each object individually through the blueprints, so they don’t all have an outline at the same time and it only appears when the relevant button is pressed. I’m presuming this would make use of the Set Render Custom Depth node, with a boolean value but when I try searching for how to do this I just get results about the tick box in the actor details - ‘Render CustomDepth Pass’.


Set_Render_Custom

Hey @PX54. I have fiddled, and fiddled and fiddled with your code. I did the tutorial you linked just to be sure. I cannot, for the life of me, figure out why it would turn black when setting it to before tonemapping, unless your shaders aren’t done compiling (you’d know if they weren’t, it’d say in the viewport). My best suggestion is to try copy-pasting these nodes into a new material and setting the variables identically. Maybe try using a new param node for your color? No idea.

To enable/disable your CustomDepth just use these nodes like so! This specific setup will outline an object when moused over and un-outline it when the mouse leaves. But you can set it up any way you want, just know that the custom depth needs an input of something that can have it set IE a mesh.

You can send a dispatcher/something through an interface while using a widget if that’s your goal, then instead of On Begin Cursor or what have you, it’ll use the event you give it.

Figured it out. I was in the middle of writing out all the different things I’d done with no success, right down to remaking the whole code from scratch.
I noticed that if I swapped the A and B entries into the Lerp that the whole scene starts out black and then slowly glows red (the colour I’ve got it set as) and so thought; could it be something to do with lighting?

I checked the tutorial video again, for moments when the main editor window is visible and noticed that my default set-up didn’t have the SM_SkySphere or any sepatate lighting. It just had SunSky (which was next on my list of queries as I’d been having some issues with lighting in my other video work).

I therefore added these two and turned off SunSky and low and behold the outlines now glow red.

One of the things I looked at was; in their video there’s a few moments when they flick back to a pre-made version of their code and I saw they had made a custom intensity scalar param between the vector param and the lerp. I tried to implement this myself but they used a ‘MakeFloat4’ function, and when I plug this in to my Lerp it gave an error which isn’t visible on their code.
(their code)


(my code)

I don’t think this will really affect me, as I wasn’t looking at introducing this param, but was just curious as to what’s different about my code?

How are you getting that Static Mesh node in your image? whatever I try, my node looks different.

Woo! You figured it out, good for you! That had me writhing.

So I saw that flick to the other material as well, the A input for the lerp has the mask removed. So that’s what’s causing that, remove the mask and it’ll get rid of those errors. It’s because the mask is only pulling a float 3 and you need defined math for multiplying sets of floats that aren’t the same # of inputs. So you were lerping RGB*RGBA which doesn’t compute.

As far as the static Mesh node, you open the BP of the object you’d mouse over, and just drag in the static mesh component from the side. You may have named yours differently but it’s the cinder block icon.

image
VVV
image
VVV
image

:slight_smile:

[[Ok, that works if I click directly on the mesh object, but what about clicking the button relating to that mesh in the widget?]]

Ignore that above, I’ve found out what to do.

Need to add the ‘Get Actor Of Class’ function and select the relevant mesh, in my ‘On Clicked’ within the widget, and then connect that to the ‘Set Render Custom Depth’ function.

Ran into another issue though. I was trying to copy my camera move over to other boxes, and while I technically have done it - once the camera move has finished it then snaps back to the starting location.
I can’t remember if I had this issue originally and if so how I fixed it, or if it’s something new. I’m pretty sure I’ve reassigned all the relevant targets when copying the nodes over.
The original camera still works fine.

Original - First Camera Move
(you can ignore the comments, I’m just anticipating not getting the time to work on this as much after this month, so they’re more to remind me when I get back to it.)

New - Second Camera Move

Once this is sorted it’s just onto the splines, and then I think all the basics are done.

Woo! Close to the goal with a week to spare!

So copy/pasting code can be a bit wonky sometimes. Have you tried doing each node from scratch and seeing what happens if you do it that way? I’m thinking it might be something to do with the sequence player, since I’m not seeing anywhere that the new camera location is being set.

The only thing I can see that remotely relates back to the camera, and there being a difference is the Level Sequences in the Content Drawer.
The original sequence shows the scene but the other two don’t - I can’t see how this would make any difference but was hoping it might lead to something else insignificant which could be the answer.
Camera_Sequences

Edit: I’ve just duplicated the Box1_Zoom and changed the camera end position in the sequence to match that of the Box2_Zoom, then altered the relevant blueprints.
This created a sequence that does have an image, and where the camera stays in place at the end of playing the sequence. So I must have done something wrong with these two sequences when I created them, not sure what but at least it’s solved now.

On to those splines…
I’ve found tutorials about creating your own spline models, and tutorials about moving/animating objects along splines.
But what I want to do is animate the creation of splines (I think). So when you click the relevant button lines are drawn from the object to ‘connected’ objects.
Or would it be better/easier if the lines already exist and clicking the button makes them change colour or glow?