Речь пойдет о стилизации текстового квеста, сделанного в Twine 2 (web версии) в формате Harlowe. Этот формат истории настроен в Twine по умолчанию и работать с ним легко. Начнем с того, что у нас есть и как это постепенно изменить.
Вот, что у нас есть в самом начале. Чёрный фон, белый текст, синие ссылки. Если вы не привередливы в дизайне, то сойдет и так. (Для всех подальших изменений зайдите в меню Twine в левом нижнем углу и выберите пункт "Редактировать таблицу стилей", весь текст кода писать там)
Первое, что я хочу поменять - цвет ссылки. для этого вводим tw-link и выбираем нужный цвет. Выглядит это вот так:
tw-link
{
color: #ffffff;
}
Теперь ссылки будут белого цвета. Для быстрого выбора цвета в HEX палитре я использую этот сайт. С ссылками в параграфах разобрались, больше в них я ничего менять не буду.
Теперь пора поменять шрифт. Это мы делаем в tw-story. Я не буду особо заморачиваться и выберу Arial. Ну немного подкорректирую размер шрифта, например до 22. В итоге будет что-то похожее :
tw-story
{
font-family: Arial;
font-size: 22px;
}
Пока что всё легко, но я хочу сразу закончить с разделом tw-story и добавить все нужные пункты. То есть :
tw-story
{
font-family: Arial;
font-size: 22px;
padding: 10% 20%;
background: none;
}
Что за непонятный текст? Тут понадобится толковое объяснение. Padding - отступы от края, в данном случае 10% от верхнего и 20% от левого . Эти же значения можно записать в пикселях, например :
tw-story
{
font-family: Arial;
font-size: 22px;
padding: 100px 200px;
background: none;
}
Если можно использовать пиксели, то почему я использую проценты? Ну в моем случае экран монитора 1280х1024, думаю, у всех уже побольше будет. И в итоге красиво выстроенный текст с отступами в 100 громадных пикселей на моем мониторе будет выглядеть мизерно на любом другом. С процентами всё гораздо легче, если у меня в ширину текст занимает 60%, то и у человека с нормальным монитором он тоже будет занимать 60%. С этим разобрались. Теперь background - здесь мы ставим значение none что бы просто избавиться от него. В скором времени мы сделаем красивый фон. но не в разделе tw-story.
Теперь у нас есть полностью белый фон, текст и ссылка (которые без выделения невозможно увидеть). Пора что-то менять. Например, фон. И так в разделе body мы можем поставить фон-картинку! Нифига ж себе, скажете вы, картинку? И что для этого надо сделать? Как? Как это вообще?
body
{
background-image: url("https://pp.userapi.com/c639431/v639431548/2f413/U_D4jzFDaPY....");
background-size: cover;
}
Примерно вот так. Первый пункт - URL нужной картинки, и второй - покрытие всей площади этой картинкой. А теперь небольшой лайфхак : найдите нужное изображение в интырнэте и жмакните правой кнопкой мыши. Выбираем пункт "Найти картинку (Google)". И опа, гугол ищет похожие картинки. Тыкаем на "Все размеры" или на "Большие" тут и выбираем нужное изображение. Если вы вибрали популярное изображение, то есть шанс найти его в лучшем качестве. Выбрали? Качаем. Скачали? Идем в ВК. Залазим в диалоги. Вбиваем в поиске свое имя и выбираем отправителя - себя любимого. Скидываем себе это изображение. Копируем его УРЛ (с помощью той же правой кнопки мыши). Это дает нам гарантию, что это изображение случайно не пропадет из интернета или его не переместят владельцы левого сайта, с котрого вы могли взять УРЛ.
Если вам вообще не надо никаких картинок, может вы - любитель минимализма, то вариант такой :
body
{
background-color: #909090;
}
Тут уже вводим нужный цвет и не заморачиваемся по поводу пункта background-size: cover.
Смотрите вы на свой одинокий текст на каком-нибудь красочном фоне и понимаете, что его нереально прочесть. Чё делать, блин? Как-то не круто уже выглядит наша картинка. Не кипишуем и переходим к разделу tw-passage. Сейчас будет страшный текст, а потом его полное разъяснение. Готовы?
tw-passage
{
background-color: rgba(0,0,0,0.45);
width: 100%;
color: #d9d9d9;
text-shadow: 2px 2px black;
padding: 30px;
border: none;
border-radius: none;
}
Адреналин уже ударил в голову? Паника уже началась? Ну давайте всё разберем по порядку.
Мы опять ввели цвет фона, но теперь вообще использовали rgba. Что это? RGB - палитра, которой мы заменили наш уже привычный HEX, а буква А в конце - прозрачность. Тогда первые три нуля - черный цвет, а последняя цифра после запятой - прозрачность. Если мы поставим вместо первых трех цифр - 255,255,255 будет белый цвет. Я не рекомендую вам экспериментировать с большим количеством цветов, поэтому не оставлю ссылки на RGB палитру.
Помните мы ставили отступы в 20%, ну так вот. Теперь мы говорим, что можем занять все 100% места между этими отступами по 20% от краёв. Немного непонятно, но всё будет хорошо.
А теперь пункт color, это цвет нашего обычного текста. Я оставляю его светло-серым. Вы можете сделать еще каким-то. НО, если вы делаете его черным, то в первом пункте нужно использовать (255,255,255,0.45).
Тень от текста, ну это вообще не обязательный пункт. Я ставлю по 2 пикселя в право и вниз. Цвет тени - black, то есть черный. Вместо слова black можно написать и #000000.
А теперь к отдельной части этого раздела. Padding - это слово мы уже встречали, и тут оно говорит на сколько пикселей (а можно и дальше ставить проценты) текст нашей истории отступает от края полупрозрачной черной рамки внутрь. [ T ] - пробелы между [] и Т - это и есть Padding (это в миниатюре). Если мы ставим одно число, то оно будет одинаково как по горизонтали так и по вертикали.
Border, это рамка. То есть,у нас есть сама полупрозрачная черная коробка, в которой находится наш текст и есть ее край - рамка. Мы живем в такое время, когда рамки стали, хм, зашкваром. Так что я ее просто не использую. Но вы можете поставить значение в пикселях (5px, 20px) а после этого записать цвет. Например - border: 5px #ffffff;
А теперь ее радиус - это определяет радиус округления углов коробки и рамки. Значение пишем так же в пикселях. Тут уже можете поиграться, это не зашквар. Я просто люблю углы и ставлю там значение none.
Смотрим мы на свою работу и прям радуемся жизни, но пора использовать не очень популярные разделы img, tw-sidebar, tw-link.visited.
img
{
max-width: 600px;
max-height: 600px;
}
tw-sidebar
{
display: none;
}
tw-link.visited
{
color: #ffffff;
}
Теперь немного о каждом из них. IMG - image - изображение. То есть мы этими значениями ширины и высоты определяем максимальный размер картинок, которые будут встроены в некоторые параграфы. Нашли вы несколько изображений котиков 600х600, 1200х900 и 400х300. Первая как была так и останется, и третья тоже, а вот вторая сожмется до размера 600х450. Надеюсь, так понятно. Про вставку картинок чуть позже.
Sidebar, ну это нужно только для тех, кто использует Twine для создания игр. В сайдбаре Harlowe есть только 2 элемента - стрелка назад и стрелка вперед. То есть пользователь сделав выбор обычно может вернуться назад и потом обратно вперед. Мы же этого не хоти, поэтому ставим значение none. Если у вас игра-индюшатина или же вам реально нужны отмены хода, не используйте этот раздел вообще.
И не забываем про палевные открытые ссылки. В чем тут прикол? Ну вот делаете вы игру и герой умирает, вы предлагает ему вернуться в начало игры или еще куда-то. Он возвращается и видит все ссылки, которые он уже посещал другого цвета, естественно он будет пытаться выбирать другие. Но это же слишком просто! И вот мы ставим цвет уже открытых ссылок на такой же, как и у не открытых.
А теперь поиграем с цветами и картинками в параграфах. Вот такой унылый параграф у нас есть. (Открыт в тестовом режиме)
Вообще не понятно кто с кем говорит. Я обычно назначаю каждому персонажу определенный цвет и все его реплики показываю именно этим цветом. Как же это сделать? Вот пример :
- (colour: "#ff829b")[Все вопросы к Нестору]
В поле цвета меняете HEX на тот, который вы хотите и между [ ] пишете нужный текст. Только текст в [ ] после параметра цвета будет отображаться в этом цвете. Так что давайте разукрасим наш параграф. У главного герой цвет - белый. У второго - светло-красный.
И опять лайфхак : когда вы назначили цвета для каждого из главных персонажей запишите это в виде: *первая буква имени* (colour: "#cvet00")[
и дальше копируйте это (colour: "#cvet00")[и вставляйте перед каждой репликой вашего персонажа, а в конце реплики просто добавляйте ]. Записать это, конечно же, можно в диалоге с собой в ВК. Например :
L (colour: "#ffffff")[
K (colour: "#ffe67d")[
N (colour: "#8486ff")[
V (colour: "#84d0ff")[
R (colour: "#ff829b")[
Теперь давайте вставим картинку, просто по приколу. Для этого пишем : <img src="УРЛ картинки"> прямо в параграфе, в который хотите вставить картинку. То есть, <img src="https://pp.userapi.com/c543108/v543108693/49b2b/KsxEjFeosEk...."> в самом начале параграфа будет выглядеть так :
На этом можно было бы закончить, но я хочу добавить небольшой лайфках по техчасти. До него я как-то сам додумался. Если вы даете герою выбор : использовать карту, пока ты идешь в лабиринте или нет? То вам не обязательно делать две одинаковых цепочки параграфов, в одной из которых есть картинки карты. Достаточно сделать так:
Значение $maps (тут может быть хоть $fuck) ставим в первом случае 1, а во втором - 0. Ну и в каждом параграфе лабиринта всегда пишем
(if: $maps is 1) [картинка]
(if: $maps is 0) []
Что при выборе параграфа "С картой" будет показывать картинку карты, а при выборе параграфа без карты - не будет показывать вообще ничего.
Ну а после этих if и [ ] вы можете как обычно написать текст, мол сюда пойдешь - то, туда пойдешь - то.
Если помогло - всегда пожалуйста, если нет - ищите дальше.
Полезная ссылочка.
P.S. Это вообще первое, что я пишу в таком виде, поста на пикабу с инструкцией. Так что, если что-то не так - извиняйте. Русский в школе не учу, поэтому за ошибки тоже сорян.
