Создание игры в Twine 2
Dec. 30th, 2022 05:15 pm3. Сделайте вашу игру потрясающей с помощью CSS
https://www.youtube.com/watch?v=6ZawcwLOLWU
https://www.youtube.com/watch?v=6ZawcwLOLWU
В этом руководстве объясняется, как использовать CSS для изменения внешнего вида вашей игры Twine. Все эти инструкции основаны на формате истории SugarCube. Прежде чем начать, убедитесь, что ваша игра Twine настроена на формат SugarCube. Для этого нажмите на название своей истории в ее основном представлении «карта истории». Выберите «Изменить формат истории» и установите флажок рядом с «SugarCube». (примечание: в последней версии Twine 2 инетрфейс претерпел сильные изменения).
Примечание: это руководство было разработано для моих студентов и предполагает некоторое знакомство с HTML и CSS.
Примечание: это руководство было разработано для моих студентов и предполагает некоторое знакомство с 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-элемента для ссылок:
#ui-bar { display: none; }Опять же неудивительно, что изменение цвета и поведения ссылок достигается за счет стилизации элемента, 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 вашей истории.
Теперь, когда ваш игрок доберется до этого прохода, его встретит розовый фон и большой синий текст.
Скрытие боковой панели
Если вам не нужна боковая панель, которая есть по умолчанию в играх SugarCube, вы можете легко скрыть ее. Просто введите следующий код в файл CSS вашей истории.
(SugarCube помещает боковую панель в HTML-элемент div с идентификатором ui-bar. Эта инструкция CSS просто говорит вашему браузеру не отображать этот элемент div.)
Поскольку по умолчанию ваша история освобождает место для боковой панели, вы также можете добавить следующий код для стилизации основного элемента вашей истории:
body {
margin-left: 3.5em;
}
Добавление собственного HTML и его стилизация с помощью CSS
Добавление собственного HTML и его стилизация с помощью CSS
Как видите, Twine сам добавляет основную HTML разметку. Вам не нужно вводить собственный HTML-код для абзацев, например: он вставляет <p> для вас. Но если вам недостаточно такого способа вставки HTML в вашей игре, вы можете ввести свой собственный HTML-код прямо в проход (оно же passage).
Например, можно захотеть создать жуткий эффект, при котором текст исчезает, если пользователь наводит на него указатель мыши. Это можно сделать, вставив свой собственный HTML-элемент div в отрывок Twine и стилизовав его с помощью CSS.
Например, у вас может быть отрывок, в котором говорится следующее:
В небе жуткий НЛО.
<div class="aliens">Когда вы смотрите на него, он исчезает.</div>
Но вы уверены, что он есть.
Затем вы можете добавить несколько строк в файл CSS вашей истории, в котором вы стилизуете класс aliens этого div, чтобы сделать его исчезающим при наведении курсора мыши на элемент.