Как добавить картинки и фон в текстовый квест

С помощью Twine и формата Wonder

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

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

Папку проекта можно скопировать на другой комп, бросить её на Dropbox или другой вариант онлайн-диска - и работать таким образом с нескольких машин, а то и с несколькими творцами (один пишет тексты, второй подбирает и добавляет картинки).

Для примера я сделал тему оформления с готическим замком таким образом. Вы можете её скачать и сделать что-нибудь своё. Картинка замка - не просто бесплатная, но и распространяется по Creative Common License 0, то есть вы можете не ставить ссылку на источник, даже если используете в коммерческих целях. Я взял её с pixabay.com.

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

1. Устанавливаем формат Wonder - https://kvisaz.github.io/twine-wonder/

2. Качаем тему с замком - https://kvisaz.github.io/twine-wonder/format/templates/

3. распаковываем архив с темой в любую папку на своем компе - это будет папка проекта

4. импортируем template.html в Twine через импорт истории

5. переименуйте импортированную историю - к примеру, в MyCastle - чтобы повторный импорт шаблона не удалил предыдущую работу

6.добавляем свои локации, события, экспериментируем

7. экспортируем обратно в папку проекта как index.html - через “Опубликовать в файл”открываем index.html и смотрим.

Примечание: чтобы установить формат, нужно нажать в Twine на “форматы”, выбрать “Добавить новый формат” и вставить там URL или локальный путь файла с форматом.

Ссылка на последнюю версию формата или архив с ним - по ссылке в первом пункте.

Чтобы экспортировать - нажмите в редакторе игры на её название, чтобы открыть меню и выберите “опубликовать в файл”

Формат Wonder пытается освободить писателя от кода, а программиста - от случайного уничтожения текста. К примеру, как предлагают добавлять картинки в других форматах:

1. вставлять тег img прямо в текстовое описание локации

2. вставлять код svg или любой html в текстовое описание локации

3. добавлять картинки через CSS, попутно вставляя дополнительный код в текстовое описание локации

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

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

Поэтому хочу предупредить - не повторяйте мои ошибки. Сначала сделайте контент. Или поручите его сделать кому-то. Но не пытайтесь одновременно и писать текст, и встраивать команды. Как говорил один тролль из третьего Ведьмака - “Меньше думать, меньше грустный”.

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

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

Вот такая идеология и была внедрена в формат Wonder - разделение текста и кода. Меньше смешивай, меньше грустный.

Формат открытый - можно копировать и модифицировать.

Итак, оформление в Twine можно и нужно редактировать через таблицу стилей. Она открывается в редакторе игры через меню с её названием. Выберите команду “Редактировать таблицу стилей” - и откроется редактор таблицы.

Если вы уже скачали шаблон с замком, то там будет небольшой код CSS, который задает цвета фона и общую дефолтную картинку для всех локаций.

Если вы ни разу не работали с CSS - не напрягайтесь, это не программирование. Хотя опытный программист и тут может собрать полную машину Тьюринга. Но игра Minecraft тоже является тьюринг-полной - это означает, что вы можете реализовать там любую программу, если напряжетесь, вплоть до Ведьмака 3 или Киберпанка 2077 (лет через 200, когда квантовые компьютеры будут даже у школьников).

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

В текстовом квесте на формате Wonder селекторы просты:

Правила тоже очень просты:

В background можно вставлять и ссылки на картинки.

Эти правила будут применены ко всем локациям в игре. То есть таким образом можно задавать дефолтное оформление и картинки.

В Twine у каждой локации есть свое имя - оно используется как ссылка при переходе внутри игры (если кто-то забыл). В формате Wonder это имя ставится как id у тега body. Короче говоря, если нужно, чтобы в какой-то момент появилась другая картинка, нужно в таблицу стилей добавить правило с селектором #location .page

Вот так:

Напоминаю, что картинки будут видны после экспорта страницы в папку проекта. Когда вы редактируете в Twine - он генерирует страницы для просмотра в случайной временной папке, поэтому все относительные ссылки ломаются.

По умолчанию текстовый блок прижимается к верху страницы. Поэтому, если добавить к .page фоновую картинку - текст наложится на неё. Если нужно, чтобы текст сдвинулся вниз - ставьте правило margin-top, как это сделано в шаблоне Castle

Предыдущая статья на Dtf про Twine и особенности его установки

Страница формата Wonder на Github - https://kvisaz.github.io/twine-wonder/

Исходный код формата - https://github.com/Kvisaz/twine-wonder

Бесплатные картинки - Pixabay.com - больше миллиона файлов, которые можно использовать в коммерческих проектах. Чуда не ждите, но есть интересные.

Для выбора цвета в формате CSS гуглите (в Гугле) ‘css color picker’ - и добрый дядя Google выдаст его прямо на странице результатов. Вам нужен код, который начинается с решетки - типа #0c2c61 или #dedede

Вставляйте этот код так

В шаблоне с замком получится вот так:

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

Вставка картинок через CSS доступна во всех форматах - главное, в каждом конкретном случае выделить, какие селекторы надо писать в таблицу. В этой статье весь код указан для формата Wonder, который был нашим внутренним и перешел в open-source в 2020 году.

О том, как все-таки смешивать код и текст, и вставлять тег IMG в любом формате Twine - ждите отдельный доклад.

#twine #текстовые_квесты