#Коллекционки
Коллекционки - это страницы, которые можно собирать. Число собранных страниц показывается игроку.
Собранные страницы можно просматривать в любой момент времени. Это инструмент для сбора книжек, сказок, информации о мире.
Можно собирать и концовки, и хорошие концовки, и плохие отдельно, события в квесте и вообще любые страницы.
Число коллекционок теоретически не ограничено. Каждая коллекционка добавляет кнопку на экран игры (см. ниже).
Чтобы страницу (passage в Twine) можно было добавить в коллекционку - надо в Twine для неё назначить тег. Потом этот тег использовать
- добавить классы к кнопке
- doc: CSS кнопки
- doc: CSS списка
- показать страницу
- doc: CSS страницы
-
addAfter
-
hideBack
-
код save/load
-
doc: Save/Load
-
забилдить формат и передать в Twine
-
сделать дизайн CSS для игры
С помощью метода Wonder в пользовательском скрипте можно создать коллекционку
Wonder.collect({
// можно выбирать сразу кучу тегов
tags: ['gameover'],
// читабельный заголовок для пользователя
title: 'Концовки',
// сохранять собранные id в коллекцию
collection: 'gameovers'
})
Движок будет создавать кнопку с надписью 'title' и числом собранных/всех пассажей с тем же collection
.
При нажатии - добавляет к body тень и список собранных узлов.
Кнопка создается как div.c-button
внутри контейнера div.c-wrapper
. Дополнительно к кнопке добавляется класс с именем из параметра collection
.
Класс обязательный - c-button
.
Класс в зависимости от коллекции - collectionName
Дополнительный класс заполненной кнопки - c-button-completed
<div id="c-wrapper"><!-- button wrapper -->
<div class="c-button " data-collection="gameovers">
<div class="c-bt-title">Концовки</div>
<div class="c-bt-content">2/24</div>
</div>
<div class="c-button " data-collection="glossary">
<div class="c-bt-title">Глоссарий</div>
<div class="c-bt-content">4/15</div>
</div>
</div>
Списки открываются по нажатию кнопки. Под списком показывается тень. По умолчанию class c-list
сдвинут за край. Когда показываем - добавляем класс c-list-show
.
ItemTitle берется из h1 или первой строки собранной страницы. Контент страницы не меняется.
При нажатии на div.c-item
- к body добавляется страница. После клика на тени или на крестике страницы - она закрывается (уничтожается).
<div class="c-list">
<div class="c-list-title">Глоссарий</div>
<div class="c-list-content">
<div class="c-item" data-name="glossary_titan_stuff">ItemTitle1</div>
<div class="c-item" data-name="glossary_titan_vine">ItemTitle2</div>
<div class="c-item" data-name="glossary-wasteland-legend">ItemTitle3</div>
<div class="c-item" data-name="glossary-zaurhas">ItemTitle4</div>
</div>
</div>
Страница открывается по нажатию на пункт в списке. Тень остается на месте, под списком. По умолчанию class c-page
сдвинут за край. Когда показываем - добавляем класс c-page-show
.
Дополнительно добавляется класс по имени коллекции
<div class="c-page gameovers c-page-show">
<div class="c-page-content">
</div>
</div>
Есть узлы с особыми тегами (glossary, gameover). Это в поле tags
. Проставляется в Twine.
Неплохо бы для узлов с одним тегом выполнять особые действия:
-
добавлять автоматический возврат или переход на другую локацию (стартовую для всех)
-
добавлять такую локацию в список collectibles под таким тегом
-
показывать игроку такие списки
-
позволять игроку открывать любой элемент из такого списка
-
позволить уникальное оформление
-
при перезапуске восстанавливаем уже собранные из какого-нибудь сейва
-
DONE. Движок - кидаем tags в классы.
-
Создаем метод RunTime
Wonder.collect({
// можно выбирать сразу кучу тегов
tags: ['gameover'],
// читабельный заголовок
title: 'Концовки',
// добавить в конце любой HTML.
addAfter: '<div id="restartButton">[[Начать заново|start]]</div>',
// показывать автобэк
hideBack: true,
// сохранять собранные id в коллекцию
collection: 'gameovers'
})