2015-09-03 How to add a new Character Sheet to Halberds n’ Helmets

My Character Sheet Generator is also a very general tool to parametrize SVG sheets. I use it as part of my Campaign Wiki. For my Greyheim campaign I generated a bunch of characters and most of the time, my players just pick one of them. No rolling of dice and purchasing of equipment before you can get started. If you click on any of the characters listed, it will take you to a page that integrates an SVG graphic.

Let’s take Aurora as an example. If you look at the raw data, you’ll see the parameters used:

name: Aurora
str: 9
dex: 16
con: 13
int: 9
wis: 11
cha: 7
level: 1
...

This gets translated into an URL for the image: https://campaignwiki.org/halberdsnhelmets/en?name=Aurora;str=9;dex=16;con=13;int=9;wis=11;cha=7;level=1;... You can bookmark this URL and that’s your character sheet.

This is what it will look like:

Click to view just the image

If you want to edit the parameters, that’s easy to do. The SVG contains a link at the bottom. Or you can simply add /link to the URL: https://campaignwiki.org/halberdsnhelmets/link/en?name=Aurora;str=9;dex=16;con=13;int=9;wis=11;cha=7;level=1;... Edit the parameters, submit, and update your bookmark.

You can provide your own character sheet. One of the parameters you provide is the URL to the character sheet. Here are some examples:

Let’s start with the basics.

  1. You need a SVG document like some of the above; use Inkscape to create such documents
  2. The SVG document needs text fields identified by id attributes; we’ll be using those as parameters
  3. You also need the fonts available as web fonts unless you rely on standard fonts
  4. Your SVG file needs to have the appropriate style information in order to use those fonts
  5. If you want to print the document, you probably also need the font installed on your computer

If you want to create an SVG character sheet by hand, you can read the W3C Recommendation and the Jenkov Tutorials. Documents created using Inkscape are usually quite bloated. I still prefer using Inkscape. :)

Let’s look at this id business. Consider the default character sheet. We’ll be using the “name” parameter. Look at the source code of the document (cmd u on my laptop using Firefox) and search for id="name". You’ll find the following:

    <text
       sodipodi:linespacing="100%"
       id="name"
       y="-11.724363"
       x="178.12579"
       style="font-size:24px;font-style:normal;font-variant:normal;font-weight:300;font-stretch:normal;text-align:start;line-height:100%;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:#000000;fill-opacity:1;stroke:none;font-family:Purisa;-inkscape-font-specification:Purisa Light"
       xml:space="preserve"
       inkscape:label="#text3505"><tspan
         id="tspan3507"
         y="-11.724363"
         x="178.12579"
         sodipodi:role="line">_________</tspan></text>

This is a lot of bloat. This would be enough, I guess:

    <text
       id="name"
       y="-11.724363"
       x="178.12579"
       style="font-size:24px;font-family:Purisa"/>

When our URL now contains name=Aurora, the text element with the id “name” will contain the value “Aurora”.

You can actually use the Character Sheet Generator to show you what the ids are:

Click to view just the image

Multi-line fields such as “abilities” or “property” are simply text elements with at least two lines of text, two tspan elements.

My guess is that what you’d actually prefer is to convert an existing character sheet PDF. Let’s take the One Seven Design character sheet for Stars Without Number. John Harper did these character sheets. He says: “Yes, you have my permission.” You can find his other character sheets on his blog. He also runs a patreon which I currently support because of the many cool game he has created (Lady Blackbird, The Regiment: Colonial Marines 2.5, World of Dungeons 1979 – note the b/w variant – and many more).

You need a build of Inkscape with Poppler. If you’re using Homebrew on a Mac:

alex@Megabombus:~$ brew info inkscape
homebrew/x11/inkscape: stable 0.91 (bottled), HEAD
A professional vector graphics editor
https://inkscape.org/
/usr/local/Cellar/inkscape/HEAD (983 files, 120M) *
  Built from source with: --with-poppler
From: https://github.com/homebrew/homebrew-x11/blob/master/inkscape.rb
==> Dependencies
Build: boost-build ✔, intltool ✔, pkg-config ✔
Required: bdw-gc ✔, boost ✔, cairomm ✔, gettext ✔, glibmm ✔, gsl ✔, gtkmm ✔, hicolor-icon-theme ✔, little-cms ✔, pango ✔, popt ✔
Optional: poppler ✔
==> Options
--with-poppler
	Build with poppler support
--HEAD
	Install HEAD version

So, now we’re set. We have Inkscape. It has Poppler support. This will allow you to open PDF files using Inkscape. You’ll have to pick one page:

https://alexschroeder.ch/pics/21105652362_ce01fd5bb1_o.png

Let’s say you picked the Warrior page. Load it into Inkscape. This is what it looks like:

https://alexschroeder.ch/pics/21089559666_24e638d7b3_o.png

Use Ctrl-Shift-T for text styles and pick a nice font and size and set it as the default. I used Noticia Text which I downloaded from Google Fonts.

Click or double-click on an element such as the letter “E” in “NAME” in order to select it.

https://alexschroeder.ch/pics/20927645120_87a476ed6b_o.png

Switch to the text tool using F8 and create a text field where you want the name to appear. Put some text into the text field – I like to use a bunch of underscores: “”. You can remove these at the end by editing the SVG file in a text editor. If you remove them now, Inkscape will delete the empty text field. Also, once you have removed the text content, you shouldn’t edit these files using Inkscape. That’s why I like those underscores.

In this example, I’m going to write “Alex” into the text field. Basically, that’ll be the default value if you don’t provide a name parameter.

https://alexschroeder.ch/pics/20928968449_6c41020fda_o.png

Use F1 to switch back to selecting objects. This allows you to move the text around. I like to use the arrow keys at this point.

https://alexschroeder.ch/pics/20493127744_3b2c4128f7_o.png

Use Ctrl-Shift-O for object properties and set the id to the parameter name you want (i.e. “name”) and delete the label (we have no use for it).

https://alexschroeder.ch/pics/20494682523_89525997ac_o.png

If you want, you can take a look at the XML of the text element you just created using Ctrl-Shift-X.

https://alexschroeder.ch/pics/20928967659_c7bb328573_o.png

Repeat as necessary. This is tedious job.

I’ve done it for three fields. This is the SWN Warrior SVG using three default values:

Click to view just the image

And here’s the same file with three parameters set:

Click to view just the image

If you want to edit it, use /link in the URL to edit the parameters.

You can debug it using /show in the URL:

Click to view just the image

Now all we need to do is add the remaining fields and do it for all the character sheets...

If you want to add a character sheet to Campaign Wiki, you’ll need to contact me, or you’ll need to host it on a public host. Or you could download and install the script on your own server...

Tags:

Comments


Please make sure you contribute only your own work, or work licensed under the GNU Free Documentation License. Note: in order to facilitate peer review and fight vandalism, we will store your IP number for a number of days. See Privacy Policy for more information. See Info for text formatting rules. You can edit the comment page if you need to fix typos. You can subscribe to new comments by email without leaving a comment.

To save this page you must answer this question:

Please say HELLO.