Designing a Character Sheet

schedule 45 min

Prerequisites:

  • A Rule System on Hedron

Goals:

  • Learn to design a new Character Sheet Layout
  • Learn to use Widgets

Once you've gotten situated on Hedron, you might be wondering, "how do I customize and build my own Character Sheet?" In this guide, we'll go over the details of how Characters Sheet work and building your own!

Refresher: How Sheets Work

As a reminder from Getting Started As a Player, Hedron approaches Character Sheets in a different way than how you might expect on first glance.

Specifically, we separate the idea of your character class, feats, chosen spells, and abilities (a.k.a. your character build), from the concept of how your character is viewed in session (a.k.a. your Sheet Layout). When you combine them together, you create a visual representation of your character that's easy to look at in session.

And of course, remember that because Sheets and Character builds are system-dependent (D&D 5E characters are different from Call of Cthulu Characters, for example), you will need to have your rule system set-up in order to build a character or the sheet layout.

In this guide, we'll focus on the lower path in the diagram — designing the sheet layout. If you're just interested in playing with an existing character sheet, you don't need to do this process. However, if you want to customize your sheet, here's the way to do it!

Basic Controls

Before we begin, here's some quick information on how to move around the sheet. Note, these controls are also available to users of your sheet, so if it looks good in the editor, it should look good in live usage!

Scroll up to zoom into your sheet and scroll down to zoom out of your sheet. There is an upper limit on how far you can zoom out, but you will notice you can zoom pretty far in.

While using the Cursor Tool (more on this later), you can also move around the sheet by clicking and dragging on empty parts of the sheet.

Lastly, when you have selected some content, use "Backspace" to delete it.

Designing a Sheet

To get started, head over to the Sheets page. From this page, you'll see the list of sheets available to you for your context system.

From here, you can either select an existing sheet and then create a copy from the top right to give you an editable sheet version to start from, or you can click the "Create Sheet" button in the top right.

Once you have an editable sheet open, you'll see a blank canvas with a few available tools on the left.

As you hover over these tools, you'll see a tool-tip letting you know what these tools are. As of writing this guide, these tools, in order, are:

  • The Cursor Tool: For selecting and editing things you have already drawn or typed
  • The Draw Tool: For free-hand drawing onto the sheet
  • The Rectangle Tool: For drawing perfect rectangles
  • The Polygon Tool: For drawing perfect regular polygons (polygons where all the sides are equal)
  • The Widgets Tool: For managing and editing your widgets
  • The Text Tool: For writing non-changing basic text (like labels)
  • The Computations Tool: For placing areas where computations can happen to represent calculated values like Character Stats (Attributes, Skills, etc.)

And lastly, at the very bottom, you'll see a button to toggle the gridlines on the sheet between low, medium, and high density.

Drawing Tools

Several of these tools are largely about drawing. We'll start by drawing some shapes.

By selecting the Polygon tool, I see some options to customize my tool settings appear in the top left.

Different tools will have different tool settings, but when you hover over these options, you will see a tool-tip describing the setting. Feel free to experiment as you go, you can always delete and edit things you've already drawn.

Using a combination of the Rectangle and Polygon Tools, as well as changing some of the tool settings as I go, I draw a few basic shapes (I have turned off Gridlines below):

Next, I'd probably want to label some of these areas. So I use the text tool for that, noticing that a click produces standard text size, while a drag allows me to scale-up/down.

While doing that, I may also want to insert a computation using the Computation Tool. Notice that when you create a computation, it starts with a value of "<>".

This is normal, and acts only as a placeholder until you specify what kind of computation should be placed there. To edit this, let's go to the Cursor Tool and adjust a few things.

Cursor Tool

From the Cursor Tool, select your computation placeholder. When you do so, you'll see a pop-up appear at the bottom of the screen. From this, you can customize the stat that is being placed here, as well as some basic text formatting options, like alignment, bold/italic/underline, and text-size.

For Text, you'll see similar options, but instead of selecting a computation, you can directly edit the text that is shown.

After placing a few more shapes, I start to notice the alignment of things are not perfect.

To fix this, select multiple things that you may want to align. To do so, use "Shift-Click" to either drag a box to select multiple things, or "Shift-Click" each element individually. When have selected 2 or more elements, you'll see a few more options on the left.

The first six buttons here are all alignment buttons. They will only appear when you have 2 or more items selected.

The first set of 3 buttons allow you to align your selected content by their left, center, or right sides. In other words, you can use these 3 buttons to vertically align your content.

The next set of 3 buttons are used to align content horizontally by their top, middle, or bottom sides.

When you use non-center functions from these buttons, one of your elements will not move, while all others will align to it. Specifically, if you horizontally align by left sides, the left-most element will not move, while the left-sides of all other elements will move to align their left-sides to the left-most element's left-side.

Meanwhile, the last 2 buttons are distribution buttons. These buttons will only appear if you have 3 or more items selected.

These buttons are used to either distribute your content horizontally or vertically. In either case, elements will be distributed by their centers. But note, the order you select elements when you decide to use distribution matters!

Specifically, when you select items for horizontal distribution, the order you select them will be the order they appear after distribution from left to right. Similarly, when you distribute vertically, the order you selected items will be the order they appear from top to bottom. Thus, you can use these buttons to also re-order content.

By using these tools, I align and clean up my drawing from previously:

Overall, you can use these tools to create visual and text representations for all the numerical or textual information a character might have.

However, so far, we have not talked about a way for character art to appear on your sheet. To do that, select a shape you have created and click the "Add Background Image" button from your tool settings.

This will allow you to select the type of image to insert, including the option for "Character Art" which will vary by Character. While editing, shapes specified to contain character Art will instead contain the Hedron icon. For example, here is a hexagon with a blue stroke specified to contain Character Art:

Otherwise, these tools provide all the tooling to place character stats, information, and artwork onto a character sheet dynamically.

But you'll likely notice, this system doesn't work well (or at all) for things that a character has multiple of, like spells, abilities, and items (or their equivalents in your context system). That's where Widgets come in.

Widgets

Widgets are basically re-useable and repeatable blocks of shapes, text, and computations that are repeated several times for every character. For example, you might have an Item Widget that gives the layout for how a character's items will appear in their inventory. Similarly, you might have widgets for spells or items.

To use widgets, hover over the Widgets Tool. If you've never used Widgets on this sheet before, you'll see something like this:

Notice, the two buttons here: "New Widget" and "Import Widget". The "Import Widget" button allows you to search for and re-use Widgets that are shared with you. Some may be used on other sheets, while others may have been shared with you, but not used for any particular sheet.

Once you import a Widget, it will appear in the list here — alongside any Widgets you create yourself. So, let's try creating a Widget by clicking "New Widget". When you do that, you'll be asked to choose a Widget Type and name your new Widget. Once you do so, it'll appear here — like any Widget you imported.

On the Widget, you'll see up to two options. The first button, the Edit Button, will only be visible if you have permissions to edit the Widget, while the second, the "Add to Sheet" Button, will always be present.

Let's start by editing our Widget. You'll see a new dialog come up that looks a lot like our general sheet editor, but overlaid your sheet editor.

From this new drawing area, you can draw a layout for your specified type of entity to appear, or change the type of widget you are creating.

Likewise, you can insert calculations on your widget to represent information from the entity the widget represents. For now, I'll just create a basic widget to represent the name of an ability on a character sheet.

Then, I can hit close in the top right of the dialog. Note, as the dialog states, all changes to your widget are saved when you close the dialog.

Now, re-open your widgets panel and click the "Add to Sheet" button on your widget. You should see it get highlighted:

Now, draw a rectangular area for your widget. Notice that as you do so, you will only see 1 widget appear for now — this is normal and we will customize this shortly, so try to focus only on the size of the area you specify.

Once you've drawn an area, select it with the Cursor Tool to see a dialog similar to the text and computations editor dialog.

From this menu, you can see options to change the widget in use here, change the "number of widgets per scrollbar" and the direction to orient your widgets.

By changing the "number of widgets per scrollbar", you can see that you can manipulate the number of times the widget you specified will be repeated in the area you select. Note, if a character would have more of the specified entity type than you request, a scrollbar will be provided to show additional content. For example, here, I change my "Widgets per Scrollbar" setting to 4; thus, 4 widgets will be shown in the provided area. If the character has more than 4 abilities, they will need to scroll in this area to see more of them.

You will also notice that if you increase your number further, the widgets will begin to shrink but remain bounded by the area you specified. When the widgets are rendered on a true character, the background will be removed and only the widgets themselves will remain.

Lastly, you can use the orientation of your Widgets to determine in what direction your Widgets and the resulting scrollbar should be lain out. By default, Widgets will appear vertically as shown above, but you can change this setting to represent them horizontally if you so wish.

Sheet Settings and Previewing

Overall, that's all there is to know about designing sheets. You can use the tools above to build out a character sheet uniquely tailored to your needs.

Otherwise, you can use the controls in the top right to control the basic settings of your sheet, as well as enter preview mode.

By clicking the edit button, you will see options to rename your sheet, give it a description, or share it with others — like most entities on Hedron.

Meanwhile, by clicking the preview button, you will get prompted to load a character you can access, as well as select a level for that character in order to see how your sheet would look like in-session for that Character. Note: in preview mode, Characters do not have items or spells, so widgets for these types will not be rendered.

But otherwise, preview mode is a good way to check that everything is looking as you would expect! For example, here's a preview of the sheet we built in this guide for Arthur Longblade, a character from Call to Power.

Notice how it put Arthur's character art in the area we designated, and also inserted his various abilities using our widgets area.

This shows us that everything seems to be working and Arthur could bring this sheet with him to session! Though, we may want to make it a bit better before he does!

Tips & Tricks

Overall, this guide gives you a broad overview of all the tools that Hedron provides for you to build out custom character sheet layouts and use them for your system.

And as you get more familiar with the sheets, you'll undoubtedly also benefit from a few of the tips and tricks that didn't come up during this guide (in no particular order):

  • While you have some content selected, you can use the arrow keeps to do micro-adjustments of the location of the item. You can also use "Shift" alongside the arrow keys to do larger, but still very detailed adjustments of element locations.
  • You can use "Copy/Paste" (via "Ctrl-C" for Windows and "Command-C" for Mac) to re-use portions of the sheet you have already drawn. You can also copy content from other vector-based drawings apps like SVG Editors or Adobe Illustrator, etc. to ease your use of creating Character Sheets.
  • Use the "Shape Layer" option for selected content to ensure certain shapes appear above others, if necessary.

Closing Notes

Before we end this guide, we want to call out attention to 2 specific details that make Character Sheets on Hedron unique.

Anyone Can Build a Sheet & Share It

Here on Hedron, we make it easy for anyone to contribute to a system through various entity types and homebrew. But that idea also extends into Character Sheets.

For this whole guide, notice that anyone could just go through the process to create a custom, tailored character sheet. This idea means that ultimately, while we advise game designers to provide a starter character sheet, you'll undoubtedly also see your community build their own sheets, share them with others, and ultimately improve the experience of playing in any system.

How Easy It Is To Plug a Character Into Any Sheet

It's also important to notice that once the sheet was designed, any character, such as Arthur, could just simply select the sheet and get going. This ease of switching sheets is an important design detail of Hedron because it means that, during session, the same character could have a collection of several different sheets that present different information more easily.

For example, maybe Arthur has a sheet tailored to help his player work through combat, while he has another sheet tailored for social encounters.

Or alternatively, maybe Arthur's player has a sheet they re-use for all of their martial characters, and another for all of their scholarly characters.

This high degree of flexibility means that it becomes easy to switch between sheets as a player. So design your sheets for any specific niche you'd like!


That's all for this guide! If you need more help, feel free to submit some feedback below or reach out to us for more information!

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.