Sheet Creation Check List

Source of the current sheets is available on Github.   The sheets I made or updated you can find here: Sheet List.   Recommended editor: VS Code (free): VS Code Editor Extensions:
  • Bootstrap
  • BBCode
  • HTML / CSS
  • CSS class completion
  • TWIG
  • YAML
  • Preparations

     
    • Make sure to be a Grandmaster or higher to be able to create new sheets.
    • Find the original character sheet as a reference, best in digital form so you can sample the colors scheme with a color picker and copy out text where needed.
    • Go to your world, Settings & Tools / Configuration: try to add the system you want to create a sheet for, to your world.
      • If it already exists, add it. You need it to make an example sheet.
      • If it does not exist, add any other system to your world and use it as system for your sheet, for example the "Generic Fantasy" one. This will not preset anything, you just need a system to put your sheet in. It can be moved later into the proper system category.
    • Go to Studio / Sheets & Blocks
    • Click 'Create a new sheet' on the left side, for the system you picked in the previous step.
    • Give it a proper name and description, e.g. name: 'Conan Character Sheet'. Do NOT use a temporary work title here because the name will stick in the code later, even if you change the name to something else.
    • Click 'Create Template'.
      Now you have a system added to your world and you have an empty sheet.  

    Creation Process

     

    Data definition

     
    • Go through the original (paper/pdf) sheet and create a text file from its data containing all the values (example below), name it your-sheet-name-here.yml .
    • Go to Studio / Sheets & Blocks, click 'Edit' at the right side of your listed sheet and paste the content of your text file into the big input field below 'ADVANCED FUNCTIONALITY: IMPORT YAML DRIVER' and click 'Import Data'.
    • If you get no error, continue with next step. If you get an error (404), your data are probably malformed in a way or the indentation is wrong:  
      * First line is always: fields:
      * Do not define a field 'name', WA will add this automatically
      * make sure the indentation of the file is correct, use double spaces, no tabs
      * use every label only once, labels are the important part here
      * make sure to close all "" properly
      * dont't forget any : behind the keys
      
        Example:  
      fields:
       level:
        label: "Level"
        input: integer
        min: 1
        max: 20
        # comments are starting with # and get ignored by WA
        # allows to enter numbers between 1 to 20
       class:
        label: "Class"
        input: string
        placeholder: "eg Warrior, Mage, ..."
        # allows to enter a one line text
       notes:
        label: "Notes"
        input: text
        rows: 10
        placeholder: "write down stuff during session"
        # allows to enter several lines of text, the rows are only used for
        # how many are shown in the form, not how many you can enter
       gender:
        label: "Gender"
        input: select
        options:
         male: male
         female: female
         other: other
         # this is a dropdown box with three entries, first one is the default
       sample checkbox:
        label: "Sample Checkbox"
        input: checkbox
        # defines a checkbox that you can toggle on and off
      
        Be aware that for the field names in the sheet, the label is being used. label: "First Name" will create a field in that sheet addressable as variables.first_name (all lower case, spaces become underlines).   With the data definition and some example data filled in, you can start creating the basic sheet, which is the digital copy of the usual paper character sheet, it's purely for output.  
    • Go to Your World / Statblocks, choose your sheet in the dropdown at the top right and create a new character with some example data. The input form for this is generated by World Anvil and also accessable in the "boilerplate". It's simple, we will replace it later.
    • Go to Studio / Sheets & Blocks and click 'Edit' at the right side of your sheet in the list.
    • Click "Switch to Display Mode" at the top right.
      View of the player screen with all the different versions of the character sheet: https://www.worldanvil.com/characters - then choose a character and click the SHEET tab:
     

    Presentation Sheet

      This is the sheet in the first tab. There is a boilerplate section underneath which contains a World Anvil generated version of the sheet, it is as simple as the pre-generated form sheet. But it is a good start for your own sheet as it already contains all the variables, all you need to do is replace the HTML code around it with something that makes it looks pretty.   Save this sheet as display.html.twig.  

    Badge Sheet

      This is a micro sheet in the second tab. It is a mini version of the presentation sheet and should only contain the most vital information. It's used in the sidebar on the player screen and on the DM screen where the DM sees each character in the group as a column. It could just be something like "Lulu, level 5 dancer from Chicago" or or just name, level and a handful of stats that are used very often.   You should make the Badge after the Presentation Sheet, as it's just some part of it you can copy.  

    Tracking Sheet

      The Tracking Sheet is shown on player and DM screen at the top, it is meant for editing stats during the session. It's placed inside an IFRAME so does not reload the whole page when saving. It should only contain stats like hitpoint, magic points, conditions and maybe a notes section to write down stuff for later. The DM can only see a very narrow version of it for each player, about as wide as the sidebar, make sure the Tracker Sheet should work in both views equally.   Create this sheet when the Input Sheet is done, becaue you once again can just copy over the parts you need.  

    Input Sheet

      When you have finished the Basic Sheet, you can create the Input Sheet easily with the same looks:  
    • Copy file display.html.twig to form.html.twig
    • Switch to the 'Edit Form' tab
    • Scroll down to 'SHEET BOILERPLATE FORM' below the empty input field.
    • Find each variable in form.html.twig and in the boilerplate and replace the form version with the one from the boilerplate.
      Example for level, a number field:   The output looks something like this:  
     variables.level is defined ? variables.level 
      And the version in the input form would look like this:  
    <input value=" variables.level is defined ? variables.level " class="form-control" id="level" name="level" type="number" min="0" max="20" />
    
      Be aware: each of these lines has two curly opening brackets on the left and two curly closing brackets on the right around the 'variables.level is defined ? variables.level' part. It doesn't show in the article due to WA's security measurements.  

    CSS

      The fourth tab is for your CSS code to make the sheets look pretty. See how those work in the existing sheets (link at the top of the page).  

    Final steps

     
    • Check the look of the sheet
    • Insert the sheet as block into an article and check again. Articles use Bootstrap 3, the sheet view uses Bootstap 4
    • Switch the theme of your world to a really light or really dark one and check the above again
    • Check the sheet, the badge and the tracker sheet on the DM screen
    • Check the sheet, the badge and the tracker sheet on the player's view
    • Resize the browser to different widths and check all above again
    • Load all of the above on your smartphone and check again
    • Go to Settings / Interface & Accessibility, and switch to a different theme for your article interface, then check the character sheet again. You may have to fix some CSS things that got overridden by the theme. Do this for all existing themes (only 3 right now)
    • Contact Dimitris to publish the sheet as official
    • If the sheet needs special includes like fonts, talk to Dimi to get it sorted

    Comments

    Please Login in order to comment!
    1 Nov, 2020 00:23

    This is a really good tutorial/walk-thru. Thanks very much, Tillerz. Not only for making some amazing sheets for the community but also for sharing your knowledge with this article. *doffs cap*

    1 Nov, 2020 09:40

    Thanks. :) It's a work in progress, so I'll update it in the future.

    Grandmaster Morgurth
    Stephen Adkins
    20 Dec, 2020 20:39

    Is there a way to export the YAML version? For example, I've duplicated the Cypher System block to modify for Gods of the Fall, but I need to add in a bunch of stuff for Dominion Abilities and Divine shifts, but don't want to enter them one by one. I'd prefer to dump the existing YAML, edit it, and reimport.

    Grandmaster Morgurth
    Stephen Adkins
    20 Dec, 2020 20:43

    And then I went to the github repo for you sheets and see the .yml for Cypher System. So, I'll use that, but maybe it's worth adding a button for that at some point?

    21 Dec, 2020 07:26

    Hello, not sure if it's possible. Need to ask Dimi again.

    Powered by World Anvil