Dec. 30th, 2022

3. Сделайте вашу игру потрясающей с помощью CSS


https://www.youtube.com/watch?v=6ZawcwLOLWU

В этом руководстве объясняется, как использовать CSS для изменения внешнего вида вашей игры Twine. Все эти инструкции основаны на формате истории SugarCube. Прежде чем начать, убедитесь, что ваша игра Twine настроена на формат SugarCube. Для этого нажмите на название своей истории в ее основном представлении «карта истории». Выберите «Изменить формат истории» и установите флажок рядом с «SugarCube». (примечание: в последней версии Twine 2 инетрфейс претерпел сильные изменения).
Примечание: это руководство было разработано для моих студентов и предполагает некоторое знакомство с HTML и CSS.
 
Загрузить PDF-версию: Как сделать свою игру на шпагат потрясающей.

Вспоминание основ

Мне нравится в Twine, что он публикуется в стандартных веб-форматах. Он использует HTML для контента,
CSS для презентаций и JavaScript для всего, что связано с программированием. Поскольку он использует эти стандартные форматы, в вашу игру можно играть практически на любом компьютере, телефоне, планшете и т. д.
По умолчанию игры Twine в SugarCube выглядят довольно ужасно. Это побуждает поставить свой собственный визуальный стиль для вашей игры. Хорошие новости: поскольку вы уже немного знаете CSS, это довольно просто.
Чтобы отредактировать CSS истории Twine, нажмите на название своей истории на ее главном экране «карты истории», затем нажмите на «Редактировать таблицу стилей истории». - "Edit Story Stylesheet." Это загрузит экран, который является просто старым (пустым) файлом CSS.
 
Изменение настроек по умолчанию
Поскольку игры Twine представляют собой обычные HTML-файлы, неудивительно, что внешний вид большинства вещей в вашей игре по умолчанию изменяется стилизацией элемента body (элемент самого высокого уровня в HTML «дерево документов».)
Добавление следующего кода, например, изменит цвет фона на белый, сделает значением по умолчанию
цвет темно-серый, изменит шрифт по умолчанию на Futura и сделает размер шрифта по умолчанию немного больше:
body {
 background-color: white;
 color: darkgrey;
 font-family: Futura,Impact,Helvetica,sans-serif;
 font-size: 125%;

Опять же неудивительно, что изменение цвета и поведения ссылок достигается за счет стилизации элемента, HTML-элемента для ссылок:

a {
 color: red;
}
a:hover {
 color: crimson;
 text-decoration: underline;


Изменение внешнего вида отдельных passages

Итак, это меняет настройки по умолчанию для всей игры. Но что, если вы хотите, чтобы конкретный пассаж
имел свой собственный цвет фона или свой особый шрифт?
Опять же, Twine лучший, и он делает это довольно легко. Первое, что вам нужно сделать, это открыть passage, с которым вы хотите сделать что-то особенное. Прямо под названием отрывка есть опция с надписью +tag. Нажмите на нее, чтобы добавить тег по вашему выбору. Например, предположим, что мы хотим добавить тег под названием ""hooray" для определенного счастливого прохождния. Напишите слово ура и нажмите на галочку.
Теперь нам нужно создать набор инструкций для вашего веб-браузера, которым он будет следовать при отображении этого отрывка.
Для этого мы вернемся на страницу "Edit Story Stylesheet" и создадим класс CSS с именем, соответствующим «тегу», который мы вставили выше. В этом случае мы создаем класс с именем hooray (помните, что в CSS перед именами классов должна стоять точка)
.hooray {
 background-color: pink;
 color: cornflowerblue;
 font-size: 200%;
}

Теперь, когда ваш игрок доберется до этого прохода, его встретит розовый фон и большой синий текст.

 Скрытие боковой панели
Если вам не нужна боковая панель, которая есть по умолчанию в играх SugarCube, вы можете легко скрыть ее. Просто введите следующий код в файл CSS вашей истории.
 
#ui-bar { display: none; }

(SugarCube помещает боковую панель в HTML-элемент div с идентификатором ui-bar. Эта инструкция CSS просто говорит вашему браузеру не отображать этот элемент div.)
Поскольку по умолчанию ваша история освобождает место для боковой панели, вы также можете добавить следующий код для стилизации основного элемента вашей истории:

body {
 margin-left: 3.5em;
}


Добавление собственного HTML и его стилизация с помощью CSS

Как видите, Twine сам добавляет основную HTML разметку. Вам не нужно вводить собственный HTML-код для абзацев, например: он вставляет <p> для вас. Но если вам недостаточно такого способа вставки HTML в вашей игре, вы можете ввести свой собственный HTML-код прямо в проход (оно же passage).
Например, можно захотеть создать жуткий эффект, при котором текст исчезает, если пользователь наводит на него указатель мыши. Это можно сделать, вставив свой собственный HTML-элемент div в отрывок Twine и стилизовав его с помощью CSS.
Например, у вас может быть отрывок, в котором говорится следующее:

В небе жуткий НЛО.
<div class="aliens">Когда вы смотрите на него, он исчезает.</div>
Но вы уверены, что он есть.

Затем вы можете добавить несколько строк в файл CSS вашей истории, в котором вы стилизуете класс aliens этого div, чтобы сделать его исчезающим при наведении курсора мыши на элемент.
 
 читаю иногда местную фауну. Хомячки деловые, каждый первый аналЫтик. Кропают годноту, как им кажется.
Кому-то Пушкин жить дескать мешает падла, всё равно в переводе так себе, ибо в их языке (который по задумке преступного большевистского режима нужно зачем-то было учить и знать всем) всего 200 слов и перевод вашего Пушкина на такой "великий и могучий" выглядит как инструкция к стиральной машине на бейсике. Ну, что сказать, так-то можно и памятники Гёте посносить, и Шекспира с Андерсеном. Ну, не учить же немецкий, английский (средневековые) и датский ради того, чтобы соприкоснуться с прекрасным? Омар Хаям? Запретить, ибо негоже белому европейцу у предков современных гастарбайтеров мудрости учиться. Ясно же, что плохому научат? Белому культурному европейскому Человеку в чьем языке 200 слов музей оккупации важнее или детский писатель, который прославился тем, что писал всю жизнь про Какашечку. Потому, что ему важнее быть смешным и униженным, чем человеком. А как его не унизить, если он лезет ко всем с настойчивостью шизофреника, предлагая учить его недоязык на 200 слов, вместо международных и распространенных на которых есть с кем поговорить: 
Позиция в рейтинге Язык Число говорящих, миллионов  Происхождение 
Английский 1,132 Индоевропейское 
Китайский (мандарин) 1,117 Китайско-тибетское 
Хинди 615 Индоевропейское 
Испанский 534 Индоевропейское 
Французский 280 Индоевропейское 
Арабский 274 Афро-азиатское 
Бенгальский 265 Индоевропейское 
Русский 258 Индоевропейское 
Португальский  234 Индоевропейское 
10 Индонезийский 199 Австронезийское 


Раскаяния он от кого-то хочет спустя 100 лет? Серьезно? А мне кажется он просто ищет тех, кто бы его еще раз изнасиловал.
Кто-то обсуждает войну, которая всем надоела до чертиков настолько, что с обеих концов как-то поутихли крики про Бандеру Спасителя и Сталина Отца Родного, лишь откуда-то из разных углов еще порой слышны всхлипы: "Посаны, кто честный, идите в военкомат и умрите вместо меня, пока из вас трансгендеров не сделали". А в ответ тишина или редкий трансгендерный смех тех, кому быть трансгендерами и читать Пушкина (одно другому не мешает) прикольнее чем стать обгорелыми трупами. Ну, круто же от Пушкина к национальной идее в виде АУЕ? После таких контрастов внутри великих культур начинаешь понимать бедного белого культурного человека в чьем языке 200 слов. Как ему жить в этом жестоком мире, если тут такие контрасты, что и более изощренные мозги, с детства измученные первой десяткой мирового лингвистического рейтинга отказываются воспринимать весь этот мир всерьез?
Другого пациента взволновало, что россияне Обаму забыли и Трампа и теперь у них главный корень зла Байден. Ну, как такое можно забыть? Претензии у россиян всё те же: "Обама ссыт в подъезде (кстати, до сих пор так как имеет отношение к администрации Байдена), Трамп в подъезде не ссыт, но бюджет США на строительство Великой Мексиканской Стены больше не тратит (низабудутнипростят), Байден мало того, что ссыт в подъездах, так еще падает на лестницах и валяется. Лучше бы просто ссал как Обама"
Кто-то муссирует выступление Резникова о том, что надо куда-то собраться и срочно бежать пока границы не перекрыли. На самом деле старый добрый еврей Резников выступил только с одной целью - показать свои классные титьки на весь мир, торчащие из под униформы. Потому, что границы уже давно не просто перекрыли но на некоторых пограничных переходах даже передвижные военкоматы установили специально для удобств отъезжающих. Но... знающие люди всё равно знают, что технически границу России невозможно закрыть полностью на некоторых её участках. Поэтому всё выступление Резникова бессмысленно и всего лишь хитрый способ показать свои классные титьки.

В общем, почитаешь и подумаешь: Жалко, что войной опять не всех идиотов убило.

Не хочу я писать годный контент. Но иногда хочется поделиться мнением об увиденном в личную записную книжку. Чтобы потом прочитать и удалить, подумав: "Как такую ерунду можно писать?" А вот так: "читаешь ерунду в ленте, а потом пишешь ерунду в ответ. Это только так и работает." В этом весь смысл местных блевничков
11.02.23 В ленте говорят Шендеровича видели во Франции с настоящей французской шлюхой. Ужасно, но... лучше, чем с полосатым гостинничным матрасом в России... и Лимоновым на одной кровати

Profile

blocknote

July 2025

S M T W T F S
  12345
6 7891011 12
13141516171819
20212223242526
2728293031  

Most Popular Tags

Style Credit

Expand Cut Tags

No cut tags
Powered by Dreamwidth Studios