Interface Discovery

Navigation
Panels
Complete tour of the editor: panels, navigation and basic tools.
Feature Tour (Episode 1)
Back to the Academy

Interface Discovery

Quick summary: Complete tour of the Luna Park editor: panels, navigation, and essential tools to get started.

1. Project access and creation

Access the dashboard

  1. Create an account on Luna Park
  2. Click the Dashboard button (top-right of the landing page)
  3. View the list of all your projects

Create a new project

  1. Click New Project
  2. Customize:
    • Title: editable directly
    • Icon: selection of available icons
    • Description: free text
  3. Example: "Next Billion Dollar Company"
  4. Save and click on the project

2. The Explorer

Main function

File and folder management area for the project.

Create files

  1. Right-click in the explorer → New
  2. Choose file type (script, component, etc.)
  3. Click on the file name to rename it directly
  4. Press Enter to confirm the new name

Folder organization

  1. Create a folder: right-click → New → Folder
  2. Drag & Drop to move files
  3. Example: "Scripts" folder to organize scripts

File save indicators

  • Blue filename: file has unsaved changes
  • White filename: file is saved
  • Save: Use Ctrl+S or click the disk icon

3. Options Panel

Contextual according to file

Displays options for the currently open/selected file.

Types of options

  • Components/Layouts: component elements
  • Scripts: functions and variables
  • Opening: double-click on a file in the Explorer

4. Console

Purpose

Displays output and information from your Visual Scripting Logic blocks.

Quick demonstration

  1. Create a Manual Play node in Visual Scripting
  2. Create a Log node and set its text to "Hello"
  3. Connect the nodes with the white execution wire and click Play
  4. "Hello" will appear in the Console panel

5. Inspector

Role

Shows detailed information of the selected element.

Usage

  • Click on Logic node → Node inspector
  • Click on file → File inspector
  • Click on Layout element → Element inspector

6. Preview Panel (Main workspace)

Display modes according to file type

For Scripts

Shows the Visual Scripting editor where you build logic using connected nodes

For visual elements

Three available modes:

Builder

  • Shows visual borders around selected elements
  • Interactive design mode for building your interface

Logic

  • Create interactive behavior for specific elements
  • Context-aware Visual Scripting editor

Preview

  • Shows exactly how your application will look to end users
  • Renders the final result as it will appear after export

Preview formats

  • Desktop: full browser format
  • Smartphone: responsive mobile format
  • Full screen: Preview on the entire screen (Escape to return)

User interface

Navigation

  • Double-click to open a file
  • Single click to select
  • Drag & Drop to organize

Shortcuts

  • Ctrl+S: save
  • Escape: exit full screen mode
  • Enter: validate renaming

Key concepts

File types

  • Scripts: logic and functions
  • Components: reusable elements
  • Layouts: pages and structures

Basic workflow

  1. Create and organize files using the Explorer
  2. Configure properties in the Options panel
  3. Build logic using Visual Scripting
  4. Test your work in Preview mode and check Console for debugging
  5. Fine-tune details using the Inspector