Ink for the Web: Part 1: Exporting for Web

Ink for the Web

Learning Ink

 

Ink is a scripting language for creating interactive fiction like choose-you-own-adventures and other vast, branching stories.

Using the Inky editor and Ink’s tagging system, projects can be created for play in a web browser through adding images, using meta instructions, and customizing layout and styles using CSS.


 

Exporting for the Web

Screenshot 2018-08-29 11.49.04

When using the Inky Editor, code written in Ink can be exported for the web. When used in this way, a compiled Ink project can be played in a web browser and shared on sites like Itch.io for others to see.

Screenshot 2018-08-29 11.49.53

When used for the first time with a project, Inky will save the project based on the file name, creating a folder based on what is inputted in the Save As field.

Note: Screenshots from the MacOS X version of Inky.

Folder Organization

Screenshot 2018-08-29 11.52.08

Inside the exported project folder will be five files: index.html, ink.js, main.js, style.css, and nameOfProject.js.

Screenshot 2018-08-29 11.54.42

To play the project locally, open the index.html file in a web browser. It should appear as it did in the editor view but with the name of the project included at the top.

Screenshot 2018-08-29 11.55.40

Editing Files

Screenshot 2018-08-29 12.07.21

To prepare a project for others to play, two files are more important than the others: index.html and style.css. Unfortunately, these two files will be replaced each time the Export to Web process is completed.

Screenshot 2018-08-29 12.09.29

When editing the style.css file (to change CSS rules), use the “Export story.js only…” option from the File menu and select the nameOfProject.js file to replace only that file each time.

Note: Screenshots from the MacOS X version.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s