ORK Framework Logo - RPG Editor for Unity
  • Features
  • Showcase
  • Guide
    • Documentation
    • Tutorials
    • API
  • ORK 2
    • Tutorials
    • Plugins
    • API
  • Support
  • Forum
  • Get ORK

2D RPG Quickstart

30
  • START 2D RPG Quickstart
  • 01 Initial Setup
  • 02 Player Setup
  • 03 Music & Scenes
  • 04 UI System Setup
  • 05 UI Boxes
  • 06 Flying Texts
  • 07 Status Values
  • 08 Status Effects
  • 09 First Abilities
  • 10 Fighter Setup
  • 11 First Enemies & Battle AI
  • 12 Battle System Setup
  • 13 Animating Battle Start and End
  • 14 Random Battles
  • 15 Animating Actions
  • 16 Player Battle HUD
  • 17 Elemental Attacks
  • 18 Animating More Actions
  • 19 Inventory & Loot
  • 20 Equipment
  • 21 Loot, Start Equipment & Viewers
  • 22 Magic Abilities
  • 23 Caster Setup
  • 24 More Enemies
  • 25 Start Menu & Save Games
  • 26 Menu Screens
  • 27 Interactions
  • 28 Item Collectors
  • END 2D RPG Quickstart

3D RPG Quickstart

30
  • START 3D RPG Quickstart
  • 01 Initial Setup
  • 02 Player Setup
  • 03 Music & Scenes
  • 04 UI System Setup
  • 05 UI Boxes
  • 06 Flying Texts
  • 07 Status Values
  • 08 Status Effects
  • 09 First Abilities
  • 10 Fighter Setup
  • 11 First Enemies & Battle AI
  • 12 Battle System Setup
  • 13 Animating Battle Start and End
  • 14 Random Battles
  • 15 Animating Actions
  • 16 Player Battle HUD
  • 17 Elemental Attacks
  • 18 Animating More Actions
  • 19 Inventory & Loot
  • 20 Equipment
  • 21 Loot, Start Equipment & Viewers
  • 22 Magic Abilities
  • 23 Caster Setup
  • 24 More Enemies
  • 25 Start Menu & Save Games
  • 26 Menu Screens
  • 27 Interactions
  • 28 Item Collectors
  • END 3D RPG Quickstart

Status System Setup

24
  • START Status System Setup
  • 01 Status Values
  • 02 Status Development
  • 03 Attack/Defence Modifiers
  • 04 Status Effects
  • 05 Formulas
  • 06 Ability & Item Types
  • 07 Abilities Part 1: Attacks
  • 08 Abilities Part 2: Support & Sabotage
  • 09 Abilities Part 3: Elemental Magic
  • 10 Items
  • 11 Equipment Part 1: Slots & Slot Set Templates
  • 12 Equipment Part 2: Weapons
  • 12.5 (Optional) Equipment Part 2.5: Weapons
  • 13 Equipment Part 3: Shields, Armor & Accessories
  • 13.5 (Optional) Equipment Part 3.5: Shields, Armor & Accessories
  • 14 Equipment Part 4: Available Equipment Templates
  • 15 Loot
  • 16 Battle AIs
  • 17 Combatants Part 1: General Settings
  • 18 Combatants Part 2: Players
  • 19 Combatants Part 3: Enemies
  • 20 Combatant Groups
  • END Status System Setup

3D RPG Playground

53
  • START 3D RPG Playground
  • 01 Player Setup
  • 02 Start Menu
  • 03 First Interaction
  • 04 Music
  • 05 Areas
  • 06 Collecting Items
  • 07 Displaying Equipment
  • 08 Combatant Prefabs, Icons & Portraits
  • 09 Combatant Animations
  • 10 Camera Positions
  • ANIM 01 Battle Start/End Schematics
  • ANIM 02 Use, Cast & Camera
  • ANIM 03 Abilities & Items
  • ANIM 04 Physical Attacks
  • ANIM 05 Special Actions
  • BATTLE 01 Battle Menu
  • BATTLE 02 Prepare for Battle
  • TURN 01 Turn Based Setup
  • TURN 02 Turn Order HUD
  • ATB 01 Active Time Setup
  • ATB 02 Cast Times
  • ATB 03 Timebar HUD
  • BATTLE 03 The First Battle
  • BATTLE 04 Hunting Move AI
  • BATTLE 05 Spawning Combatants
  • 11 Save Games
  • MENU 01 UI Boxes
  • MENU 02 Template HUDs
  • MENU 03 Overview Menu
  • MENU 04 Menu Screens
  • 12 Shop
  • BATTLE 06 Random Battles
  • DUNGEON 01 Enter the Dungeon
  • DUNGEON 02 The Trapdoor
  • DUNGEON 03 Enemies on Level 1 & 2
  • DUNGEON 04 Traps on Level 3
  • DUNGEON 05 Going Deeper
  • 13 Bestiary (+MENU+ANIM)
  • QUEST 01 Hunting Quests (+MENU)
  • QUEST 02 Guard NPC
  • QUEST 03 Forest Ruin Cheese
  • QUEST 04 Witch NPC with Cheese
  • QUEST 05 Quest Mark HUDs
  • 14 Research Trees (+MENU)
  • CRAFT 01 Crafting Materials
  • CRAFT 02 Crafting Recipes
  • CRAFT 03 Crafting Menu
  • CRAFT 04 Crafting Proficiency & Critical Crafting
  • CRAFT 05 Materials Loot
  • 15 Changing Choice Dialogue
  • 16 Follow Me!
  • BATTLE 07 Sequence Loot Dialogue

3D Action RPG

20
  • START 3D Action RPG
  • 01 Status System Setup
  • 02 Player Setup
  • 03 Player Weapon
  • 04 Player Attacks
  • 05 Enemy: Chomper
  • 06 Chomper Attack
  • 07 Hit & Death
  • 08 HUDs
  • 09 Rolling on the Floor
  • 10 Enemy: Spitter
  • 11 Spit Attack
  • 12 Potion
  • 13 Grenade
  • 14 Item HUD
  • 15 Enemy: Grenadier
  • 16 Grenadier Melee Attacks
  • 17 Grenadier Flamethrower
  • 18 Item Drops
  • END 3D Action RPG

2D Grid Battle RPG

17
  • START 2D Grid Battle RPG
  • 01 Player Setup
  • 02 Prefab & Music Setup
  • 03 Randomizing Combatants
  • 04 UI Setup
  • 05 Battle Start, End & Phase Schematics
  • 06 Battle System Setup
  • 07 Battle Grid Setup
  • 08 Grid Move
  • 09 Forest Battle Grid
  • 10 Battle AI
  • 11 Ability Ranges
  • 12 Death & Use Schematics
  • 13 Attack Schematic
  • 14 Shoot Schematics
  • 15 Battle Selection Interaction
  • END 2D Grid Battle RPG

Schematics

10
  • Simple Start Schematic
  • Battle Start Schematic
  • Battle End Schematic
  • Moving to Target and Back
  • Animating a Base Attack
  • Animating a Magic Ability
  • Animating Target Selection
  • Grid Movement
  • Open and Close UI Animations
  • Flying Text Mover

UI Setups

16
  • Unity UI: Initial Setup
  • Unity UI: TextMesh Pro Setup
  • Unity UI: UI Box
  • Unity UI: Flying Text
  • Unity UI: Dragging Notification
  • Unity UI: Canvas with Screen Space Camera
  • Unity UI: Interaction HUD
  • Unity UI: Simple Player HUD
  • Unity UI: Quest HUD
  • Unity UI: Battle Actions HUD
  • Unity UI: Shortcuts HUD
  • Unity UI: Currency HUD
  • Unity UI: Tooltip HUD
  • Unity UI: Control HUD
  • Unity UI: Attack Modifiers
  • Unity UI: Defence Modifiers

Gameplay Bits

13
  • 2.5D Setup
  • Body Part Weakpoint
  • Click Attack
  • Combining Input Origins
  • Combining Status Value Flying Texts
  • Fun With Flying Text
  • HUD Effects With Conditional Schematics
  • Inventory Containers
  • Local Multiplayer
  • Multi Interaction Controllers
  • Target Selection Lines
  • World Space HUD
  • World Space Dialogue
  • Home
  • Guide
  • Tutorials
  • UI Setups
  • Unity UI: Simple Player HUD
View Categories

Unity UI: Simple Player HUD

Create a simple player HUD using the Unity UI module.

In this tutorial we’ll create a Combatant type HUD to display the player’s name and Consumable type status values (HP, MP) and applied status effects. How you name your status values (or how many you have) doesn’t really matter for this setup.

Your project’s UI system should already be set to use the Unity UI module. If not, check the initial setup tutorial for the Unity UI module.

You can download the completed HUD setup here:

Download HUD

This contains the player HUD, status value UI and status effect UI prefabs as well as the used images and font. You still need to use those prefabs for the Status Value UI, Status Effect UI and HUD setup in the Makinom editor.

Status Value UI #

First, we’ll set up the Status Value UI for our HP and MP status values. The Unity UI module uses a prefab for this – the HUD will use the prefab to create the individual status values.

We’ll create a UI that shows the status value’s name on the left side, it’s current value at the right side and a value bar. The value bar uses a sprite and fills it according to the status value’s filled state.

You can download a simple, white sprite below in case you don’t have any sprite at hand. Using a white color allows us to color the sprite however we want using the Image component’s Color setting.

Download White Sprite

Create the HUD element #

Creating our status value prefabs is pretty straight forward. We create a ready to use setup using the scene hierarchy’s context menu: ORK Framework > HUD > Status Value > Status Value – Name+Value+Bar (for prefabs)

This will create a Canvas to style our UI in – the canvas is set up as Makinom’s default canvas would be. The ready to use status value game object is also set up for us and we can now style it to our liking.

We don’t really see much, as it’s currently white text on a white image.

The structure of the created game object is as follows:

Value Bar Images #

We need to set the sprite the value bar will use. Change the Image components on the Empty Sprite and Value Sprite game objects (child objects of Canvas > Status Value > Value Bar).

  • Source Image
    Select the sprite you want to use.
    E.g. the White_16x16 sprite you can download above.

Set the Value Sprite to use a Filled image type.

  • Image Type
    Select Filled.
    This will let the value bar display only part of the image depending on the filled state of the value bar.
  • Fill Method
    Select Horizontal.
  • Fill Origin
    Select Left.

You can check how a partially filled status value will look like by changing the Fill Amount setting.

Styling #

You can change the color of the value bar using the Color setting of the value sprite’s Image component. I leave the Color you use to your imagination. I’ll use a Green color for the HP and a Blue color for the MP. You can also change the color of the Empty Sprite if you want.

The text for name and value is defined in the ORK HUD Status Text Content components on the Name and Value child objects. E.g. if you also want to also display the maximum value, change the Value child object’s text to <value>/<valuemax>.

I’m using the following text for the Name:

  • Default Content (Text)
    Set to: <shortname>

The <shortname> text code will use the status value’s short name – and if no short name is used, it’ll use the name.

And the following text for the Value:

  • Default Content (Text)
    Set to: <value>/<valuemax>

Displaying the text of name and value is handled by the TextMeshPro – Text (UI) components on the Name > Text and Value > Text child objects. This is where you can change the font, font size, font color, etc.

I’m using a smaller font size.

  • Font Size
    Set to 14.

You can also further style the setup as you like, e.g. I’ll let the value bar go from center to bottom instead of the whole size.

Layout Element #

We add a Layout Element component to the the Status Value game object.

  • Preferred Height
    Enable this setting and set the value to 20.

This ensures the status value will have a height of at least 20 when it’s added to layout groups (which we’ll use).

Create Prefabs #

We’ll create 2 prefabs out of our status value game object (i.e. Status Value, not the Canvas). You can either create 2 individual prefabs or a prefab and a prefab variant.

One prefab for the HP (green color in my setup) and one prefab for the MP (blue color in my setup). The color is the only difference in my setup, but you can style them however you like, e.g. use different sprites.

You can remove the game object from the scene after creating the prefab.

Status Value Setup #

Next, we’ll set up the Status Value UI in the HP and MP status values with our prefabs.

Open the Makinom editor, navigate to Status > Status Values.

(HP) UI Settings > Custom Status Value UI #

Select our HP/health status value (Consumable type).

  • Own Status Value UI
    Enable this setting.
  • UI Prefab
    Select the HP prefab you just created.

(MP) UI Settings > Custom Status Value UI #

Select your MP/mana status value (Consumable type).

  • Own Status Value UI
    Enable this setting.
  • UI Prefab
    Select the MP prefab you just created.

Alternatively, you can also define a Key Status Value UI instead of setting the default UI. In this case, make sure to later also use the same UI key in the HUD Status Value List component setup.

Save Settings #

Don’t forget to save the changes you did in the Makinom editor via the Save Settings button at the bottom.

Status Effect UI #

Next, we’ll set up the Status Effect UI for status effects. The Unity UI module uses a prefab for this – the HUD will use the prefab to create the individual status effects.

We’ll create a UI that shows the status effect’s name at the bottom, it’s duration at the top and the icon in the background. Additionally, we’ll use the icon as a radial value bar for the duration.

Create the HUD element #

Create a ready to use setup using the scene hierarchy’s context menu: ORK Framework > HUD > Status Effect > Status Effect Content+Duration (for prefabs)

Like with the status value UI, this’ll create a ready-to-use setup for us that we’ll now adjust to our needs.

Rect Transform #

First, we adjust the size of the overall HUD element – this is handled on the Status Effect Content game object.

  • Width
    Set to 50.
  • Height
    Set to 50.

While this size can be controlled by the HUD displaying it, we’ll design it with this size in mind.

Duration Text #

Next, let’s adjust the duration text – this is handled on the Status Effect Content > Duration Text child object.

The ORK HUD Status Text Content component handles the content that’ll be displayed. It already is set up as we need it, using the Status Effect type and the <duration> text code to display the duration of the effect.

The TextMeshPro – Text (UI) component handles how the text is displayed. Adjust the following settings.

  • Font Size
    Set to a smaller size, e.g. I’m using 10.
  • Vertex Color
    Change the text’s color to a color you like – e.g. I’m using a red color.
  • Alignment
    Set to Center and Top.
  • Wrapping
    Select Disabled.

Name Text #

Now, we’ll adjust the duration text – this is handled on the Status Effect Content > Content > Text child object.

The TextMeshPro – Text (UI) component handles how the text is displayed. Adjust the following settings.

  • Font Size
    Set to an even smaller size, e.g. I’m using 8.
  • Vertex Color
    Change the text’s color to a color you like – e.g. I’m using a red color.
  • Alignment
    Set to Center and Bottom.
  • Wrapping
    Select Disabled.

Icon Value Bar #

We want to use the icon as a value bar to show the duration.

First, we’ll add an empty game object to the Status Effect Content > Content child object, which will manage the bar. We’ll use an empty game object for this, as the bar’s game object can be disabled if the bar isn’t used, hiding all content, e.g. by a status effect without a duration.

Add a HUD Value Bar (Sprite) component to the empty game object and change the following settings.

  • Value Image
    Select the Image component on the Status Effect Content > Content > Image child object.
  • Change Fill Amount
    Enable this setting.

Next, add an ORK HUD Value Bar Content component to the empty game object and change the following settings.

  • Value Type
    Select Status Effect Duration.
  • Unused Filling
    Select Full.
    Since we use the effect’s icon as the value bar, we need to make sure it’s filled if an effect doesn’t have a duration.
    Otherwise the icon might not be fully visible.
    This wouldn’t be needed for regular value bars, as they’ll get disabled (as part of the game object the component is on).

The value bar content automatically select’s the root’s HUD content provider and the sprite value bar we just added.

Now, we just need to set up the Image component displaying the icon to allow radial filling. Select the Status Effect Content > Content > Image child object.

To be able to change the settings we need, we’ll first need to select any sprite in the Source Image. So, just select whatever sprite you want, we’ll afterwards remove it again. Change the following settings

  • Image Type
    Select Filled.
  • Fill Method
    Select Radial 360.

Remove the Source Image by selecting None.

The finished setup looks something like this:

Create Prefab #

Create a prefab out of our status effect game object (i.e. Status Effect Content, not the Canvas). E.g. name the prefab Status Effect Radial Duration.

You can remove the game object from the scene after creating the prefab.

Status Effect UI Setup #

Next, we’ll set up the Status Effect UI in for all status effects with our prefab.

Open the Makinom editor, navigate to UI > UI Settings.

ORK UI Settings > HUD Settings > Default Status Effect UI #

These settings handle the default status effect UI for all effects.

  • UI Prefab
    Select the prefab you just created.

Alternatively, you can also define a Key Status Effect UI instead of setting the default UI. In this case, make sure to later also use the same UI key in the HUD Status Effect List component setup.

Save Settings #

Don’t forget to save the changes you did in the Makinom editor via the Save Settings button at the bottom.

HUD Prefab Setup #

Next, we’ll set up the actual HUD, starting with the prefab. The Unity UI module uses prefabs to create HUDs, i.e. your HUD’s setup is done in the scene view via game objects and components.

Creating the HUD #

We use the scene hierarchy’s context menu to create our base HUD: Makinom > HUD > HUD (Vertical Layout)

This creates an empty HUD with a vertical layout. We use a Vertical Layout Group to arrange the HUD’s content in a vertical list.

Rect Transform #

We adjust the width of the HUD.

  • Width
    Set to 300.

Content Size Fitter #

We’ll add a Content Size Fitter to the HUD to make it adjust it’s size to the displayed content.

  • Vertical Fit
    Select Preferred Size.

Image (Optional) #

We’ll add an Image component to display a background image in the HUD.

  • Source Image
    Select the Sprite you want to use, e.g. the BoxBlue from the UI assets (see the initial setup tutorial).
  • Color
    Select a color you want to use (optional).
    E.g. for the BoxBlue sprite, a white color with full alpha.

Adding HUD elements #

Now that we’ve got our basic HUD, it’s time to add some content to it.

Combatant Information #

We’ll add an ORK HUD Status Text Content to display the combatant’s name and level. See this documentation for details.

Right-click on the base HUD game object in the scene hierarchy and add it using the context menu: ORK Framework > HUD > Content > Status Text+Icon Content (TextMesh Pro) or Status Text Content (TextMesh Pro) (text only)

This adds the text content as a child object of the HUD. Change the text of the ORK HUD Status Text Content component:

  • Text
    Set to: <name>, Lvl <level>

Like we did for the status value UI prefabs, you can change the style of the text in the TextMeshPro – Text (UI) component on the Status Text Content > Text child object. E.g. I’ll use:

  • Font Style
    Select Bold.
  • Font Size
    Set to 20.
  • Vertex Color
    Select a white color with full alpha.

Remove the Status Text Content > Image child object, we’ll not display the combatant’s icon in the HUD.

Status Values #

We’ll add a HUD Status Value List to list the status values using their Status Value UI we just set up.

Again, right-click on the base HUD game object in the scene hierarchy and use the context menu: ORK Framework > HUD > Status Value > Status Value List (Vertical Layout)

This adds the status value list as a child object of the HUD. It contains another vertical layout, since it’ll add the individual status values to this game object. This way adding the status value during the game will not interfere with any additional HUD elements we’ll add after the status values.

The default setup is already correct for what we want to do (show Consumable status values with the default UI). To make sure, let’s check it:

  • List Status Values
    Select Status Value Type.
  • Status Value Type
    Select Consumable.
  • UI Key
    Nothing defined here (empty text).

Status Effects #

We’ll add a HUD Status Effect List to list the status effects using their Status Effect UI we just set up.

Again, right-click on the base HUD game object in the scene hierarchy and use the context menu: ORK Framework > HUD > Status Effect > Status Effect List (Grid Layout)

This adds the status effect list as a child object of the HUD. It contains a grid layout, since it’ll add the individual status effects to this game object. Let’s adjust the grid layout:

  • Cell Size
    Set to X=50, Y=50.
  • Spacing
    Set to X=10, Y=10.

As for the HUD Status Effect List component, the default setup is already correct for us, but you can also adjust it to your liking, e.g. limiting the number of displayed effects, combine stacked effects, etc.

Create Prefab #

You might be wondering about the placement of the HUD. We’ll use a UI Layout to handle this, but you can also use the actual HUD game object’s position if you want. In that case, place the HUD on the canvas where you want it to display.

That’s already everything we need to do. Create a prefab out of the HUD, e.g. save it as Player HUD.

You can now remove the canvas (and HUD) from the scene.

HUD Setup #

As a last step, we’ll set up the HUD in the Makinom editor.

UI Layout #

First, we create a UI Layout that’ll handle placing the HUD for the player and other player group members. We want the player HUDs to display at the lower right corner, adding additional combatants to the left. You can learn more about UI layouts in the Makinom documentation.

Open the Makinom editor, navigate to UI > UI Layouts and either change the Default layout (if you haven’t used it yet) or create a new UI layout.

UI Layout Settings #

  • Name
    Set to Player HUDs.
  • Layout Type
    Select List.

List Layout Settings #

  • Anchor
    Select Lower Right.
  • Padding
    Set to X=0, Y=0, Z=20, W=20.
  • Spacing
    Set to 20.
  • List Fill
    Select Horizontal.
  • Fill Anchor
    Select Lower Right.
  • Invert
    Enable this setting.
    This will start with the first HUD (the player) in the corner, adding others to the left.

HUD #

Next, we’ll set up the HUD. Navigate to UI > HUDs, add a new HUD and change the following settings.

HUD Settings #

  • Name
    Set to Player.
  • HUD Type
    Select Combatant.
  • Auto Display
    Enable this setting.
    This will automatically show the HUD. If you use a HUD only as a  template, make sure to disable this setting.

Combatant Settings #

  • Player
    Enable this setting.
  • Player Group Scope
    Select Battle.
    This will show the battle group members of the player group.
  • Multi-Box Layout
    Select UI Layout.
  • UI Layout
    Select Player HUDs (the UI layout we just created).

Display Conditions #

You can use these settings to only show the HUD based on conditions. E.g. only during battles, etc.

We’ll ignore this for now.

Unity UI #

  • UI Layer
    Select HUDs (or any other UI layer you want the HUD to display on).
    UI layers are used to organize your UI, learn more in the Makinom documentation.
  • HUD Prefab
    Select the HUD prefab you just created.

Schematics #

You can optionally use schematics to animate opening and closing the HUD, e.g. fading it in/out. You can also set up default schematics for all HUDs.

See this tutorial for details.

Save Settings #

Once again, don’t forget to save the changes you did in the Makinom editor via the Save Settings button at the bottom.

Testing #

Hit play and test your HUD! Naturally, you need a combatant in your player group for this to work.

If you’re not satisfied with the look, open up the prefabs for the HUD and/or status values and adjust them to your liking.

Alternative Setup #

You can also create an alternative setup without using Status Value UI prefabs and the HUD Status Value List.

Use HUD Status Value components to define a single status value in the HUD instead of the HUD Status Value List component. Similar to the status value prefabs we created, you can use the scene hierarchy context menu: ORK Framework > HUD > Status Value > Status Value – Name+Value+Bar (single)

The styling process is the same like the prefabs. All you need to do is define the displayed status value in the HUD Status Value component.

This setup avoids creating prefabs in-game and can improve the performance of your UI (creation).

UI
Share This Article :
  • Facebook
  • X
  • LinkedIn
  • Pinterest
Table of Contents
  • Status Value UI
    • Create the HUD element
      • Value Bar Images
      • Styling
      • Layout Element
      • Create Prefabs
    • Status Value Setup
      • (HP) UI Settings > Custom Status Value UI
      • (MP) UI Settings > Custom Status Value UI
    • Save Settings
  • Status Effect UI
    • Create the HUD element
      • Rect Transform
      • Duration Text
      • Name Text
      • Icon Value Bar
      • Create Prefab
    • Status Effect UI Setup
      • ORK UI Settings > HUD Settings > Default Status Effect UI
    • Save Settings
  • HUD Prefab Setup
    • Creating the HUD
      • Rect Transform
      • Content Size Fitter
      • Image (Optional)
    • Adding HUD elements
      • Combatant Information
      • Status Values
      • Status Effects
    • Create Prefab
  • HUD Setup
    • UI Layout
      • UI Layout Settings
      • List Layout Settings
    • HUD
      • HUD Settings
      • Combatant Settings
      • Display Conditions
      • Unity UI
      • Schematics
    • Save Settings
  • Testing
  • Alternative Setup
Sitemap
  • Features
  • Showcase
  • Guide
    • Documentation
    • Tutorials
    • API
  • ORK 2 Hub
    • Tutorials
    • Plugins
    • API
  • Support
  • Forum
  • Get ORK
  • Contact
  • Blog
  • Makinom
  • gamingislove.com
Categories
  • News (69)
  • ORK 2 (137)
    • Tutorial (137)
      • Game tutorial (50)
      • Gameplay (32)
      • How-to (55)
  • Release (151)
Search

© 2015 Gaming is Love e.U.

Disclosure: This site may contain affiliate links, which means I may receive a commission if you click a link and purchase something that I have recommended. While clicking these links won’t cost you any money, they will help me fund my development projects while recommending great assets!