Rivalry2

HTML Diff

0 added 0 removed

Original 2026-01-01

Modified 2026-02-21

1 <a>#статьи</a>

2 <ul><li>28 июл 2023</li>

3 <li>0</li>

4 </ul>Разбираем все особенности программы.

5 Иллюстрация: Colowgee / Stable Diffusion / Twine / freepik / Colowgee для Skillbox Media

6 Считает игры произведениями искусства и старается донести эту идею до широких масс. В свободное время стримит, рисует и часами зависает в фоторежимах.

7 Перед тем как приступить к созданию нелинейного повествования, каждый разработчик, нарративный дизайнер или автор интерактивной литературы наверняка задумывался о том, как упорядочить варианты развития сюжета. Существует много разных программ для работы с гипертекстами, но <a>Twine</a>по праву считается одним из самых простых и доступных инструментов.

8 В этом материале редакция "Геймдев" Skillbox Media рассказывает всё, что следует знать знать о Twine.

9 Twine - это бесплатный софт, рассчитанный в первую очередь на авторов интерактивной литературы. Программу создал в 2009 году<a>Крис Климас</a>, веб-разработчик и по совместительству геймдизайнер<a>инди-игр</a>(в основном, мобильных) с фокусом на повествование. Поначалу он разрабатывал Twine в качестве хобби, но интерес сообщества к программе постепенно возрастал.

10 Сейчас, спустя почти 15 лет, инструмент обзавёлся двумя полноценными версиями, и к последней регулярно выпускают обновления. И хотя программа сама по себе достаточно нишевая, её активно поддерживает неравнодушное комьюнити, в том числе<a>Фонд технологий интерактивной литературы</a>(IFTF). На текущий момент последняя<a>версия</a>Twine - 2.7.0 от 8 июля 2023 года.

11 <ul><li>Более комфортная подача интерактивной литературы для читателя. При желании повествование можно сделать более иммерсивным за счёт иллюстраций и звукового сопровождения.</li>

12 <li>Прототипирование игр с нелинейным сюжетом, например визуальных новелл или RPG. В Twine все сюжетные развилки всегда будут на виду, и их можно протестировать перед интеграцией в оригинальный проект.</li>

13 <li>Разработка полноценных текстовых игр с нелинейным сюжетом. В этом случае Twine выполняет роль движка.</li>

14 </ul>В Центре письма и коммуникации Юго-Восточного университета Новой Зеландии Twine<a>использовали</a>в качестве интерактивного тестирования сотрудников. В проекте реализованы симуляции типичных случаев, с которыми сталкивается наставник во время работы со студентами-первокурсниками. Такая методика помогла Центру внедрить креативные методы обучения, которые помогают найти подход к молодой аудитории и укрепить уважительные отношения между студентами, их наставниками и преподавателями.

15 Пример симуляции возможного диалога со студентом в <a>Twine</a>Скриншот: Twine / Chris KlimasОсновная функция Twine - это конструирование логики линейных и нелинейных фрагментов текста с помощью гиперссылок. Программа работает на HTML - одном из самых простых языков веб-дизайна. При желании проект можно расширить, оснастив его переменными и макросами на языках CSS и JavaScript, которые прописываются в текстовые блоки. Содержимое этих строк кода зависит от так называемого<a>формата историй</a> - фиксированного набора функций и макросов, используемых для расширения интерактивного повествования.

16 Например, по умолчанию Twine 2.0 использует<a>Harlowe</a>. Этот формат историй подходит начинающим пользователям, так как использует простой код, объединяющий функции всех трёх языков, упомянутых выше. А <a>первая итерация</a>программы поддерживает только формат историй<a>SugarCube 1</a>, который на данный момент считается устаревшим из-за ограниченной функциональности.

17 Если вы хотите сделать в Twine интерактивный роман с нелинейной конструкцией и добавить простое визуальное, а может, даже звуковое сопровождение, углубляться в программирование не обязательно, так как синтаксис для интеграции подобных элементов достаточно простой. Но если вы задумали полноценный ролевой проект с возможностью кастомизации персонажа, числовыми значениями параметров и более оригинальным воспроизведением контента (например, всплывающие картинки или строки), придётся более внимательно изучить специфику каждого формата историй и язык, который они используют.

18 Рассмотрим базовые принципы работы в Twine второй версии. Чтобы создать новую историю и начать с ней работать, нужно выбрать +New. Далее следует придумать название будущей истории, но при необходимости к этой опции можно вернуться позже. После нажатия на ярлык откроется пространство в виде сетки с первым блоком. В зависимости от размера повествования в будущем количество таких блоков информации может переваливать за сотню. В рамках программы они называются параграфами.

19 По умолчанию интерфейс программы светлый, но можно настроить и тёмную тему, зайдя в раздел Twine - Preferences, а затем в параметре Theme выбрать DarkСкриншот: Twine / Chris KlimasПараграфы можно перемещать, удерживаяЛКМ, редактировать содержимое (двойное нажатиеЛКМ). Полученный результат можно просмотреть в браузере: открыть меню Build, далее выбрать режим тестирования (Test) или воспроизведение итогового результата (Play).

20 Например, набранный в параграфе текст без каких-либо настроек и модификаций будет выглядеть следующим образом.

21 Скриншот: Twine / Chris KlimasДля того чтобы сделать сюжетные ответвления, необходимо обособить слово или фразу-гиперссылку двумя квадратными скобками. После этого в рабочем пространстве в реальном времени появятся дополнительные параграфы ответвлений, которые также можно открыть и редактировать.

22 История в редакторе и просмотр конечного результатаСкриншоты: Twine / Chris KlimasИстория в редакторе и просмотр конечного результатаСкриншоты: Twine / Chris KlimasПримечание

23 Новым параграфам можно дать названия, отличающиеся от обособленных слов. Для этого нужно обозначить их в редакторе в формате [[ссылка на следующий параграф|Название параграфа]]. На практике это выглядит следующим образом.

24 Модифицированный код для заголовков новых параграфов. Слева красным выделен их новый вид во вьюпортеСкриншот: Twine / Chris KlimasПодробную информацию о создании гиперссылок можно прочесть в <a>официальной документации</a>.

25 Чтобы сделать историю более интересной, её можно дополнить изображениями - иллюстрациями, фоном, гифкой или логотипом. Для этого необходимо прописать в текст параграфа ссылку на изображение из Сети или загрузить напрямую с жёсткого диска. Стоит отметить, что справка по добавлению изображений<a>устарела</a>, поэтому для того, чтобы картинка отображалась корректно, рекомендуется посмотреть видео ниже.

26 Руководство по загрузке изображений из Сети и с жёсткого дискаПримечание

27 Если вы планируете выложить свой проект в публичный доступ и при этом используете контент из Сети, внимательно изучите его происхождение. В противном случае вы рискуете нарушить авторское право. Также рекомендуем прочитать<a>наш материал</a>про контент из категории общественного достояния, который при определённых условиях можно законно использовать в своих проектах.

28 Итоговый результат примера первой страницы интерактивного повествованияСкриншот: Twine / Chris KlimasВ результате нескольких простых операций в первом параграфе получился простой пример начала нелинейного повествования. А дальше можно заняться написанием сюжетных ответвлений, постепенно дополнять историю как было отмечено ранее - и прописывать в каждый параграф визуальный контент с помощью скриптов. Главное - не забывать делать резервные копии контента и самой истории (Build - Publish to File).

29 Когда проект будет полностью готов, его HTML-файл можно выгрузить на собственный сайт или площадку, поддерживающую HTML-игры (например<a>itch.io</a>). Для публикации интерактивной литературы существует тематический портал<a>IFDB</a>. Но если вы считаете, что ваш проект достоин публикации в Steam или на других похожих площадках, потребуется конвертация контента из веб-формата в полноценное приложение. В этом может помочь инструмент<a>NW.js</a>, ранее известный как node-webkit.

30 Внешне версии практически неотличимы, но есть пара особенностей, которые стоит учитывать при работе с Twine в браузере.

31 Ограниченный размер вводных данных, который напрямую зависит от размера локального хранилища браузера, где обычно хранятся файлы cookies.Информация о наличии свободного пространства в веб-версии отображается в правом верхнем углу.

32 Красным выделен индикатор свободного пространства в веб-версии. Данные отображены в процентахСкриншот: Twine / Chris KlimasПроцесс сохранения.Как уже отмечалось ранее, созданное в веб-версии повествование автоматически сохраняется в кэше браузера, поэтому есть риск случайно удалить его при очередной чистке. Поэтому не забывайте делать резервные копии с помощью Publish to File. Как и в десктопной версии, вся история сохраняется в формате HTML в папку, которая по умолчанию предназначена для загрузок в браузере. После этого, даже если удалить историю из веб-приложения, её можно снова загрузить напрямую с жёсткого диска (Library - Import).

33 Многие разработчики используют Twine как полноценный инструмент для создания текстовых игр. Ниже приведены несколько примеров разножанровых проектов, сделанных на этой платформе.

34 <a>Depression Quest</a> - интерактивная история о личности, переживающей депрессию. Несмотря на то, что вокруг этого проекта и его разработчицы образовался ореол негатива вследствие огромного скандала, известного как "<a>Геймергейт</a>", нельзя не отметить, что Depression Quest стала<a>первой</a>игрой на Twine, вышедшей в Steam. А шумиха вокруг проекта лишь помогла укрепить позиции Twine на рынке. Многие авторы текстовых игр стали активнее проявлять интерес к софту, ведь он был на слуху.

35 Скриншот: Depression Quest / The Quinnspiracy / Patrick Lindsey/ Isaac Schankler<a>Scaffold 22</a>- текстовая RPG в жанре киберпанк, действие которой происходит в далёком будущем. Игровой процесс сопровождается музыкой, картинками и даже полноценным UI с отображением текущих параметров главного героя. Игра рассчитана более чем на 20 часов геймплея.

36 Скриншот: игра Scaffold 22 / Rage Productions<a>Wayfarer</a>- ролевая игра в стиле тёмного фэнтези с детальной кастомизацией персонажа и прокачкой навыков. Повествование зависит не только от выборов игрока, но и от соотношения текущих навыков к внутриигровому броску кубиков, что делает последствия решений менее предсказуемыми.

37 Скриншот: игра Wayfarer / Idrelle Games<a>The Second Floor</a> - небольшой постапокалиптический квест с имитацией вида сверху. Игроку предстоит бродить по комнатам отеля, взаимодействуя с отметками по карте, исследовать объекты и собирать припасы.

38 Скриншот: игра The Second Floor / litrouke<a>Nanopesos</a> - симулятор распоряжения финансами. На подобную идею автора натолкнули низкие зарплаты и высокая стоимость проживания в Чили. Игра помогает разобраться в финансовой грамотности и понять, в каком случае лучше обойтись без лишних трат или, наоборот, порадовать себя какой-нибудь мелочью, не забывая при этом своевременно оплачивать счета и кредит.

39 Скриншот: игра Nanopesos / Camila GormazВыходит, что, несмотря на относительно простую структуру платформы, Twine подходит для разработки игр в разных жанрах. С более обширным списком игровых проектов можно ознакомиться на <a>itch.io</a>.

40 Twine сочетает в себе простоту и многофункциональность, позволяя авторам интерактивной литературы создавать оригинальные проекты за счёт иммерсивной подачи текста. Конечно, эта программа - не единственная в своём направлении, ведь существуют более мощные аналоги, например<a>articy: draft 3</a>. И, как у любого софта, у Twine есть свои достоинства и недостатки.

41 Пример структуры нелинейной истории из <a>руководства</a>Джессики ОтисСкриншот: Twine / Chris Klimas<ul><li>Программа бесплатна, она не требует покупки лицензий, и её легко освоить пользователям, не обладающим навыками программирования.</li>

42 <li>Возможность работать над проектом в десктопной версии или прямо из браузера.</li>

43 <li>Можно прототипировать сюжет, а также экспериментальные механики, не задействуя оригинальный билд игры.</li>

44 <li>Наличие открытого исходного кода подразумевает, что более продвинутый пользователь может доработать текущий инструмент под свои нужды.</li>

45 <li>Подробная<a>документация</a>на сайте программы, большое и отзывчивое<a>сообщество</a>.</li>

46 </ul><ul><li>Главный недостаток Twine - невозможность совместной работы над проектом в реальном времени. Необходимо постоянно сохранять HTML-файл и отправлять данные другому пользователю, чтобы тот внёс правки. Конечно, всегда есть возможность подключить удалённый доступ для соавторов к своему компьютеру. Но из соображений безопасности такой способ подойдёт только тем, чья команда состоит из людей, которым можно доверять.</li>

47 <li>Возможности визуального сторителлинга ограничены. Если проект нацелен больше не на текстовую составляющую, а на визуальную - лучше рассмотреть другую платформу или движок. По сути, структура Twine - это просто блок-схема для переходов по страницам, и, чтобы задать более сложную логику, придётся программировать с нуля на JavaScript.</li>

48 <li>Освоение продвинутых функций программы потребует времени, так как аскетичный интерфейс без встроенных подсказок поначалу может сбить новичка с толку. В результате пользователю уже на ранних этапах придётся заглянуть в документацию или видеоуроки.</li>

49 </ul>Появившаяся в конце 2000-х годов, Twine до сих пор остаётся востребованным инструментом, несмотря на то, что сам сегмент интерактивной литературы достаточно нишевый. Но авторский проект, созданный в этой программе, вполне может пополнить портфолио нарративного дизайнера. К тому же игра для тех, кто любит много читать, может стать для начинающего разработчика первым шагом по завоеванию небольшой, но преданной аудитории.

50 <ul><li><a>Плейлист</a>видеоуроков по Twine от канала DigitalExposureTV.</li>

51 <li>Получасовой<a>обзор</a>Twine для начинающих на русском языке (канал Artyom Vorobyov).</li>

52 <li><a>Руководство</a>по Twine 2.0 для начинающих c сопроводительными видео и шпаргалками по макросам и переменными на CSS в PDF от <a>Адама Хэммонда</a>. Автор использует формат историй SugarCube 2.</li>

53 </ul><a>Научитесь: Профессия Нарративный дизайнер Узнать больше</a>