Skip to content

Instantly share code, notes, and snippets.

@desht

desht/theming.md

Created August 14, 2024 10:20
Show Gist options
  • Save desht/a879ab941c0582dc0570603204ce3bf9 to your computer and use it in GitHub Desktop.
Save desht/a879ab941c0582dc0570603204ce3bf9 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
theming.md

Hello and welcome to Mikey's "I read the code so here is how I think it works" workshop

Firstly: Themes are just a .txt file that tells quests how to look. Most components will use this for their styling. If they don't. Let us know! Not many people use this system

Secondly: Themes are handled by placing a ftbquests/ftb_quests_theme.txt file in your resource pack (kubejs works here)

The fun stuff

Properties

  • color: A colo(u)r property is a RGBA colour code but it supports a bunch of things so here goes
    • "#00A8FF" (Hex codes are supported)
    • "#FF00A8FF" (Alpha supported (First 2) hex codes are supported
    • Then the following presets are supported: transparent, black, dark_gray, gray, white, red, green, blue, light_red, light_green, light_blue
  • icon: Another fun one, this can be handled using the following:
    • An icon is a string value like the following item:minecraft:diamond
    • But an icon and support many different types (Not just items)
      • color:{value} (See above)
      • bullet:{color_value} is a simple bullet-point icon (drawn in code, rather than as a bullet texture)
      • http, https, file: Loads a resource from disk or a remote location. Please don't use remote locations that aren't on our CDN
        • All of these take a value like https://example.com, file://C:/Location
      • hollow_rectangle:{color} The name says it all, it makes a hollow rectangle
      • part:{icon} is used for drawing nine-sliced widgets using an existing texture and corner-size definition
      • builtin indicates that the icon is drawn by the mod using an internal class to do the work
      • Finally, if you do not provide one of these keywords, and instead do something like ftbranks:textures/gui/something.png it will just try to do a normal asset icon
  • But now! Here is the fun stuff...
    • Properties: Using a ; you can signify that an icon has specific properties. These are as follows (I'll show an example at the end btw)
      • padding={int_value} Icon padding (all directions (left, right, up, down))
      • border={color_value} see colour description above.
        • You can give this rounded corners by adding border_round_edges=true
      • color={color_value} See above for colours but this will give the icon a standard colour under all the other options
      • tint={color_value} See above again. But this adds an overall tint to the icon
      • The distinction between color and tint is subtle and the effect often depends on the specific icon type. If in doubt, experiment!
      • Finally, these are added together using a ; meaning a full example might look like this
        • icon:minecraft:diamond;padding=5;border=#00A8FF;border_round_edges=true;color=blue;tint=#A8FFFFFF
  • double: This one is simple. It's just a double (1.0D)
  • int: (See above)
  • string: (See above)

Well! Wasn't that fun. Now we know all about properties. As you can tell, the colour and icon properties are pretty powerful!

Now we get onto the fun stuff. How do you use this in quests? Well as we said above it's all configured in the ftb_quests_theme.txt

As of right now, the quest themes system supports the following values

Overall

  • background: {icon_prop}
  • extra_quest_shapes: {string} (Please note, this is split using a ,)
  • text_color: {color_prop}
  • hover_text_color: {color_prop}
  • disabled_text_color: {color_prop}

Widgets

Widgets are most of the UI containers (IIRC)

  • widget_border: {color_prop}
  • widget_background: {color_prop}
  • symbol_in: {color_prop}
  • symbol_out: {color_prop}
  • button: {icon_prop}
  • panel: {icon_prop}
  • disabled_button: {icon_prop}
  • hover_button: {icon_prop}
  • context_menu: {icon_prop}
  • scroll_bar_background: {icon_prop}
  • scroll_bar: {icon_prop}
  • container_slot: {icon_prop}
  • text_box: {icon_prop}

Icons

  • check_icon: {icon_prop} This defaults to builtin - using the CheckIcon class in FTB Quests
  • add_icon: {icon_props} This defaults to builtin - using a complex render but uses the symbol_in and symbol_out colours

Overall quest book icons

  • alert_icon: {icon_prop}
  • support_icon: {icon_prop}
  • wiki_icon: {icon_prop}
  • wiki_url: {icon_prop}
  • pin_icon_on: {icon_prop}
  • pin_icon_off: {icon_prop}
  • editor_icon_on: {icon_prop}
  • editor_icon_off: {icon_prop}
  • hidden_icon: {icon_prop}
  • link_icon: {icon_prop}
  • save_icon: {icon_prop}
  • settings_icon: {icon_prop}
  • prefs_icon: {icon_prop}
  • close_icon: {icon_prop}
  • emergency_items_icon: {icon_prop}
  • guide_icon: {icon_prop}
  • modpack_icon: {icon_prop}
  • reward_table_icon: {icon_prop}
  • shop_icon: {icon_prop}
  • collect_rewards_icon: {icon_prop}
  • delete_icon: {icon_prop}
  • reload_icon: {icon_prop}
  • download_icon: {icon_prop}
  • edit_icon: {icon_prop}
  • move_up_icon: {icon_prop}
  • move_down_icon: {icon_prop}

Task specific

  • checkmark_task_active: {icon_prop}
  • checkmark_task_inactive: {icon_prop}

Quest window

  • icon: {icon_prop}
  • full_screen_quest: {int_prop}
  • tasks_text_color: {color_prop}
  • rewards_text_color: {color_prop}
  • quest_view_background: {icon_prop}
  • quest_view_border: {color_prop}
  • quest_view_title: {color_prop}
  • quest_completed_color: {color_prop}
  • quest_started_color: {color_prop}
  • quest_not_started_color: {color_prop}
  • quest_locked_color: {color_prop}
  • dependency_line_texture: {icon_prop}
  • dependency_line_completed_color: {color_prop}
  • dependency_line_uncompleted_color: {color_prop}
  • dependency_line_requires_color: {color_prop}
  • dependency_line_required_for_color: {color_prop}
  • dependency_line_selected_speed: {double_prop}
  • dependency_line_unselected_speed: {double_prop}
  • dependency_line_thickness: {double_prop}
  • quest_spacing: {double_prop}
  • pinned_quest_size: {double_prop}
  • left_arrow: {icon_prop}
  • right_arrow: {icon_prop}

Tagging

You may have noticed a [*] line at the very top of the ftb_quests_theme.txt file. Lines like this act as filters, limiting which quests that theming should be applied to. The default filter, a *, indicates that anything below this should apply to all quests, so this is the fallback behaviour.

You can add more [...] lines if you want. Between the [] brackets, put either a quest ID (the long hex ID you can get by right-clicking a quest and selecting "Copy ID"), or a quest tag. Quest tags are just freeform strings, which you can add to quests via the "Edit" context menu action - see the "Tags" list property in the edit screen.

Example:

[bluequests]
quest_not_started_color: #FF0000FF

[redquests]
quest_not_started_color: #FFFF0000

Now, adding the "bluequests" tag to any quest will make it render blue when it hasn't yet been started, and similarly for the "redquests" tag. Every other theming property is inherited from the [*] defaults.

In general, it's better to use tags than literal quest ID's, just because tags are lot more flexible.

Custom Shapes

You can have custom quest shapes if the builtin shapes aren't sufficient for your needs. To do this:

  • Pick a shape name (freeform text, keep it short and meaningful, one word) and add it to the comma-separated list in extra_quest_shapes
  • Place three texture files for your new shape name in your resource pack, accessible as:
  • Add a translation for your shape in a lang file: "ftbquests.quest.shape.<shapename>": "New Shape"

Well that was a lot... Tell me about it.

Finally, there are a couple of side notes to this system

At any point in your .txt file, if you use {{ NAME }} in the value, it will assume you want to use the value of a different property. So this might looke like the following: quest_completed_color: {{rewards_text_color}}

It's important to note that these need to be the same (or compatible) property types for a replacement to be successful.

Some of the above values have mins and maxs. You should check here: https://github.com/FTBTeam/FTB-Quests/blob/main/common/src/main/java/dev/ftb/mods/ftbquests/quest/theme/property/ThemeProperties.java for those min and max values

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment