Could Unity UI do this in real time?

https://vimeo.com/197253856

Note this has to work at high FPS using only elements of the Unity UI!

Hey it’s an Arowx thread and I think although the particle system could handle this level of elements the UI system might not be up to it. The question is why is the UI/Sprite system so slow and the particle system so fast?

And why can’t the UI system display meshes?

There are many things in this video you simply couldn’t replicate with Unity’s UI. Besides, using Unity’s UI for something as complex as this video would be torture. It’d be best to do these things with an actual video editing software like After Effects.

However, I do think most of the video could be replicated in Unity, but not solely with UnityUI.

Most of what’s shown here are meshes with only their wireframes being rendered. That could be done with a shader. There are some segments where the brain-like object is being chipped away. You could probably achieve that by using the same wireframe shader as the one the meshes use, but also use a mask for drawing the wireframe only in certain portions of the mesh.

I’m not sure about the sprawling effect at 0:28, though. I want to say particles with trails, but configuring the particles’ trails beforehand would be incredibly tedious.

Then there are the glitch effects. Those are possible, but again, you’d need your own solution - something like this, perhaps.

The lines could be done by drawing vectors, line renderers or even particles. There are lots of them, so using particles and line renderers would be extremely clumsy. Drawing vectors could be the most efficient way. I think GL.Lines draws lines on the GPU? There’s also Vectrosity on the Asset Store.

Then there are some good old, regular particles.

Then there’s the globe with all the rectangular nodes and small x’s etc. I’m not sure how that could be done, but I guess you could achieve it by using a few tiling textures for each of the small items, and then draw those textures in screen-space over the globe. Then I guess pick the sprite to the draw based on the luminance value of the globe’s surface?

All the sliding text windows etc. can be done with Unity’s UI, as well as the animation at 0:47.

The glitch effect at 0:52 is a bit more complex, however I think something like that could be achieved with an ASCII ray-marcher. Something similar to [this ](http:// http://polycount.com/discussion/comment/2397321#Comment_2397321)(props to DEElekgolo on Polycount, he’s a badass and I suggest checking out his Sketchbook thread there, it’s filled with awesomeness). You could use a high-contrast texture, and then keep on panning that across a quad on the screen, and have the ray-marcher render it.

Those fields of numbers could quite easily be achieved by generating a string consisting only out of numbers, but I’m not sure if that’s the best way.

I wasn’t supposed to spend this much time on this reply, but I must say I’m interested in this myself, might try doing something similar soon.

Sure. Just use a single image component and animate it with your video. Case closed.

7 Likes

This.
That is how those are done, unity or otherwise.

2 Likes

It can. It does. That is what the ui system is, meshes (or rather a mesh). You can do what ever you want with it.

Its also worth pointing out that the EventSystem that comes with the UI can be used to attach events to any thing in the scene. This allows you some incredible flexibility. You are not just restricted to using the Canvas system

If it has a GameObject, it can be part of your UI.

2 Likes

Also, that video has nothing to do with UI, so attempting to use a tool designed for UI to render it would be kinda silly in the first place. Right tool, right job and all that.

3 Likes

Great reply and you are right a lot of the UI elements in the above showreel are grid and line elements.

So what about this UI showreel as it has more active UI elements than the Assassin’s Creed UX Showreel.

https://vimeo.com/126618429

Yes, absolutely, it could be done. It will be quite tedious to implement, and the easiest way to go about it would be video textures, but there’s nothing that would be impossible to do in unity.

Also, you do not need particle systems for this.

Basically, you do not need UI system for this. You have sprites, 3d objects and 2d functionality.

Did you know that you can use multiple cameras to render over the same window in sequence?

Setup one camera for background, and another one for this wireframe nonsense, and you can create something similar.

No UI. Zero UX. These are motion graphics. They are fictional, not functional. Movie “UI” is all about visual punch, not about usability. Like everything else in the movies… Quinjets don’t and can’t actually fly, nor can humans.

And from personal experience, translating translating Stark/SHIELD/MCU movie visuals into an actual game UI is fairly challenging as the fictional versions pay no consideration to UX at all. (which of course isn’t the goal). Though I did have to recreate/ape those exact visuals (AOU) as background elements/visuals. Since there was no actual interaction, I used texture uv animations in combination with shader that had a timing layer. For actual game ui I used a some particle fx and animated textures to mimic the general feel of shield tech, also a post effect for the glitches in the intro/outro.

5 Likes

I Know, the idea is to make a great looking UI in your game that reacts as fast as the showreels.

Yes humans can fly…

https://www.youtube.com/watch?v=wIElAMEetys

Who needs a Quinjet when you can have a VTOL V22 Osprey

https://www.youtube.com/watch?v=hUNJTAybCQQ

Or VTOL F35 Jet

https://www.youtube.com/watch?v=zW28Mb1YvwY

Good point how much of the UX in the above are just Juice and FX, but that’s what I think make them look cool. How to balance UX for actual usage/performance and looking great.

You meen they can “fly” down while falling from a cliff.
Humans have ability to build flying machines. Those machines have ability to fly and transport humans.

Anyway.

As UI, samples you posted are quite useless - there is too much clutter and pointless indicators that are not actually displaying anything useful. Normally you’d want minimum number of elements, but you’d want all the important elements to be present.

However, you could adopt “wireframey” look for your game.

Speaking of which, those videos reminded me of No Man’s Sky UI. It didn’t have “scrolling indicators”, but overall it had wireframe white text on transparent panes floating in front of user’s field of view. Another game with uncommon UI I can think of is Deus Ex: Invisible War. They based their UI on rotating circles. (look it up on google images).

2 Likes

There is no “UX”, “UX” is not an interchangeable term with “UI”. They are motion graphics, fictional interfaces, UX doesn’t come into play. That term doesn’t apply here.

2 Likes

Indeed. They are there (in fictional portrayals) as visual textures. To make it look it like something complex is happening. They never have or guide actual interaction, and they are usually shown with no one actually interacting or gaining information from it. In cases where there is interaction, it is created based on the performance of the actor, usually flicking their hands around a’la Minority Report. (Other Space actually has some fun parodies of this, creating interactions from the actresses normal movements). Or in Star Wars where no matter how complex the display, the user only ever hits the same button.

But basically looking at movie UIs for anything other than art direction is, as you said, useless. It’s like looking at Hugh Jackman in Swordfish, or Johnny Lee Miller in Hackers for guidance on software development.

2 Likes

Oh, great. And I just bought all these screens.

2906237--214093--1.jpg

1 Like

I may have to put my hacking career on hold then :frowning: All this time I was led to believe it was as simple as finding a photo on someone’s desk to get clues for their password, or finding out their dog’s name.
Dadnabbit!

Could Assassins creed’s UI do this in real time?

Effects like this are usually bespoke.

I call it UI greeble.

http://sciencefictioninterfaces.tumblr.com/

Unity WebGL…

http://hiro.calx.co.uk/

3 Likes

Aren’t the AC UI’s done in ScaleForm? That doesn’t seem like an appropriate fit for some of the effects shown.

Some of the AC games’ I’ve played do things that looked vaguely like the examples shown in real time, but from memory it’s all separate from any part of the UI you interact with. It’s background stuff while you’re navigating fairly standard foreground menus. So I’d hazard a guess that they’re all particles, shaders, or other custom 3D effects rather than built in the UI. Also, there’s at least one section (the start of AC3, I believe) where the motion graphic shardy stuff resolves over time into the full 3D world, again implying the game renderer rather than the UI system.

I’d say yes, it’s quite possible to do most if not all of the stuff shown in real time. As @zombiegorilla says, a UI system is not the right tool for the job, though - those things aren’t about hierarchy and layout (which is what most UI tools are based on), they’re about visual stylisation, custom rendering and effects.

1 Like

Well… I have in fact seen a professional programmer, in the games industry no less, who in fact had more screens than that, plus a projector for good measure. They weren’t just screens, some of them were separate computers all set up to use the same keyboard and mouse. I’m pretty sure it’s because he wrote network apps, so he wanted a dev machine, a server, and multiple client machines nearby. The project was probably just because projectors are cool, though.