Tutorial 5: Basketweaving (New Skill Tree)


Download the finished result of following this tutorial, for reference. Try creating the plug-in yourself first!

Download

This tutorial will show how to create new Skill Trees using the Campfire Dev Kit, similar to the Camping and Endurance skill trees found in Campfire and Frostfall. You will be able to access your skill tree from any lit campfire.

Skill Level: Advanced

This is an advanced tutorial and is targeted toward experienced modders.

You should be able to competently navigate the Creation Kit and feel comfortable writing new Papyrus scripts of moderate complexity.

This tutorial builds on many of the concepts found in previous tutorials. Do (or review) at least Tutorial 1 and Tutorial 2 before attempting this one, as some of the finer points and definitions specific to the Campfire Dev Kit will not be covered again.

This tutorial also assumes you have a working knowledge of how to manipulate and export a DDS texture using an image editing program. All examples shown below will be shown using Photoshop CS6 using the nVidia DDS Plug-In.

Many of the implementation details, such as what events advance your skill progress, how your perks affect the player, and so on, are left up to you.

Important Note

There is a lot of information in this tutorial. Please take your time working through it.

Once you begin to see how all of the pieces fit together, it will start to make sense quickly and you will probably have a lot of great new ideas of what you can create by leveraging this system!

What A Campfire Skill Tree Is (And Isn’t)

A Campfire skill tree is an interactive visual representation of a progression system. It visually represents the state of global variables using the nodes in the tree; if a perk rank global is 0, the star is dark; if it is 1 or greater, it shines, just like the “real” Skyrim perk system. When two connected nodes have been purchased, the line between them glows (again, like the real perk system).  It can also be themed to your liking (the arrangement of the nodes, the perk artwork, the names and descriptions, etc).

A Campfire skill tree is NOT the progression system itself! This is something you must create on your own. The Skill Tree system does not give you:

  • A method to progress a skill. You might want your skill to increase “every time the player gets hit”, or “every time they read a certain kind of book”, or “every time the player kills a certain kind of enemy”. You must define what events increase your skill and code this yourself. This is covered in brief in Appendix A.
  • A way to grant benefits / perks to the player character or others in a pre-packaged way. You must provide these, based on the global variables that the skill tree tracks and updates, and the events that the system can raise to your scripts. Appendix A covers a bit of this as well.

 

If you are a programmer familiar with the MVC pattern, the Skill System is the view and part of the controller of your progression system. It is up to you to define the underlying model.

This means that the Campfire Skill System is not a turn-key solution for an entirely new skill system. However, it does provide a large amount of flexibility to design, implement, and advance the skill system you want, and react to the global variables that the system increases in any way you see fit. And then, you can present this progression system in a very intuitive, attractive, familiar, and immersive way to the player that goes far beyond what you could do with an MCM menu or message boxes.

Anatomy of a Skill Tree

A Campfire skill tree is comprised of the following elements:

  • Nodes – These are the individual stars that the player can select. Each one represents a unique, advanceable boon to the player.
  • Lines – These connect the nodes, and give the skill structure and visualize the order of advancement.
  • Node Controller An invisible object that governs the behavior, placement, and removal of your skill tree.
  • Perk Art Plane – This is a floating piece of artwork that displays behind the nodes and lines. It helps theme the skill and adds to its visual appeal. It is a static plane with a 1024×1024 DDS texture (DXT3 compression) applied to it.
  • Perk Descriptions – These are message objects that display details about each node when the node is selected.
  • Skill Description – This is a message object that gives information about the overall skill and how the player must advance it.
  • Globals – There are a number of globals (detailed below) that will be used to store information about your skill tree.

 

These are the major components of your skill tree. We will step through creating each object.

Important Note

You may notice a striking omission from the above list of skill tree components: Perk forms! The reason for this is that a standard Perk object, in Skyrim, is but one of many different methods of applying an effect to the player. It is up to you to decide whether or not to use Perks, Spells, scripted effects, etc, in order to affect the player (and the world around them) in the way you want.

Because of this, and because of attempting to reduce confusion regarding compatibility with the actual Skyrim perk system, the system is now referred to in documentation as the “Campfire Skill System”, and trees are referred to as “Skill Trees”, instead of the “Campfire Perk System” and “Perk Trees”. However, in the code and script properties you’ll be working with, the term “perk” is used liberally.


Terminology

This tutorial assumes you have gone through at least Tutorial 1 and Tutorial 2, and already understand what a Position Reference is and what it is used for.

Throughout this tutorial, certain terms will be used specific to this system. For consistency, they are defined below.

Skill – Refers to the overall skill that the Skill Tree represents. It is an abstract concept, like “Camping”, “Hunting”, “Endurance”, “Fishing”, so on.

Skill Tree – The actual implemented tree that appears in-game.

Perk – An individual benefit unlocked by purchasing a rank in a given Node. Perk and Node may be used interchangeably throughout the tutorial.

Origin Node – The starting node. The only node that can be purchased without acquiring at least one rank in another node first.

Upstream Node – A node that comes after the current node, regardless of the shape or orientation of the skill tree. Also may be referred to as “after” or “above” the current node.

Downstream Node – A node that comes before the current node, regardless of the shape or orientation of the skill tree. Also may be referred to as “before” or “below” the current node.

Functionality Overview

The player is able to bring up skill trees by clicking the Skills option from a lit campfire.

Each node has a description and a rank. With available skill points, the player may purchase a rank in a node. Some nodes can offer more than one rank.

When a rank is purchased, a global variable increments.

Any script, condition function, spell, magic effect, etc, can use these perk rank globals in order to give the player special abilities or affect gameplay in some way.

A special SKSE Mod Event is generated each time a rank is purchased in any skill. This allows your scripts to check rank globals that they care about, and change the player state accordingly.

General Guidelines and Limitations

The Skill System allows for a good deal of flexibility, but because of performance, complexity, and other concerns, certain limitations were imposed. Also, you should consider how easy it is to understand and navigate your skill tree when designing it; keep your user’s experience in mind.

  • There must be one, and only one, origin node. Having only one origin node is a technical requirement. However, where it is located in the tree is not restricted; for consistency, it is encouraged that this be the bottom-most node in the tree.
  • You may have any number of upstream nodes from a given node (up to the max node count). There is no limit to how many nodes you can connect to going upwards.
  • You may have only 2 downstream nodes from any given node! This means you can only “converge” two progression paths at a time.
  • The system supports up to 12 nodes total per tree.
  • Each node can have any number of ranks.
  • The only requirement for purchasing a node is having purchased at least one rank in a downstream connected node. There is no support for minimum level, overall skill rank, secondary skill requirements, or any other requirement in order to purchase a rank in a node. If you buy a rank in a node, you are allowed to buy a rank in any node connected above it. The only node that can be purchased without having purchased another node is the origin node.
  • Your perk descriptions may display 0 to 2 incrementing numerical values. For instance, you might want a description that says, “Slightly improves basketweaving.” Or, “Improves basketweaving by 5%.”, where 5% increases by 5 each rank. Or, “Improves basketweaving by 5% and reduces chance of failed baskets by 10%”, where 5% and 10% increase each rank at the same or different rates.
  • In general, the skill should flow from bottom to top. Your origin node can be located anywhere, but make sure you put yourself in the user’s shoes, who (up to this point) has been using the Skyrim perk system and is used to starting at the bottom and working upwards. Make sure the tree flows naturally and the next node is visually obvious. Criss-crossing lines and other hard to visually understand paths are also discouraged.
  • Make sure to leave space between nodes! The collision box that allows players to click on a node is a bit crude and approximate. Make sure to leave enough space between nodes so that each node is easily selectable.

To highlight these guidelines, the following are valid and invalid skill tree configurations. The origin node is colored green.


Getting Started: Design

Before we ever open the Creation Kit, we need to design our skill. Having a solid design will make implementing it much easier later.

Pull out a pen and notebook and put on your game designer hat, and consider:

  • What is the name of the skill?
  • How will the skill advance? Does the player do something in particular? Do they go somewhere? Are you sure you can catch this event in a script?
  • How will the tree be themed? For instance, a Fishing tree might have the nodes arranged in the shape of a fish.

Once you’ve identified these broad items, you can begin planning each individual perk.

For each perk:

  • What is the name of the perk?
  • What does it improve, and by how much?
  • How many ranks does the perk have?
  • If the perk has multiple ranks, how much does the improvement increase each rank?
  • Does the perk improve more than one thing? (You can do any number of things with a perk rank global variable, but the perk description only supports up to 2 incrementing values.)

Finally, you should decide on the layout of your tree. (You may decide to do this before determining your individual perks, especially if you have a strong theme in mind. That’s perfectly fine.)


Tutorial Skill: Basketweaving

Our fictional skill for this exercise will be the Basketweaving skill. We decide that this skill should improve the player’s ability to create new woven baskets. We’re going to ignore the practicality and functional details of this skill, and just focus on the creation of the skill tree.

We decide that every time the player reads a special book on basketweaving, they gain progress in the Basketweaving skill.

We decide to theme the skill tree around a picture of a hand basket. We come up with the following shape for our tree:

(That looks vaguely basket-shaped, right? …right?)

We decide we like this design because it has two paths the player can choose from, it flows upwards nicely, it’s visually clean, and we like the theme behind it.

At this stage, it is very, very helpful to go ahead and number your perks. You’ll be referencing these later and, in general, it helps keep things straight.

Now that that’s done, go ahead and also label the connections between nodes. Go with a naming convention like “X to Y”, or simply “X-Y”, moving in ascending order. For instance, the line connecting node 1 and node 2 might be labeled “1 to 2” or simply “1-2”.

It might seem tedious, but this is again something that will come in handy in a while when we’re trying to organize everything and save us some time.

Now that we have our tree shape and numbered our nodes and lines, we can design the individual perks. After lots of deep thought, we come up with the following:

Perk 1: Basket Beginner

Create 1 / 2 / 3 /4 / 5 extra baskets each time you make a basket.

Has 5 ranks.

Perk 2: Red Basket Expert

Improves making red baskets by 5% / 10% / 15% / 20%.

Has 4 ranks.

Perk 3: Happy Basket Crafter

Every time you craft a basket, you are filled with joy.

Has 1 rank.

Perk 4: Travel Basket

Increases the player’s speed by 15% / 20% / 25% when carrying a basket.

Has 3 ranks.

Perk 5: Basket Master

When carrying a basket, the player has a 10% / 15% / 20% chance of intimidating enemies, and carry weight is increased by 50 / 60 / 70.

Has 3 ranks.

 

We’ve now got all of our perks planned out, what each of them will do, and what the skill tree looks like. Here is the final design.

Now we can fire up the Creation Kit and get to work!

IMPORTANT NOTE

It is possible to add a skill tree to an existing mod without requiring Campfire.esm as a dependency in the main plug-in. However, a few more steps are involved.

If optional Campfire support (without requiring Campfire.esm as a master) is very important to you, please stop here and go to Appendix D: Creating Skill Tree Without Campfire.esm Dependency.


Globals

There are a number of globals that are necessary in order to store data about our skill tree. Fire up the CK, start a new plug-in with Campfire.esm as a master (unless you just came back from following the instructions in Appendix D; in which case, welcome back!), and save it as Basketweaving.esp. Once loaded, create the following Skill-wide globals.

BasketweavingPerkPointProgress – Float. Start with value = 0.0. Ranges from 0.0 (0%) to 1.0 (100%). Indicates the amount of progress toward the next skill point.

BasketweavingPerkPoints – Short. Start with value = 0. The number of skill points available to spend.

BasketweavingPerkPointsEarnedShort. Start with value = 0. The total number of Basketweaving skill points earned so far.

BasketweavingPerkPointsTotalShort. Constant. The total number of skill points required to max out all ranks of every perk in this skill. Since we have 5 perks with 5, 4, 1, 3, and 3 ranks, start with value = 16.



Save Often!

Make sure to save your work often! This is a lengthy process and the Creation Kit could crash at any time, causing you to lose work.

Next, create the following perk rank globals. For each perk, there are two necessary globals: the current value global (represents the current rank of this particular perk) and the max value global (max number of ranks available for this perk).

They are all type Short. The max value globals are Constant. We’ll use the following naming convention and use the following values (based on how we designed these perks earlier).

Basket_PerkRank_BasketBeginner = 0

Basket_PerkRank_BasketBeginnerMax = 5

Basket_PerkRank_RedBasketExpert = 0

Basket_PerkRank_RedBasketExpertMax = 4

Basket_PerkRank_HappyBasketCrafter = 0

Basket_PerkRank_HappyBasketCrafterMax = 1

Basket_PerkRank_TravelBasket = 0

Basket_PerkRank_TravelBasketMax = 3

Basket_PerkRank_BasketMaster = 0

Basket_PerkRank_BasketMasterMax = 3


Messages

Next, we’ll create all of the message objects we’ll need. We’ll start with the Skill Description, which describes the overall skill.

Use the following template for skill descriptions:

SKILL NAME

Skill description goes here.

Description of how to increase the skill goes here.

Perks to increase: %.0f
Next perk progress: %.0f%%
Important Note
The system expects for the wildcard replacements (%.0f) to be in this specific order. It’s important that you follow this convention. Try to keep the description as short as possible, there is limited message box space.

For our Basketweaving skill, we settle on the following description:

BASKETWEAVING

The art of crafting magnificent baskets from simple materials.

Read books on basketweaving to earn perks. Each new perk requires a few more books.

Perks to increase: %.0f
Next perk progress: %.0f%%

Create a new Message object named Basket_SkillDesc in the CK and give it this message text. Add a single “Back” button as well. Make sure that “Message Box” is checked.

Next up are the individual Perk Descriptions.

Use the following template for perk descriptions:

Do something %.0f better than before.

Rank: %.0f/%.0f

Perks to increase: %.0f
Next perk progress: %.0f%%
Important Note
Again, the system expects for the wildcard replacements (%.0f) to be in this specific order. Do not deviate from this template.

Always add the following buttons:

0 – Choose Perk

1 – About Skill

2 – Back

“Choose Perk” should always have the following condition function added to it:

We settle on the following perk descriptions and create them in the CK.

In the next part of this tutorial, we’ll continue to flesh out our Basketweaving skill in the Creation Kit, as well as create our perk artwork that will appear in-game using Photoshop.