Картинки и звук в Twine 2

Для Twine 2 стандартный формат Harlowe. У него полно возможностей и есть клевая документация с примерами. Много вариантов форматирования текста. Макросы на любой вкус.

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

Это всё замечательно для текстовых квестов. Если захочется добавить атмосферы, звука или картинку на фоне, то начнутся проблемы.

Чтобы добавить звуки и картинки в своей работе, использовал теги, CSS, HTML-вставки и JavaScript.

Для начала добавим текст в стартовый параграф.

Запускаем историю, получаем такой результат. По-умолчанию цвет текста — белый, а на фоне сплошной черный цвет.

В инспекторе браузера можно посмотреть, из чего состоит полученная история. Сгенерированная страница имеет вложенную структуру: тело страницы (body) → контейнер истории (tw-story) → контейнер параграфа (tw-passage).

Зеленым выделены границы «tw-story». Синим выделены границы «tw-passage»

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

Чтобы добавить картинку на фон, нужно открыть таблицу стилей истории.

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

tw-story { background: url(https://cdn.pixabay.com/photo/2020/06/25/10/21/architecture-5339245_960_720.jpg) center center fixed no-repeat; background-size: cover; }

Если раньше работать с CSS не приходилось поясню важные моменты.

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

У каждого элементы на странице есть набор свойств. В нашем случае мы обращаемся к двум:

background — что будет на фоне. Будет установлена картинка по центру контейнера;

background-size — какой будет размер фона. Изображение полностью заполнит контейнер, что не влезет будет обрезано.

Картинка есть, вот только текст видно с трудом

Добавим немного украшательств:

tw-story tw-passage { padding: 10px;/*Отступ 10 пикселей от границы параграфа*/ background-color: #ffffffcc;/*Белый цвет фона с прозрачностью*/ }

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

Однако эта картинка теперь будет на каждом параграфе. Хотелось бы для каждой локации иметь свою картинку. Для этого нужно разобраться с тегами.

Каждому параграфу можно назначать теги. Для этого нужно открыть параграф и нажать «+Тег». Добавим тег «location_1».

Модифицируем код так, чтобы картинка была только в параграфах с этим тегом:

/*Общий стиль*/ tw-story { background: #fff;/*Белый цвет фона*/ color: #000000;/*Черный цвет текста*/ flex-direction: column-reverse;/*Текст будет снизу*/ } tw-story tw-passage { padding: 10px;/*Отступ 10 пикселей от границы параграфа*/ background-color: #ffffffcc;/*Белый цвет фона с прозрачностью*/ } /*Стиль для первой локации*/ tw-story[tags~="location_1"] { background: url(https://cdn.pixabay.com/photo/2020/06/25/10/21/architecture-5339245_960_720.jpg) center center fixed no-repeat; background-size: cover; }

По-умолчанию у параграфов будет белый фон и черный шрифт. Если хоть одни из тегов будет соответствовать «location_1», выставится указанный фон.

В формате Harlowe есть несколько особых тегов. Особенно интересен тег «startup». Параграф с этим тегом будет добавлен в содержимое первого запущенного параграфа. Это удобно для инициализации состояния игры и для отладки.

Первым делом нужно добавить скрипт воспроизведения звука. Скопируйте текст из этого файла. Откройте меню «Редактировать JavaScript» и вставьте скопированный текст.

В историю будут добавлены функции для работы со звуком:

Sound.load(tune, index) — загрузить звуковую дорожку tune с индексом index. Если не загружать заранее, то при первом проигрывании будет задержка;
Sound.play_once(index) — воспроизвести дорожку с индексом index один раз;
Sound.play(index) — воспроизвести дорожку с индексом index в цикле;
Sound.fade(index, newvolume = 0, period = 1) — плавно изменить громкость дорожки с индексом index до значения newvolume за period секунд. newvolume может быть в диапазоне от 0.0 до 1.0;
Sound.pause(index) — поставить на паузу дорожку с индексом index;
Sound.resume(index) — возобновить дорожку с индексом index;
Sound.stop(index) — остановить дорожку с индексом index;

Затем добавим параграф «Инициализация» с тегом «startup». Сюда добавим предзагрузку звуковой дорожки. Для этого в содержимое параграфа добавим следующий текст:

Добавим звон батареи при ударе. Для этого в параграфы «Постучать по левой» и «Постучать по правой», которые были автоматически сгенерированы ранее, добавим следующий текст:

Теперь историю нужно «Опубликовать в файл». Файл желательно сразу называть «index.html». В эту же папку нужно загрузить звуковой файл.

Если всё верно сделать, при переходе на новый параграф будет проигран звук.

Важно! Скрипты запуска звука не срабатывают при запуске истории. Из-за особенности формата они работают только начиная со второго.

Формат Harlowe воспринимает HTML-разметку в тексте параграфа. Ранее мы уже использовали тег <Script>, чтобы добавить вызов функции.

Чтобы добавить изображение в параграф, пригодится тег <img>. Добавим следующий текст в начальный параграф:

Теперь посреди текста стоит картинка.

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

Демонстрационный проект можно посмотреть здесь.

#twine #tutorial #опыт

Картинки и звук в Twine 2

Формат Harlowe

Как добавить картинку

Работа с тегами

Как добавить звук

HTML-вставки в параграфах