Making kickass campaign sites with MPTW

MPTW (Formerly: MonkeyPirate TiddlyWiki) is absolutely amazing for making campaign sites. The really key feature to it is TagglyTagging. What’s TagglyTagging? Well, I could tell you, but it’s a lot easier to show you. Here’s the site for a campaign I ran last year.

See that gorgeous, hierarchical menu? How much time do you think I spent in building and organizing it? What if I told you none. No time whatsoever. That menu is generated automatically, and it updates whenever you add new stuff. It’s the magic of TagglyTagging!

MPTW is a flavor of TiddlyWiki, which are kind of like midget wikis on crack. A TiddlyWiki is entirely contained in a single HTML file and thus is great for keeping notes and such on a flashdrive or what have you, but it also means you can upload them to literally any webhost. Since it’s all done in HTML and Javascript, you don’t need anything fancy to run it. Actually updating it online can be a bit sticky, depending on your route, but let’s take this one step at a time.

Getting your MPTW

First, let’s get you started. You have three options here, assuming you want to display your MPTW online.

  • The easiest thing to do is to go to Tiddlyspot and sign up for a free hosted one. Make sure you choose MPTW when you make it. You’ll be given an address along the lines of “name.tiddlyspot.com” from which you can update the page, and that’s also the address you give to people to view it.
    Pros

    • Easy, free and seamless to use
    • Update anywhere

    Cons

    • Can only use Tiddlyspot to host it.
    • Server can be slow sometimes.
  • The next easiest thing to do is to just use the MPTW as normal and upload the HTML file to your webhost of choice. This isn’t quite as seamless as the above option, since you need to manually upload the file whenever you want to put up the latest version.
    Pros

    • Free
    • Works with any host

    Cons

    • Slightly less straightforward in day-to-day use
    • Worse chance of forgetting to update the live page, of uploading an outdated version, etc
  • Finally, if you’ve got access to a host with PHP, you can set it up to upload to your own server. The initial setup takes a tiny bit of technical know-how, but once you’ve got it running it’s just as seamless as on Tiddlyspot and you’ve got it on your own server, which is always nice. If you’re interested in going this route, there’s an awesome tutorial at Tiddlywiki.org on getting UploadPlugin running on your MPTW and your server.
    Pros

    • You have complete control
    • Address is whatever you want it to be– you could even have www.mycampaign.com if you were so inclined.

    Cons

    • Requires a host with PHP.
    • Some technical knowledge required to get it running.

Please note that for the last two, you’ll need to download an empty MPTW. To download it, just open that page and save it to your local hard drive wherever you choose. Important note: Make sure you save as HTML only, not complete webpage.

Save As settings in Firefox

By the way, you don’t have to call it “empty.html.” You can name it whatever you want, the only important thing is that it ends in .html.

And, of course, you could always just forego the online stuff altogether and just use a local copy. Particularly handy for playing around with things or for keeping personal notes.

Diving into the wonderful world of TiddlyWikis

So now we’ve got an empty MPTW. Kind of intimidating, eh, like staring at a test that’s just been laid out in front of you.

Brand new MPTW

Well, what’s the first you do on a test? Write your name! Not strictly necessary, but whatever name you put in here will be recorded whenever you make changes to tiddlers. I like actually having my name there, instead of “YourName” appearing everywhere.

tw-02-name

Now that we’ve provided our name, how about providing the MPTW with one as well? Clicking the “SiteTitle” link will open the SiteTitle tiddler, which is a special, magical tiddler. Well, not magical, but special nonetheless. As the name implies, this is where you put your MPTW’s name!

tw-03-titlehighlight

tw-04-titletiddlerdefault

Now, just double click on that tiddler and it will change into an edit box. This works for all tiddlers, by the way.

tw-05-sitename

So now it’s pretty straight-forward. Just type in a name, hover your mouse near the top of the tiddler and click done. Couldn’t be simpl–baWHA?!?

tw-06-securitywarning

ZOMG THEY’RE HAX0RING ME! No, no, calm down. This is normal. See, JavaScript is a pretty powerful language, but traditionally it’s limited by the fact that it can only run in your browser. The TiddlyWiki uses some dark mojo to allow it to save itself, however, and this box is just warning you that it’s trying to write to your disk which is something you usually do not want JavaScript to be able to do.

So to recap, in general, be very, very worried about that message. Never take it lightly. In this case, just trust Ol’ Uncle Asmor when he says it’s safe.

(p.s. If you don’t see this security warning, that’s fine too. This will only appear if you’re editing it on your local hard drive).

So where were we? Oh, right, after you accept that message, the site’s renamed!

tw-07-siterenamed

Now we’re done with this tiddler. Whenever you hover the mouse near the top of a tiddler, a menu will appear. Do that now and click ‘Close’ to close this tiddler.

tw-08-close

Now go ahead and do the same thing with SiteSubtitle. You can always just make it blank, too.

Now we get to the good stuff. Go ahead and open DefaultTiddlers. This is a list of tiddlers that will be opened when someone comes to our MPTW. Usually I like to have one “home” tiddler that’s open by default, but you can have as many as you want or even none.

For now, just go ahead and edit the DefaultTiddlers so that it says [[Home]].

tw-09-defaulttiddler

The double set of square brackets mean that this word should be treated as a link to a tiddler. You can also make tiddlers by CombiningWordsLikeThis. Personally, I find that really annoying, and I like the flexibility that the bracket syntax gives, such as allowing spaces in tiddlers.

tw-10-defaulttiddler2

You’ll notice that after you save this tiddler, the link to “Home” is italicized instead of bold. This is a visual cue that you’ve specified a tiddler which doesn’t exist yet. This is great for two reasons.

First, it makes it really convenient to do things freeform– say you’re typing out a description of some mountains, and you realize you should add in something about your Granite Dwarves. Just write something like “The Granite Mountains are also the home of the [[Granite Dwarves]].” Then when you save it, you can click that link to open a new tiddler called Granite Dwarves and start right where you left off.

Second, and equally important, it helps you avoid typos and maintain consistency. Say later on you’re working on the Pine Elves and you write something like, “The Pine Elves have an eternal enmity with the [[Granite Dwarfs]].” When you save that, it’s going to be italicized because that tiddler doesn’t exist yet. You do a double-take and realize that you used a different form of plural than you’d been using, go back and edit it, and everyone’s happy! YAY!

Let’s go ahead and edit that home tiddler so we’ve got something there.

tw-11-home

Now’s a great time to save and try this out. If you’re editing this on your hard drive, it’s probably been saving automatically after you edit each tiddler. If you’re doing it online, it hasn’t saved anything yet. Regardless, now’s a great time to learn how to save.

Near the top on the right side, you’ll see a menu. Click save changes if you’re editing it on your hard drive; if you’re using TiddlySpot.org, click “Save to Web” (it might ask you to enter your password if you haven’t already). If you did this on your own site, follow the same steps as when you uploaded your MPTW before.

tw-12-save

Go ahead and reload (F5) your MPTW to see how the default tiddlers work. If everything went according to plan, Home should be the only tiddler you see.

tw-13-refreshed

Let’s get some actual content in there. Hover your mouse near the top of the Home tiddler and click “new here.” This will create a new tiddler which is tagged as “Home.”

tw-14-newhere

tw-15-newtiddler

What I like to do is have a few top-level organizational tiddlers with little to no content, which only serve to provide a structure to the MPTW. Some common ones I’ll have include

  • Campaign Journals
  • PCs
  • NPCs
  • Races
  • Geography

I’m going to call this new tiddler “NPCs” and leave it completely blank for now.

tw-16-npcs

Now I’ll go ahead and add a couple more. I can always add others later.

tw-17-categories

Now here’s where some of the beauty of the TiddlyWiki really shines through… It’s infinitely expandable, and you can expand wherever you want as the mood suits you. Perfect for world building! At the moment, I feel like adding some info about the Granite Mountains and the Pine Forest, so I’ll open the Geography tiddler and add those two new tiddlers there.

tw-18-geography

Starting to get a bit cluttered, so hover near the top of the Home tiddler and choose “close others” to close all tiddlers except the Home tiddler.

tw-19-closeothers

tw-20-cleaner

Now it’s time for some magic! When you hover over the Home tiddler, next to “Tagged as ‘Home’” you should see a menu appear. The menu has six options.

  • Title: This is selected by default and should have an up-arrow, meaning that the tiddlers are sorted by name in ascending order.
  • Modified & Created: These two work just like title, allowing you to sort the tiddlers by when they were last modified or originally created, respectively.
  • Group: This one actually changes every time you click it. It cycles through the various ways the tiddlers are displayed. Note that if you’ve been playing with your MPTW, this may say something different. That’s fine.
  • Excerpts: Like Group above, this one cycles through a few different options. It changes how much of each of those tiddlers is displayed. By default, it just shows their titles, but you can go so far as including the entire tiddler!
  • Cols: This is one you’re going to have to tweak a bit when you add new stuff. Every time you click it, it adds a column to the displayed tiddlers until it reaches a limit and goes back to one column. Basically, just keep pressing it until you find something you’re happy with.

For now, just click the ‘Group’ option until you get a sitemap. It should look something like this:

tw-21-sitemap

I’m going to go ahead and click cols a couple times to get the different tiddlers in their own columns, too.

tw-22-cols

By the way, don’t forget to save often. Don’t trust auto-saves or let them make you lazy!

Let’s say you’ve been working on this MPTW for a long time. You know you’ve had lots of ideas for tiddlers, which you threw in but haven’t gotten around to fleshing out, but you can’t remember what they were. Now, you could painstakingly trawl through dozens or hundreds of tiddlers trying to find those elusive and exciting italicized links, or you could let the MPTW do the work for you.

On the sidebar, there’s a big tabbed list of tiddlers. By default, it has “Timeline” open, which shows all the tiddlers by the date they were last modified. Click the “More” tab, and then click “Miss.”

tw-23-missing

This is a list of tiddlers which have been referred to somewhere, but haven’t been defined yet. You’ll notice that there’s a lot of garbage in there from various things. You can either ignore them, or even open them and save them as blank just to get them out of the list. I like to keep this list tidy, as it serves as both a to do list and also gives me ideas for what to write about when I’m stumped.

But for now, pretend all that garbage isn’t there. We notice there are two things listed which we referred to before– the Granite Dwarves and the Pine Elves. I’ll click the Granite Dwarves and start editing them.

tw-24-granitedwarves

Now, notice the tags below. Since I didn’t click “New Here” from another tiddler, I had to enter the tags manually. Tags are separated by spaces. For Races, I just entered “Races.” But since there’s a space in “Granite Mountains,” I needed to include the double square brackets.

I’ll go ahead and save that, and let’s see what’s happened to the Home tiddler.

tw-25-redundant

Look at that, it added them under both Races and under Granite Mountains, even though Granite Mountains is itself a child tiddler.

Now, this might seem a bit redundant in this very anemic example, but I hope you can imagine how helpful this is in a more heavily-populated MPTW. Should you look for King Thatherton under NPCs or under the Kingdom of Thatherton? If he were only under one or the other, you might waste time searching, but this way you’re guaranteed to find him quickly and easily.

Let’s add an NPC. I’m going to open the Granite Dwarves, click new here, and make a new dwarf NPC.

tw-26-dwarf

Notice two things here. First, since I clicked New Here under Granite Dwarves, I needed to manually add the NPCs tag.

Second, you’ll see that I wrote //for a dwarf//. The double-slashes indicate that what’s inside of them should be italicized, like so:

tw-27-italics

Here’s some handy tips for marking up text in your MPTW:

  • Bold: Double-apostrophes. ”This text would be bolded.”
  • Italics: Double-slashes. //This text would be italicized.//
  • Headers: Prepend the text with an exclamation point, e.g. !History
  • Tables: Use pipes (that’s the | character you get by holding shift and pressing backslash) to separate each cell of the table, and put each row of the table on its own line. You can also make table headers by using exclamation points. Example:

    |!Table heading 1|!Table heading 2|
    |Contents of row 2, cell 1|Contents of row 2, cell 2|

Here’s a much fuller primer on TiddlyWiki Markup.

Well, there’s just one last thing to go over. I meant to go over it much sooner, but got a little caught up… Such is the danger of the TiddlyWiki!

Under your site’s title, you’ll see a link to the GettingStarted tiddler. Remember him? He was your guide in this scary new world of TiddlyWikis, and then after you got what you needed you just cast him aside like a weighted companion cube into an incinerator. But the GettingStarted tiddler isn’t quite done… The memory of him remains.

Click it again, and we can rid ourselves of his humble, helpful memory for good!

tw-28-fullcircle

Now click on MainMenu. This tiddler is a lot like DefaultTiddlers; you put a list of tiddlers here. Rather than these being opened automatically, though, this is a list of tiddlers which will be displayed at the top underneath the MPTW’s name.

Go ahead and erase GettingStarted. Now he’s gone for good! In his place, put [[Home]], and optionally you can include other tiddlers as well. I frequently put all my “top-level” tiddlers which are tagged as Home in there as well, since they’re the things I usually want to be able to access quickly and easily.

tw-29-menu

Conclusion

Well, I hope you’ve found this helpful. I find the MPTW to be absolutely indispensible in world building, personally. You know how you can be reading Wikipedia and just get lost in references? Well, working on a MPTW is kind of like doing that in reverse. You write one thing which spawns ideas for two more tiddlers, each of which spawn ideas for two more tiddlers, and before you know you need to be up for work in an hour and a half.

Happy tiddling!

Post to Twitter

9 Responses to “Making kickass campaign sites with MPTW”

  1. This looks very interesting; shall have to give this a go after my exam today. If you want a compromise between the three options, the Firefox extension POW (Plain Old Webserver) should be able to run it locally.

  2. Huh. That’s interesting. I don’t really see the sense in running a server as an addon when it’s so easy to run a fully-fledged server on your own machine. Actually, for a few years before I finally decided to start ponying up for hosting I used to do just that…

    If you’re interested in running a server, check out XAMPP, which is a really nice package incorporating Apache, MySQL and PHP all together.

  3. Very nifty…I might start using it myself…but I was wondering…Beside the password for updates, is there a way to put some passwords to make some part unviewable? Or would you recommend using more than one (for example, infos not viewable by players, only by DM/co-DM)?

    And, finally, you mistyped some locations and races links in your campaign ;) The Miss link is really neat! :)

  4. @Liack: After a bit of searching I dug up this plugin: http://www.tiddlytools.com/#TiddlerPasswordPlugin

    But you’re probably best having a separate tiddlywiki altogether.

    And, uh, I went back and intentionally mistyped those as an illustration for astute readers… That’s the ticket… >_>

  5. Thank you for making such a comprehensive and well written guide to MPTW. Fantastic!

  6. Ps, not sure if this is still the case in new Firefoxes, but it has been drummed into us TiddlyWiki users over the years to always right click the url for the empty.html file and “Save as…” rather than use the File menu to save, or else face a world of pain

    Pps, tell them about changing the colour scheme with a palette tiddler like these ones, http://mptw.tiddlyspot.com/empty.html#systemPalette :)

    Simon’s last blog post..UploadLog

  7. Regarding saving, everything I said above (including saving) is exactly how I did it as I went through the tutorial, so I can guarantee it’s safe to do it this way in Firefox 3.

    I’m guessing the problem some may have had saving Tiddlywikis is “HTML only” vs. “Webpage, Complete.” The former option saves the file exactly as the browser received it; the latter rewrites everything so that it should “look” the same, but will cause problems with any dynamic content of the type endemic in Tiddlywikis.

    Regarding the color schemes, I didn’t know if that might be too advanced for this tutorial… *shrug*

  8. [...] not my own. I actually got this from a post on the MPTW blog which linked to a site run by Asmor. The basic idea is to make a single default tiddler, eg Home, and then create top-level tiddlers by [...]

  9. To Asmor: try tiddlyspace.com which allows private and public tiddlers.

Leave a Reply

You must be logged in to post a comment.