Twine, Visual Novels, and Images

As of today, we are officially halfway done with the written portion of Infernal Handgun Championship's development! Our stats so far:

  • 44,471 Characters
  • 7,529 Words
  • 93 Passages
  • 120 Links
  • 13 Variables

Not half-bad, I don't think! Things are progressing smoothly, and as far as writing goes, we're a day ahead of schedule! Because of that, I'll be taking the rest of today and tomorrow off on the project. But I do want to talk about how Twine handles images, and why it makes development go much smoother.

In 2016, my partner and I formed our studio, Atelier Garbage, to create interactive fiction. We started with a Visual Novel called "The Lonely Tower," a story about two girls who uncover the secrets of a mysterious structure that requires a sacrifice every twenty years in order to prevent a drought. We finished the prologue of the story and released it as a student project of mine, essentially completed. But afterward, progress essentially stalled.

This is because what makes our studio unique has a hand in our obstruction. My partner, who goes by the pen-name "Medusa," draws all of their art by hand, in what I personally consider to be an amazing watercolor, impressionistic style. Some examples below:

outside_tower.png
fight_1.png
town.png

This is both a blessing and a curse. Medusa's art is what sets us apart, but programs like TyrannoBuilder and Ren'py aren't suited for scaling hand drawn images. Resizing is a huge pain, and leads to strange scenarios like this one:

2016-12-05 (2).png

As you can see, the scaling is completely off, even though when the two pictures are put next to each other in physical form, they line up without issue. This made things a huge pain for Medusa, especially coupled with the fact that an artist handles a large amount of the workload when it comes to creating different character portraits, facial expressions, and CGs for a Visual Novel.

I'm proud of the work we accomplished with The Lonely Tower. But I'm also glad we've decided to use Twine for our next project. In the realm of Twine-based interactive fiction, images are used to supplement the story - not unlike a picture book. This leaves Medusa free to stretch their hand drawing muscles and go nuts, without having to worry about arbitrary height and length requirements. In Twine, you only have to worry about an image's scaling in terms of percentages, rather than exact pixels. If Medusa sends me an art asset that I throw into Twine and it ends up too big, I can scale it down by 50%, without stretching or losing the quality of the art in any way.

Image manipulation in Twine is simple, and we'll demonstrate with an example of a rough sketch of Mars that Medusa sent to me recently. All one has to do is import an image! It appears directly as a tile within the Twine story building layout, like so:

Then you just link it into a passage like anything else in Twine!

See! Looking grea-wait a second, that's not right. The image is too large! It's moving past the borders of the new stylesheet I implemented, plus you have to scroll like crazy to access the image. So we'll have to do some resize magic using an old friend to us all.

Paint! Why complicate things? Paint makes it super easy to resize an image in a few clicks, then get saved as a copy. Reinsert the image through Twine itself, and...

It fits! Easy, simple, to the point. Twine is so friendly to work with! You'll get to see the full range of Medusa's fantastic art when Infernal Handgun Championship releases in full!