Forums | NoesisGUI

Posted: **01 Sep 2013, 01:15**

Hello,

I'm working on a Diablo style game to learn Unity (which is coming along nicely if I say so myself

). The only thing I'm actually stuck on is creating my GUI system, so any help would be really appreciated. I'm just very unclear on the proper way to get some of this stuff done (first forays into GUI work in a 3D environment, used to adobe Flex).

Q: How would I go about creating floaties/healthbars through script?

I'm 100% assuming that I would create a Canvas in xaml, dynamically add Textblocks (and whatever I would use for health bars) to it through script, and then simply update their position/text/whatever else. Right now I'm able to create my textblock and add it to the canvas, but I can't figure out how to position it. I have my Vector2D from my camera. How do I assign this to my text block?

I'm looking to do this through script -- not xaml. I'm much more comfortable writing code then learning how to think in terms of storyboard animations and what not (I haven't touched them yet).

Thanks so much!,
Dale Donahue

Posted: **01 Sep 2013, 08:39**

Canvas SetLeft and SetTop should do the trick
Simple example;

public class CanvasTest : MonoBehaviour {

	// Use this for initialization
	void Start () 
    {
        var gui = GetComponent<NoesisGUIPanel>();
        var root = gui.GetRoot<FrameworkElement>();
        Canvas mycanvas = root.FindName<Canvas>("TestCanvas");
        TextBlock text = new TextBlock();
        text.SetText("Freshhhh Meat");
        
        mycanvas.GetChildren().Add(text);
	Canvas.SetLeft(text,300);
        Canvas.SetTop(text, 300);

	}
}

If you are getting the mouse position from unity, notice that unity considers bottom-left as (0,0) whereas it is top-left in Noesis so you need to modify Top value by subtracting it from Screen.height .On the other hand, there is probably some utility function in WPF for getting mouse coordinates but I am not aware whether Noesis implements it or not.

Posted: **03 Sep 2013, 00:41**

Hello,

I'm working on a Diablo style game to learn Unity (which is coming along nicely if I say so myself ). The only thing I'm actually stuck on is creating my GUI system, so any help would be really appreciated. I'm just very unclear on the proper way to get some of this stuff done (first forays into GUI work in a 3D environment, used to adobe Flex).

Q: How would I go about creating floaties/healthbars through script?

I'm 100% assuming that I would create a Canvas in xaml, dynamically add Textblocks (and whatever I would use for health bars) to it through script, and then simply update their position/text/whatever else. Right now I'm able to create my textblock and add it to the canvas, but I can't figure out how to position it. I have my Vector2D from my camera. How do I assign this to my text block?

I'm looking to do this through script -- not xaml. I'm much more comfortable writing code then learning how to think in terms of storyboard animations and what not (I haven't touched them yet).

Thanks so much!,
Dale Donahue

For creating floating health bars the easiest way will be to define a style in your xaml for a ProgressBar control.

<Grid
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <Grid.Resources>
        <ControlTemplate x:Key="FloatingHealthBarTemplate" TargetType="ProgressBar">
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition/>
                    <ColumnDefinition Width="Auto"/>
                </Grid.ColumnDefinitions>
                <Border Background="#40000000" CornerRadius="2" Margin="1"/>
                <Border BorderThickness="1" BorderBrush="{TemplateBinding BorderBrush}" Margin="2"/>
                <Border x:Name="PART_Track" Margin="3"/>
                <Border x:Name="PART_Indicator" Margin="3" Background="{TemplateBinding Background}" HorizontalAlignment="Left"/>
                <TextBlock Text="{Binding Value, RelativeSource={RelativeSource TemplatedParent}}"
                    Grid.Column="1" VerticalAlignment="Center" Margin="2,0,0,1"/>
            </Grid>
        </ControlTemplate>
        <Style x:Key="FloatingHealthBarStyle" TargetType="ProgressBar">
            <Setter Property="Width" Value="100"/>
            <Setter Property="Height" Value="12"/>
            <Setter Property="Minimum" Value="0"/>
            <Setter Property="FontSize" Value="11"/>
            <Setter Property="Foreground" Value="Black"/>
            <Setter Property="Background" Value="LimeGreen"/>
            <Setter Property="BorderBrush" Value="White"/>
            <Setter Property="Template" Value="{StaticResource FloatingHealthBarTemplate}"/>
        </Style>
    </Grid.Resources>
    <Canvas x:Name="HealthBarContainer" />
</Grid>

Then you can apply that style to dynamically created health bars.

public class HealthBarTest : MonoBehaviour
{
    public float TotalHealth = 100.0f;
    public float Health = 100.0f;

   // Use this for initialization
   void Start () 
    {
        var gui = GetComponent<NoesisGUIPanel>();
        var root = gui.GetRoot<FrameworkElement>();

        Style healthBarStyle = root.FindStringResource<Style>("FloatingHealthBarStyle");
        Canvas canvas = root.FindName<Canvas>("HealthBarContainer");

        ProgressBar healthBar = new ProgressBar();
        healthBar.SetStyle(healthBarStyle);
        healthBar.SetMaximum(TotalHealth);
        healthBar.SetValue(Health);
        
        canvas.GetChildren().Add(healthBar);
        Canvas.SetLeft(healthBar, 300);
        Canvas.SetTop(healthBar, 300);
   }
}

If you require a complex health bar control (with custom properties) maybe you would need to create your own UserControl (read the UserControl tutorial in our documentation for more info).

Posted: **03 Sep 2013, 00:43**

Canvas SetLeft and SetTop should do the trick
Simple example;
...
If you are getting the mouse position from unity, notice that unity considers bottom-left as (0,0) whereas it is top-left in Noesis so you need to modify Top value by subtracting it from Screen.height .On the other hand, there is probably some utility function in WPF for getting mouse coordinates but I am not aware whether Noesis implements it or not.

Thanks for your collaboration. It's great to see users helping each other

Posted: **03 Sep 2013, 16:31**

We will very soon have a section for XAML snippets from the community. Meanwhile you can find two samples of healthbar done with NoesisGUI here:

http://forum.unity3d.com/threads/192064 ... ost1312650

http://forum.unity3d.com/threads/192064 ... ost1315654

Forums | NoesisGUI

Creating floaties through script

Creating floaties through script

Re: Creating floaties through script

Re: Creating floaties through script

Re: Creating floaties through script

Re: Creating floaties through script