Create your first sheet

From GM Forge
Jump to: navigation, search

Create your first character sheet

This tutorial will go through the steps of creating a simple character sheet template in GM Forge. It assumes you have basic HTML knowledge. If you don't feel confortable enough with HTML you can find a lot of resources online, my favorite is w3schools.

Setup

To get started I highly recommend to go through this first tutorial Mod Development to get everything setup the best way possible. But it's not mandatory as you can use the System Builder as well. You can use as reference HTML Sheet and HTML Breakdown that contains additional informations about every custom tag GMForge uses.

To get started in designing your first sheet, you can open your favorite text editor and follow the guide. To test your code you will have to create a world using the Worldbuilder v2, create an actor (Character or NPC) click the Sheet button on top and finally click HTML Mode. You can then paste any HTML code into the new untitled window that opened.

Basicediting.gif

When you are confortable with the layout you can then either use the method explained in Mod Development or use the System Builder method to create a Mod. When you create a mod using the System builder as a base, you have an empty template generated. This template includes a really simple character sheet and items. You will be able to edit everything to get to your very own Mod. When your world is set up as you want you can go to Finalize and copy the raw Json data of your world into a template. Then you just have to create a folder named your /public/workshop/[your Mod]/templates and copy the content of the raw Json in a file with a name of your choice. You can now use this mod as soon as you create a new world!

Layout

A character sheet is usually designed in multiple parts, background, attributes, skills and so on. A good way to start our sheet is to draw those parts so our aim is clear. Here is the simple one we will create here.

Basicsheet.jpg

GM Forge layout makes use of custom classes that can be referenced in the HTML Breakdown section. We will focus on three classes.

flexrow - lays everything out in a row
flexcolumn - lays everything out in a column
flex - stretches to fill a flexrow or flexcolumn

You can use your own classes to create the layout for your sheet, and even bootstrap 3 components, flex are recommended though because it is used by <ui> elements and changing the display of your sheet can impact those.

I separated my sheet into rows and columns, using the flex class when I want the <div> to fill the rest of the row or column.

Basicsheetlayout.jpg
 <div class="flex flexcolumn">
  <div class="flexrow">
    <div class="flexcolumn">
      Portrait
    </div>
    <div class="flex flexcolumn">
      <div class="flexrow">
        Name
      </div>
      <div class="flexrow">
        Attributes
      </div>
    </div>
  </div>
  <div class="flex flexrow">
    <div class="flex flexcolumn">
      Skills
    </div>
    <div class="flex flexcolumn">
      Equipment
    </div>
  </div>
 </div>

Filling the sheet

Portrait

We will make use of our very first <ui> element, ui_image. <ui> elements are premade blocks that can be called with the following syntax.

<ui name="[block name]" />

ui_image does not have an intrinsic size so you should specify the parent's block size like this.

<div class="flexcolumn" style="height:120px;width:120px;">
    <ui name="ui_image" />
</div>

Name

You can access and modify sheet data with input fields with the following syntax.

 <input target="[path to data]"/>

Here, we would like to access the character name that is stored by default in info.name

We would like to take all the space available so we can use a flex class to this input, and we use middle, another GM Forge class for centering objects.

 <input target="info.name" class="flex middle"/>

Attributes

We will store in this section a few attributes that can be rolled and referenced in skills. For this purpose we will use <input> one more time.

     <input type="number" target="stats.strength" class="middle"/>

With type="number" you can now use the mouse wheel to increase or decrease the number.

<div class="flexcolumn">
 <span class="middle">
  Strength
 </span>
 <input type="number" target="stats.strength" class="middle"/>
</div>

Skills

We expect to store a dozen of skills in this section, it will always list the same values, but of course the values are editable. So it will be our first use of <list>

<list target="[path to data]">
</list>

A list is a way to iterate through all element of a json tree that are under the target. In our example, we will store our skills in skills.{skillname}. Within a list you can reference two variables %path%, which is the complete path to the element c.skills.perception and %index% which is only the index of the element perception. The thing is that there is nothing in here yet, so we will have to create those skills. We will have to dig into our sheet's data.

At this point we will need to register the layout to the mod you created. If you followed the Mod Development tutorial you can copy and paste it directly in the HTML file of your actor. If it's not the case, you can use the System Builder. To open the System Builder go to Options on the top of the right Panel and click System Builder. It opens a tab of the same name on top of the window, then select the corresponding sheet and click Sheet and HTML mode. You can then copy and paste your HTML layout, go to Finalize and press 'Use these templates for current World'. Press F5 and you are good to go.

First, open your Mod's template file with a text editor (Notepad++, for example) if you previously followed the Mod development tutorial you certainly remember where this file is located. It is located in the GMForge public/workshop/[YourMod]/templates folder. If you prefer you can access your sheet's data in the Worldbuilder in your actor's Default Data section.

Be careful when you edit this file as it can crash your games, always make a backup of your mod and your world files.

In the template file you will have to find those lines


  "actors": {
    "Character": {
      "_t": "c",
      "_type": "Character",
      "info": {
        "name": {
          "name": "Name",
          "current": "Default Character"
        },
        "img": {
          "name": "Character Art"
        },
        "notes": {
          "name": "Character Notes"
        }
      },
      "_hud": {},
      "_flags": {}
    }
  },

There you can add skills.

  "actors": {
    "Character": {
      "_t": "c",
      "_type": "Character",
      "info": {
        "name": {
          "name": "Name",
          "current": "Default Character"
        },
        "img": {
          "name": "Character Art"
        },
        "notes": {
          "name": "Character Notes"
        }
      },
        "skills": {
          "perception": {
            "name": "Perception",
            "current": "0"
          },
          "swimming": {
            "name": "Swimming",
            "current": "0"
          },
          "athletics": {
            "name": "Athletics",
            "current": "0"
          },
          "tracking": {
            "name": "Tracking",
            "current": "0"
          },
          "fighting": {
            "name": "Fighting",
            "current": "0"
          },
          "persuasion": {
            "name": "Persuasion",
            "current": "0"
          },
          "boating": {
            "name": "Boating",
            "current": "0"
          }
      },
      "_hud": {},
      "_flags": {}
    }
  },

Press F5 and it's done! we just have to <list> those skills in our sheet now, and display it like we did for the attributes.

  <div class='flexcolumn'>
    <list target='skills'>
      <div class='flexrow'>
        <div class='flexcolumn'>
           eval{@%path%.name}
        </div>
        <div class='flexcolumn'>
          <input type='number' target="%path%.current" />
        </div>
      </div>
    </list>
  </div>

Equipment

The difference with skills is that items will have their own window if we decide to click on them, the same goes with feats and everything that deserves more than a simple line on your sheet. We will use the default 'item' element to simplify but you can create your own of course. We will use a list, a major difference is that we want to be able to create items on the fly, without meddling with the template, we will use the <create> tag.

  <create type='[element type]' target='[path to parent]'/>

So we just have to bind this component to a <click>.

        <div class="flex flexcolumn">
            <span>Equipment</span>
            <span> +
               <click>
                  <create type='item' target='inventory'/>
               </click>
            </span>
        </div>

Then we will make a list similar to the one before. You can also open and edit your item with the <change> tag, and delete it with <delete>.

        <div class="flex flexcolumn">
            <div class="flexrow">
              <span>Equipment</span>
              <span> +
                <click>
                   <create type='item' target='inventory'/>
                 </click>
              </span>
            </div>
            <div class='flex flexrow'>
              <div class='flexcolumn'>
                <list target='inventory'>
                  <div class='flexrow'>
                    <div class='flexcolumn'>
                      eval{@%path%.name}
                    </div>
                    <div class='flexcolumn'>
                       <span>
                           Edit
                           <click>
                            <change target='inventory.%index%'>
                           </click>
                       </span>
                       <span>
                           Delete
                           <click>
                            <delete target='inventory.%index%'>
                           </click>
                       </span>
                    </div>
                   </div>
               </list>
              </div>
            </div>
        </div>

Make it interactive

Rolls

WIP

Effects

WIP

Javascript snippets

WIP

Styling

CSS

WIP

Bootstrap components

WIP