Twine 2. Обзор и руководство для начинающих

К слову, AXMA сохранила тормознутость предшественника. Кто-то говорит. что все нормально, но у меня она всегда тормозит. А еще меня отталкивает жопоголизм разработчиков: за 1000 рублей нам предлагают сохранение HTML-файла, отсутствие копирайта AXMA в файле и (sic!) лицензия на редактирование файла. Это как если бы Adobe требовали ставить копирайт «powered by PhotoShop» в каждой отфотошопленной фотке. И меня пугает внутренний язык разметки/макросов. Но тут кому как.

Внешне Harlowe выглядит совместным потомством языков Clojure и Python. От первого ему достались команды, обернутые в круглые скобочки и минимальный набор используемых знаков пунктуации; а от второго он получил наименование переменных через $variable, три вида массивов и отсутствие «логических скобок» в некоторых макросах. Хотя лично я бы сделал Harlowe более питонообразным. Потому что макрос вида (if (a>b): (print «a>b»)) выглядит изящнее чем (if: (a>b))[(print: «a>b»)]. Как минимум, меньше вложенных скобочек, и в первом случае я лучше вижу логику.

(set: $variable to value) – устанавливает некоторое значение в переменной. Имя переменной начинается на $.

(print:) – выводит некоторый текст или результат вычислений. Например (print: 5 + 5) выведет 10.

(display: «имя параграфа») – выводит содержимое параграфа.

(if:)[](else-if:)[](else:)[] – стандартная логическая цепочка if-else. В квадратных скобках пишутся действия, которые выполняются при условиях. В (if:) и (else-if:) после двоеточия пишется условие, в(else:) — нет. конструкций (else-if:) может быть несколько. В целом, такая структура соответствует операторам switch-case-dafault в том же JavaScript.

(a:) – создает нумерованный массив. Элементы массива указываются после двоеточия через запятую: (a: 1,2,3,4,5).

(datamap:) — создает именованный массив вида ключ-значение. Т.е. (datamap: «Name1», Value1, «Name2», Value2) вернет массив строк Name1 и Name2, которым соответствуют значения Value1 и Value2.

Макрос (datanames:) вернет массив имен в datamap, а (datavalues:) — список значений.

(current-date:), (current-time:), (monthday:) и (weekday:) возвращают Текущую дату, Текущее время, Число месяца и День недели.

(link: «text»)[New text] — создает интерактивную ссылку, после нажатия на которую текст ссылки подменяется на содержимое квадратных скобок.

(link-reveal: «text»)[after text] — создает ссылку, по нажатию на которую текст ссылки дополняется текстом из квадратных скобок.

(link-goto: «text», «passage») — полный аналог [[text->passage]].

(link-goto: «passage») аналогичен [[passage]].

(go-to: «passage») – безусловный переход на блок passage.

(alert: «Message») — выводит сообщение.

(confirm: «Message») — выводит сообщение с кнопками ОК и ОТМЕНА. Возвращает true или false. Использует Python-подобный принцип: (set: $wantCake to (confirm: «Do you want a cake?»)) – и позволяет напрямую забирать ответ пользователя.

(prompt: «Message») — выводит сообщение и поле для ввода. Можно использовать для запроса пользовательского имени: (set: $name to (prompt: «Your name, please:»)).

Это самые основные макросы, которые понадобятся в самом начале. Остальное есть в документации по Harlowe.

Интерфейс Twine довольно прост. Его можно разделить на главное окно и окно истории. На главном окне вы видите список своих историй, открываются они двойным кликом. В меню справа полезные кнопки это + История, Форматы, и Язык. В меню Форматы можно выбрать между форматами Harlowe, Snowman и SugarCube и выставить его по умолчанию. Harlowe стоит по умолчанию, собственно о нем и идет здесь речь.

После нажатия на + История нам предлагают ввести имя истории и Добавить ее или Отменить решение. История появится в левом верхнем углу списка. На самом блоке истории отображается миниатюра истории. В правом верхнем углу миниатюры под значком шестеренки скрываются подменю: Запустить историю, Тестировать историю, Опубликовать в файл, Переименовать историю, Сделать дубликат истории. Чтобы открыть историю для редактирования по ней нужно кликнуть два раза.

В окне истории вы видите синее размеченное поле и меню внизу. Там расположены кнопки Домой в виде домика, Кнопка с названием истории, поисковая строка, кнопки масштаба,Тестировать, Запустить и +Параграф. В меню с названием истории есть разделы Редактировать JavaScript, Редактировать таблицу стилей, Сменить формат истории, Переименовать историю, Привязать к сетке, Статистика истории, Получить копию для вычитки и Опубликовать в файл. Лично для меня полезными были Редактировать JavaScript (учтите, скрипт загрузится в самом начале, до того, как загрузился движок, на котором работает сама игра), Редактировать таблицу стилей, Привязать к сетке (очень удобная вещь), получить копию для вычитки и Опубликовать в файл (открывается окно для сохранения истории в standalone-файл с движком внутри).

Чтобы добавить параграф нужно нажать + Параграф. На поле появится новый блок. У блока есть всплывающее меню из четырех иконок: Удалить, Изменить, Тестировать и Сделать «имя параграфа» отправной точкой истории. Параграф так же можно удалить кнопкой Delete, а открыть двойным кликом.

У каждого параграфа есть название, на на которое ссылается указатель, а так же тэги, которые можно использовать для стилизации и форматирования. В меню окна приложения есть пункты Twine и Редактировать. В меню Twine есть пункт Показать библиотеку – удобно для добавления историй, хотя это можно сделать через главное меню. Отменять/вырезать/копировать/вставлять можно и через Ctrl+Z/X/C/V. Да, правая кнопка мыши не работает.

В Harlowe учитываются тэги, прикрепленные к блоку. Добавить их можно по кнопке +Тэг под названием истории.

Если вы хотите добавить шаблонный элемент, который будет на каждой странице, добавьте тэг header (содержимое будет отображать над текстом) или footer (содержимое будет отображать под текстом).

Тэг startup позволяет вставить макросы, которые загружаются до начала истории. Здесь можно, например, проинициализировать все переменные.

Так же Harlowe поддерживает локальное хранилище в браузерах. Это позволяет сохранять и загружать состояния игры:

(savegame: «Slot A») — сохраняет игру в слот «Slot A»

(loadgame: «Slot A») — загружает игру в слоте «Slot A»

(saved-games:) — возвращает список сохранений.

В Harlowe есть свои особенности по обращению с переменным и массивами в частности. Так, можно напрямую обратиться в элементу массива через (a:)'s 1st, 2nd, 3rd или last. Так же вместо этого поддерживается синтаксис вида (a:)'s (1) для доступа к первому элементу, (a:)'s (-1) — к последнему элементу.

Twine 2, поскольку он написан на HTML/JS, поддерживает скрипты и HTML/CSS. Для кастомизации содержимого через CSS полезно знать следующие элементы внутренней разметки Twine 2:

• tw-story — корневой элемент истории
• tw-passage — элемент, в котором рендерится сама история. Содержит стандартные свойства, аналогичные элементу div, стой лишь разницей, что свойство width имеет значение по умолчанию 60%.
• tw-link — элемент, в который оборачиваются ссылки типа (link:), (goto:) и [[]]. Поддерживает класс .visited.
• tw-sidebar — элемент, в котором отображаются кнопки вперед и назад.
• tw-icon — иконки вперед и назад. Класс .undo отвечает за иконку назад, .redo — за иконку вперед.
• mark — элемент, используемый для части HTML, которую нужно оставить без изменений. по умолчанию имеет свойства color:rgba(0,0,0,0.6); background-color: #ff9.

Вариант первый

1. Создайте отдельный параграф startup и добавьте ему тег startup.
2. В блок вставьте следующий код:(set: $inventory to (a:)). Эта строка создает пустой массив для инвентаря.
3. Создайте блок inventory с тегом inventory и вставьте следующий код: (text: $inventory.join(«\n»))(link-repeat: «back»)[(goto: (history:)'s last)].
4. Создайте блок footer с тегом footer. Это шаблон, который будет выводиться внизу страницы. Вставьте следующий код:(if: (passage:)'s tags contains «inventory»))[](else: (link-repeat: «check inventory»)[(goto: «inventory»)])

Вариант второй

1. Создайте отдельный параграф startup и добавьте ему тег startup. В блок вставьте следующий код:(set: $inventory to (a:))
2. Создайте блок footer с тэгом footer и вставьте следующий код: <div class=«inventory»>(text: $inventory.join(«\n»))</div>
3. В левом нижнем углу откройте меню и выберите «Редактировать таблицу стилей» и вставьте:.inventory{border-left: 1px #000 solid;float: right;top: 10%;left: 80%;position: fixed;padding: 20px;display:block;}Теперь ваш инвентарь отображается в блоке справа на каждой странице.

Кстати

Я использую объединенный вариант, потому что решил сделать систему с инвентарем и журналом.

При создании большого проекта, состоящего из over9000 страниц, или совместном написании проекта могут возникнуть трудности с размером файла. Поэтому предлагаю такой рецепт:

1. Создавайте историю как несколько блоков – в Twine это можно сделать создавая их как отдельные истории с именами Имя истории-1, Имя истории-2 и т.д.
   1. Проверьте, что у ваших историй есть входы и выходы – они могут висеть пустыми. Главное чтобы окончание истории имело продолжение в другой, с таким же названием. После чего можете удалить висячие параграфы
   2. Проверьте, не повторяются ли у вас общие блоки. Это могут быть характеристики персонажа, инвентарь, журнал. Удалите эти блоки из всех историй, кроме, например, первой или последней.
   3. Создайте пустой проект с названием Имя истории и удалите из него автоматически созданный блок.
   4. Проверьте любую мелочь, которая может отвалиться.
2. Скачайте и установите Notepad++. Он переваривает крупные файлы и у него есть подсветка синтаксиса.
3. В верхнем меню выберите Twine -> Показать библиотеку. После чего Twine нужно закрыть, он нам понадобится в самом конце.
4. Выделите все файлы, относящиеся к истории, и откройте их в Notepad++.
5. Структура у проекта следующая:<tw-storydata><style></style><script></script><tw-passagedata></tw-passagedata>...<tw-passagedata></tw-passagedata></tw-storydata>.Перенесите содержимое блоков <script></script> и <style></style>, если у вас там что-то есть.
6. Пройдитесь по всем файлам истории, делая следующее: замените pid=» на pid=»0n, где n – номер истории, который вы редактируете. Это позволит избежать конфликтов в игре после ее слияния в один файл.Так же удаляйте все блоки <script></script> и <style></style>, потому что мы их уже перенесли.
7. Начинайте по очереди – из каждого файла – переносить содержимое между тэгов <tw-storydata></tw-storydata>. Переносить их нужно в общий файл, который мы создавали самым последним.
8. Когда содержимое всех частей истории перенесено, эти файлы можно закрыть. В начале общего файла найдите строку startnode=»1» и замените значение на «011», чтобы не потерять старт истории.
9. Сохраните изменения в общем файле и закройте его. Откройте Twine и подождите пока он прогрузит историю. И я не советую вам открывать ее в редакторе. Это будет очень медленно.

Когда Twine прогрузится, в правом верхнем углу истории (общий файл, без цифр), нажмите на иконку шестерни и выберите Опубликовать в файл. Остальные действия такие же, как были описаны выше, в разделе Публикация.