NoesisGUI : XAML-based User Interface [RELEASED]

Of course it is, it even predates windows 8 quite a lot.

 

On sale? which one?

 

It's already pretty cheap for what it is, not in the same league as other GUIs and priced similarily.

Maybe some kind of lite edition would make sense (max number of xaml length / elements?) to have a second edition priced at 50 however for the most non budgeted hobbyists?

 

I don't think they should, would mean custom license instead of regular asset store one, beside it's hardly checkable/enforceable. If it's for learning /testing then you can already use the watermarked trial however. Maybe an hybrid between those 2 would be good? Like a cheaper edition with a forced splash screen at the start for 2-3 seconds?

 

We had the opportunity to apply a temporal discount to NoesisGUI. But we though it was not a good idea because we had already sold several units of the .unitypackage by that time.

And we dont like the idea of selling a product that is cheaper but that is incomplete.

 

Yes, it's a MUST. When your interface is very complex and also you have to check for multiple resolutions / aspect ratios is a pain in the ass having to hit play to see it...

I like NGUI because is based on GameObjects so you can activate / deactivate in editor what you want anytime.

 

But that's the whole point, you don't "need to hit play" at all with this, it's not a NGUI like solution where you move things around untill they look right, you know they look right from the start, you don't need to check for multiple resolutions (you use the * auto system to auto scale your UI the way you wish) and if you really want to see it as you design, you buy blend which is simply not going to be beaten by anything they can do in-unity. But if you're only doing the kind of UI that are doable with NGUI similar, then you just don't need a preview to type those 30 or so lines of xaml! Or if you really do, just get the free xamlpad type it there before copy/pasting it in unity you'll have your real time preview !

 

I understand that having a real-time preview can be a plus and that event having the editor integrated would be another plus but we think that those reasons shouldn't avoid you to start using NoesisGUI.

• It is like asking to integrate Maya or 3DStudio Max inside Unity. Yes, it would rock but it got no sense. For xaml you have an amazing editor (Blend) that allow you to design complex interfaces that are impossible to be done inside Unity.
• Almost all the interfaces that can be done with NGUI can be written by hand because they are very simple. Yesterday, an user ask us for help to port a NGUI design. I did it in 5 minutes writing in XamlPad.
• We provide with our SDK a XamlPlayer that previsualizes in real time what you are writing in a Xaml. We are investigating ways to integrate this in Unity. Suggestions are welcome.

 

Since 2010 version (I think that even 2008) Visual Studio integrates a XAML editor.

 

Are you sure Visual Studio 2012 doesn't work in Windows 7?

http://www.microsoft.com/visualstudio/eng/downloads

 

I'm following the tutorial and am confused about a few things. The "Tutorial Data" link refers to a folder path that doesn't exist, and it says XamlPlayer can be found "in the /Bin folder", but I don't see that location either.

 

Amazing work, congratulations!

Do you have any plans to support the new mobile platforms (Blackberry, WinPhone8)?

Thanks!

 

Yes, the documentation is now the same for the unitypackage and the SDK (native library). People that buy from our web have access to all the versions.

We have to fix this...

 

We have plans for Windows RT and Windows Phone. Yet we don't have any plan for Blackberry. You are the second person to ask for it since the release. It depends on people demanding it.

 

That's just not true i've got no clue why this keeps getting reprated. I was using blend before windows 7 was released! Hell i think i was using it on windows xp 4 years ago. It's just not true period

 

Blend has nothing to do with vs. They do have links together but blend is a standalone program for designers

 

No, it's included there "on top of" being a standalone product. But it is and always has been a standalone (separately purchaseable) product, part of the expression (blend,encoder etc) line of product.

 

Damn just checked it up and it seems they pulled it? Anyway can't you get it for free as part of visual studio 2012 express?

 

Then get the windows 8 version (it's not a version that requires windows 8, it's a version to make apps "for" windows 8, you can run this on windows 7 just fine and use it to design your apps for Noesis).

 

Then you're out of luck, your options boil down to:
- Use visual studio not blend (it's perfectly fit for TYPING xaml, which i suggest you do as it requires very little learning, is faster than using blend, and doesn't produce a lot of generated code that makes xaml unreadable unlike blend)
- Find a used version of expression blend 4 for sale
- Buy windows 8
- Install windows 8.1 preview for free
That's about all your options left for getting something better than xamlpad or similar (which actually would likely do the trick just fine).
What kind of UI are you going to work on? Because blend or similar really only makes sense when you're designing something fairly complex really, i haven't seen a single unity game so far whose UI would be hard to do in xaml

 

As usual, Microsoft is messing up everything one more time.
There is a link for the Blend Trial but no way to buy it. They are pushing Windows8 aggressively...

 

It's odd that they made blend a VS excluse while they made the rest of expression free, i mean originally blend was a tool for people who didn't need visual studio vice versa, i think people using both VS blend are an oddity not a general case, so it's really odd they went that road instead of keeping Blend standalone ( making it free)

 

This is looking very impressive... but I can see this being very difficult for someone who doesn't know how to code :/

 

Not really no, grab up WPF unleashed and you can learn most of what you need very quickly (2-3 hours). You don't need to know "any" C# / unityscript / boo to work with this (unless you want to add code, but then it's the same with NGUI all other GUI frameworks) for the visual parts. At a begginer level you can consider this a basicXML language with pre made containers for different type of layouts, and a CSS like syntax for doing, well, a whole lot more than you ever could with CSS.

Of course it can get a bit more complex if you really want to go deep down, but if you only put 2-3 hours into this book to learn the basics, you'll already be able to do much beyond what you can do with "any" other GUI framework for unity. It's why i'm so happy this is released, because i haven't found anything that pleases me untill now

 

Would there be some interest in a "basic" level XAML tutorial here or is it just a couple people? If there is interest i could do a quick recorded tutorial showcasing the diferent type of containers / layouts / sizing methods / main controls / ways to style things when i get some time.

 

We created all our tutorials (included in the documentation) with that purpose, showing basic concepts with minimal samples about shapes, text rendering, containers, etc etc. I think that all of them can be read in less than an hour. And only whit that you can do awesome UIs.

But videos... that would be really nice. Having several video tutorials showing basic concepts of XAML in Unity with NoesisGUI. We can help here.

 

That would be great, man... I can create the elements art-wise (not a programmer) but I will definitely need to learn how to do it with code... such as life bars...

 

I'm definately not an artist, if you come at me with a GUI prototype (in form of a single image) + the cut images to do it, i'll be happy to send back a xaml sample we can go from there

 

I will keep this in mind when I get to that stage... Will this be able to support development on the Xbox One/PS4?

 

Yes, it is planned. Although for now it is not high priority. Won't be in v1.1 or v1.2...

 

I am willing to wait... You have made an impressive package... I will definitely need to learn how to code a UI

 

You want a life bar... here you are:

Code (csharp):

1.  
2. <Grid
3.   xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
4.   xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
5.  
6.     <Grid.Resources>
7.         <Style TargetType="ProgressBar">
8.             <Setter Property="Template">
9.                 <Setter.Value>
10.                     <ControlTemplate TargetType="ProgressBar">
11.                         <Border x:Name="PART_Track" BorderBrush="Orange" BorderThickness="2" Background="Gold">
12.                             <Border x:Name="PART_Indicator" Background="Red" HorizontalAlignment="Left"/>
13.                         </Border>
14.                     </ControlTemplate>
15.                 </Setter.Value>
16.             </Setter>
17.         </Style>
18.     </Grid.Resources>
19.    
20.     <ProgressBar x:Name="LifeBar" Width="300" Height="30" Minimum="0" Maximum="100" Value="40"/>
21.    
22. </Grid>
23.  

And the result:

 

Excellent example. Now, the accompanying code to set the value dynamically would be useful also I think. Either by setting it directly, or with some sort of bindings.

 

Not bad... I will definitely grab this tool once I get Unity 4... I do have some custom life bar designs

 

If we want to set the value directly (I changed the template a bit so LifeBar.Value=100 means full life - whole bar is yellow, and LifeBar.Value=0 means no life - whole bar is red):

Code (csharp):

1.  
2. <Grid
3.   xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
4.   xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
5.  
6.     <Grid.Resources>
7.         <Style TargetType="ProgressBar">
8.             <Setter Property="Template">
9.                 <Setter.Value>
10.                     <ControlTemplate TargetType="ProgressBar">
11.                         <Border x:Name="PART_Track" BorderBrush="Orange" BorderThickness="2" Background="Red">
12.                             <Border x:Name="PART_Indicator" Background="Gold" HorizontalAlignment="Right"/>
13.                         </Border>
14.                     </ControlTemplate>
15.                 </Setter.Value>
16.             </Setter>
17.         </Style>
18.     </Grid.Resources>
19.    
20.     <ProgressBar x:Name="LifeBar" Width="300" Height="30" Minimum="0" Maximum="100" Value="100"/>
21.    
22. </Grid>
23.  

Code (csharp):

1.  
2. using UnityEngine;
3. using System.Collections;
4. using Noesis;
5.  
6. public class LifeUpdater : MonoBehaviour
7. {
8.     ProgressBar _lifeBar;
9.  
10.     // Use this for initialization
11.     void Start ()
12.     {
13.         NoesisGUIPanel gui = GetComponent<NoesisGUIPanel>();
14.         FrameworkElement root = gui.GetRoot<FrameworkElement>();
15.         this._lifeBar = root.FindName<ProgressBar>("LifeBar");
16.  
17.         this._lifeBar.SetValue(100.0f);
18.     }
19.  
20.     private float _life;
21.     public float Life
22.     {
23.         get
24.         {
25.             return this._life;
26.         }
27.         set
28.         {
29.             if (this._life != value)
30.             {
31.                 this._life = Mathf.Clamp(value, 0.0f, 100.0f);
32.                 this._lifeBar.SetValue(this._life);
33.             }
34.         }
35.     }
36. }
37.  

Or even better, if we want UI to update automatically, we can use a DataContext and bindings:

Code (csharp):

1.  
2. <Grid
3.   xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
4.   xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
5.  
6.     <Grid.Resources>
7.         <Style TargetType="ProgressBar">
8.             <Setter Property="Template">
9.                 <Setter.Value>
10.                     <ControlTemplate TargetType="ProgressBar">
11.                         <Border x:Name="PART_Track" BorderBrush="Orange" BorderThickness="2" Background="Red">
12.                             <Border x:Name="PART_Indicator" Background="Gold" HorizontalAlignment="Right"/>
13.                         </Border>
14.                     </ControlTemplate>
15.                 </Setter.Value>
16.             </Setter>
17.         </Style>
18.        
19.         <LifeModel x:Key="lifeModel" Life="20"/>
20.        
21.     </Grid.Resources>
22.    
23.     <ProgressBar x:Name="LifeBar" Width="300" Height="30" Minimum="0" Maximum="100"
24.         DataContext="{StaticResource lifeModel}" Value="{Binding Life}"/>
25.    
26. </Grid>
27.  

Code (csharp):

1.  
2. using System;
3. using System.Collections.Generic;
4. using System.Runtime.InteropServices;
5. using Noesis;
6.  
7. namespace LifeTest
8. {
9.     class LifeModel : SerializableComponent
10.     {
11.         // Life
12.         private float _life;
13.         public float Life
14.         {
15.             get
16.             {
17.                 return this._life;
18.             }
19.             set
20.             {
21.                 if (this._life != value)
22.                 {
23.                     this._life = value;
24.                     Noesis.Extend.PropertyChanged(typeof(LifeModel), swigCPtr.Handle, "Life");
25.                 }
26.             }
27.         }
28.  
29.         #region Noesis management code
30.         private HandleRef swigCPtr;
31.  
32.         public static void Register()
33.         {
34.         }
35.  
36.         public LifeModel(IntPtr cPtr, bool cMemoryOwn): base(cPtr, cMemoryOwn)
37.         {
38.             swigCPtr = new HandleRef(this, cPtr);
39.  
40.             Life = 100.0f;
41.         }
42.  
43.         public LifeModel(): this(Noesis.Extend.New(typeof(LifeModel)), true)
44.         {
45.             Noesis.Extend.Register(typeof(LifeModel), swigCPtr.Handle, this);
46.         }
47.  
48.         public override void Dispose()
49.         {
50.             lock (this)
51.             {
52.                 if (swigCPtr.Handle != IntPtr.Zero)
53.                 {
54.                     if (swigCMemOwn)
55.                     {
56.                         swigCMemOwn = false;
57.                         if (Noesis.Kernel.IsInitialized())
58.                         {
59.                             Noesis.Extend.Delete(typeof(UnityObject), swigCPtr.Handle);
60.                         }
61.                     }
62.                     swigCPtr = new HandleRef(null, IntPtr.Zero);
63.                 }
64.                 GC.SuppressFinalize(this);
65.                 base.Dispose();
66.             }
67.         }
68.         #endregion
69.     }
70. }
71.  

Everytime LifeModel.Life value is changed, UI will be automatically updated :grin:

 

Value isn't "assigned to the red part", value is assigned to the progress par, everything that is on top is there to style the ProgressBar (modify it's template, a control in WPF is a functionality, you can override redefine it's whole visual hierarchy, so in there he redefines the areas (by their template name) to be what he wants, full borders of a given color. You can remove everything on top of the progress bar definition it will still work, it just won't look like that (red on orange)

 

Don't let the sample by sergio above scare you on the C# side, most of it (espcially in the 2nd case) is setup code that you only need to do once

 

And we are studying the way to get rid of it totally

 

It is very cheap. If you feel a bit rich you can use eDriven which is $100 more but has very poor frame rate even on PC, Android, iOS, Blackberry, Windows 8. If you are feeling wealthy you can try ScaleForm Indy version at almost a thousand for 4 platforms, per developer but has serious problems, no official Unity 4.2 version.



Consider the time investment you need to learn vs. re-using WPF XAML.

 

It's not even about price, eDriven scaleform are way way bellow in well, everything compared to this (except maybe on platform compatibility as i don't think Noesis is yet compatible with all unity platforms?). All of those are solutions that palliate the lack of a good GUI, they're mere bandages on the wound, Noesis "is" really a final solution if it ends up providing the full WPF MVVM experience then i won't have played a single game ever for which i wouldn't be able to duplicate the GUI in a few hours!

 

Ronan, did you get the joke?


More expensive, but poorer quality...

 

It doesn''t, they're well separated, Value doesn't change a size, it just change the % of the progressbar. The part above "redefines" what a progress bar is, and does so by redefining a named component, which is the component the progress bar control expects to display the %, so it gets sized appropriately. For most uses you won't have to override the definition, just to style it, redefinition are confusing because you redefine the base control, but you don't have the source for it so you immediately think "where is the link", the link is hardcoded. From blend you can get the default code however ( thus know what to name your parts) but really this isn't a very good example, for most cases you really just don't need to do this.

 

Yea but i don't want to bash too much, i'm sure eDriven was a lot of work for example, and it was really a pretty good shot at making Line of busniess style GUI in unity before Noesis. But this release just trumps the competition. I can't really feel too sad for NGUI i mean, he kinda already made his sales hehe, but there are some other GUI project that are probably less lucky and will see a huge crash in their sales now that Noesis is here for sure.

 

Yes progressbar is one of the numerous built in components.

 

That would be a huge boost. I'll likely use the previous example, getting components in Start().

 

Yes, it is a default control. They are listed in the Class Hierarchy of the documentation: TextBox, Button, RepeatButton, CheckBox, RadioButton, Expander, GroupBox, Label, Tooltip, Page, Toolbar, Listbox, ListView, StatusBar, TreeView, ProgressBar, ScrollBar, Slider, Separator...

 

Not yet. For now we are only compatible with Windows, OS X, iOS and Android. We are preparing a table with information about each platform state: fully working, partially working, planned, not planned, etc.

 

Yes, the sample was a little bit tricky. But anyway, look at the XAML, so few lines for a Life Bar 100% functional.
If people is interested we can translate NGUI samples to XAML in this thread to demonstrate how powerful and expressive is the format.

Of course, minimal samples. Don't bring here your entire project. Only snippets.

 

The runtime (the DLL that is present in the standalone) does not incorporate the xaml parser because that is a tedious and complex process (apart from parsing the xml, you have to resolve lots of things, compress textures...). The code in charge of doing the parsing is only present in the editor binaries. We have a command line tool to convert xaml to this optimal format. You can download this format and display.

Of course, if there is demand about having the parser in the runtime we can evaluate it. Although at first we think it is no sense. At least, for games.

 

Are there any examples where you place gui object above a gameobject like the lifebar for RTS units ? Is the performance good enough to have 50-100 such objects at the same time ?