Introduction:Some of you have seen me around, but allow me to introduce myself. I'm Cora. I'm 26 years old. And before Christmas, I had never heard of Twine, I hadn't typed raw HTML since 2001, and I'd never even touched Javascript or CSS. If you're already having a case of TL;DR or you don't care to find out how I did what I did, you can simply scroll down and download the build at the bottom of the post. Otherwise, I want to show you what can be done when an amateur pushes Twine and only the most basic macros and stylesheets.
Why? I'm also a graphic artist. I don't have the literary talent of the best Twine authors, but that doesn't mean I can't contribute in my own way. I hope this inspires you, or at least lifts any imagined limitations you may have put on Twine. So with that, let's list the features I've used.
Note: Much of this code only operates in modern browsers because it uses HTML5. Chrome or Firefox are recommended.Basic CSS:If you use Twine a lot and think learning CSS isn't worth your time, think again. Understanding layout is the simplest and most important thing you can do to improve the look and feel of your game. That doesn't even count all the actual gameplay it can add if you're even mildly clever. Go
learn it. Write your own stylesheets. Center elements. Make windows scale to the text that's inside them.
I used it to create dialog boxes and event windows in JRPG style. A macro isn't even neccesary if you want to stay simple. All this can be done with nothing but CSS and some HTML tags.
![undefined]()
Animation:CSS animation is a handy tool no matter what kind of game you're putting together. Even in it's most basic form, you can see the power it holds in screen transitions. Even a simple fade to black. But it can go much further. CSS is even capable of rotating 2D graphics and applying perspective warp. You could move a passage link across a screen, making it difficult to click. You could create a compass that rotates in the direction of the correct passage.
Or you could go completely insane. Still, there's no need to be complicated. Simple effects can work wonders.
Learn it if you like or check out
Dan Eden's open-source CSS code.
I used it for splash screens and transitions. It makes the community stronger, and it expresses gratitude to the authors of a great piece of open-source software. This is the kind of idea that's a win-win for you and the community. Twine gets more users, which means more people play your game. Besides, it looks great and ups the perceived production value of your game. And if you're going to make one splash screen, why not also use the opportunity to advertise yourself and the people who made the game possible?
![undefined]()
![undefined]()
Sound:Audio is a powerful element in general. It is capable of evoking emotion in many of the same ways stories do. It can be what separates a good Twine game from a
great Twine game. Even the most minimal sound effects add a level of immersion to an otherwise purely visual sensory engagement. There are some caveats. HTML5 is still new.
Browser support is scatter-shot. Be aware that you'll need to either use
established methods of playing sound or you'll need to research what browsers support what formats. Be prepared to host multiple versions of the same sound in some cases. Fixes will come with time. This week I even saw an open-source 8-bit sound creator that runs on Javascript and loads saved sounds with a string (so it's possible to embed them in HTML like images and fonts).
I used it for menu items and minimal effects. Since this is a demo, music is only going to distract. In addition, because the aim of Twine is to deliver a single small file, my sounds needed to be hosted online and I simply don't have a place for that.
Keyboards:This is something that most people don't think about short of the <<textinput>> command, but keyboards can do anything you want them to. You can
bind entire macros to keys. You could even use this in conjunction with a canvas element to make an HTML5 game from scratch, but that's not what we're here to discuss. The point is the power of the keyboard when you want to go above and beyond a simple point and click game.
![undefined]()
I used the keyboard for an almost-complete cursor macro. Check it out in the game proper. In Twine, all you need to do is supply an array (<<cursor "Go upstairs" "Go downstairs" "Go outside" "Go to bed">>) and it works. Once its finished, I may release it on it's own, but it's only the tip of the iceberg of what's possible.
Variables and Arrays:If CSS is the simple thing that makes your game look nice, this is the simple thing that will make your actual gameplay shine. Twine is a tool to tell stories about choice. Variables are by their very definition that choice. The more you can do with them, the more interactive of an experience you can leave a user with. I highly recommend experimenting with basic Twine commands like <<if>> and <<set>> until you know them backwards and forwards. I would also highly recommend memorizing
these Twine methods. Once you have them memorized, you can take them into Javascript when you're ready and then you'll be well on your way.
I made an inventory screen with it that displays user stats, the current player location, the players money, and their traits.
![undefined]()
I also implemented a paperdoll system with nothing but variables and the CSS mentioned earlier.
![undefined]()
![undefined]()
Expertly written Twine games come in two varieties. The literary and the technical. Let's strive to be both. If someone like me can do this, then I really want to spread the word and see what those established coders and developers can come up with. Let me know as well if there are any other learning resources you found helpful. I'll link them if they're relevant.
Version 1.1:
- The cursor no longer resets to position 1 after every selection
- Imported fonts issue has been solved but it still not implemented
- Implemented x and y movement with the cursor as new 'cursortable' macro
- Implemented SNES/PSX style name entry grid
- If keys are held down, the cursor may not update correctly
- The trait selection screen may 'flash' before animating in
- Temporarily not working in Firefox. Use Chrome for a moment...
Download:Here
