Twine

О программе

Twine – это программное обеспечение для создания интерактивного контента игровой или повествовательной направленности на основе текста и гиперссылок. В Twine люди создают визуальные новеллы, текстовые игры с нелинейным сюжетом (If-игры), прототипы игровой логики, презентационные материалы… Возможно встраивание изображений, видео, аудио посредством html-кода. Проект экспортируется в условный HTML5 формат с возможностью просмотра в любом браузере и распространения в интернете.
Знание программирования и языка разметки не требуется, но если вы знаете базовый HTML, то будете во всеоружии. За внешней простотой программы кроется толстый пласт возможностей.

Идеология работы

Впервые запущенная программа покажет вам пустой список историй в разделе Story. Добавив по кнопке [+ New] новую историю (ваш новый проект) вы увидите поле с одним стартовым элементом Passage. На это поле добавляются новые Passages по кнопке [+ New]. Это параграфы, страницы, слайды… как угодно можно назвать эту сущность, которая представляет собой контейнер с контентом. Для более посвященных можно назвать Passage интернет-страницей или блоком с html-содержимым.
Самым популярным элементом контента является гиперссылка на другой параграф – это связь между параграфами, которая на карте имеет визуальное отображение в виде стрелки. Таким образом, самое большое пространство окна программы занимает наглядная карта связей всего проекта (Story).

Чтобы отредактировать содержание параграфа надо совершить по нему двойной клик и окно редактора откроется справа. Редактор – это сборная солянка подходов к редактированию. Здесь и простой набор текста, и вставка элементов контента через кнопки панели инструментов, и вставка элементов контента путем набивки специального кода, и форматирование с помощью кода, и форматирование с помощью сочетания горячих клавиш. Привыкший к MS Word будет слегка ошарашен, а знакомый с языками разметки Markdown и HTML будет приятно удивлен.
Примеры вариантов создания гиперссылки:

Набрать текст – [[Слайд_2]] – это будет переход на Слайд_2 с анкора "Слайд_2".
Набрать текст – [[Следующий->Слайд_2]] – это будет переход на Слайд_2 с анкора "Следующий".
Через меню редактора – Панель управления > (Macro:) > Link можно создать гиперссылку на другой параграф с анимационным переходом.
Набрать текст – <a href="http://www.barius.ru">Библиотека</a> – это будет внешняя ссылка на сайт www.barius.ru с анкора "Библиотека".

Вообще, гиперссылки являются любимым инструментов Twine и работа с ними максимально облегчена. Так, достаточно сказать, что при простом наборе [[Слайд_2]] новая страница "Слайд_2" будет создана автоматически и отражена на карте связей с визуализацией этой связи.
Формат проекта по умолчанию не предусматривает вставки медиаконтента через кнопки панели инструментов. Тогда пользуйтесь базовыми тегами HTML для этого. Например, чтобы вставить изображение с сайта наберите текст:
<img src="https://inforapid.org/webapp/images/logo.png">
Будет вставлена картинка. Есть такой нюанс – если картинка берется по протоколу https, то все в порядке. Если картинка берется по протоколу http, то картинка не отображается и лучше картинку сохранить в папку, куда будет публиковаться результирующий html-файл, и путь к картинке прописывать самый минималистический: <img src="logo.png">

Переменные

Присутствие переменных в арсенале разработчика проекта повышает авторитет программы и функциональность проекта. Как их использовать:

• Наберите в параграфе "Страница_1" код: (set: $city = "Таганрог")
• Наберите в параграфе "Страница_2" код: Город $city

Форматы

Формат в Twine – это по сути движок проекта. То есть, это JavaScript-файл с кодом, который позволяет использовать и обрабатывает те или иные функции, макросы, синтаксис…, используемые в проекте. Twine позволяет единовременно использовать один из доступных форматов. Иными словами можно сказать, что форматы различаются возможностями парсинга кода, набранного в редакторе.
Переключаться между форматами можно через меню: Twine > Story Formats. По умолчанию используется формат Harlowe. Встроенные форматы хранятся в папке story-formats веб-версии программы.

Стили

Стиль истории, который выбран по умолчанию разработчиками проекта, меня ввергает в депрессию. Это крупный шрифт белого цвета на черном фоне. Такое впечатление, что все пользователи только и мечтают писать свои истории о зомби и загробном мире. Тот, кто с этим не согласен, может написать код своей стилизации страницы и разместить этот код в начале каждой страницы.

Откуда взять код.
Во-первых, можно воспользоваться руководством пользователя текущего формата и накопать там нужную информацию.
Во-вторых, можно воспользоваться "Styling with Enchantments" в виде скачанного html-файла, открыть его в Twine и пробежаться по предложенным стилям, которые, прочем, тоже "вырви-глаз".
В-третьих, вот простой код для иной стилизации страницы:

(enchant:?page,
	(bg:#DDDDDD) + (colour:#333) + (font:'Verdana')
)
(enchant:?link,
	(colour:#99D) + (t8n-arrive:'instant') + (hover-style: (color:#FFF))
)

P.S. Как скачать проект со стилями:

1. Зайдите на стр. https://twine2.neocities.org/
2. Задайте поиск (Ctrl+F) по контексту "Styling with Enchantments".
3. Наткнетесь на строку "Styling with Enchantments [download]."
4. Совершите клик по слову "download".

Публикация/экспорт

Публикация в HTML5 осуществляется в разделе Build по кнопке [Publish to file].
Публикация по своему термину подразумевает публичный вариант вашего проекта, целью которого является познакомить с ним широкие слои общественности через интернет.
Сохраняется один файл *.html со встроенным в него CSS для оформления, и JS для парсинга и логики twine-кода, который присутствует в блоке <body>. Да, twine-код – это не чистый html, а тот код который вы набираете в редакторе Twine, и JS его обрабатывает, превращая в HTML, понятный браузеру. Если у вас есть медиаконтент, который подразумевает присутствие не на стороннем сайте, а на вашем по относительному пути, прописанному в twine-коде, то вы о нем должны позаботиться самостоятельно.

Экспорт осуществляется в разделе Build по кнопке [Export as Twee]. Это сохранение файла проекта, который можно впоследствии открыть в Twine на другом компьютере. Острой необходимости в постоянном экспорте нет. Например, браузерное воплощение Twine хранит проект в куки браузера и при очередном открытии Twine в браузере актуальная версия проекта подтягивается.
Тем не менее, размер куки имеет конечное значение, куки могут быть очищены… и другие недосмотры могут привести к потере проекта, если его периодически не сохранять.
Итак, если вы экспортировали проект в файл *.twee, то его можно импортировать в программу при запуске ее в браузере – в разделе Library нажмите кнопку [Import] и выберите свой файл на диске.

P.S. На самом деле и опубликованный *.html, и экспортированный *.twee являются импортопригодными файлами. Только *.html еще самодостаточен, ибо его можно отображать в браузере независимо от Twine.

Скачать, посмотреть, почитать

🌐 Страница скачивания Twine в гитхабовском репозитории разработчика: https://github.com/klembot/twinejs/releases
Twine имеет воплощение в виде web-приложения и десктопных программ для Windows, Linux, macOS. Web-приложение весит 1,7 мб, а десктопное приложение весит в среднем более 100 мб. Функционал при этом один и тот же. Поэтому, я даже не стал заморачиваться с десктопым вариантом, а скачал web-приложение и его запускал в браузере через index.html.

📘 Подробное руководство по формату Harlowe: https://twine2.neocities.org/ (этот формат редактора включен в Twine по умолчанию).