Рассказывание историй — неотъемлемая часть человеческой натуры. Это праздное времяпрепровождение, это искусство, это средство общения, это форма терапии и общения. Мы все любим рассказывать истории — вы читаете одну сейчас — и самые мощные технологии, которыми мы располагаем, — это, как правило, вещи, которые позволяют нам выражать наши творческие идеи. Проект с открытым исходным кодом Twine является инструментом для этого.

Twine — это интерактивный генератор историй.Он использует HTML, CSS и Javascript для создания автономных приключенческих игр в духе классики, такой как Zork и Colossal Cave. Поскольку Twine в значительной степени объединяет несколько открытых технологий, он достаточно гибок, чтобы выполнять множество мультимедийных трюков, делая рендеринг игр более похожим на HyperCard, чем вы обычно ожидаете от HTML.

Установка шпагата

Вы можете использовать Twine онлайн или загрузить его локально со своего веб-сайта. Разархивируйте загрузку и щелкните значок приложения Twine , чтобы запустить его.

Начальный интерфейс по умолчанию довольно интуитивно понятен. Прочитайте вводный материал, затем нажмите большую зеленую кнопку + Story справа, чтобы создать новую историю.

Привет, мир

Основы просты. Новая раскадровка содержит один узел, или «проход» в терминологии Twine, называемый Без названия проход . Прокрутите этот отрывок, чтобы увидеть параметры узла, затем щелкните значок карандаша, чтобы изменить его содержимое.

Назовите отрывок, чтобы обозначить его положение в вашей истории.В предыдущей версии Twine начальный отрывок должен был называться Start , но в Twine 2 подойдет любой заголовок. Это все еще хорошая идея, чтобы сделать это разумным, поэтому придерживайтесь чего-то вроде Start или Home или init .

Для текстового содержания этой истории, введите:

  Привет [[мир]]  

Если вы знакомы с викитекстом, вы, вероятно, уже можете догадаться, что слово «мир» в этом отрывке на самом деле является ссылкой на другой отрывок.

Ваши правки сохраняются автоматически, поэтому вы можете просто закрыть диалоговое окно редактирования, когда закончите. Вернувшись в свою раскадровку, Twine обнаружил, что вы создали ссылку, и предоставил вам новый отрывок под названием world .

Откройте новый отрывок для редактирования и введите текст:

 
 Это было сделано с помощью шпагата. 
 

Чтобы проверить свой очень короткий рассказ, нажмите кнопку воспроизведения в правом нижнем углу окна Twine.

Это не много, но это начало!

Вы можете добавить больше вариантов навигации, добавив еще одну ссылку в двойных скобках, которая генерирует новый отрывок, пока вы не расскажете любую сказку, которую хотите рассказать.Это действительно так просто.

Чтобы опубликовать свое приключение, щелкните заголовок истории в левом нижнем углу окна раскадровки и выберите Опубликовать в файл . Это сохраняет весь ваш проект в виде одного файла HTML. Загрузите этот файл на свой веб-сайт или отправьте его друзьям, чтобы они открыли его в веб-браузере, и вы только что сделали и доставили свое первое текстовое приключение.

Advanced Twineage

Зная только то, что нужно для создания этой истории про «Привет, мир, », вы можете сделать отличное текстовое приключение, состоящее из исследований и выбора.Как быстро начинается, это не так уж плохо. Как и во всех хороших технологиях с открытым исходным кодом, здесь нет предела, и вы можете сделать это намного дальше, добавив несколько дополнительных приемов.

Проекты Twine работают так же, как и частично, благодаря бэкэнду JavaScript под названием Harlowe. Он добавляет все приятные переходы и некоторые стили пользовательского интерфейса, обрабатывает основные мультимедийные функции и предоставляет некоторые специальные макросы для сокращения объема кода, который вам придется писать для некоторых сложных задач. Это с открытым исходным кодом, поэтому, естественно, есть альтернативы.

SugarCube — это альтернативная библиотека JavaScript для Twine, которая обрабатывает мультимедиа, функции воспроизведения мультимедиа, расширенные ссылки на отрывки, элементы пользовательского интерфейса, файлы сохранения и многое другое. Это может превратить ваше основное текстовое приключение в мультимедийную феерию, конкурирующую с такими приключенческими играми, как Myst или Beneath of Steel Sky.

Установка SugarCube

Чтобы установить бэкэнд SugarCube для вашего проекта:

• Загрузите библиотеку SugarCube. Несмотря на то, что Twine поставляется с более ранней версией SugarCube, вам следует загрузить последнюю версию.

• После того, как вы загрузили его, разархивируйте архив и поместите его в разумное место. Если вы не привыкли организовывать файлы или управлять творческими ресурсами для разработки проектов, поместите распакованный каталог SugarCube в свой каталог Twine для безопасного хранения.

• Каталог SugarCube содержит только несколько файлов с фактическим кодом в формате format.js . Если вы работаете в Linux, щелкните правой кнопкой мыши по файлу и выберите Copy .

• В Twine вернитесь в свою библиотеку проектов, щелкнув значок дома в левом нижнем углу окна Twine.

• Нажмите кнопку Форматы на правой боковой панели шпагата. На вкладке Добавить новый формат вставьте путь к файлу format.js и нажмите зеленую кнопку Добавить .

  Если вы не используете Linux, введите путь к файлу вручную в следующем формате:

  файл: ///home/your-username/path/to/SugarCube-2/format.js

Использование SugarCube

Чтобы переключить проект на SugarCube, войдите в режим раскадровки вашего проекта.

В виде раскадровки щелкните заголовок раскадровки в левом нижнем углу окна Twine и выберите Изменить формат истории .

В открывшемся окне Story format выберите параметр SugarCube 2.x.

изображений

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

Создайте каталог проекта где-нибудь. Внутри этого каталога создайте подкаталог с именем img для ваших изображений, audio для вашего аудио, video для видео и так далее.

Для этого примера я использую изображение из openclipart.орг. Вы можете использовать это, или что-то подобное. Независимо от того, что вы используете, поместите ваше изображение в каталог img .

Продолжая проект hello_world, вы можете добавить изображение в один из пассажей, используя синтаксис изображения SugarCube:

 
  
 Здравствуйте, [[world]]. 
 

Если вы попытаетесь воспроизвести свой проект после добавления изображений, вы обнаружите, что все ссылки на изображения не работают. Это потому, что Twine находится за пределами каталога вашего проекта.Чтобы протестировать мультимедийный проект Twine, экспортируйте его в файл и поместите файл в каталог вашего проекта. Не помещайте его в подкаталоги, которые вы создали; просто поместите его в каталог вашего проекта и откройте в веб-браузере.

Другие медиа-файлы функционируют в основном таким же образом, используя медиа-теги HTML5 для отображения медиа-файлов и макросы SugarCube для управления началом и окончанием воспроизведения.

Переменные и программирование

Вы можете многое сделать, приведя игрока к тому или иному отрывку, в зависимости от того, какой выбор они сделали, но вы можете сократить количество проходов, используя переменные.

Если вы никогда не программировали раньше, найдите время, чтобы прочитать мое введение в концепции программирования. В статье используется Python, но все те же понятия применимы к Twine и в основном к любому другому языку программирования, с которым вы, вероятно, столкнетесь.

Например, так как история hello_world изначально разворачивается на Земле, следующим шагом в истории может быть предложение разнообразных путешествий в другие миры. Каждый раз, когда читатель возвращается на Землю, игра может отображать количество посещенных ими миров.Это было бы практически невозможно сделать линейно, потому что вы никогда не сможете определить, какой путь выбрал читатель в своем исследовании. Например, один читатель может сначала посетить Марс, а затем Меркурий. Другой может вообще никогда не отправиться на Марс, вместо этого он посетит Юпитер, Сатурн, а затем Меркурий. Вам придется сделать один проход для каждой возможной комбинации, и это решение просто не масштабируется.

Однако с помощью переменных вы можете отслеживать прогресс читателя и отображать сообщения соответствующим образом.

Чтобы сделать это, вы должны устанавливать переменную каждый раз, когда читатель достигает новой планеты. В игровой вселенной игры hello_world планеты фактически являются проектами с открытым исходным кодом, поэтому каждый раз, когда пользователь посещает отрывок о проекте с открытым исходным кодом, задайте переменную, чтобы «доказать», что читатель посетил.

Переменные в синтаксисе SugarCube устанавливаются с помощью макроса << set >>. SugarCube имеет много макросов, и все они удобны. Этот пример проекта использует несколько.

Измените второй отрывок, который вы создали, чтобы предоставить читателю несколько новых возможностей для исследования:

 
 Это было сделано в [[Twine]] в [[Linux]].
 << выбор Пуск "Возвращение на Землю" >> 
 

Здесь вы используете макрос << choice >>, который связывает любую строку текста прямо с заданным отрывком. В этом случае макрос << choice >> связывает строку «Возвращение на Землю» с началом.

В новом отрывке вставить этот текст:

 Twine - это интерактивный каркас истории. Он работает на всех операционных системах, но я предпочитаю использовать его на [[Linux]]. 
 << установить $ twine в true >> 
 << выбор Пуск "Возврат на Землю.">> 
 

В этом коде вы используете макрос << set >> для создания новой переменной с именем $ twine . Эта переменная является логической, потому что вы просто устанавливаете ее в значение «true». Вы поймете, почему это важно в ближайшее время.

В отрывке Linux введите этот текст:

 Linux - это [[Unix]] подобная операционная система с открытым исходным кодом. 
 << установить $ linux в true >> 
 << выбор Пуск "Возврат на Землю". >> 
 

И в Unix отрывок:

 BSD - это версия операционной системы Unix от AT & T с открытым исходным кодом.
 << установите $ bsd в true >> 
 << выбор Пуск "Возврат на Землю". >> 
 

Теперь, когда в истории есть пять отрывков, которые читатель может исследовать, пришло время использовать SugarCube для определения, какая переменная была установлена ​​каждый раз, когда читатель возвращается на Землю.

Чтобы определить состояние переменной и соответственно сгенерировать HTML, используйте макрос << if >>.

  
 Здравствуйте, [[world]]. 
 << nobr >> 
 << ul >> 
 << если $ twine истинно >> << li >> Planet Twine << / li >> << / if >> 
 << если $ linux истинно> > << li >> Planet Linux << / li >> << / if >> 
 << if $ bsd true >> << li >> Planet BSD << / li >> << / if >> 
 << / ul >> 
 

В целях тестирования вы можете нажать кнопку «Воспроизвести» в правом нижнем углу.Вы не увидите свое изображение, но посмотрите на это в интересах тестирования.

Перемещайтесь по истории, периодически возвращаясь на Землю. Обратите внимание, что подсчет каждого места, которое вы посетили, появляется в нижней части отрывка «Начало» каждый раз, когда вы возвращаетесь.

Ничего не объясняет, почему список посещаемых мест появляется. Можете ли вы понять, как объяснить читателю подсчет изученных отрывков?

Вы могли бы просто предвосхитить список подсчета вводным предложением типа «Пока что вы посетили», но когда пользователь впервые прибудет, список будет пустым, поэтому ваше вступительное предложение ничего не будет вводить.

Лучший способ управлять им с помощью еще одной переменной, чтобы указать, что пользователь покинул Землю.

Изменить мир проход:

 Это было сделано в [[Twine]] в [[Linux]]. 
 << установить $ offworld в true >> 
 << выбор Пуск "Возврат на Землю". >> 
 

Затем используйте другой макрос << if >>, чтобы определить, установлена ​​ли для переменной $ offworld значение true .

То, как Twine анализирует викитекст, иногда приводит к появлению большего количества пустых строк, чем вы предполагали, поэтому для сжатия списка посещенных мест используйте макрос << nobr >>, чтобы предотвратить разрывы строк.

  
 Здравствуйте, [[world]]. 
 << nobr >> 
 << ul >> 
 << если $ twine истинно >> << li >> Planet Twine << / li >> << / if >> 
 << если $ linux истинно> > << li >> Planet Linux << / li >> << / if >> 
 << if $ bsd true >> << li >> Planet BSD << / li >> << / if >> 
 << / ul >> 
 << / nobr >> 
 

Попробуйте воспроизвести историю еще раз.Обратите внимание, что читателя не ждут обратно на Землю, пока он не покинет Землю.

Исследуй все

SugarCube — мощный двигатель. Его использование часто является вопросом знания того, что доступно, а не неспособности что-то сделать. К счастью, его документация очень хорошая, поэтому часто обращайтесь к списку макросов.

Вы можете внести дополнительные изменения в свой проект, изменив таблицу стилей CSS. Для этого щелкните название вашего проекта в режиме раскадровки и выберите Редактировать таблицу стилей Story .Если вы знакомы с JavaScript, вы также можете написать свои истории с помощью Edit Story JavaScript .

Нет никаких ограничений на то, что Twine может сделать как ваш интерактивный игровой движок. Он может создавать текстовые приключения и служить прототипом для более сложных игр, ролевых игр типа «укажи и щелкни», бизнес-презентаций, дополнений к вечерним ток-шоу и всего, что вы только можете себе представить. Исследуйте вики Twine, посмотрите на работы других людей в базе данных Interactive Fiction, а затем создайте свою собственную.

шпагат1: часто_спрашиваемые_вопросы [Twine Wiki]

ПОМОГИТЕ!

Я открыл свой проект, и он был пуст! Как мне вернуть его обратно?

Не паникуйте. Такое поведение наблюдается в OSX Lion и может быть связано с проблемами Finder. Вместо того, чтобы дважды щелкнуть проект Twine в Finder, чтобы открыть его, откройте приложение Twine, перейдите в меню «Файл»> «Открыть историю …» и откройте оттуда свой файл.Если проблемы сохраняются, перейдите на справочный форум Twinery.

ОБЩИЕ ВОПРОСЫ

Как установить новый код CSS / новую таблицу стилей?

Все CSS , используемые в проекте Twine, должны жить в отрывке с тегом таблицы стилей . Отрывки, которые имеют правильную метку таблицы стилей , имеют фиолетовую рамку.

1. Создайте новый отрывок из таблицы стилей , щелкнув правой кнопкой мыши в рабочем пространстве Twine и выбрав «Новый отрывок здесь» в контекстном меню.(Вы также можете сделать обычный отрывок и вручную ввести таблицу стилей в поле ввода «теги».)

2. Скопируйте код CSS , который вы хотите добавить, и вставьте его в только что созданный фрагмент таблицы стилей .

Это оно! Этот CSS теперь будет доступен для всего вашего проекта Twine.

Обратите внимание, что таблиц стилей должны содержать только , , , код CSS . Помещение HTML или JavaScript в отрывок таблицы стилей может привести к неожиданным результатам.

Вы можете добавить столько отрывков из таблицы стилей , сколько захотите, или оставить все свои CSS в одном отрывке из таблицы стилей — в зависимости от того, что удобнее для вас.

Что означают точки и цифры в CSS?

Точка (.) Обозначает имя класса. На странице HTML может быть много элементов одного класса. Например, класс с именем «smurf» будет выглядеть следующим образом в CSS :

smurf {цвет: синий; } 

И вот так в HTML :

 
 Неуклюжий 
  
 Brainy  

Цифра (#) обозначает идентификатор. Это означает, что это уникальное имя. На странице HTML может быть только один элемент с указанным идентификатором. Например, идентификатор с именем «highlander» будет выглядеть следующим образом в CSS :

 #highlander {цвет: красный; } 

И вот так в HTML :

 
 Коннор  

Если HTML также содержит

 
 Курган  

у вас будет проблема!

(«Div» — это просто общее деление в HTML .Хорошая особенность div в том, что он не влияет на содержимое тега, кроме того, что определено указанным классом CSS .)

Как мне установить новый код JavaScript?

Весь JavaScript, используемый в проекте Twine, должен находиться в отрывке с тегом script . Проходы, которые имеют правильный тэг script , имеют коричневую рамку.

1. Создайте новый фрагмент сценария , щелкнув правой кнопкой мыши в рабочей области Twine и выбрав «Новый сценарий здесь» в контекстном меню.(Вы также можете сделать обычный отрывок и вручную ввести сценарий в поле ввода «теги».)

2. Скопируйте код JavaScript, который вы хотите добавить, и вставьте его в только что созданный фрагмент сценария .

Это оно! Этот JavaScript теперь будет доступен для всего вашего проекта Twine.

Обратите внимание, что сценарий отрывков должен содержать только , код JavaScript . Размещение HTML или CSS в отрывке сценария может привести к неожиданным результатам.

Вы можете добавить столько скриптов , сколько захотите, либо сохранить весь свой JavaScript в одном фрагменте скрипта — в зависимости от того, что вам удобнее использовать.

Как я могу сделать мой Twine воспроизводимым в автономном режиме? / Как мне импортировать jQuery?

В Twine перейдите в меню Story> Special Passages> StorySettings , прокрутите вниз до «Включить библиотеку сценариев jQuery?» и установите флажок рядом с ним.

ИЛИ

Добавьте текст «требует jQuery» в любой фрагмент сценария .

При этом копия jQuery 1.11 будет установлена ​​во встроенный файл HTML вместо использования ссылки Google CDN. Это означает, что в игру можно играть даже без подключения к интернету.

Как мне импортировать новый шрифт с моего локального компьютера?

В Twine перейдите в меню История> Импортировать шрифт . Откроется окно браузера файлов, в котором вы сможете выбрать файл шрифта, который хотите добавить (например, myFunFont.ttf ).Выберите нужный файл шрифта и нажмите «Открыть».

Теперь вы можете использовать семейство шрифтов в CSS отрывка из таблицы стилей , например:

 .passage {
    семейство шрифтов: "myFunFont", без засечек;
  } 

Вы также можете использовать его в HTML в отрывке, например так:

  Некоторый текст  

Вы можете сделать одно или другое, но вам не нужно делать оба!

Примечание: Независимо от того, какое название у вашего отрывка, вы должны ссылаться на импортированный шрифт по имени, под которым он был импортирован.

Примечание: Хотя все современные браузеры поддерживают форматы файлов шрифтов TTF, OTF и WOFF, формат файлов шрифтов SVG не поддерживается IE или Firefox, а формат файла шрифтов E OT поддерживается только IE

Как мне импортировать веб-шрифт Google?

Найдите на странице https://www.google.com/fonts][Google шрифта нужный шрифт. Для одного шрифта вы можете нажать маленькую среднюю кнопку «Быстрое использование» (стрелка вправо в поле).Если вам нужно несколько шрифтов, удобно добавить их в коллекцию и работать с CSS этой коллекции. (Подробная информация об этом доступна на странице https://www.google.com/fonts][Google шрифт в Интернете.)

Выбрав шрифт Google, перейдите на вкладку @import, чтобы просмотреть код CSS для шрифта. Скопируйте этот код CSS и вставьте его в отрывок таблицы стилей . (См. В верхней части этого часто задаваемого вопроса , как сделать отрывок из таблицы .)

Кроме того, если вы хотите использовать несколько шрифтов, вы должны для удобства добавить их все в «коллекцию» во время просмотра GFonts и получить код, специфичный для этой коллекции.

Как только код @import добавлен в отрывок таблицы стилей в вашем проекте, вы можете использовать его в CSS или HTML в любом месте проекта.

Примечание : В 1.4.1 или более ранних версиях код @import должен был появиться в самом начале отрывка из таблицы стилей , который был первым в алфавитном порядке.В 1.4.2 код @import может появляться где угодно (Twine вручную поднимает его там, где он должен быть).

Как использовать изображение в качестве фона страницы истории?

Как мне добавить текст при наведении на текст в моем отрывке?

Вот пример HTML для вашего прохода:

  Этот текст отображается как обычно.  

Как отключить стандартный синтаксис, чтобы я мог показать искусство ASCII?

Вы можете использовать моноширинный синтаксис следующим образом:

 {{{<< (@ __ @) >>}}} 

Как читатель может изменить переменную, не отходя от места?

Возможно, вы захотите взглянуть на расширение формата истории SugarCube.Он предоставляет макросы click и button , которые можно использовать следующим образом:

 << нажмите "Потерять деньги" >> << set $ money - = 1 >> << / click >>
 << кнопка «Зарабатывать деньги» >> << установить $ money + = 1 >> << / button >>
  

Как мне установить SugarCube?

Загрузите последнюю версию SugarCube.

Разархивируйте загрузку. Он должен распаковать в каталог с именем «sugarcube».

Скопируйте весь каталог «sugarcube» в ваше приложение Twine в папку «target».На OSX это обычно находится в / Applications / Twine / Contents / Resources. (Чтобы просмотреть содержимое приложения Twine в Finder, щелкните правой кнопкой мыши значок приложения Twine и выберите «Показать содержимое».)

Перезапустите Twine, и в меню Story> Story Format вы увидите опцию «Сахарный куб».

ВОПРОСЫ ФОРМАТА САХАРКАНА

Как мне изменить горизонтальное выравнивание текста во всех отрывках из сахарного тростника?

Этот пример CSS изменит горизонтальное выравнивание текста по центру:

 # переходы {box-sizing: border-box; отступ: 0 25%}.проход {text-align: center; } 

Другие варианты вместо «центра» — «правый» и «левый».

Как изменить максимальную ширину текста в сахарном тростнике?

Этот пример CSS устанавливает максимальную ширину проходного текста 50%.

. Проход {макс. Ширина: 50%; } 

Вы также можете использовать целые числа (например, 300 пикселей сделает текстовый контейнер шириной 300 пикселей.)

Как изменить ширину только текста, центрированного (помещенного в элементы) в сахарном тростнике?

В этом примере максимальная ширина текста в элементах

. Проходной центр {max-width: 50%; } 

 # sidebar {display: none; }
  
  #passages {margin-left: 0; } 

 html, тело {рост: 100%; margin-top: 0! важно; }
  #passages {display: table; высота: 100%; }
  ,проход {дисплей: таблица-ячейка; вертикально-Align: средний; } 

 #passages {border-left: 0px; отступ слева: 0; }