HTML Sheets

From GM Forge
Jump to: navigation, search


What are HTML Sheets?

HTML is a really easy way of programming, but in GM Forge its been extended to allow for easy sheet creation for Actors, Elements and Resources. The real benefit of the HTML in GM Forge is that you can add simple lookups to display values, without having to go through the hassle of programming individual fields, and since HTML is really beginner friendly, even the most basic programming knowledge is enough to start creating your own sheets.

If you are unfamiliar with HTML, don't be discouraged, its easy enough to learn in less than an hour, and you can start by visiting w3schools

In an update in July 2018, GM Forge switched its primary way of rendering sheets from JSON to HTML. The switch makes it much easier to create unique and interesting content for the Forge.

How do I add my own Actor Sheet?

First you create an actor. Then open up the actor and navigate to the options bar, and click "Sheet". This will load the sheet editing tools, and you can view/change the HTML code of the sheet using the "HTML Mode". It is recommended you use an external text editor to edit the HTML, as popups in GM Forge do not handle tabbing properly.

Simple Example

Using the HTML Builder we can start to build our own and unique sheets! Lets start by first creating a header label that can be edited, and a place to edit notes.

<h1 edit='info.name'>eval{@name}</h1>
<textarea class='flex' target='info.notes'>traverse{info.notes.current}</textarea>

Now if you look closely at the above example, you can see it is clearly HTML code. However, there are some additions to it that you may notice.

<h1 edit='info.name'>eval{@name}</h1>

The 'edit' attribute is the path to the field you want to edit on the sheet. You can attach "edit='" to anything, which makes it possible to edit an actor's attribute by just clicking, and then making your changes.

eval{@name}
this executes a Macro under the context of the current actor, and in this specific case will result in the actor's name being displayed. Because this is a macro, you can do other things like return
eval{@Strength * @Dexterity}
if you wanted to!

Making two Columns

<div class='flexrow flex'>
  <div class='flexcolumn flex'>
    <h1 edit='info.name'>eval{@name}</h1>
    <ui name='ui_image'/>
  </div>
  <div class='flexcolumn flex2'>
    <textarea class='flex' target='info.notes'>traverse{info.notes.current}</textarea>
  </div>
</div>

Hotbar HTML

You can even display HTML in the hotbar of Actors, which allows you to make things like healthbars status counters and more!

More Examples

More Examples

How do I add my own Element Sheet?

Similarly to the Actor, you would first create an element. Then open up the element and navigate to the options bar, and click "Sheet". This will load the sheet editing tools, and you can view/change the HTML code of the sheet using the "HTML Mode". It is recommended you use an external text editor to edit the HTML, as popups in GM Forge do not handle tabbing properly.

How do I add my own Resource Sheet?

Creating a Custom Sheet for Resources is a little different. First create an "HTML" resource, then simply add your HTML into the editor and that's all there is to it.

Note : There is no "Attribute" tab for resources, but it is still possible to embed custom attributes into a resource. Be sure you know what you are doing, and don't add any attributes into the "info" category.