Difference between revisions of "Luna Engine Configuration Guide"
(→Part 4: Block 3 - Events/Animations) |
|||
(5 intermediate revisions by the same user not shown) | |||
Line 64: | Line 64: | ||
==Common Config Commands== | ==Common Config Commands== | ||
+ | A list of important commands that you will most likely need when creating your Luna Engine Modifications. | ||
<nowiki>type: <string> </nowiki> | <nowiki>type: <string> </nowiki> | ||
Line 72: | Line 73: | ||
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. | 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. | ||
+ | |||
+ | <nowiki>additionMode: true/false </nowiki> | ||
+ | Lunatic only. By default, enabling the Lunatic customization of a window erases the original content. By enabling additionMode, it will retain the original content. | ||
+ | |||
+ | <nowiki>Window Extend: WindowName </nowiki> | ||
+ | Window extend means use that window's luna configuration and add your own configuration. | ||
<nowiki>x: <number> </nowiki> | <nowiki>x: <number> </nowiki> | ||
Line 82: | Line 89: | ||
<nowiki>image: <string> </nowiki> | <nowiki>image: <string> </nowiki> | ||
+ | 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> | ||
Line 344: | Line 351: | ||
Targeting the “HpBar” component defined for the “BattleStatus” window in Block 4: Lunatic. | Targeting the “HpBar” component defined for the “BattleStatus” window in Block 4: Lunatic. | ||
− | <nowiki>target: BattleStatusHpBar <nowiki> | + | <nowiki>target: BattleStatusHpBar </nowiki> |
Targeting Lunatic item 0 in the “BattleStatus” window as defined in Block 4: Lunatic. | Targeting Lunatic item 0 in the “BattleStatus” window as defined in Block 4: Lunatic. | ||
Line 521: | Line 528: | ||
x: 0 | x: 0 | ||
y: 0 | y: 0 | ||
− | imageName: "battle_hud/Actor${data.actorId}" # Source file of image | + | imageName: "battle_hud/Actor${data.actorId}" # Source file of image</nowiki> |
Defines the component as text. Standard configuration format for fonts applies. Used for rendering predetermined text generally. | Defines the component as text. Standard configuration format for fonts applies. Used for rendering predetermined text generally. |
Latest revision as of 20:15, 26 July 2019
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
A list of important commands that you will most likely need when creating your Luna Engine Modifications.
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.
additionMode: true/false
Lunatic only. By default, enabling the Lunatic customization of a window erases the original content. By enabling additionMode, it will retain the original content.
Window Extend: WindowName
Window extend means use that window's luna configuration and add your own configuration.
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"
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:
- The start position
- 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
Targeting Lunatic item 0 in the “BattleStatus” window as defined in Block 4: Lunatic.
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.
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