Final Major Project : NSX GT3 Evo - Update 13

Car configurator - Throughout the project I'd been thinking about ways to make it interesting to view the cars and I wanted the final result to be more than just rendered pictures. I remembered previously watching a video from the Unreal Engine developers at a conference showcasing a new tool to the latest version of unreal: Level Variant Sets. To be able to fully utilise this function I would have to have multiple liveries or mesh components. At the time of watching this video, I didn't feel it was achievable so I dismissed it. However, once I knew I had time to create two liveries this was the first and only thing I wanted to finalise the project.

Since I'm by no means a programmer, I knew this was going to be challenge and I had to combine a lot of different tutorials and information to get the result I wanted. The viewer I have created allows the viewer to control the camera on a 360 rotation around the car using the mouse and wheel to zoom. By pressing different keyboard keys, the UI can be controlled by clicking buttons, toggled visually on or off, or reset the camera. The UI (using the Level variant sets) changes the NSX between its two liveries, cycles the lighting on and off, and swaps levels between the NSX, the Miura, and a final scene of all the cars in one. The final scene has 6 set cameras the user can cycle through to view all the cars. This has created a seamless, all-in-one viewing experience of my FMP.

I achieved this by first setting up the NSX in a scene with the standard scene components required in almost every UE4 level, shown below. 

I then created a simple three-point lighting setup, with a fourth light on the right of this image lighting up the other side of the car slightly. This was because the viewer is 360 and I have to make sure the whole piece is lit from every angle. I also added in some spotlights coming out of the car headlights to make them look real and functional.

My first area to set up was the camera viewer as if I couldn't get this to function the rest would be irrelevant. By following this youtube tutorial, I combined the NSX mesh, a spring arm, and a  cinematic camera into a blueprint. The overall control of this is pretty basic but in addition, I added the code in the red box to allow the user to reset the camera back to its initial state, in case the viewer gets lost or the camera gets stuck.
When testing this, it worked exactly as I wanted except for one area. The camera could infinitely zoom out and also clip through the floor and environment around the car. I added multiple camera blocking volumes around the viewing zone to constrict the camera just to the chosen area. This solved the above problems.

With the camera working, I moved onto the Level Variant Set and I was presently surprised how simple but effective it is. The first stage is to create two sets under the header I named "bodywork" one for each livery. Selecting the actor, I then had to choose which properties I wanted to affect (in this instance the materials that were going to change the liveries). Next to each material (these numbers are related to the multi-sub object I used in 3DS max to first set up the material group), I select the material I have created in unreal with the correct livery texture. For the second livery, I repeat this process except at the value stage I select bodywork_02, Glass_02 etc which is connected to my second livery.

In theory, this is as simple as hiding/unhiding layers in Photoshop, just all at once with one click of a button.
Below you can see I also created the same concept but for the lighting, this will allow the user to toggle the main lights on and off. I did this as there are quite a few emissives and lights on the car, so viewing it in the dark looks really effective! 

Now I have the LVS set up, I need a way for the user to control it, the UI.
As you saw in the above screenshots, I created buttons for each of the options I wanted available to the user. These were simple coloured text png's I created in photoshop, one of which I applied a dark black colour overlay too for when it was not highlighted and then a brightly coloured, boxed version, for highlighted. Inside the widget event graph, I created this code, following the UE4 tutorial. Each of these on-clicks are connected to one of the buttons on the UI. This was something I had to compromise on; originally I'd wanted to be able to control the UI through the keyboard, however, I couldn't work out the functionality to connected keyboard controls to the UI. It does seem possible, but beyond my knowledge in blueprints at this time. The bottom right of these I set up two slightly different buttons. These are related to swapping out which car the viewer sees. When clicked, they will load one of the other levels I have created. Because I knew I would be using this UI three times over, I created the buttons as blueprints in unreal, rather than in the widget UI. This allowed global control and I could set them up once and it applies to all scenes.

At this point, through all my testing, two issues were coming up. The first was an inconsistency with controls. It often would break or get stuck, or sometimes swapping into scenes would cause them to not pick up the right camera etc. So I created an official character controller and blueprint game mode, suggested as part of this tutorial. Honestly, I'm still unsure if I needed both in the way I used them, but it fixed my problem.

Inside the character control blueprint was tricky and it took me a while to figure this stage out, mainly due to my misunderstanding of what was considered the "state of input" when the camera was being controlled. The below code shows that on the event start, the input mode is set to game and UI (for some reason, if I set it to UI only, I permanently lost keyboard control). I also connected the W key to this node, so players could activate the UI controls by pressing W. A similar setup was made with Q to select game mode only, which is what allows for the player to operate the 360 camera controller I set up. Finally, I added an escape command so once the game was built the player could quit the game by pressing escape.

The second issue I was having, was that I wanted a way to toggle hide/unhide the UI. At this point, I was spawning the UI through a unique blueprint actor that was placed in the scene and had no way of connecting controls to it (same problem as controlling the UI with keyboard). Through this feedback forum I found, user NDFJay suggested creating the spawn and toggle control (which was possible) inside of the level blueprint instead of the character/spawn.

By first creating a function that I added a widget and boolean component to, I could set up a basic true or false visibility function. Simply saying if the target (UI) is visible, set it to hidden and vice versa. 

Then in the event graph, I spawned in the UI as I had done in the other blueprint but instead set up a control from the user input of E to activate the function command. This used a node called flip flop, which to my understanding, has two executable outputs A and B and it cycles between one then the other and repeats. Since A is connected to the is visible boolean. it cycles between saying the widget is "visible" and "not visible", which triggers the function to apply the corresponding setting.

The last part of this project was to set up the combined level. I created six cinematic cameras around the cars, showcasing them all as best I could with four exterior shots and two interiors.

In the level blueprint, I had everything set up the same as the others. Except for in this one I removed any controls related to the 360 camera control. Instead, I set up keybinds from keys 1-6 to switch the users view between the six cameras. This process used the set view target with blend node and I just had to connect the player controller to the new camera, when the keybind was pressed.