Creating a Star Citizen UI in Unreal (Help)

apollo580

Hi All,

 

I'm trying my best to understand how to replicate two styles of UI in Unreal Engine. The first being the FPS mode and the second being the spaceship cockpit. My inspiration is Star Citizen since I think its simple, to the point, and looks good.

 

Star Citizen FPS

https://youtu.be/F0r7BaKK9Cg?t=173

 

Star Citizen Cockpit

https://youtu.be/33DZQCk9wiI?t=2720

 

My big issue is that I'm trying to use Adobe After Effects and then exporting all the frames as png's and then creating a flipbook material in Unreal to be used in the UI Widget. I have seem to found an issue where the UI does not accept surface materials. Is there a better way of doing this? Only reason I would like to use AE's is being of the much large selection of features compared to UMG. The biggest being is that it allows me to "curve" my images along various shapes. The reason I want that is because that way I can fake a helmet UI that looks like its a curved. Is this possible in Unreal? So the first person mode has the issue of the materials but other then that its pretty straightforward.

 

The cockpit UI is what I'm having trouble understanding. It looks 3 dimensional compared to the FPS UI so my assumption is that they placed planes around the cockpit and have the UI shown on that. I think this is possible in Unreal Engine but again, my issue is that I cant use surface materials which gives much better results IMO.

 

Lastly I had an issue with the flipbook, I created 30 PNG's and use GlueIT to combine them before importing into Unreal.

 

http://imgur.com/uCNEbvs

 

But When I try to create a material for this effect I get nothing... Just white. Not sure what I'm doing wrong.

 

http://imgur.com/odw0Ug0

 

I've also tried putting the texture UV's in front of the flipbook node but that didn't change anything. Regardless, If I preview just the texture node its all white. I appreciate any help/tips!

 

TLDR: How can I recreated the Star Citizen UI in Unreal?

Obscura

There are 2 types of umg widgets. Screen space, and world space. The cockpit ones are world space.
 
To make the helmet ones curved, you could try the same thing or just make a curved texture?

For the rotating thingy, just use the "rotator" node instead of using a flipbook.

apollo580

Obscura said:

There are 2 types of umg widgets. Screen space, and world space. The cockpit ones are world space.
 
To make the helmet ones curved, you could try the same thing or just make a curved texture?

For the rotating thingy, just use the "rotator" node instead of using a flipbook.

So I'm assuming the world space ones are just placed in the world? Do they need a plane to sit on? How would I go about getting the materials? Is it possible to create materials like for a normal object, using panner nodes, lerp, etc?

Obscura

Material - Yes , possible.

 World space widgets are basically planes in the world. The plane  gets created by the widget itself. Just add a widget component to your blueprint, and you'll see the possibilities.

apollo580

Thank you so much for the tips!

apollo580

Menchen said:

Keep in mind all UI in star citizen is diegetic, so EVERYTHING, absolutely everyting is in the world, not in "screen space".

Even the UI for the first person? That looks like it's in screen space?

Obscura

You could attach your world space widget to the camera though. But I think you would get it motion blurred, unless there is something else behind it attached to the player/camera. Not sure.

apollo580

Menchen said:

apollo580 said:

Menchen said:

Keep in mind all UI in star citizen is diegetic, so EVERYTHING, absolutely everyting is in the world, not in "screen space".

Even the UI for the first person? That looks like it's in screen space?

Yes. All UI. Even the first person UI that you see on the character's helmet or on your ship, everything is in world space.

Even the tinyiest things you would think they are in screen space, they are in world space too. For example, the UI you see here: 
is actually world space too (look at the bottom of the helmet glass):


Of course, with UI that is that close they need to do some camera tricks/tweaks, and I don't know exactly how it would be done.

Wow thats amazing, I didn't realize that the UI is projected onto the helmet like that. I think I'm going to go for that kind of look!

Obscura

So yeah this is clearly the world space ui attached to the camera/helmet mesh. This should be totally doable. Make sure you don't have lit translucelcy on the inside of the glass because it would make the game always render through a really expensive material for no real reason.

apollo580

Thanks for all the info and help guys! I'll be giving it a shot soon!