If you have an interest in writing and game dev, it’s likely you’ve heard of Ink. If not, it’s a scripting language developed by Inkle Studios, primarily used for writing interactive narrative games.
We won’t go through how to it or all its awesome functionality, etc but rather outline the steps for if you want to share your branching writing on itch.io in web-based environment.
This is incredible if you want to get your interactive tales out to the world quickly or to make links for a portfolio.
Step 1: Open your Ink file in the Inky editor
You will need to download the Inky editor if you don’t already have it. This program allows you to write and play through your Ink code. It probably goes without saying, but you’ll also need to write some stuff in an .ink file if you haven’t already.
https://www.inklestudios.com/ink/
Step 2: Go to File -> Export for web
Note: You may wish to configure some things in your .ink file prior to packaging everything up for web. For example, you can add your name as author at the top of the file, or make it prefer a dark theme.
# theme: dark # author: Melissa Koven
Check out this link for more info on how you can customize: https://www.inklestudios.com/ink/web-tutorial/
Alright, click export for web once you’re ready.
Make sure to pick a name that makes sense and looks good, as it’ll be the header of your ink page.
Step 3: Test our your html file
Go to the location where you saved your web export folder and open it. You should see these files (example.js will be named after your story though).
Double click the .html file to get a preview of your ink project.
Cool, that should be working locally.
Step 4: Customize CSS or JS if needed.
The main files you might really want to update are:
- style.css – this is the file where you can update all the styling for your page, for example, fonts, colors, spacing, etc.
- main.js – allows you to control the behavior of how your story is presented.
I’ll modify the style.css a tad so you can see.
I did some changes to make my fonts a bit different and the speakers have different colored lines of dialogue. That’s a very basic example, but you can customize a lot if you wish to add life and branding to your story.
Step 5: Publish on itch.io
Go to https://itch.io/game/new. (You’ll need to sign-up for itch if you haven’t already).
- Give your project a title, URL and short description
- For “Kind of Project”, specify as HTML
- Under “Uploads”, upload a ZIP of your folder that .ink generated for web.
- Tick “This file will be played in the browser”.
- Set the “Embed options” as your preferred dimensions for viewing. You may wish to view your page after you publish, then come back and tweak it. I put mine at 1200 x 800 because I want it to feel very big and easy to play through.
- For “Frame Options”, tick at least the boxes for mobile-friendly and fullscreen button.
- Under “Details”, fill out the description, genre and tags as you wish, as well as the other sections.
Private or public?
For visibility and access, you can choose to have a restricted or public page.
I configured mine as a private project that can only be accessed by providing a password after going to the link.
Once happy, click Save and View Page.
Have a look. You can edit it to alter the formatting and other settings as you would like.
Note that you can also embed your browser-playable Ink game on other websites by copy-pasting the embedding code! Simply go to the Distribute tab for your Ink game, then click Embed game from the left panel menu.
