Luna UI Documentation

Luna UI provides a Credits view component that automatically scrolls through game credits with configurable sections and styling.

Features

Auto-Scrolling: Smooth automatic scrolling with configurable speed
Section Support: Organize credits into labeled sections
Position/Person Format: Support for "Position: Person Name" formatting
Auto-Close: Optionally close the view when scrolling completes
Game Title & End Message: Display game title at top and closing message at bottom

Setup

1. Create UXML Structure

Create a UXML with:

ScrollView (the main scrollable area)
Button with name "ReturnButton" for manual close

xml

<ui:UXML xmlns:ui="UnityEngine.UIElements">
    <ui:ScrollView />
    <ui:Button name="ReturnButton" text="Return" />
</ui:UXML>

2. Add CreditsView Component

Add the CreditsView component to a GameObject with a UIDocument.

3. Configure in Inspector

Credits Inspector

Inspector Properties

Property	Type	Description
Auto Close Credits	bool	Close view when scrolling completes
Scroll Speed	float	Pixels per update cycle
Update Frequency	long	Milliseconds between scroll updates
Scroll Start Delay	long	Delay before scrolling starts (ms)
Game Title	string	Title displayed at the top
End Message	string	Message displayed at the bottom
After End Message Delay	float	Extra scroll before auto-close
Sections	KeyValueDatabase	Credit sections (see below)

Sections Configuration

Credits are organized into sections using KeyValueDatabase<string, List<string>>:

Key: Section title (e.g., "Development Team", "Voice Actors")
Value: List of credits in that section

Credit Formats

Simple format:

John Smith
Jane Doe

Position: Person format:

Lead Designer: John Smith
Character Artist: Jane Doe

When a credit line contains :, it's split into a position label and person label with different styling.

USS Classes

The following USS classes are applied to elements:

Class	Applied To
`game_title`	Game title label
`section_title`	Section header labels
`credit_line_container`	Container for each credit line
`credited_position`	Position text (before `:`)
`credited_person`	Person name (after `:`)
`credit_line`	Simple credit line (no `:`)
`end_message`	End message label

Example USS

css

.game_title {
    font-size: 48px;
    -unity-font-style: bold;
    -unity-text-align: middle-center;
    margin-bottom: 60px;
}

.section_title {
    font-size: 24px;
    -unity-font-style: bold;
    -unity-text-align: middle-center;
    margin-top: 40px;
    margin-bottom: 20px;
    color: var(--color-primary);
}

.credit_line_container {
    flex-direction: row;
    justify-content: center;
    margin-bottom: 8px;
}

.credited_position {
    margin-right: 8px;
    color: var(--color-slate-400);
}

.credited_person {
    -unity-font-style: bold;
}

.credit_line {
    -unity-text-align: middle-center;
}

.end_message {
    font-size: 32px;
    -unity-text-align: middle-center;
    margin-top: 100px;
    margin-bottom: 200px;
}

Example Configuration

Game Title: "My Awesome Game"
End Message: "Thank you for playing!"

Sections:
├─ "Development"
│  ├─ "Director: Jane Smith"
│  ├─ "Lead Programmer: John Doe"
│  └─ "UI Designer: Alex Johnson"
│
├─ "Art"
│  ├─ "Lead Artist: Sarah Wilson"
│  ├─ "Character Art: Mike Brown"
│  └─ "Environment Art: Lisa Davis"
│
├─ "Music & Sound"
│  ├─ "Composer: Chris Martin"
│  └─ "Sound Design: Emily Chen"
│
└─ "Special Thanks"
   ├─ "Our amazing community"
   ├─ "All our beta testers"
   └─ "Our families and friends"

Code Example

Basic Usage

The CreditsView is typically instantiated via prefab loader:

csharp

// From main menu
UIPrefabLoader.Instance.Instantiate("Credits");

Custom Implementation

csharp

using UnityEngine;
using CupkekGames.Luna;

public class CustomCreditsView : CreditsView
{
    protected override void OnEnable()
    {
        base.OnEnable();
        
        // Custom initialization
        PlayMusic();
    }
    
    protected override void OnDisable()
    {
        base.OnDisable();
        
        // Custom cleanup
        StopMusic();
    }
    
    private void PlayMusic()
    {
        // Play credits music
    }
    
    private void StopMusic()
    {
        // Stop credits music
    }
}

Behavior

On Awake:
- Game title is added to ScrollView
- Each section and its credits are added
- End message is added
- Vertical scroller is hidden
On OnEnable:
- Return button click handler is registered
- Auto-scroll begins after Scroll Start Delay
During scroll:
- ScrollView scrolls down by Scroll Speed every Update Frequency ms
- Continues until reaching the end
On completion:
- Waits for After End Message Delay
- If Auto Close Credits is true, calls FadeOutThenDestroy()
Return button:
- Clicking calls FadeOutThenDestroy() to close the view

Tips

Set Scroll Speed lower (0.5-1.0) for longer credits
Use Scroll Start Delay to let music intro play before scrolling
The scroller is automatically hidden for a cleaner look
Use : in credit lines for two-column formatting
Add extra padding in USS for end_message to ensure it's visible before auto-close