Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

Example Turn-Based RPG (Pre-Alpha v. 0.4)


An example turn-based Twine RPG has been requested a number of times on this forum and back in the old Google Groups. Recently, I threw together a rush job in about four hours for the Twine 23 Challenge. It was horribly unbalanced, but served as a rough, unfinished example with answers to a number of common questions. However, in order to meet the passage requirements of the challenge, I used several loop passages that, for those unfamiliar with them, made the game's code much harder to read than necessary.

I continued to work on it until it grew into a huge monster that far surpassed its original intent. So, I came back to the original version and created another branch. It's still rough and unfinished with unbalanced and monotonous game play, but it should better serve as a basic example of how to create a turn-based RPG in Twine. This is all Twine syntax; no script passages! (Well, the SugarCane version uses a config passage rather than StorySettings.) So, even the most novice Twine user should be able to follow this example or use it as a foundation to create his or her own basic turn-based RPG.

Again, this is not really meant to be a fun, exciting, or interesting game. It's a mapa beginners guide to the very most basic aspects of creating such a game for those in totally unfamiliar territory.

To better understand this game's code, you may wish to fist review one of my tutorials on the use of objects in Twine: Objects are Your Friends: How & Why to Use JavaScript Objects for Total Newbies

I made two editions. The first (TwineRPG-SCE) is made in SugarCube. The second is in Sugarcane, the default header. The only real difference at all is that SugarCube has saves, which are essential for this type of game. Also, the textbox macro at the start of the game uses a different syntax style than Sugarcane's, and the sidebar CSS selector is different (#ui-bar in SugarCube, #sidebar in Sugarcane). Those are really the only differences, but the ability to save from SugarCube is a big deal. The conversion back to Sugarcane was a bit of a rush job, so I hope I didn't miss anything. I noticed some minor whitespace and formatting issues, but I wasn't going to take the time to track them all down.

I doubt I'll continue to develop or release further versions of this example RPG, though I'll probably fix any reported bugs.

The full version of the game is much, much further along. It's massive. It has a lot of commissioned artwork as well as music and sound effects. It also has several features not present in this version. I have no idea when I'll finish it. Probably not this year.

If you have any questions, don't hesitate to ask. That's why I created this version in the first placeto show Twine beginners how to create a basic turn-based RPG.

Thanks for reading, playing, and commenting!

Richard D. Sharpe


  • *bow*

    Just great work.
  • Thanks so much Sharpe!
  • I hope the comments are sufficient. I spent some time writing them.

    An example of the "scripted" battle you mentioned, Wraithbane, can be considered the Tester passage and also the Boss passage. Instead of what I have there, you can write narrative and such. As you'll see, you just need to set the $arena and $monster and then go to Combat Choice or Turn Sequence. While the Boss passage goes to Turn Sequence, I accidentally sent the Tester passage to Combat Choice by mistake, though it still works fine; it just would have been better to send it to Turn Sequence.

    From there, any "escape" (running or winning, for example) from the battle must have a place to return. There are a number of escapes from battle. Combat Choice is a largely-unnecessary passage in this version, but it sets the scene for "pre-battle" stuff present in later versions (e.g., ranged combat). So, I mention it in case you want to add code to the run option keeping it from showing up or make it send the player somewhere else. Other than that, the three main places where the player escapes from battle are:

    This line in "Player Turn":
    <<if $arena neq "Boss">>[[Run!|Run]]<br><br><<endif>>
    In "Run":
    You run away!<br><br>
    In "Death Check":
    <<if $arena eq "Explore">>
    <<else>> /% "Boss" $arena goes to "Dungeon" passage. %/
    Those are the three places where $arena becomes a traffic controller in this version.
  • I spent eight hours combing through this today so my brain can understand it all.
  • From PM:

    [quote author=Wraithbane link=action=profile;u=352 date=1397584576]
    You probably covered this somewhere in your tutorials and its so simple I feel dumb for even asking.

    I want to set a background image that reflects the location of where the player currently is in the game.  Whats the best way to set the background on each page using css and still having my floating box aligned left with a solid color and text defined?
    #content {
    float: left;
    width: 800px;
    padding: 1em;
    border: solid;
    Thats what I'm calling so far on every passage basically.

    Actually, I haven't really covered this and it's a good question. There is more than one way to go about this and note that I am not an expert in CSS by any means.

    We're talking about the background-image property here.

    What's worked for me might not be what you want, but what I've been doing is just using in-line HTML. In my passage I'll do:
    <div class="background"></div>
    And, my CSS looks like this:
    div.background {
    margin-right: auto;
    margin-left: auto;
    background-image: [img[sewer_back]];
    background-repeat: no-repeat;
    width: 512px;
    height: 128px;
    In this case, it's just for my sewer background. It's the only one I'm using at this point. However, I have several backgrounds for monsters. Forest, cave, grassland, swamp, etc. Instead of naming it div.background, when I get around to adding the other images, I'll name them, "div.sewer", "div.cave", etc. Only so much time in the day. ;)

    Another way to do it would be to add tags to your passage and have multiple stylesheets with corresponding tags. For example, you might add a "sewer" tag to a passage that has a sewer background. Then, you'd make another stylesheet with "stylesheet sewer" as tags (no quotes). In that, if you want the #content selector to have a background-image, you'd have:

    In your "normal" stylesheet:
    #content {
    width: 650px;
    height: 488px;
    border-width: 1px;
    border-style: solid;
    In each of your different image stylesheets, with tags in addition to "stylesheet":
    #content {
    background-image: [img[sewer]];
    Note, that code from the second stylesheet with the additional tag will be added in addition to the #content code from the "normal" stylesheet.

    There's yet another way that I couldn't get to work with imported images. Inline CSS. Something like this in your passage:
    <div style="background-image:url(''); border-style: solid; border-width: 1px;">bla bla bla bla bla</div>
    There's no "attached" CSS in the stylesheet; it's all right there in the passage. Again, I couldn't get that to work with imported images for some reason (nor could I get height and width to work). Maybe it's me doing something wrong.

    However, there might be another way using the content property so you could set the background-image with a variable, but I'm not good enough with CSS to know how to use it.

    Attached is a real quick-and-dirty example because it's easier to show than to explain.

    Hope that helps, but if not, get back with me. :)
  • I didn't mean JUST the content box, I meant the whole background.  I was able to mess around and get it to load using the stylesheet tag method, but it won't load anything past the first image loaded.  When it comes to the 2nd image - it just keeps showing the first one.  I'm putting the background part in the body.
  • For this, you need to only have bg images in separate stylesheets using the extra tags. It doesn't "override," or whatever. If you have one bg image in one SS (e.g., your "main" SS) and one in another (using an additional tag), it will show both at once.

    EDIT: And if I'm not reading you right, show me code so I can take a look. Because, as you see, that's not happening in my example. No image in Start, image in First, no image in Second.
  • Okay - here is an example TWS.  The black area should be first a House and then a Tree.

    I'm still playing around with it.. but not got it working yet.
  • Well, [img[location-house1]] should have been [img[house1]], so right there, you were dead in the water. XD Also, your background color was a non-transparent white. That would have blocked the image even had it been displaying. The image is behind the background color; it's like it "paints over" the background image. I didn't see any code about the tree.

    I re-attached your TWS, but without the pictures (house1 and magictree). If you put those back in with the former exact names, it will work as intended.
  • Thanks for your help.  I'm not being clear and for that I really apologize.  I don't want the graphic inside the box, I want it to be the graphic for the entire background and the box be where the text goes.
  • Oh, okay. Sorry. That's even simpler. Instead of #content, put the background-image in the HTML body.

    Again, I re-upped it without pictures. When re-importing them, make sure to name the pics exactly as before. :)

    EDIT: And, if you don't want to make multiple stylesheets with tags, then I'm not sure the easiest way to do this for your game specifically. For mine, I don't need whole-body background images. My backgrounds are smaller pixel art that just go behind the monsters. That's why I used DIV's.
  • wow, this is a lot more complex than I had imagined.
    Well done! it's really great.

    I am trying to figure out my own combat system for something more like the old adventure gamebooks, I was hoping there would be a way to do it with one looping passage. Although, my coding knowledge is pretty much newbie level. Going to put my head down to it now, see what I can work out. Any suggestions, or examples would be appreciated :)

    PS- I managed to make one, based on the combat system from Joe Dever's Lonewolf books.
    The code is undoubtably messy, but if anyone wants to see, let me know.
  • This is wonderful, Sharpe. I really mean it. You are a treasure.
  • So is this the most efficient leveling system? I literally started writing something the other day (so feel free to tell me I don't know what I'm talking about because you'd be right on) but I'm wondering if there isn't a way to tell the program to add, for example, 50 health points for every level over 0 - in other words, not have a hard level cap? I'm spitballing here, but something like

    <<set $player.level += 1>>
    <<set $player.maxHP = ($player.startHP += 50*($player.level))>>
    I'm probably going to try that right now, but if someone can glance at it and see that it's wrong, it'll save me some frustration over the next few hours.
  • Wouldn't just adding 50 HP every level do as you describe?

    Sorry. I'm about to fall asleep and I couldn't do the first thing in Twine it's been so long since I've even opened it. :-(
  • How to import?
  • How to import?

    I had to download and import the file into twine 1.4 to get it to work, and I couldn't get the sugarcube version to work at all, so download the one on the right and it should be fine.

  • I'd love to wok on this woth Twine 2.
    Is someone could help me to import ?
Sign In or Register to comment.