Unity UI Screenshots

None of these are very good, but they work... I'm linking to the playable versions since aesthetically they do nothing.

I'm not overly happy with any of it, but it's a debugging UI, so it works: dlawre14.github.io (the last link on that page is the most interesting...)

 

Hi Tim

We recently integrated the new UI in our Simple IAP System asset (switched over from NGUI). It uses menu transitions (by using Mecanim controllers), Scroll Rects and UI prefabs. But the most important part is dynamic content by using these UI prefabs, instantiating them within Scroll Rects and populating them (labels, icons, etc.) at runtime. Users enter their IAP data in an editor window, specify a UI prefab and the rest is done automagically.



Integrating it has been a joy, I'm really looking forward to the final release of 4.6. Keep it up!

 

We are converting our project Fairies vs Darklings to the new UI system. In this video, 95% of what you see is using the new system. Unfortunately, the gem board was not converted yet, so in the in-game scene there isn't much to see.

 

Currently in development Revolution Earth by Delinquent Game Studios.

 

asset store: http://u3d.as/content/henry-software/flop/bB9
forum thread: http://forum.unity3d.com/threads/flop.298180/
thanks!

 

Remember to up the quality to 1080p

PlanetUnity is an XML driven architecture for utilizing the new uGUI introduced in Unity 4.6.

The video shows a web demo of Unity web player combined with the Ace JS code editor. When the code is changed, the XML is reloaded in PlanetUnity immediately.

PlanetUnity has support for most of the uGUI supplied controls; it also provides a solid foundation for easily adding custom controls, and easily using those controls (see the end which shows a Table view implementation).

Transcript of what's shown:
- Modify the value of a Text
- Modify the color of a Color
- Adjust the alignment of a Text
- Add a new Color
- Use the @eval() processor to mathematically specify the bounds
- Add various buttons, the click routes back to the Javascript and pops and alert
- Shows RawImage and Image (Sprite) support
- Shows ScrollRect with a bunch of images in it
- Grid Layout Group
- Changed the anchors to strecth,stretch, resized the view to show the responsive layout
- Added a Table, which is table view which supports dynamic cells, multiple cell row heights and sticky table headers.

Working on porting Starbase Orion to Unity (as part of building Starbase Orion 2). This particular project is Starbase Orion Replays, which allows players of SO to spectate completed games in order to glean tactical and strategic information post-game. Everything you see is built using the new uGUI in Unity 4.6, using PlanetUnity.

Of particular note:
- The map view on the left is in a ScrollRect, and scrolls nicely without many modifications.
- The Table on the right grows and shrinks in response to changing content. The playback controls is a sticky table header.
- The entire Unity web player resized when the window is resized, and the UI is responsive to the web player size changes.
- The game connecting to our SmartFox server which drives the multiplayer for Starbase Orion.



https://github.com/SmallPlanetUnity/PlanetUnity2
https://itunes.apple.com/us/app/starbase-orion/id438375580?mt=8
http://chimerasw.com/starbaseorion/forums/index.php

 

Foundation uses the new uGUI.

• Localization with built in translation
• Databinding to controllers or viewmodels
• Support for interfaces, clr objects, observable objects or monobehaviours
• Complete multiplayer Lobby UI with game selection (ect)
• Complete Account UI with signup / sign in (ect)
• Async Task library with support for co-routines with return parameters or running actions in background threads
• Includes LITJson
• HTTPRest client with support for all HTTP verbs

Links

• http://mmofoundation.com/
  
• http://u3d.as/content/avarice-online/foundation/6Nd
  

 

That is really cool! instantly caught my eye when i saw it.

Reworked the UI using the new GUI tools, I have to say it works better than I expected

 

I'm using the new UI to develop my RPG , the player HUD bars are skinned but all the rest uses default sprites as I'm still working on them and havent figured out how I want it to look and feel yet.

Main play screen with player HUD bars:


Race selection screen in the character creation sequence:


character creation overview screen - you can add/remove and review some basic info here



character naming and portrait selection; havent made the portraits yet, and in fact I dont know how to add a list of portraits yet so its just a big placeholder image at the moment!



In game level editor I just started on so very rough



Sorry not sure how to do thumbnails on this kind of forum if these are too big let me know I'll use hyperlinks instead??

I've largely found the new UI pretty quick and easy to deal with and prototyping is pretty fast.

Some of the advanced stuff wasn't documented at first or hard to find .. like Layout stuff.. I had no idea where that was or it existed until I saw someone mention it on the beta forums here but now that I've found that its a life saver!

 

Love the random dungeon generator, reminds me of my own generator for a project.

 

Thank you Slev! It is actually not random though ; the sliders let you set the dimensions of the dungeon, and then you use a carve tool to carve the dungeon you want. Then in the bottom right is a detail inspector where you can tweak some of the attributes (change a wall to a shelved wall, change a floor to a pit etc).

 

Mine is nowhere near as great as some of the others posted on here, but I'll give it a shot. xP This is my first-ever attempt at making a full GUI from scratch.. I've never done it before in my life lol, but I think I did okay... Everything you see was hand-made by me, except for the animation. I have the consent of the original creator to use it in my file. If I ever release a full-fledged game with it, I'll probably change the animation to something I created myself as well.. I'm thinking of releasing the entire pack on the asset store. Everything is prefabbed up and ready to go out of the box.. Leave me some feedback and let me know if this is something you would pick up from the store.. Enough votes for it and I'll throw it on there.

The Full GUI is below... I should probably lose a bit of thickness on the sliders and handles, but other than that it looks pretty good. Still a bit of work to do, though.



Also, can you tell that the red X is a toggle? I think I'm just being too critical on myself... I tend to do that lol.. Just give me some feedback on it and I'll fix whatever I can... xP

 

My project have some skill buttons with cool down effect as this:

I can use 2 image to build it: gray and color image and make color image with fill property. But it's doubled render calls. So I made a shader and a script which inherit from BaseVertexEffect.

Code (CSharp):

1. using UnityEngine;
2. using UnityEngine.UI;
3. using System.Collections;
4. using System.Collections.Generic;
5.  
6. [RequireComponent(typeof(UnityEngine.UI.Image))]
7. public class GrayImage : BaseVertexEffect {
8.     [Range(0,1)]
9.     public float fill;
10.     //public Color grayColor = Color.white;
11.     [Range(0,1)]
12.     public float grayScale = 0.7f;
13.     public Shader grayscaleShader;
14.     [System.Serializable]
15.     public enum FillDirection
16.     {
17.         BottomTop,
18.         TopBottom,
19.         LeftRight,
20.         RightLeft,
21.     }
22.     public FillDirection fillDirection;
23.     UnityEngine.UI.Image image;
24.  
25.     // Use this for initialization
26.     protected override void Start () {
27.         image = GetComponent<UnityEngine.UI.Image>();
28.         image.material = new Material( grayscaleShader );
29.     }
30.    
31.     // Update is called once per frame
32.     void Update () {
33.         image.material.SetFloat("_Fill", fill );
34. //        image.material.SetColor("_GrayColor", grayColor );
35.         image.material.SetFloat("_GrayScale", grayScale );
36.     }
37.  
38.     public override void ModifyVertices (List<UIVertex> verts)
39.     {
40.         if (!this.IsActive ())
41.         {
42.             return;
43.         }
44.         float min = float.MaxValue;
45.         float max = float.MinValue;
46.         float len = 0;
47.         for (int i = 0; i < verts.Count; i++)
48.         {
49.             switch( fillDirection )
50.             {
51.             case FillDirection.BottomTop:
52.             case FillDirection.TopBottom:
53.                 if( verts[i].position.y < min )
54.                     min = verts[i].position.y;
55.                 if( verts[i].position.y > max )
56.                     max = verts[i].position.y;
57.                 break;
58.             case FillDirection.LeftRight:
59.             case FillDirection.RightLeft:
60.                 if( verts[i].position.x < min )
61.                     min = verts[i].position.x;
62.                 if( verts[i].position.x > max )
63.                     max = verts[i].position.x;
64.                 break;
65.             }
66.         }
67.         len = max - min;
68.         if( len == 0 )
69.             return;
70.         for (int i = 0; i < verts.Count; i++)
71.         {
72.             UIVertex uiVertex = verts[i];
73.             switch( fillDirection )
74.             {
75.             case FillDirection.BottomTop:
76.                 uiVertex.uv1.y = (verts[i].position.y - min) / len;
77.                 break;
78.             case FillDirection.TopBottom:
79.                 uiVertex.uv1.y = (max - verts[i].position.y) / len;
80.                 break;
81.             case FillDirection.LeftRight:
82.                 uiVertex.uv1.y = (verts[i].position.x - min) / len;
83.                 break;
84.             case FillDirection.RightLeft:
85.                 uiVertex.uv1.y = (max - verts[i].position.x) / len;
86.                 break;
87.             }
88.             verts[i] = uiVertex;
89.         }
90.     }
91. }
92.  

Code (Shader):

1. Shader "UI/Grayscale"
2. {
3.     Properties
4.     {
5.         [PerRendererData] _MainTex ("Sprite Texture", 2D) = "white" {}
6.         _Color ("Tint", Color) = (1,1,1,1)
7.         _Fill ("Fill", Range(0,1)) = 0
8. //        _GrayColor ("Gray", Color) = (1,1,1,1)
9.         _GrayScale ("GrayScale", Range(0,1)) = 1
10.        
11.         _StencilComp ("Stencil Comparison", Float) = 8
12.         _Stencil ("Stencil ID", Float) = 0
13.         _StencilOp ("Stencil Operation", Float) = 0
14.         _StencilWriteMask ("Stencil Write Mask", Float) = 255
15.         _StencilReadMask ("Stencil Read Mask", Float) = 255
16.  
17.         _ColorMask ("Color Mask", Float) = 15
18.     }
19.  
20.     SubShader
21.     {
22.         Tags
23.         {
24.             "Queue"="Transparent"
25.             "IgnoreProjector"="True"
26.             "RenderType"="Transparent"
27.             "PreviewType"="Plane"
28.             "CanUseSpriteAtlas"="True"
29.         }
30.        
31.         Stencil
32.         {
33.             Ref [_Stencil]
34.             Comp [_StencilComp]
35.             Pass [_StencilOp]
36.             ReadMask [_StencilReadMask]
37.             WriteMask [_StencilWriteMask]
38.         }
39.  
40.         Cull Off
41.         Lighting Off
42.         ZWrite Off
43.         ZTest [unity_GUIZTestMode]
44.         Fog { Mode Off }
45.         Blend SrcAlpha OneMinusSrcAlpha
46.         ColorMask [_ColorMask]
47.  
48.         Pass
49.         {
50.         CGPROGRAM
51.             #pragma vertex vert
52.             #pragma fragment frag
53.             #include "UnityCG.cginc"
54.            
55.             struct appdata_t
56.             {
57.                 float4 vertex   : POSITION;
58.                 float4 color    : COLOR;
59.                 float2 texcoord : TEXCOORD0;
60.                 float2 uv1 : TEXCOORD1;
61.             };
62.  
63.             struct v2f
64.             {
65.                 float4 vertex   : SV_POSITION;
66.                 fixed4 color    : COLOR;
67.                 half2 texcoord  : TEXCOORD0;
68.                 half2 uv1 : TEXCOORD1;
69.             };
70.            
71.             fixed4 _Color;
72.             fixed _Fill;
73. //            fixed4 _GrayColor;
74.             fixed _GrayScale;
75.  
76.             v2f vert(appdata_t IN)
77.             {
78.                 v2f OUT;
79.                 OUT.vertex = mul(UNITY_MATRIX_MVP, IN.vertex);
80.                 OUT.texcoord = IN.texcoord;
81.                 OUT.uv1 = IN.uv1;
82.                 OUT.color = IN.color * _Color;
83.                 return OUT;
84.             }
85.  
86.             sampler2D _MainTex;
87.  
88.             fixed4 frag(v2f IN) : SV_Target
89.             {
90.                 half4 color = tex2D(_MainTex, IN.texcoord);
91.                 if( IN.uv1.y > _Fill )
92.                 {
93.                     fixed grayscale = Luminance( color.rgb );
94.                     color.rgb = grayscale.xxx * _GrayScale + 1 - _GrayScale;
95. //                    color = color * _GrayColor;
96.                 }
97.                 color = color * IN.color;
98.                 clip (color.a - 0.01);
99.                 return color;
100.             }
101.         ENDCG
102.         }
103.     }
104. }
105.  

Wish more Effect related classes could be provide.

btw. UIVertex only provide uv0 and uv1. Could you please add more uv channels?

 

Main Menu and Graphics Settings for Twin Souls: The Path of Shadows.

Using a World Canvas for the menu guis.

 

RPG & MMO UI for Unity 4.6 GUI

 

http://forum.unity3d.com/threads/zombie-night-terror.265422/

 

I see everyone with amazing UIs and here i am with my score UI xD

 

I'm working on a business application for a customer based on uGUI instead of using Python+Kivy as I do usual. The overall process is much quicker, custom prefabs of common ui components are making things very easy.
Feels good to work with the new beta.

 

I've been playing around with the new UI system, integrating it into virtual reality with the Oculus Rift and allow interaction with your bare hands using the Leap Motion, this is the result of such prototype. It looks meh, but my focus now is on the function

 

Still a work in progress, Every day I learn to do something new with the new UI

 

Here's an update, more polished (not the UI though) version of the software I'm working on:

 

Here is mine :

If fit all screen ratio, from 4:3 to 16:9 and even 1:1

 

Looks awesome! How were you able to set up the 'snapping' of each item of that array? Wanted something like this in a level select.

 

StarTriggers now uses Foundation and uGUI

 

thanks
i just drag it with mouse and when i let go i use an easing function (http://easings.net/) to move to the closest one
i posed "my" easing code here http://forum.unity3d.com/threads/callback-on-finished-events.267939/
ya the spring easing function imo provides a very nice ui bounce
or you could use iTween or LeanTween or DOTween or GoKit or etc
i posted an earlier test version of this control (without snapping or clamping or inertia or pooling or graphics or fonts) here https://github.com/rakkarage/Flop
i may post the other one on the store

 

I've been working on a project i've been calling "Bash" basically it's a pokemon type matchup training esc app where you try to go as long as you can always choosing the most effective move type against the given enemy.

The screenshots aren't all to amazing but I've been focusing more on the animation and spell effect side.

 

I just spent two days , setting up my new 4.6 UI, hard coding tomorrow, to hook up to my game...wow, what a different experience, ...layout and design..really!! Great Job Unity Team.!

Patrick

 

Still improving it but it works really great. No matter the resolution or screen ratio it all looks amazing

 

ShotPro By Shot Professional:

https://www.facebook.com/ShotProApp
http://www.shotprofessional.com

 

I am redoing my blueprint designer UI with uGui 4.6RC1 . I prefer ugui 's stretching layout components and anchor system vs NGUI.

Noteworthy :
* Making tabs with the toggle component and a togglegroup - the "checkmark" is the selected tab highlight
* Selection of prefab / shape is a togglegroup too, the "checkmark" here is the blue rectangle corners
* red / green dot to show the state : one more toggle group abuse - the red is behind the green, the green is the checkmark
* Defining all my tabs content down there out of canva for quick access / overview in editor, and switching position at runtime with a very simple script

Spoiler: Script

Code (CSharp):

1. using UnityEngine;
2. using System.Collections;
3. using UnityEngine.UI;
4.  
5. [RequireComponent(typeof (RectTransform))]
6. public class XGGuiInit : MonoBehaviour
7. {
8.     public RectTransform Target;
9.  
10.     private Vector3 _initial;
11.  
12.     private RectTransform _rectTransform;
13.  
14.     public void Awake()
15.     {
16.         _rectTransform = GetComponent<RectTransform>();
17.      
18.         _initial = _rectTransform.position;
19.     }
20.  
21.     public void Toggle(bool on )
22.     {
23.         _rectTransform.position = on ? Target.position : _initial;              
24.     }
25. }

Started yesterday

 

I told someone I would upload a full update of our UI even if the game is still in alpha, and here it is. Best of all: it's the very same UI for PC, mobile, tablet and console and for every resolution. Not a single change .

Update [1/2]

 

Update [2/2]

 

Some UI from a new game I am working on ...

[edit] Game is now available, http://plyoung.itch.io/battlemass-2

 

Here is a quick peek tutorial showing how I created the webplayer linked below... this is a new asset I am working on to create native iOS looking apps with Unity.

Webplayer demo...
iOS for Unity UI - Settings app mock-up

 

Liking the new UI system so far

 

Hi guys,

We are making a vehicle combat game and we used new uGUI for the same. It is so fantastic, I redid the UI which was made using NoesisGUI ($250) and I have no regrets. It is such an amazing system. I am attaching my UI here. It is still a work in progress, but you get the gist..

 

Currently rebuilding an old app this week. Majority of program consists of navigating lists, tabs, etc.. Built top navigation, tabs, master/detail for dynamically generated lists (generic list databinding, scrollable, auto resizing, etc.).


editor view


iPad mini 3


iPhone 6 plus

 

We've been working with the beta sin the first public release, now we have almost all the UIs for our Game created. Here's the last ones (main and shop)







And some videos showing the animations

https://gfycat.com/BasicWeepyGuppy

https://gfycat.com/DistinctGreedyBlobfish

 

I'm currently designing a game menu with the new UI, So far I'm loving it!
And dont mind the logo, it's a quick test to have something

 

The Screening
A game I made with Gaetano Leonardi and Luigi di Guida for Ludum Dare 31. The whole game is 4.6 UI (and it's all pixel perfect even if this screenshot doesn't show that)

EDIT: added video

 

Our server browser

 

This is a WIP, there still parts of the old ui and a lot more to do, i did use the unity sprites, at least for now.

 

Hi there,

We just release UI - Builder - core UI elements made with new Unity 4.6 UI.

Check this thread for more information:
http://forum.unity3d.com/threads/released-ui-builder-core-ui-elements-unity-4-6-ui.299538/

 

Hmmm...seems questions that aren't worth answering aren't worth asking.

 

Hiya @goat. You might want to post a new thread in the parent forum. This thread is just to showcase UI 4.6 stuff you're happy with.

 

I'm very happy with my design. It's the aliasing I'm not happy with, but I will start a new thread.

I guess I'll stop asking technical questions or those of aesthetics and stick to a the bit of mild mannered gossip every once in a blue moonin these forums .

 

World space UI is great one

 

I've been using the world space UI quite heavily for 3d visual programming language