-
Notifications
You must be signed in to change notification settings - Fork 1
Character Sheets
Forge & Illusion allows Illusion event organizers to add character sheets into their events.
Forge & Illusion character sheets are created with html and css. So basic knowlege of those techiques are required.
Illusion character sheets allow sheet developers to create advanced features with JavaScript so basic knowlege for that language can be a great help but is not strictly required.
First of all you need to have an Illusion event. So if you don't already have one, navigate into http://www.forgeandillusion.net/illusion/createevent and create an event (you need have a Forge & Illusion account for this but don't worry creating one is completely free).
After you have created the event you need to navigate into the Forge and locate your event's folder (it's located inside a Illusion folder in Forge root) and click New Material > Create Character Sheet from the Forge menu.
This should create a new untitled, empty character sheet for you and open up an sheet editor.
Editor is made from five components: title, contents, styles, scripts and preview.
Title can be used to change the title of the character sheet, contents describes the sheet contents as html, styles defines the look and feel of the sheet and scripts can be used for making advanced features with JavaScript.
Preview is updates in realtime and shows how the sheet would look like to the user.
Please note that even thought the preview screen is automatically updated you still need to remeber to save your sheet to persist changes.
Character sheets use standard HTML and there are no special limitations about the markup.
Note that markup is a body content do you don't need html, head or body tags.
If you don't have a really good reason to do otherwise you should use html 5 instead of html 4.01 and if you are using a client that does not support some of the html 5 features, drop an issue into project issue tracker (https://github.com/foyt/fni/issues) and we try to find a polyfill library for you.
CSS used in sheets is standard CSS and there is nothing special about it.
If you need to add images into your character sheet you have three options to add them:
-
Upload your images into some public image service and link them back to the sheet CSS or HTML
-
Convert images into base64 format and embed them directly into CSS
-
Upload images into Forge and publish them and link them into the CSS or HTML.
Please remember that you can use only images you have permission to use.
Illusion provides a number of built-in features for character sheets.
Most important of the built-in features for most of people is the able to persist data.
This is done by marking a field with css class i-field (see i-field example in examples section). So if you mark a input or textfield with i-field class Illusion assumes that the field is editable by user and should be automatically saved when edited.
Note that field also requires a name -attribute.
Sum fields are readOnly fields that sum values from other (number) fields. Sum fields can be used for creating informative fields that display data that is derived from other fields.
Sum fields are created by adding a i-field-sum css class data-fields attribute into a input field. data-fields attribute defines comma delimitered list of summed field css selectors (see i-field-sum example in examples section)
Roll links can be used to simulate die rolls inside a character sheet.
Roll links define a data-roll attribute and data-fields attribute.
data-roll attribute defines what is the dice roll formula. Roll can contain basic matematical operations like multiply, divide, plus, minus, etc. Besides basic arimetic operations roll attribute can contain dice rolls (e.g. d20 for dice 20 or 2d20 for two d20) and field values from data-fields attribute.
Fields are defined in data-fields -attribute and referenced in data-roll by their index number inside a curly bracket (e.g. {0} references into first data-fields field).
Rolls them selfs do not do anything without any scripts and you need to attach a 'roll' listener for them for them to do anything useful.
See i-roll example in examples section for more comprehensive examples.
Besides built-in features listed above, core also provides jquery and jquery-ui for you which both you can use to create more aresome character sheets.
At least in this point you can add external script libraries that work only within body tag. So most of the scripts work but there can be some limitations.
"...But i want that when user rolls an eight, a dragon flies into the screen and grabs an goblin from the inventory and flies away with it."
Sure, Sure, why not but this one is going to require some heavy scripting. You might also need some additional features into the core. If that is the case just add a issue into issue tracker (https://github.com/foyt/fni/issues)
Examples section demonstrates various aspects of Illusion character sheets.
If you wish to create field that saves it's value just add a i-field css class into it and the field and it starts to automatically persist it's value.
Example:
<input type="text" name="character-name" class="i-field"/>
Sum fields can be used to automatically sum values from other fields.
Example:
<input type="number" name="intelligence" class="i-field"/>
<input type="number" name="wisdom" class="i-field"/>
<input type="number" name="spirituality" class="i-field"/>
<input type="number" name="mana" class="i-field i-field-sum" data-fields="input[name='intelligence'],input[name='wisdom'],input[name='spirituality']"/>
Roll links can be used to simulate die rolls.
Example:
Rolls d20 twice and adds half of the strength into the result and displays the result in a alert box
html:
<input type="number" id="strength" class="i-field"/>
<a class="i-roll"
data-roll="2d20+{0}/2"
data-fields="input[name='property-intelligence'],input[name='property-senses']"
href="javascript:void(null)">Roll</a>
script:
$(document).ready(function () {
$('.i-roll').on('roll', function (event, data) {
alert('Rolled:' + data.result);
});
});
First let's add some html to create some content into our new shiny character sheet.
<h1>The greater sheet of an example</h1>
<div id="basics">
<div class="basic">
<label>Name</label>
<input type="text" placeholder="character name" required="required"/>
</div>
</div>
<div id="skills">
<h2>Skills</h2>
<div class="skill">
<label for="karate">Karate</label>
<input id="karate" type="number" min="2" max="25" class="i-field"/>
</div>
<div class="skill">
<label for="tech">Tech</label>
<input id="tech" type="number" min="2" max="25" class="i-field"/>
</div>
<div class="skill">
<label for="surgery">Surgery</label>
<input id="surgery" type="number" min="2" max="25" class="i-field"/>
</div>
<div class="skill">
<label for="sum">technical karate surgery</label>
<input id="sum" type="number" min="2" max="25" class="i-field i-sum-field" data-fields="#karate,#tech,#sum"/>
</div>
</div>
<div id="stuff">
<h2>Stuff</h2>
<input type="text" class="i-field"/>
<input type="text" class="i-field"/>
<input type="text" class="i-field"/>
<input type="text" class="i-field"/>
</div>
<div class="life-story">
<h2>Life Story</h2>
<textarea></textarea>
</div>
Then we add some css to make it beautiful.
@import url(https://fonts.googleapis.com/css?family=Indie+Flower);
body {
font-family: 'Indie Flower', cursive;
}
.basic label, .skill label {
width: 120px;
display: inline-block;
}
.skill input {
width: 40px;
display: inline-block;
}
#stuff input {
width: 300px;
display: block;
}
textarea {
display: block;
width: 100%;
height: 120px;
}