Installing Natsu Framework

Prerequisites

• .NET 8.0 SDK or later
• A code editor or IDE of your choice (e.g., Visual Studio, VS Code)

Installation Steps

1. Open your terminal or command prompt
2. Navigate to your project directory
3. Run the following command to add the Natsu Framework templates:
dotnet new install Natsu.Templates

This command will download and install the latest version of the Natsu Framework templates.

4. Create a new Natsu application using the following command:
dotnet new natsu -n MyNatsuApp

Replace MyNatsuApp with the name of your application.

Basic Usage

After installing the Natsu Framework templates and creating a new project, you can start developing your application. Here's what your MyNatsuApp.App/MyApp.cs file might look like:

using Natsu.Graphics;
using Natsu.Core;
using Natsu.Core.Elements;
using Natsu.Mathematics;
using Natsu.Extensions;

namespace NatsuApp;

public class MyApp : Application {
    public readonly BoxElement Box = new() {
        Color = Colors.Orange,
        Size = new(100),
        Pivot = new(0.5f), // Center the box to the screen.
        RoundedCorners = new(20),
        IsAntialias = true
    };

    // An input element inside the box that we can click.
    // Sometimes you'd want this the other way around, but it's just an example.
    public InputElement BoxInputArea = new() {
        RelativeSizeAxes = Axes.Both // Makes it the same size as its parent.
    };

    public BoxElement CoverBox = new() {
        RelativeSizeAxes = Axes.Both,
        Margin = 30,
        Color = new(100, 150, 200, 100),
        OffsetPosition = new(0.5f),
        AnchorPosition = new(0.5f),
        RoundedCorners = new(20),
        IsAntialias = true
    };

    public readonly TextElement Text = new() {
        Text = "Click the box! It's fun!",
        Color = Colors.White,
        Pivot = new(0.5f),
        IsAntialias = true,
        TextSize = 20
    };


    protected override void OnLoad() {
        Add(Box, Text, CoverBox);
        Box.Add(BoxInputArea);

        Root.Scale = new(2f); // This makes the whole scene 2x bigger!

        BoxInputArea.DoPress += (_) => {
            Box.StopTransformSequences(nameof(Box.Color), nameof(Box.Rotation));
            Box.ColorTo(Colors.Green).ColorTo(Colors.Orange, 2f, EaseType.ExpoOut);
            Box.RotateTo(0).RotateTo(90, 0.5f, EaseType.ExpoOut);
        };


        BoxInputArea.DoPressDown += (_) => {
            Box.StopTransformSequences(nameof(Box.Scale));
            Box.ScaleTo(0.5f, 3f, EaseType.ExpoOut);
        };

        BoxInputArea.DoPressUp += (_) => {
            Box.StopTransformSequences(nameof(Box.Scale));
            Box.ScaleTo(1f, 0.8f, EaseType.ElasticOut);
        };
    }
}

This is a simple example of a Natsu application that creates a clickable box, a box that covers the screen, and a text element.

To run your application, navigate to the project directory and run:

This command will build and run the desktop version of your Natsu application. Remember to replace MyNatsuApp with the name of your project.