Difference between revisions of "Luna Engine Configuration Guide"

From Yanfly.moe Wiki
Jump to navigation Jump to search
(Common Config Commands)
Line 85: Line 85:
 
Specifies the source image file. By default, Luna looks for all source files in the “systems” folder. Via encasing the filename (without file extension) in quotation marks, it’s possible to direct Luna to a subfolder. For Example:
 
Specifies the source image file. By default, Luna looks for all source files in the “systems” folder. Via encasing the filename (without file extension) in quotation marks, it’s possible to direct Luna to a subfolder. For Example:
 
  <nowiki>image: "battlehud\cursor" </nowiki>
 
  <nowiki>image: "battlehud\cursor" </nowiki>
 +
 +
<nowiki>Window Extend: WindowName </nowiki>
 +
 +
Window extend means use that window's configuration and add your own configuration. It's similar to the concept of aliasing in programming.
  
 
==Global Templates==
 
==Global Templates==

Revision as of 15:40, 25 June 2019

Welcome to the wiki! This is where you can find resources from Yanfly.moe, Ækashics.moe,
VisuStella, Caz Wolf, Fallen Angel Olivia, Atelier Irina, and other affiliated content creators.


Understanding YAML (.yml) Files

Due to the nature of yaml files, format and indentation of lines is highly important for Luna to understand what is being customized. As a result, many errors can be caused by mistakes in syntax.

Indentation

As a rule, all indented lines under an un-indented line are “nested” and properties of the un-indented line. As lines can be nested under already nested lines, it becomes very easy to see the configuration as done in tiers.


Nesting Visualized As everything under “components” is more indented than components, it is considered to be nested under it in the blue box.

The purple box outlines what’s considered to be nested under “Background”. However, as “x” and “type” are on the same level of indentation, they both form their individual red boxes. As “type: Background” doesn’t have a line directly under it that is more indented, nothing is nested under it. “X” on the other hand has “type: percentage” is more indented than “x”, thus meaning it is nested under “x”.

Syntax

As yaml is technically a coding language, it is extremely picky with syntax. Something as simple as wrong capitalization or missing/extra spaces will cause errors. Usually, your Text IDE will suggest the correct term/word with the correct capitalization, but it is still important to take note of the following syntax rules.

  • Lines must be separated properly:

Both nested and un-nested lines must have their own individual line. Accidentally crowding into the above line will cause errors. Empty lines are allowed and recommended for help with organization.


  • The format must be:
<parameter>: <string>          OR             - <component name>

There must be a space between “:” and <string>. No more, no less. The text should display in the correct colours if the syntax is correct.


For component lists, there must be a space between “-” and <component name>. It will not display the wrong colour if incorrect, but will produce an error when run.

  • Names used must be consistent across all instances referring to the same thing:

This includes capitalization, spacing, spelling, etc. They must be completely the same when referring to the same window/object/item, otherwise Luna give an error stating that the referenced object is undefined.


Common Terms

This is a list of common terms you will find throughout all the configurations.

KEY DESCRIPTION
components A map of components and windows in the scene. The key is the window class name. Default windows (windows that are defined by RMMV) will have a more friendly name defined by LunaEngine. For the config of each component, see Component table.

It is important to remember that Components are only shown once and are not updated every instance.

layouts A map of layouts in the scene. MainLayout is required as it is the scene itself. The name of layout can be anything. See Layout table for more information.
events A conditional that triggers something to happen. Exclusively used for common UI animations such as transition in, transition out, on option select, and other similar effects.
lunatic Lunatic mode for each component. The key name will be the key name of component/window you want to activate lunatic mode.

Lunatic is always updated for every instance.

lunatic item A special type of component that is rendered for every entry in a list of data. Examples include things such as per party member during battle screens/status screens, per skill on skill screen, per item on the item screen, per command on a menu, etc.
type Defines what type of asset is rendered or how it is rendered. Examples for type of asset include: image, text, grid. Examples for styles of rendering include: horizontal, vertical, freestyle, fixed. Scenes/screens are also defined by type. In this case, the type will be scene, this to make sure LunaEngine knows this config is a scene config.
version This is a marker to see what version or iteration your current configuration is. This is helpful to keep track of your changes and what version has a previous feature you might’ve removed and what returned and so forth.

Common Config Commands

type: <string> 

Type is what kind of component you are using. Depending on what the type is defining, there are a number of valid strings.

version: 0.0.0 

Version, also known as Version History, is to keep track what version your Luna Config is. It is useful for Version Control and keep track of changes.

x: <number> 

X indicates either the width or horizontal position. A bigger number moves the object right, where a smaller number moves it left. Negatives are allowed for position.

y: <number> 

Y indicates either the height or vertical position. A bigger number moves the object down, where a smaller number moves it up. Negatives are allowed for position.

image: <string> 

Specifies the source image file. By default, Luna looks for all source files in the “systems” folder. Via encasing the filename (without file extension) in quotation marks, it’s possible to direct Luna to a subfolder. For Example:

image: "battlehud\cursor" 
Window Extend: WindowName 

Window extend means use that window's configuration and add your own configuration. It's similar to the concept of aliasing in programming.

Global Templates

Presets.yml

This yaml file is used for general configuration, something like a core engine. When using a “default” setting in any YML, it will refer back to the presets. It is possible to define multiple presets as long as they all have their individual names.

type: presets # Defines this as the preset configuration
version: 0.1.0 # Defines the version number

presets: # Indicates the below as different presets
  default:  # name of the preset. Input this into the configuration to call data entered into this preset. 
    fontName: DS Pixel Cyr  # Name of font in the font folder. Do not include font file extensions. 
    fontSize: 16 # Size of font
    fontOutline: # Indicates how the font outline is drawn. In pixels.
      enable: true  # Tells Luna you want font outlines
      lineWidth: 4  # Width of the font outline
      lineColor: rgba(16, 16, 16, 1)  # Colour of the font outline and transparency. 
    fontShadow:  # Indicates below defines the font shadow
      enable: true  # Tells Luna you want font shadows
      shadowOffset:  # Indicates shadow offset distance. In pixels. 
        x: 2   # Horizontal offset (bigger = more right, negatives accepted)
        y: 2  # Vertical offset (bigger = more down, negatives accepted)
      shadowColor: rgba(32, 32, 32, 0.6)   # The colour and transparency of the shadow
      shadowBlur: 4  # The amount of blur on the shadow (bigger = more blur)

    lineHeight: 36 # Space between lines of text. (bigger = more space). In pixels.
    textPadding: 6 
    windowPadding: 18   # Padding around the edge of the window. (bigger = more padding). In pixels. 

    gaugeOffset:
      x: 0
      y: 4
    gaugeHeight: 16
    gaugeOutline:
      enable: true
      lineWidth: 2
      lineColor: rgba(16, 16, 16, 1)
    gaugeSlanted: true

    windowSkin: BlueWindowSkin   # Name of the windowskin used without file extensions 
    Cursor:   # Indicates below defines the cursor
      type: normal # normal / image / none |Normal uses the one included in window skin. Image, allows for the use of a seperate image instead. None means an invisible cursor.
      blink: true   # Includes whether blink animation is used
      image: cursor   # Name of the image used if image type is used. Setting to “none” produces an invisible cursor
      offset:  # Offset of the position of the cursor
        x: 0  # Horizontal offset (bigger = more right, negatives accepted)
        y: 0  # Vertical offset (bigger = more down, negatives accepted)
 

Animations.yml

This yaml files defines the animations that can be called on in Block 3: Events of every scene/screen configuration.

Currently, all animations are keyframe animations with two keyframes:

  1. The start position
  2. The end position

This makes simple transition animations such as fade in from the top, or move left easy to set. As end keyframe offset is permanent unless it is changed by another animation, it’s suggested that both offset x and y is either set to 0 in the ending keyframe or a dedicated animation exists to move the offset back to 0, 0.

type: animations # Defines this as the animation configuration file
version: 0.1.0 # Defines the version number

Animations:  # Indicates below as animation settings
  FadeInDown:  #  Name of animation. Can be set to anything. 
	0:  # Starting keyframe (starting position of the animation)
  	 offsetX:  #  Offset of horizontal from predefined position in scene configuration for the asset/window
    	  type: fixed # fixed for animations only.|Defines what "value" means.  
    	  value: 0  # Amount of the X offset. (bigger = more right, negative allowed)
  	 offsetY:  #  Offset of vertical from predefined position in scene configuration for the asset/window
    	  type: fixed
    	  value: -150
  	 alpha: 0  #  Transparency of the asset the animation is targeting
	100:  # Ending keyframe (Ending position of the animation)
  	 offsetX:  #  Offset of horizontal from predefined position in scene configuration for the asset/window
    	  type: fixed
    	  value: 0
  	 offsetY:
    	  type: fixed
    	  value: 0
  	 alpha: 1

  MoveBack:  # Example of an animation designed to reset any prior animations
	100:   # Only has an ending keyframe. The starting keyframe is implied to be whatever state the asset is currently in.
  	 offsetX:
    	  type: fixed
    	  value: 0
  	 offsetY:
    	  type: fixed
    	  value: 0
  	 alpha: 1

Basic Configuration Overview

Part 1: Block Definition

All scene-related Luna YMLs are organized in the same way. The overall layout can be defined via four distinct blocks that all have their individual functions. By understanding what each of these Blocks do, it becomes far easier to understand what needs to be changed to get the intended effect.

Block 1: Basic Components

Contains the default windows available for configuration. Allows for the most basic configurations for windows such as size, position, spacing, font used, window skins, and much more.

components:#Header for Basic Components
  Background:#Window 1 (Background)
	#-Configurations removed for the sake of easy identification-
	
  TitleCommand:#Window 2 (Title Screen Buttons/Commands)
      #-Configurations removed for the sake of easy identification- 

Block 2: Layout

Determines the relationship windows have to each other and how they are layered on top of each other. Windows drawn later will be on top, while windows drawn first will be on the bottom.

For a window to appear, it must be listed somewhere within the layout. As such, there must be a “MainLayout”. Will only accept existing windows. Attempting to add a nonexistent window under layout will result in nothing happening.

Also allows for the ability to link windows together and move them as a whole unit.

layouts:#Header for Layouts
  MainLayout:#Name of Layout
	type: FreeLayout #Type of Layout (How it's displayed)
	components:#components of Layout
  	- Background #Window 1
  	- TitleCommand #Window 2 

Block 3: Events/Animations

Used for animations. Specifies what should happen on an event such as when something is selected, etc. Only predefined animations in the animations.yml can be used. Attempting to use a nonexistent animation will cause an error.

events: #Header for Events
  onSceneEnter:#Event Condition (When first opening the screen)
	#-Configurations removed for the sake of easy identification-

  onItemSelect:#Event Condition (When selecting an object/item/command/)
	#-Configurations removed for the sake of easy identification-


  onItemUnselect:#Event Condition (When unselecting an object/item/command)
	#-Configurations removed for the sake of easy identification- 

Block 4: Lunatic

Used for heavy customization.

Allows complete freedom to customize all existing windows mentioned in Block 1.

Each window is customized individually, allowing both the adding of removing of individual components, as well as components that only appear of a certain condition is true. The block of Luna’s customization is here.

lunatic:#Header for Lunatic
  TitleCommand:#Name of customized window. Must be the same as in Block 1.
   #-Configurations removed for the sake of easy identification- 

Part 2: Block 1 - Basic Components

Block 1 of all scene yaml files indicates the basic setup of each window that appears in the scene/screen. Only existing and defined windows can be configured. Each window has its own set of configurations under its window name.

If the parameter is predefined in preset.yml, it’s possible to call on those presets in all Block 1 configurations instead of redefining it here (but it’s still possible to redefine it if preferred).

When redefining a parameter, the entire parameter must be redefined. (Eg, if redefining font shadow, everything including shadow width, blur, etc must be redefined).

components: # Header to Block 1
 MenuCommand: # Name of Window
  type: Window  # Indicates that this is referring to a window
  x:  # Defines the horizontal position of the window. Relative based on where the window is placed in the layout in relation with other existing windows
   type: fixed  # fixed/ percentage | Determines how the number in value is interpreted. Fixed is a pure pixel value, while percentage moves the window via a percentage of its width. 
   value: 0 # Bigger = more to the right. Negatives are allowed. Percentage values have no limitations. 
  y: # Defines the vertical position of the window. Relative similar to X. 
   type: fixed
   value: 0
  anchor: # Defines where the position point is anchored on the window. 
 # 0 = Left side/Top, 0.5 = Middle, 0.5 Right side/Bottom
   x: 0 # Horizontal position of the anchor point
   y: 0 # Vertical position of the anchor point 

  width: # Width of the window
   type: fixed # Fixed only. Determines the value below as a pixel value
   value: 370 # Width of the window in pixels
  height: # Height of the window 
   type: fitLines # fitLines/ fixed | FitLines draws the height of the window based on the number of allowed lines of text. Fixed draws it based on specified height. 
   value: 1  # Either defines the number of lines the window can fit, or the height in pixel value as specified in type. 

  fontName: default # Customize the font used
  fontSize: default # Customize the font size
  fontOutline: default # Customize the font outline
  fontShadow: default # Customize the font shadow details

  lineHeight: default # Customize the line height
  textPadding: default # Customize the text padding
  windowPadding: default # Customize the window padding 
  contentsOffset: # Allows for the offset of the content in the window
   x: 150  # Amount of horizontal offset
   y: 0 # Amount of vertical offset

  windowSkin: default # Customize which window skin is used
  cursor: # Customize the cursor 
   type: none # normal / image / none  # Customize which cursor is used
   blink: true  # Turn on and off blink effect
   image: "battle_hud/selector"  # Image source of the cursor
   Offset:  # Offset of the cursor position 
     x: -16
     y: -45

  customBackground: # Allows for the use of a custom image for the window skin instead of what’s drawn from a window skin file. 
   enable: true # Turns custom background function on and off
   image: none # Source of the image file used for the custom background. Putting while keeping enable true produces an invisible window background, but keeps the contents visible. 

  columns: 7  # Determines the number of columns for commands/items/buttons.  Allows for the creation of horizontal menus if desired. 

Part 3: Block 2 - Layout

As mentioned before, layout determines the order windows are drawn in and how they are paired in relation with each other.

Windows can either be independent free bodies or paired with other windows to make a larger, multi window unit. This makes moving a set of windows more straightforward as it’s possible to just edit the position of the layout element rather than the windows themselves.

layouts:  # Indicates the start of the Layout Block
  MainLayout:  # Mandatory main layout. Dictates what appears in the scene
	type: FreeLayout  # Type of layout. For Main layout, Free is recommended
	components:  # What windows/layout sets are displayed. The order determines who the components are layered, with the higher up components in the list being on the bottom while the components lower on the list being displayed at the top.
  	 - Background  # It’s possible to simply list window names directly
  	 - BodyLayout  # Example of a layout unit

  BodyLayout:  # Name of a layout unit. It can be set to anything. 
	type: HorizontalLayout  # HorizontalLayout/ FreeLayout/ VerticalLayout |Type of layout unit. Horizontal automatically places the windows side by side without overlap while vertical stacks them without overlap. FreeLayout allows complete freedom in window placement, including overlap. 
	x:  # Horizontal position of Layout unit
  	 type: fixed  # Works the same as specified in Block 1. 
  	 value: 0
	y:  # Vertical position of Layout unit
  	 type: fixed
  	 value: 0
	width:  # Width of layout unit. It’s suggested to not tamper with this as it may cause unintended effects.
  	 type: percentage
  	 value: 100
	height: # Height of layout unit. It’s suggested to not tamper with this as it may cause unintended effects.
  	 type: percentage
  	 value: 100
	components: # Indicates what components are in the layout unit. Can be windows or other layout units. 
  	 - MenuCommand
  	 - RightColumn

  RightColumn: # Another example of a layout unit. 
	type: FreeLayout
	x:
  	 type: fixed
  	 value: 0
	y:
  	 type: fixed
  	 value: 0
	width:
  	 type: percentage
  	 value: 100
	height:
  	 type: percentage
  	 value: 100
	components:
  	 - MenuStatus
  	 - Gold
 

Part 4: Block 3 - Events/Animations

This block defines the animations that will play on “events” in the UI.

While there are limitations to what and how something can be animated depending on the manner windows were set up and the way Luna is structured, animations can be targeted at individual components or lunatic items as defined in Block 4: Lunatic by combining the component name with the window.

Example: Targeting the window “BattleStatus”:

target: BattleStatus 

Targeting the “HpBar” component defined for the “BattleStatus” window in Block 4: Lunatic.

target: BattleStatusHpBar <nowiki>

Targeting Lunatic item 0 in the “BattleStatus” window as defined in Block 4: Lunatic. 
 <nowiki>target: BattleStatusLunaticItem0 

All currently available “events”:

  • onSceneEnter: When the scene is first entered/ when the menu is first opening.
  • onExitEvents: When leaving the scene/when closing the menu. Due to the way RPG handles scenes, certain animations such as fade outs on the background will produce unintended results such as black screens.
  • onItemSelect: Animation that plays on selecting commands/items/button. Also works for certain windows that appear such as the actor select on skill or item scenes.
  • onItemUnselect: Animation that plays when unselecting a command/item/button. Commonly used to reset the animation from onItemSelect. Also works for certain windows that appear.
  • onComponentShow: An alternative to onItemSelect when targeting windows that appear. Necessary due to the way RPG maker handles certain windows such as on the battle scene.
  • onComponentHide: An alternative to onItemUnselect. The equivalent of onItemUnselect, but for onComponentShow.
events: # Indicates that this is the event block
onComponentShow: # Event that will trigger the animation
   Command:#It’s possible to group animations under a name as long as the name is unique across block 3.
    - type: Animation # Specifies that the following is an animation
   	target: ActorCommand # Target of the animation (what is animated). The target in this case is the window “ActorCommand”
   	animation: FadeInDownMin # Name of the animation specified in animation.yml
   	duration: 500 # milliseconds. Length of animation
   	delay: 400  # Allows for the delaying of the animation. Optional.
   	ease: Quadratic.Out  # Allows for easing. Not including this section produces a perfectly linear movement. This is completely optional.
   	force: true # Attempts to force the animation to play. Does not always work, and is generally not necessary, but may fix certain uncooperative windows.

   BattleSkill: # Name of Animation command
    - type: Animation
    	target: BattleSkill # Targets the “BattleSkill” window
    	animation: FadeInDownMin
    	duration: 150 # milliseconds
    	ease: Quadratic.Out

  onSceneEnter: # Event that will trigger the animation
    - type: Animation # Animation commands can be directly listed instead of grouped under a name
  	target: BattleStatusLunaticItem0 # Targets Lunatic Item 0 within the “BattleStatus” window.
  	animation: FadeInDown
  	duration: 350 # milliseconds

    - type: Animation
  	target: BattleStatusHpBar # Targets the component called “HpBar” under the window “BattleStatus” as defined under Block 4: Lunatic
  	animation: FadeInDown
  	duration: 350 # milliseconds
  	delay: 100
  	ease: Quadratic.Out
 

Part 5: Block 4 - Lunatic

Unlike the previous blocks largely only dictate the overall formatting of the windows, Block 4: Lunatic allows for total customization.

While it is the most complex, it still follows similar rules to the previous blocks despite focusing on individual components of windows instead of the window itself. Due to it allowing for the customization of the content of windows, not formatting sections correctly will often result in unintended effects or errors.

Anatomy of Block 4 - Lunatic:

The format of a Lunatic block can be broken down into “components” and “contents”. While the “components” section is used to define all elements that will appear in the window, “contents” handles the actual rendering of the defined components. To further complicate matters, “contents” can be split into two sections: “components” and “lunatic items”.

Despite all defined elements are technically called components, the “components” section of “contents” defines elements that are only rendered once on the window. This is often used for visual accents or designs. “lunatic items” on the other hand are rendered once for every instance of “data” that exists in the window. Examples of this would be the different commands in command windows, or each individual item in an inventory.

Protip: It is also possible to move the Lunatic configurations for a window to a separate file for the sake of organization. Identically to how it’s done in block 1, the engine must be pointed to the correct file:

lunatic: # Marks this as the Lunatic section
  TitleCommand: Title_TitleCommand.Lunatic # The lunatic configurations for the window "TitleCommand" are in the file "Title_TitleCommand.Lunatic".

Below is an example of the basic Lunatic block for two different windows in the same scene.

lunatic: # Indications this is Block 4: Lunatic
 SkillList: # Name of window being customized (defined in Block 1)
  enable: true  # Turns on Lunatic for this window
  additionMode: true # By default, enabling the Lunatic customization of a window erases the original content. By enabling additionMode, it will retain the original content. 
  components: # Defines the below as components of the window. 
   HeaderMagic:  # Name of component. Can be named anything unique.
         # -Omitted for brevity- #settings of the component 

   HeaderSkill: # Another component under "SkillList".
         # -Omitted for brevity- 

   TypeSelector1: # Another component under "SkillList".
         # -Omitted for brevity- 

   TypeSelector2: # Another component under "SkillList".
          # -Omitted for brevity- 

  contents: # Defines the contents of the window. If the component is not listed anywhere under components or lunaticItems, it will not render even if it is defined as a component. Only components defined under the specified window are valid. 
   type: FreeLayout # Type of layout. Works identically to Block 2. 
   components: # Components that only render once on the window. If nothing, [] should be put instead. The lower components render on top. (Identical to Block 2). Components from other window’s component definition can be called.
	- HeaderMagic 
	- HeaderSkill
	- TypeSelector1
	- TypeSelector2

  lunaticItems: # Lunatic items that render for every instance of data for the window. Lunatic items as a whole can be further customized with position and dimension, but it's not recommended. 
	template:
  	type: FreeLayout
  	components: [] # Functions the same as in contents. 

 SkillType: # Second window being customized
   enable: true # Addition mode is turned off, meaning all contents will be overwritten with customizations
   components: # Marks the start of component definition 
	TypeIcon:
         # -Omitted for brevity- 

	TopBar:
         # -Omitted for brevity- 

	HeaderTitle:
         # -Omitted for brevity- 

   contents:
	type: FreeLayout
	components:
 	- TopBar
 	- HeaderTitle

   lunaticItems:
	itemList: ${data} # Since Lunatic items are actually in use, it requires an item list to reference. What this is differs between windows. 
	template:
  	type: FreeLayout
  	components:
   	- TypeIcon 

Simple Component Definition Settings

Below is an example of the minimal setup for a Lunatic component. As setting up both “components” and “lunatic items” is the same prior to the “contents” section, this applies for both types of components. ActorFace: # Name of component type: Image # Type of component x: # Horizontal position of component type: fixed value: 44 y: # Vertical position of component type: fixed value: 10 anchor: # Anchoring point of component x: 0 y: 0 imageName: "battle_hud/Actor${data.actorId}" # Source of the component. It can be a flat file, or in the case of Lunatic Items, a variable can be put into the file name to render on a per item basis. In this case, the naming of the source files would be "Actor0", "Actor1", etc etc since the "${data.actorId}" would be replaced by the actor ID.

Complex Component Definition Settings

Below is an example of a complex Lunatic component.

     ActorHPGauge: # Name of component
      type: ImageGauge # Defines this as a gauge that uses an image as the bar instead of drawing a rectangle to dimensions. 
      x: # Horizontal Location
        type: fixed
        value: 684
      y: # Vertical Location
        type: fixed
        value: 243
      imageName: "main_menu/MMHP" # Source image
      anchor: # Anchor
        x: 0
        y: 0
      pivot: # Anchor for rotation spot. 
        x: 0
        y: 1
      rotation: 270 # Rotation angle (Rotates clockwise)
      bind: true # Turns on real-time updating (used for changing values like HP and MP)
      rate: ${actor.hpRate} # Defines what should be references for max and current values. 

      conditions: # A conditional statement that changes how the above is rendered assuming something is true. 
        isHope: # Name of condition
         condition: $gameParty.menuActor().index() === 1 # What the condition that needs to be true actually is. In this context, it checks to see if the actor being rendered has an ID of 1 in the status menu. This will change depending on the window and scene. 
         config: # Marks what changes should be made to the configuration if the above is true
           offsetY: # Vertical offset
             type: fixed
             value: 11
 

Lunatic Specific Commands and Types

Defines the component as an image. Requires a source file. Used for a lot of things.

       type: Image
        x: # Horizontal position
          type: fixed
          value: 44
        y: # Vertical position
          type: lineHeight
          value: 0
        anchor: # Anchor point of image
          x: 0
          y: 0
        imageName: "battle_hud/Actor${data.actorId}" # Source file of image

Defines the component as text. Standard configuration format for fonts applies. Used for rendering predetermined text generally. 
 <nowiki>       type: Text
        x:
          type: fixed
          value: 86
        y:
          type: fixed
          value: 119
        width:
          type: percentage
          value: 100
        height:
          type: lineHeight
          value: 1
        anchor:
          x: 1
          y: 1
        textColor: "#FFA4A4"
        fontOutline:
         enable: true
         lineWidth: 4
         lineColor: rgba(70, 0, 0, 1)
        fontShadow:
         enable: false
         shadowOffset:
          x: 2
          y: 2
         shadowColor: rgba(32, 32, 32, 0.6)
         shadowBlur: 0
        text: "${data.hp}" 

A straight-forward, rectangular gauge. Generally used for elements such as HP bars. Allows for a gradient and can be rotated.

         type: Gauge
        x:
          type: fixed
          value: 4
        y:
          type: percentage
          value: 74
        width:
          type: percentage
          value: 95
        height:
          type: fixed
          value: 8
        anchor:
          x: 0
          y: 1

        gaugeOutline:
          enable: true
          lineWidth: 1
          lineColor: rgba(16, 16, 16, 1)
        gaugeColor1: "#52ff4e"
        gaugeColor2: "#52ff4e"

        bind: true
        rate: ${data.hpRate} 

A type of gauge that uses a source image to mask off instead of a rendered rectangle.

       type: ImageGauge
        x:  # Horizontal position
          type: fixed
          value: 25
        y: # Vertical position
          type: fixed
          value: 115
        imageName: "battle_hud/HP_Meter" # Source image

        bind: true # Binds for real time updating
        rate: ${data.hpRate} # What is being bound 

A complex type that is generally used for grid like elements such as actor states. Often has its own Lunatic block to define how the grid itself is rendered. Somewhat like a window within a window.

       type: grid
        x: # Horizontal position
          type: fixed
          value: 30
        y: # Vertical position
          type: fixed
          value: 113
        width: # Width of entire grid
          type: fixed
          value: 125
        height: # Height of entire grid
          type: fixed
          value: 25
        anchor: # Anchor position of grid
          x: 0
          y: 0
        horizontal: true # Whether the grid is horizontal or not
        maxCols: 5 # Max number of columns in the grid
        limit: 5 # Max number of objects in the grid
        bind: true # Binds so updates in real time
        itemList: ${data.allIcons} # What is being bound 

A rarely used component that calls from the icon file. Often used for elements such as actor states and items. The above is an example of an icon type component under a grid type component.

       components: # States this as components of grid type components
          StateIcon: # Name of component
            type: icon # Icon type
            x: # Horizontal position in grid
              type: fixed
              value: 0
            y: # Vertical position in grid
              type: fixed
              value: 0
            anchor: # Anchor of icon
              x: 0
              y: 0
            iconSet: "IconSet" # Defines which icon set source file is used
            iconIndex: "${data}" # Tells engine what icon to use

        template: # defines template of the grid
          type: FreeLayout
          components: # Defines what is in the grid
            - StateIcon

Allows for the rotation of components. Largely used for gauges that drain in directions under than from right to left and other elements that require rotation (to save having multiple source images, often).

       pivot:
         x: 0
         y: 1
        rotation: 270 

Vertical Atlas is an alternate version of Source Rect that allows for more automated source image splitting. Instead of manually defining the source area, this command tells the engine to split the image into equal parts and use them as the sources sequentially. While it is not nearly as flexible as source rect since it requires images to be set up in a specific why, it makes automating source rect for a vertical line of buttons extremely easily. Use instead of source rect when you can.

     verticalAtlas: 3 # Indicates how many equal pieces the source image is split into. Think of it as a spritesheet.
      Anchor:  # Determines the starting position of image splitting
        x: 0
        y: 0 

Source Rect is a method of telling Luna to only use a portion of a source image rather than the entire image. This allows for the possibility of using only a single image to define all UI elements and may help with preloading issues. It is also possible to use sourceRect within a conditional.

    sourceRect: # Declares the below as sourceRect
     x: # Horizontal starting position of source draw box
       type: percentage # Functions the same as in all blocks. Can be fixed for pixels instead of percentage 
       value: 0
     y: # Vertical starting position of source draw box
       type: percentage # Functions the same as in all blocks. 
       value: 50
     width: # Determines the width of the source draw box 
       type: percentage
       value: 100
     Height: # Determines the height of the source draw box 
       type: percentage
       value: 100 

Conditions are the bread and butter for Block 4 customization when changing the way a certain thing is rendered or if it even is rendered when certain conditions are true. At its simplest it allows for the switching of a button graphic based on selection. At its most complex, it can go as far as allowing a degree of visual customization based on elements such as items equipped and switch and variable status.

      conditions: # A conditional statement that changes how the above is rendered assuming something is true. 
        isHope: # Name of condition
         condition: $gameParty.menuActor().index() === 1 # What the condition that needs to be true actually is. 
         config: # Marks what changes should be made to the configuration if the above is true
           offsetY: # Vertical offset
             type: fixed
             value: 11