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

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

Темный вариант темы с замком для формата Wonder 
Темный вариант темы с замком для формата Wonder 

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

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

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

Жизненный цикл разработки текстового квеста в Twine - 
Жизненный цикл разработки текстового квеста в Twine - 

Для примера я сделал тему оформления с готическим замком таким образом. Вы можете её скачать и сделать что-нибудь своё. Картинка замка - не просто бесплатная, но и распространяется по 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?

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

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

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

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

​В текст квеста в Twine можно вставлять любой html-код - и картинки тоже
​В текст квеста в Twine можно вставлять любой html-код - и картинки тоже

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

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

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

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

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

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

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

Меняем общий фон и цвет

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

​Таблица стилей в текстовом квесте Twine - это обычный CSS 
​Таблица стилей в текстовом квесте Twine - это обычный CSS 

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

Несколько строчек кода определяют внешний вид квеста
Несколько строчек кода определяют внешний вид квеста

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

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

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

  • body (вся страница)
  • .page (видимая часть игры)
  • .text (текстовый блок)
  • .link (ссылки в тексте)
​Три самых главных слова в формате Wonder - body, .page и .text
​Три самых главных слова в формате Wonder - body, .page и .text

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

  • background определяет фоновый цвет элемента
  • color - цвет шрифта элемента

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

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

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

Меняем картинку в нужной локации

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

Вот так:

#gameOver .page { background: url(img/gameOver.jpg) no-repeat; }

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

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

.text { background: beige; /* это цвет фона текстового блока */ padding: 12px; /* это отступы текста от краев текстового блока*/ margin-top: 400px; /* это сдвиг текстового блока вниз*/ }

Полезные ресурсы

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

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

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

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

​Выбрать цвет в CSS формате - можно прямо в выдаче Google
​Выбрать цвет в CSS формате - можно прямо в выдаче Google

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

.text { background: #0c2c61; color: #dedede; }

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

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

Заключение

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

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

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

8080
62 комментария

Я не лучший советчик в этом вопросе, но наверное стоит как-то связать первый и второй материал одним тегом, например #Twine, да. #Текстовый_квест тоже может быть не лишним.

5
Ответить

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

1
Ответить

Супер! Тот контент который я всегда жажду на DTF. Но может лучше в Инди? :)

1
Ответить

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

Ну, и да, прошлая статья так же тут.

3
Ответить

Отличный туториал!

1
Ответить

Здравствуйте!
На дворе уж 2023-й, но всё же попробую оставить вопрос...

У меня не работает функция if / else в вашем формате.

Игрок исследует шкаф, чтобы найти нужную книгу. Чтобы он не мог повторно выбрать вариант, который уже смотрел, сделала переменные для каждого варианта и за выбор варианта (на странице пассажа за факт перехода на неё) начисляется плюс очко (начисляется точно корректно. функция показа переменной верно работает).

Вариант должен быть доступен только если переменная всё ещё равна нулю.

Но на странице, куда идёт отсылка по выбору, просто ничего нет.

Так выглядит пример кода:

{{
if(this.Soigi=0) Wonder.showText("[[Посмотреть книги по "Soigi" | Soigi]]");
else Wonder.showText("Я уже исследовал Soigi. Форма фигур и иероглифы на них намекают, что это не те шахматы, что мне нужны");
}}

Вот тут файл истории - https://drive.google.com/file/d/17DzYbbrtEGKe-JqbR6xwA5vMlAetwgHB/view?usp=sharing

Ещё подскажите, пожалуйста, куда именно заходить в Твайне, чтобы поменять стартовые заглавия (Welcome to the game и Choose your Destiny), а также добавлять дополнительные функции в колесо с настройками (например, вход в инвентарь).

1
Ответить

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

1
Ответить