Gamedev
Сергей Токарев
2131

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  • body (вся страница)
  • .page (видимая часть игры)
  • .text (текстовый блок)
  • .link (ссылки в тексте)
​Три самых главных слова в формате 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

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

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

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

Заключение

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

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

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

Материал опубликован пользователем.
Нажмите кнопку «Написать», чтобы поделиться мнением или рассказать о своём проекте.

Написать
{ "author_name": "Сергей Токарев", "author_type": "self", "tags": ["\u0442\u0435\u043a\u0441\u0442\u043e\u0432\u044b\u0435_\u043a\u0432\u0435\u0441\u0442\u044b","twine","location","gameover","dedede","0c2c61"], "comments": 32, "likes": 68, "favorites": 242, "is_advertisement": false, "subsite_label": "gamedev", "id": 101893, "is_wide": false, "is_ugc": true, "date": "Mon, 10 Feb 2020 12:27:50 +0300", "is_special": false }
0
32 комментария
Популярные
По порядку
Написать комментарий...
5

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

Ответить
1

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

Ответить
1

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

Ответить
2

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

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

Ответить
1

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

Ответить
0

Видел в Twine как то можно использовать переменные, и это что то было связанно с Key. В следующие разы будете про это рассказывать?

Ответить
1

Да, переменные будут. Хотя это самая сложная часть, но и самая интересная

Ответить
0

Ждем как добавить музыку! 

Ответить
1

Пожалуй, да, надо сделать статью - давно уже не было обновлений по теме

если на скорую руку, то во всех форматах можно использовать HTML-теги

то есть прямо в текстовом описании можно вставить тег AUDIO со ссылкой на mp3-файл и атрибутом autoplay - и музыка заиграет при открытии локации 

Ответить
0

спасибо! буду пробовать. ждем следующие!

Ответить
0

успехов! Делитесь опытом и если вопросы - пишите, это поможет понять косяки в инструкции

Ответить
0

там точно нельзя циферку перед строкой выбора поставить? Ибо играть такие квесты на цифровой клавиатуре удобней чем мышкой.

Ответить
0

при допиливании - можно придумать такую навигацию
по умолчанию просто ссылки могут стоять где угодна, в том числе и внутри текста

Ответить
0

Проставьте теги пожалуйста

Ответить
0

Спасибо за подсказку. Какие?
Мне в прошлый пост поставили

#опыт #основы - эти добавить?
Или нужно конкретно по Twine?

Ответить
0

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

Ответить
0

в каком формате? В Wonder, что описан в этой статье - кнопки возврата нет по умолчанию. Кнопка Back в браузере не вернет игрока также.

в формате ShugarCube 2, который был использован в демке к первой статье - чтобы отключить кнопки перехода назад и вперед, надо в JavaScript ввести строчку

Config.history.controls=false;

Ответить
0

JavaScript в истории открывается через меню "редактировать JavaScript"

Ответить
0

 У меня в html формате по умолчанию доступен переход назад. Сейчас попробую тогда в js прописать команду и другие форматы. Спасибо

Ответить
0

какой формат у истории выбран?
его можно посмотреть в меню "Сменить формат истории" - там будет список форматов и круглая черная отметка напротив текущего. Потом окно с форматами можно закрыть, ничего не делая

Ответить
0

  Harlowe 3.1.0

Ответить
0

Спасибо за статью. Очень ждал продолжение
Нажимаю форматы, а добавить ничего не могу. Сижу с браузер версии

Ответить
0

минусы онлайн версии, похоже. Надо ставить десктоп.
Или учить те форматы, что есть в наборе.

Но я не представляю, как добавлять картинки в таком случае - ставить абсолютные url на сервер только что ли. Значит, картинки придется куда-то заливать.

похоже, что онлайн-версия вообще не приспособлена для работы с внешними ресурсами, но я могу ошибаться, так как всегда работал только со скачиваемой версией Twine

Ответить
0

Понял, тогда не буду на ней работать

Ответить
0

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

думаю, не стоит совсем пренебрегать, просто надо нащупать берега возможностей и когда они могут быть полезны )

Ответить
0

3d игры в стиле DOOM уже давно сделали. https://keithclark.co.uk/labs/css-fps/

Ответить
0

это все фигня - Doom3 портировали даже - https://wasm.continuation-labs.com/d3demo/

об этом лучше отдельную статью писать, в комментах твоя инфа просто пропадет

Ответить
0

как знакомы с технологиями, на которых сделали демо по твоей ссылке - я очень высоко ценю это их извращенное применение )))  Вдобавок демо грузится куда быстрее, чем демка Дум 3. Но и глючит - даже в последнем браузере Хром глючит.

Ответить
0

В Opera вообще не глючит

Ответить
0

Сообщение удалено

Ответить
0

Поучительно. Только вопрос. Как вообще эти карнтинки и т.д экспортировать? Сделал апк приложения для андроида, но там только текст. То есть всех картинок и фона не было

Ответить
0

Надо складывать картинки в папку рядом c html

откуда делал апк, каким способом?

Ответить

Прямой эфир

{ "jsPath": "/static/build/dtf.ru/specials/DeliveryCheats/js/all.min.js?v=05.02.2020", "cssPath": "/static/build/dtf.ru/specials/DeliveryCheats/styles/all.min.css?v=05.02.2020", "fontsPath": "https://fonts.googleapis.com/css?family=Roboto+Mono:400,700,700i&subset=cyrillic" }