# 🤔 How It Works

Understanding how Sunshine Health Bars works is easy if you think of it like building with LEGO® blocks. You don't need to know how to code, just the order of the pieces.

The workflow is always the same. Let's follow an example of creating a custom bar for a "SkeletonKing" boss.

#### 1. The Pieces (Images)

Everything starts with your image files (`.png`). These are the basic "bricks" of your design: a heart, a frame, a skull icon, etc. You place them in the `plugins/SunshineHealthBars/images/` folder.

**Example:** First, you would create a small image for your boss, maybe a skull icon. You save it as `king_skull.png` and place it in a sub-folder for organization: `images/boss/king_skull.png`.

#### 2. The Catalog (Image Definitions)

To let the plugin know your images exist, you "register" them in a definition file in the `image_definitions/` folder. Here, you give each image a unique name (ID) and define its size.

**Example:** You create a file named `image_definitions/boss_pack.yml` and register the skull image:

```
# In image_definitions/boss_pack.yml
skeleton_king_icon:
  texture: 'boss/king_skull'  # The path inside the 'images' folder
  height: 10
  ascent: 8
```

#### 3. The Builds (Components)

A "component" is a pre-designed piece you can reuse. For example, you can design the visual style of a health bar with 10 different health steps. You save it in the `components/` folder, and it's ready to use.

**Example:** Let's create a special level display for our boss. We create a file named `components/level_displays/boss_level_display.yml` and combine our new icon with a placeholder for the mob's level:

```
# In components/level_displays/boss_level_display.yml
format: '%sunshine_image_skeleton_king_icon% &e[Lvl. %sunshine_mob_level%]'
```

#### 4. The Blueprint (Layouts)

The "layout" is the final blueprint. This is where you bring everything together: "I want the mob's name at the top, the health bar component in the middle, and the level component below." You save this in the `layouts/` folder.

**Example:** We create `layouts/boss_layout.yml` to arrange our pieces:

```
# In layouts/boss_layout.yml
layout-lines:
  - line: '&c%sunshine_mob_name%'
    y-offset: 0.3

  - line: '%component_health_bar%' # We'll use a pre-made health bar component
    y-offset: 0
    scale: 1.2 # Make it bigger for a boss
    shadow: true # Our new feature!

  - line: '%component_level_display%' # Our new level display component
    y-offset: -0.3
```

#### 5. The Final Assignment (`mob_assignments.yml`)

This is the master file. Here, you make the final connection: "I want all mobs named 'SkeletonKing' to use the 'boss\_layout' I created."

**Example:** Finally, in the main `mob_assignments.yml` file, you add the configuration for your boss:

```
# In mob_assignments.yml
SkeletonKing: # The internal name of your MythicMob
  layout: 'boss_layout' # Our new layout file
  vertical-offset: 3.0
  components:
    health_bar: 'health-bar-sunshine' # Using a pre-existing style
    level_display: 'boss_level_display' # Our new component
```

**And that's it!** If you understand this flow (`Images -> Definitions -> Components -> Layouts -> Assignment`), you've already mastered 90% of the plugin.