1 of 45

ШПАРГАЛКА �ПО TWINE

универсальная, для начинающих :D�поэтому будет много пояснений очевидного

апдейт шпаргалки: лонгрид

2 of 45

ССЫЛКИ

Twine основная страница

Twine cookbook �пошаговая инструкция�по работе с Twine �+ примеры

Harlowe manual больше информации про формат, �в котором мы работаем

Q&A по Twine �частные вопросы искать �в первую очередь здесь

3 of 45

ПРО ВЕРСИЮ

У Twine 2 есть несколько форматов. По дефолту используется Harlowe.

В презе — весь синтаксис по Harlowe.�При использовании документации смотрите нужный вам синтаксис.

4 of 45

ИНТЕРФЕЙС

что куда тыкать

5 of 45

ГЛАВНАЯ СТРАНИЦА https://twinery.org/

Либо скачиваем, либо используем онлайн.

Оба вариант позволяют сохранять работу.

6 of 45

TWINE 2 ОНЛАЙН: ГЛАВНОЕ МЕНЮ

+Story создает новую историю

Import from file вы уже сохраняли какой-то архив историй до этого �и хотите загрузить.

Archive архивация всех историй �с этого экрана.

Formates выбор формата

Остальное думаю понятно

Созданные �истории

7 of 45

СМЕНА ФОРМАТА

Напоминаю �про дефолтную, выглядит в Formats она так.

8 of 45

РЕКОМЕНДАЦИИ

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

Архивируйте версии.

Загруженный архив — небольшой файл html

9 of 45

TWINE 2 ОНЛАЙН: ИНТЕРФЕЙС ИСТОРИИ

Passage �основная единица истории в Twine

Настройки истории�рассмотрим дальше отдельно

Отображение

Тест истории из эдитора

Добавление нового Passage

Поиск �по словам

10 of 45

НАСТРОЙКИ ИСТОРИИ

JavaScript нас не интересует. �Если охота покодить свои новые функции �— вы разбираетесь с этим сами.

Stylesheet нужен �для форматирования текста. �О нем подробнее позже.

Story Format то же самое, �что в главном меню.

Publish to file создает "релизную" версию игры. Именно этот файл нам от вас нужен на просмотр.

11 of 45

PASSAGE ОТРЫВОК

Вся основная работа будет в таких Passages.�Открывается по клику.

12 of 45

ЧТО ГДЕ ЗАЧЕМ В PASSAGE

Заголовок — название отрывка. �Все переходы между отрывками работают �по заголовку.

Tag — разделение отрывков �по группам. �Помогает с форматированием текста

Панель функций �— упрощает работу с текстом.��Поле для текста

13 of 45

ПРИМЕЧАНИЕ ДО ПОЯСНЕНИЙ

Далее в презентации будет написано о том, как писать код ручками, какой синтаксис использовать.�Но! Можно облегчать себе жизнь панелью управления.

Код за вас без вашего понимания она не напишет, но будет сокращать усилия при написании синтаксиса. Потыкайте, ознакомьтесь.

14 of 45

БАЗОВЫЙ СИНТАКСИС

переходы между отрывками, переходы внутри текста, переменные

15 of 45

ПРОСТОЙ ПЕРЕХОД МЕЖДУ ОТРЫВКАМИ

Синтаксис перехода простой �[[Заголовок, на который нужно перейти]]

Его видит игрок.

16 of 45

ПЕРЕХОД СЛОЖНЕЕ

Если вы хотите, чтобы заголовок назывался "А",�но игрок видел "В", синтаксис чуть сложнее.�[[Заголовок, который видит игрок->Заголовок, на который нужно перейти]]

17 of 45

"ПЕРЕХОД" ВНУТРИ ОТРЫВКА

Чтобы открывать текст постепенно внутри одного отрывка, можно использовать функции "on-click".

18 of 45

СИНТАКСИС ВНУТРИ ОТРЫВКА

Замена текста�Заменяемое (click-replace: “Заменяемое")[То, что добавится по клику вместо заменяемого]

Дополнение текста после слова�Дополняемое (click-append: “Дополняемое")[То, что добавится по клику после дополняемого]

Дополнение текста до слова�Дополняемое (click-prepend: “Дополняемое")[То, что добавится по клик до дополняемого]

19 of 45

ИТОГО

Базовый синтаксис для перехода:�[[Название отрывка]]

Вариант чтобы не показывать название:�[[Название ссылки->Название отрывка]]�[[Название отрывка<-Название ссылки]]��Замена/дополнение текста�Заменяемое (click-replace: “Заменяемое")�[То, что добавится по клику вместо заменяемого]

Дополняемое после (click-append: “Дополняемое после")�[То, что добавится по клику после дополняемого]

Дополняемое до (click-prepend: “Дополняемое до")�[То, что добавится по клик до дополняемого]

�

20 of 45

ЖИЗНЬ БЫВАЕТ СЛОЖНЕЕ

Скорее всего ваш постепенно открывающийся текст�в отрывке будет выглядеть так:�

А потому...�

21 of 45

ТИПИЧНЫЕ ОШИБКИ

проверять в первую очередь

22 of 45

ОШИБКИ СИНТАКСИС

количество скобок лишняя, забытая и т.д.
качество скобок где-то нужны "", а где-то и () []
строчная/заглавная Twine не поймет что ему нужно найти�уже созданный отрывок "Колодец", �а не создавать новый "колодец"
опечатки cllck-replace и click-replace это разные вещи
лишние пробелы и переносы и недостающие

23 of 45

ПРИМЕРЫ ОШИБОК можно думать, ответы дальше

Герой куда-то пошел [[И куда-то пришел] �
Но ему не особо хотелось куда-то идти. (click-append: "идти") [А зачем шел?]�
Ну не просто же так герою куда-то ходить. Глупость! �(click-replace: "глупость!") [Нет, он же все-таки герой…]�
Так что какая-то цель у героя явно была. (click-append: "была.")[Великая, может даже немного ужасная. (click-append: "ужасная.") [Словом, какая есть. [[Какую дали->Параграф 1]]]

24 of 45

ПРИМЕРЫ С ОТВЕТАМИ

Герой куда-то пошел [[И куда-то пришел]] не хватало скобки�
Но ему не особо хотелось куда-то идти. (click-append: "идти") [А зачем шел?] в click-append "идти" нет точки, весь текст появится до нее
Ну не просто же так герою куда-то ходить. Глупость! �(click-replace: "глупость!") [Нет, он же все-таки герой…]�потерялась заглавная
Так что какая-то цель у героя явно была. (click-append: "была.")[Великая, может даже немного ужасная. (click-append: "ужасная.") [Словом, какая есть. [[Какую дали->Параграф 1]]]] не хватало скобки, крюка здесь 2

25 of 45

ПЕРЕМЕННЫЕ

пригодятся

26 of 45

СИНТАКСИС ПЕРЕМЕННОЙ

$переменная�Имя переменной задается только на английском �и только буквами.

Задать переменную�(set: $имя_переменной to значение_переменной)

27 of 45

ТИПЫ ПЕРЕМЕННЫХ И КАК ИХ ПИСАТЬ

boolean �значения: true/false

number�значения: числовые 1, 2, 3

string�значения: любые, �но выделяются ""

Игрок не видит код—>

28 of 45

ДЛЯ ЧЕГО ПЕРЕМЕННЫЕ?

Показать текст �(if: $переменная is значение)[То, что увидит игрок]��Дать разные выборы�(if: $переменная is true)[[Ссылка 1]] (if: $переменная is false)[[Ссылка 2]] �(if: $переменная is значение)[[Ссылка 1]] (if: $переменная is значение)[[Ссылка 2]]��Показывать определенный блок информации�$переменная – будет отражаться значение переменной

Заниматься математикой (см. слайд дальше)

29 of 45

ОПЕРАЦИИ С ПЕРЕМЕННЫМИ

Пример простого счета:

(set: $переменная to + что-то)

30 of 45

ИТОГО

$переменная�Имя переменной только на английском и только буквами.

Задать переменную�(set: $имя переменной to значение переменной)

Условие с переменной:�Показать текст (if: $переменная is значение)[То, что увидит игрок]

Двойное условие:�(if: $переменная1 is значение1 and $переменная2 is значение2)[То, что увидит игрок]

Тут можно найти больше :)

31 of 45

ФОРМАТИРОВАНИЕ

В ОТРЫВКЕ

форматирование конкретного отрывка

32 of 45

ВЫРАВНИВАНИЕ

⇒�Этот текст будет справа� =><=�Этот по середине�⇐�Этот будет слева�===><=�Здесь будут колонки �размером 3/4 слева, �1/4 справа�=><=====�Здесь колонки 1/6 слева,�5/6 справа.

33 of 45

ВЫРАВНИВАНИЕ 2

Можно проще — через панель.

34 of 45

ЖИРНЫЙ/НАКЛОННЫЙ И Т.Д.

Еще раз — в разы проще�через панель.

35 of 45

ФОРМАТИРОВАНИЕ

В STYLESHEET

форматирование всего текста, цвета, фона, шрифта

36 of 45

КАК?

Редактируется через Edit story Stylesheet

38 of 45

ЧТО ПОМЕНЯТЬ?

Поменять цвет текста:�color: #000000;��Поменять шрифт текста:�font-family: Arial;��Поменять размер:�font-size: 20px;��Поменять цвет фона:�background-color: #000000

39 of 45

ПРИМЕРЫ

tw-story {� color: #000000;� font-family: Arial;� font-size: 20px;� background-color: #FFFFFF� }

tw-story {� color: #900000;� font-family: Helvetica;� font-size: 15px;� background-color: #100000�}

40 of 45

МЕНЯЕМ ПО ТЭГУ

Если вы хотите изменить стиль у части истории, �нужны тэги.

�Синтаксис: �tw-story [tags~=“тэг нужного параграфа"]{ �Все то, что вы кодом здесь�распишете, влияет на�текст, внутри выбранного тэга�}

41 of 45

ДЛЯ ПОНИМАНИЯ — ЧИТАЙТЕ ТУТ

Какой-то рандомный пикабушник поясняет, �как работает Stylesheet �и поясняет неплохо

Смотреть с пункта Редактирование через «таблицу стилей»

42 of 45

ПУБЛИКАЦИЯ

еще раз

43 of 45

ТУТ