Howdy, Stranger!

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

What's Possible in Twine 1.4 - Some Basic Javascript and CSS

edited January 2014 in Workshop
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

Comments

  • Greatest work in Twine ever, in my opinion. Astonishing.
  • My brain just exploded. This is incredible!
  • I just want to put it out here that I don't really support W3Schools as a learning resource, because many of their pages are notorious for having out-of-date information (i.e. no-longer-valid browser support tables, unnecessary vendor prefixes, etc.). I believe Mozilla Developer Net has about the same information, but updates it more regularly (and has no ads - always a plus in my books).

    (In W3S's defense, however, the "Try it yourself" feature is kind of good for hands-on learning.)
  • Thanks everyone. L, I'll work on finding better material for tutorials. You did a hell of a job on Glorious Trainwreck though, so I think those links are good.

    I've fixed the cursor reset bug. Adding X and Y movement now. The code also recognizes all alphanumeric keys, even though no functions are tied to them yet. When the feature set has been updated that I feel another release is warranted, I'll update the original post.
  • Updated with version 1.1.

    Some bugs fixed, a few new features added. Still working!

    EDIT: Apparently this is buggered in Firefox again. Working on it.
  • Hey Cora:

    I literally joined this forum (I've been lurking TWINE since just before Christmas myself) just to say that this work is incredible (RPG engine). This is precisely the direction / capability I was wondering if the engine could be used for (Horse Master showed me an inkling).

    Amazing work. I will have to start teaching myself CSS and playing with TWINE now! Much like you are a graphic designer / artist looking for a medium, I'm a writer in the same vein (which is why why TWINE was so appealing). And a pathetic visual artist! haha.

    Love where this project / engine is headed and I think you could really be onto something here in terms of providing inspiration and assets!
  • Necropost - the link in the OP is dead and CoraBlue seems to be inactive. Can anyone reupload?
  • In my opinion, CoraBlue was the most promising Twine developer of all.

    Unfortunately, she disappeared from all her publicly-known Internet hangouts that I was able to locate. I miss her very much.

    I don't have any of the files she uploaded here and what I do have of her's, she didn't want uploaded. Sorry. :-/
  • I'm sorry I died! By this point though, the tws won't be compatible with the latest versions of Twine or Sugarcube I'm 99% sure. But I'm working on new stuff and trying to stay active.
  • CoraBlue! Awesome. I haven't worked on anything since you left. No motivation. I just log in here once a day to make sure no one's went crazy or whatever. Otherwise, I barely think about Twine.

    So glad you're back. I don't think I could write even a simple Twine game at this point it's been so longI think I'm still on version 1.4.1. However, I've been in the mood lately. Maybe your return will get me back into it.

    Looking forward to seeing whatever you're making.
  • The download link isn't available anymore.
  • You will need to contact CoraBlue and ask them to update the link, unfortunately they last accessed this forum in March 2015 so they have not visited this site for a while.

    Searching for "CoraBlue" on Google resulted in a number of artist related sites but I don't know if they are the same CoraBlue.
Sign In or Register to comment.