Картинки и звук в Twine 2
Формат Harlowe
Для Twine 2 стандартный формат Harlowe. У него полно возможностей и есть клевая документация с примерами. Много вариантов форматирования текста. Макросы на любой вкус.
В интернете можно найти туториалы по основам Twine. Проще всего на английском языке. Здесь покажут основы, научат работать с переменными, условиями и другими макросами.
Это всё замечательно для текстовых квестов. Если захочется добавить атмосферы, звука или картинку на фоне, то начнутся проблемы.
Чтобы добавить звуки и картинки в своей работе, использовал теги, CSS, HTML-вставки и JavaScript.
Как добавить картинку
Для начала добавим текст в стартовый параграф.
Запускаем историю, получаем такой результат. По-умолчанию цвет текста — белый, а на фоне сплошной черный цвет.
В инспекторе браузера можно посмотреть, из чего состоит полученная история. Сгенерированная страница имеет вложенную структуру: тело страницы (body) → контейнер истории (tw-story) → контейнер параграфа (tw-passage).
В контейнере истории будет отображаться текущий параграф. Его содержимое будет сгенерировано из текста и макросов, которые были записаны в Twine. В нашем случае текст, вертикальная черта и две ссылки.
Чтобы добавить картинку на фон, нужно открыть таблицу стилей истории.
В открывшееся окно добавляем следующий код:
Если раньше работать с CSS не приходилось поясню важные моменты.
Чтобы указать, к какому элементу применить свойства, используются селекторы. В нашем случае селектор — «tw-story». Все свойства в фигурных скобках буду применены к элементу этого класса.
У каждого элементы на странице есть набор свойств. В нашем случае мы обращаемся к двум:
background — что будет на фоне. Будет установлена картинка по центру контейнера;
background-size — какой будет размер фона. Изображение полностью заполнит контейнер, что не влезет будет обрезано.
Добавим немного украшательств:
Теперь цвет шрифта теперь черный, добавлен отступ и подложка под текст. Текст внизу экрана.
Однако эта картинка теперь будет на каждом параграфе. Хотелось бы для каждой локации иметь свою картинку. Для этого нужно разобраться с тегами.
Работа с тегами
Каждому параграфу можно назначать теги. Для этого нужно открыть параграф и нажать «+Тег». Добавим тег «location_1».
Модифицируем код так, чтобы картинка была только в параграфах с этим тегом:
По-умолчанию у параграфов будет белый фон и черный шрифт. Если хоть одни из тегов будет соответствовать «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». В эту же папку нужно загрузить звуковой файл.
Если всё верно сделать, при переходе на новый параграф будет проигран звук.
Важно! Скрипты запуска звука не срабатывают при запуске истории. Из-за особенности формата они работают только начиная со второго.
HTML-вставки в параграфах
Формат Harlowe воспринимает HTML-разметку в тексте параграфа. Ранее мы уже использовали тег <Script>, чтобы добавить вызов функции.
Чтобы добавить изображение в параграф, пригодится тег <img>. Добавим следующий текст в начальный параграф:
Теперь посреди текста стоит картинка.
С таким подходом получается гибко работать с фонами и звуком. Можно поставить музыку на фон, добавить звуки открывания двери и т.д.
Демонстрационный проект можно посмотреть здесь.