NGUI Examples Series

11 Aug 2014, 18:10

The following posts will be a series of NGUI Examples made with NoesisGUI to serve as comparison of features, complexity and power of both frameworks.

NOTES (thanks to @movra for this notes)

Download and extract NGUI-Examples.zip. It includes a Unity3D project, so it's not recommended to extract it into an existing Unity3D project folder.
The file NGUI-Examples/NGUI-Examples.sln is a custom solution intended for XAML editing in Blend or Visual Studio.
One folder deeper there is NGUI-Examples/NGUI-Examples/NGUI-Examples.sln, automatically created by Unity3D. Any Unity3D generated solution file lacks the ability to visually edit XAMLs, because Unity3D's Mono version doesn't support WPF.
Open the project in Unity3D with Open Other... and choose the NGUI-Examples/NGUI-Examples folder.
Make sure you have unchecked "Use Direct3D 11" checkbox in Unity3D's Edit > Project Settings > Player. Restart Unity3D.
Import the NoesisGUI asset. If you don't own it, there is a trial version. Note that NoesisGUI depends on C++ DLLs, so you will need Unity3D Pro.
Load the scene of the example you want to test. They are located under Assets/NGUI - Examples folder (yes, there are 3 folders that are named eerily alike).
Play!

The following attached Blend and Unity project will be updated each time a new example is posted.

11 Aug 2014, 18:11

Example 1 - Anchors

<Grid
	xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
	xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
	xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d"
	d:DesignWidth="800" d:DesignHeight="600">
	<Grid.Resources>
		<LinearGradientBrush x:Key="LabelBackgroundBrush" EndPoint="0.5,1" StartPoint="0.5,0">
			<GradientStop Color="White" Offset="0"/>
			<GradientStop Color="#FFCBCBCB" Offset="1"/>
		</LinearGradientBrush>
		<LinearGradientBrush x:Key="ShadowBrush" EndPoint="0.5,1" StartPoint="0,0">
			<GradientStop Color="#26000000" Offset="0"/>
			<GradientStop Color="#4C000000" Offset="1"/>
		</LinearGradientBrush>
		<ControlTemplate x:Key="LabelTemplate" TargetType="{x:Type Label}">
			<Border
				Background="{StaticResource LabelBackgroundBrush}"
				BorderBrush="{StaticResource ShadowBrush}"
				BorderThickness="1,1,2,2"
				CornerRadius="4">
				<Grid
					HorizontalAlignment="Center"
					VerticalAlignment="Center"
					TextElement.FontFamily="Fonts/#Arimo"
					TextElement.FontSize="16">
					<ContentPresenter Margin="1,1,-1,-1" TextElement.Foreground="White"/>
					<ContentPresenter TextElement.Foreground="Black"/>
				</Grid>
			</Border>
		</ControlTemplate>
		<Style TargetType="{x:Type Label}">
			<Setter Property="Width" Value="160"/>
			<Setter Property="Height" Value="50"/>
			<Setter Property="Margin" Value="20"/>
			<Setter Property="Template" Value="{StaticResource LabelTemplate}"/>
		</Style>
	</Grid.Resources>
	<Grid x:Name="BACKGROUND">
		<Grid x:Name="StrippedBg">
			<Grid.Background>
				<LinearGradientBrush EndPoint="5,5" StartPoint="0,0" MappingMode="Absolute" SpreadMethod="Repeat">
					<GradientStop Color="#FF5A5A5A" Offset="0.399"/>
					<GradientStop Color="#FF676767" Offset="0.4"/>
				</LinearGradientBrush>
			</Grid.Background>
		</Grid>
		<Grid x:Name="Vignette">
			<Grid.Background>
				<RadialGradientBrush Opacity="0.5">
					<GradientStop Color="#00000000"/>
					<GradientStop Color="#60000000" Offset="1"/>
				</RadialGradientBrush>
			</Grid.Background>
		</Grid>
	</Grid>
	<Viewbox x:Name="CENTER_TEXT" Margin="50">
		<Border BorderThickness="1,1,2,2" BorderBrush="{StaticResource ShadowBrush}" CornerRadius="3" Width="600" Height="500">
			<Grid>
				<Rectangle RadiusX="2" RadiusY="2" StrokeDashArray="4 2">
					<Rectangle.Fill>
						<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
							<GradientStop Color="#CCFFFFFF" Offset="0"/>
							<GradientStop Color="#33FFFFFF" Offset="1"/>
						</LinearGradientBrush>
					</Rectangle.Fill>
				</Rectangle>
				<Rectangle Stroke="Black" RadiusX="2" RadiusY="2" StrokeDashArray="4 2"/>
				<TextBlock Margin="20" FontSize="16" FontFamily="Fonts/#Arimo" TextWrapping="Wrap" Foreground="#FF414141"
					Text="This example shows how to use element alignment (equivalent to NGUI Anchors).&#xA;&#xA;All UI elements are capable of align themselves inside any parent container.&#xA;&#xA;To align an element, just set its HorizontalAlignment and VerticalAlignment properties.&#xA;&#xA;For an easiest example, start with a Grid container and a Rectangle. The default alignment value is Stretch, which means that Rectangle will be stretched to fill completely the Grid container. You can modify Rectangle's Margin property to leave some space between the Grid container and the Rectangle.&#xA;&#xA;The other possible values are well known: Left, Right and Center for horizontal alignment; and Top, Bottom and Center for vertical alignment. In this case assign a Width and Height to the Rectangle because its default size is zero."/>
			</Grid>
		</Border>
	</Viewbox>
	<Label Content="Top" HorizontalAlignment="Center" VerticalAlignment="Top"/>
	<Label Content="Top Left" HorizontalAlignment="Left" VerticalAlignment="Top"/>
	<Label Content="Top Right" HorizontalAlignment="Right" VerticalAlignment="Top"/>
	<Label Content="Left" HorizontalAlignment="Left" VerticalAlignment="Center"/>
	<Label Content="Right" HorizontalAlignment="Right" VerticalAlignment="Center"/>
	<Label Content="Bottom" HorizontalAlignment="Center" VerticalAlignment="Bottom"/>
	<Label Content="Bottom Left" HorizontalAlignment="Left" VerticalAlignment="Bottom"/>
	<Label Content="Bottom Right" HorizontalAlignment="Right" VerticalAlignment="Bottom"/>
</Grid>

TIPS (thanks to @movra for this tips)

The file Example 2 - Anchors.xaml (displayed in the code box above) is where the magic happens. Since XAML is a kind of XML you can open it in Notepad, but there are also dedicated visual XAML editors such as the lightweight Kaxaml and the fully featured Blend, which is part of Visual Studio. By the way, there's even a plugin that exports XAML from Adobe Illustrator.
Notice that all the Label elements are positioned with Horizontal/VerticalAlignment properties. The actual text layout within them is controlled in the LabelTemplate.
Experiment with the Grid on line 58 and the Rectangle on line 59. For example add: VerticalAlignment="Center" or Margin="40" or Height="200".

11 Aug 2014, 23:26

Example 10 - Localization

NOTE: Example updated with a draggable panel like in NGUI examples.

12 Aug 2014, 17:23

Example 9 - Quest Log

NOTE: Example updated with a draggable panel like the one used in NGUI example.

13 Aug 2014, 21:43

Set Antialiasing to PPAA on the NoesisGUIPanel component in the Inspector. Looks much better when dragging the panel!

14 Aug 2014, 14:39

Example 2 - Interaction

NOTES

To use NoesisGUI in a 3D scene you have to attach the NoesisGUIPanel to a GameObject in the scene that contains a RenderTexture as the main texture in its material.
If you want your panel to be transparent, you have to select the appropriate Unity material (with transparency enabled), and most important, the XAML root object (the one filling the entire target surface), must have a Transparent Background.
Code: Select all
```
<Grid
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  Background="Transparent">
    
</Grid>
```
In order to receive input events, the target GameObject must have a Mesh Collider, so ray casting can transform screen coordinates to texture coordinates.

NGUI Examples Series

NGUI Examples Series

Example 1 - Anchors

Example 10 - Localization

Example 9 - Quest Log

Re: NGUI Examples Series

Example 2 - Interaction

Who is online