Шпагат что дает: Шпагат: эффектно и полезно

В этом руководстве объясняется, как использовать CSS для изменения внешнего вида вашей игры Twine 2. 1. Все эти инструкции основаны на формате истории SugarCube 2. Прежде чем начать, убедитесь, что ваша игра Twine настроена на формат SugarCube. Для этого нажмите на название своей истории в ее основном представлении «карта истории». Выберите «Изменить формат истории» и установите флажок рядом с «SugarCube 2.x». Это руководство было разработано для моих студентов и предполагает некоторое знакомство с HTML и CSS.

Загрузить PDF-версию: Сделайте вашу игру Twine потрясающей с помощью CSS

Вспоминая основы

Что мне нравится в Twine, так это то, что он публикуется в стандартных веб-форматах. Он использует HTML для контента, CSS для представления и JavaScript для всего, что связано с программированием. Поскольку он использует эти стандартные форматы, в вашу игру можно играть практически на любом компьютере, телефоне, планшете и т. д.

По умолчанию игры Twine в SugarCube выглядят довольно ужасно. Это должно побудить вас поставить свою личную визуальную печать на вашу игру. Хорошие новости: поскольку вы уже немного знаете CSS, это довольно просто.

Чтобы отредактировать CSS истории Twine, щелкните название своей истории на ее главном экране «карты истории», затем нажмите «Редактировать таблицу стилей истории». Это загрузит экран, который является просто старым (пустым) файлом CSS.

Изменение настроек по умолчанию

Поскольку игры Twine представляют собой обычные HTML-файлы, неудивительно, что вы меняете внешний вид большинства вещей в игре по умолчанию, стилизуя элемент body (самый высокий уровень элемент в «дереве документа» HTML.))

Добавление следующего кода, например, изменит цвет фона на белый, сделает цвет по умолчанию темно-серым, изменит шрифт по умолчанию на Futura и сделает размер шрифта по умолчанию немного больше:

тело {
цвет фона: белый;
цвет: темно-серый;
семейство шрифтов: Futura, Impact, Helvetica, без засечек;
размер шрифта: 125%;
}
 

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

а {
красный цвет;
}
а: наведите {
цвет: малиновый;
текстовое оформление: нет;
нижняя граница: 4 пикселя сплошной малиновый;
}
 

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

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

Опять же, шпагат — лучший, и с ним все очень просто. Первое, что вам нужно сделать, это открыть проход, с которым вы хотите сделать что-то особенное. Прямо под названием отрывка есть опция с надписью +tag. Нажмите на нее, чтобы добавить тег по вашему выбору. Например, предположим, что мы хотим добавить тег под названием «ура» для особенно счастливого прохождения. Напишите слово ура и нажмите на галочку.

Теперь нам нужно создать набор инструкций для вашего веб-браузера, которым он будет следовать при отображении этого отрывка. Для этого мы вернемся на страницу «Редактировать таблицу стилей истории» и создадим класс CSS с именем, соответствующим «тегу», который мы вставили выше. В этом случае мы создаем класс с именем ура (помните, что в CSS перед именами классов должна стоять точка):

.ура {
цвет фона: розовый;
цвет: васильковый;
размер шрифта: 200%;
}
 

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

Скрытие боковой панели

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

# ui-бар {
дисплей: нет;
}
 

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

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

#история {
поле слева: 3.5em;
}
 

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

Как вы можете видеть, Twine немного удерживает руки. Например, вам не нужно вводить свой собственный HTML-код для абзацев: он вводит для вас

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

Например, вам может понадобиться жуткий эффект, при котором текст исчезает, если пользователь наводит на него указатель мыши. Вы можете сделать это, вставив свой собственный HTML-элемент div в отрывок Twine и стилизовав его с помощью CSS.

Например, у вас может быть отрывок, в котором говорится следующее.

В небе жуткий НЛО.
Когда вы смотрите на него, он исчезает.
Но вы уверены, что он есть.
 

Затем вы можете добавить несколько строк в файл CSS вашей истории, в которых вы стилизуете класс пришельцев этого div, чтобы он исчезал, когда пользователь наводит указатель мыши на элемент.

.инопланетяне:наведите {
непрозрачность: 0;
переход: 1с все легкость;
}
 

Этот код HTML и CSS затем будет работать вместе, чтобы слова «Когда вы смотрите на это, они исчезают» исчезают, когда пользователь наводит на них курсор, путем постепенного перехода непрозрачности элемента div пришельцев к нулю в течение одного диапазона. второй.

Теперь вы знаете все, что вам нужно знать, чтобы создать полностью персонализированный визуальный опыт в игре Twine. Сходить с ума!

В этом руководстве объясняется, как добавлять изображения и музыку в игру Twine 2.1, а также как создавать структуру папок и использовать относительные ссылки. Прежде чем начать, убедитесь, что ваша игра Twine 2.1 настроена для формата SugarCube 2. Для этого нажмите на название своей истории в ее основном представлении «карта истории». Выберите «Изменить формат истории» и установите флажок рядом с «SugarCube 2.x». Примечание: это руководство предполагает некоторое знакомство с HTML и CSS.

Скачать PDF-версию: Добавление изображений и музыки

Добавление фото или видео из Интернета

Добавить медиафайлы в игру Twine так же просто, как добавить теги HTML. Допустим, вы хотите добавить изображение жуткого коридора в первое прохождение вашей игры о застревании в коридоре. Все, что вам нужно сделать, это найти «прихожую» в Google, перейти к изображениям, найти изображение, которое вам нравится, а затем нажать «Просмотреть изображение». Теперь изображение будет отображаться в вашем браузере, а его URL будет в адресной строке. Все, что вам нужно сделать, это получить его URL-адрес с помощью «Копировать».

Теперь у вас есть вся информация, необходимая для вставки этого изображения в вашу игру Twine. Давайте добавим HTML-тег img прямо над существующим контентом в проходе:

.

Вы находитесь в коридоре. Вы видите две двери: [[дверь слева]] и [[дверь справа]].
 

Надлежащая практика написания кода требует, чтобы вы вводили тег alt= для описания содержимого вашего изображения словами. В противном случае все очень просто. Вот и все: в вашей игре есть изображение.

С таким же успехом вы можете вставить видео с YouTube в свою игру. Просто найдите видео, которое хотите вставить, нажмите «Поделиться» под видео, выберите «Вставить» и скопируйте HTML-код в свою игру. Вот и все: в вашей игре есть видео.

Создание структуры папок

Хорошо, это работает, но не идеально. Прежде всего, если бы вы работали таким образом, вам, вероятно, пришлось бы полагаться на изображения, сделанные другими людьми — вещи, которые уже есть в сети, а не на ваш собственный оригинальный контент, созданный специально для игры. Во-вторых, допустим, вы выпускаете свою блестящую игру, а потом ссылка на ваше изображение не работает. Теперь у вас есть неприглядное отсутствующее изображение в вашей игре. Что еще хуже, представьте, что изображение, которое вы взяли из Интернета, защищено авторским правом, и вы получаете гневное письмо от адвоката правообладателя.

Способ получить полный творческий контроль над игрой — создать ее в структуре папок, которую вы создали сами. Допустим, например, что я создаю папку под названием «Игра в коридоре» где-то на жестком диске своего компьютера. Здесь будет жить моя игра и все ее медиаактивы (изображения, звуковые дорожки и т. д.). В основную папку hallwaygame я положу саму игру, которую я планирую назвать «Hallway Game.html» (помните, игры Twine публикуются в виде HTML-файлов).

Теперь в папке «Hallway Game» я создам подпапку с именем images, куда я буду помещать все изображения для своей игры. Допустим, я сделал свой собственный оригинальный образ коридора с двумя дверями в конце. Я сохраню это изображение как hallway.jpg и положу его в только что созданную подпапку с изображениями.

Теперь вместо того, чтобы использовать полный URL-адрес файла в Интернете, я буду использовать так называемую относительную ссылку. Вместо того, чтобы указывать, где находится изображение в Интернете, я собираюсь указать, где оно находится по отношению к основному файлу Twine (Hallway Game.html). Я точно знаю, где hallway. jpg находится относительно hallwaygame.html, так как я поместил его в свою собственную структуру папок: он находится в подпапке с именем images. Способ представления этого относительного пути в HTML выглядит следующим образом: images/hallway.jpg

Итак, давайте поместим этот относительный путь в мой предыдущий отрывок как src моего тега img.

Вы находитесь в коридоре. Вы видите две двери: [[дверь слева]] и [[дверь справа]].
 

Если вы нажмете кнопку Play в Twine, вы увидите — о-о-о! — что изображение не появляется. Это потому, что когда вы нажимаете «Играть в Twine», вы просто видите своего рода предварительный просмотр своей игры. Где существует этот «предварительный просмотр» — сложный вопрос. Это как в подземном мире. Он не опубликован в сети для всеобщего обозрения; и хотя это где-то на вашем компьютере, это не то место, к которому вы можете получить полезный доступ. Итак, давайте вынесем игру Twine из этого преисподней и поместим ее в какое-нибудь конкретное место. Мы делаем это, щелкая название истории в главном представлении «карты историй» и выбирая «Опубликовать в файл». Отлично: теперь давайте сохраним нашу игру как «Hallway Game.html» в папке, которую мы для нее создали.

Теперь давайте ненадолго оставим Twine. Перейдем в папку, в которой мы сохранили «Hallway Game.html», и дважды щелкните по ней. Он откроется в веб-браузере — и, если вы правильно ввели тег img, отобразится ваше изображение.

Теперь соберите еще кучу изображений для своей игры и сохраните их все в подпапке images. Везде, где вы хотите, чтобы они отображались в вашей игре, используйте теги img с относительными путями, указывающими на images/. Теперь вся ваша игра в Twine находится в одном месте — все в папке hallwaygame. Теперь вы можете загрузить эту папку на веб-сервер, и она будет отображаться так же хорошо, как и на вашем компьютере. (Поскольку относительных путей, ну, родственник , им все равно, находятся ли они на вашем компьютере или в Интернете — их волнует только то, как добраться из одного места в другое, и находитесь ли вы в Интернете или на своем собственном компьютере, способ перехода от «Hallway Game. html» к «hallway.jpg» тот же: загляните в подпапку images, и он там будет.

Добавление музыки

Теоретически в добавлении музыки нет ничего особенного. Вы можете просто использовать стандартные теги HTML для добавления музыки. Однако на практике в SugarCube 2 есть гораздо более простой способ добавления музыки — набор так называемых «макросов», которые упрощают работу с музыкой.

В первую очередь нам нужно достать музыку (формат .mp3 работает лучше всего; и не нарушайте никаких законов, если планируете размещать свою игру публично — помните о юристах!). Далее, как и в случае с изображениями, нам нужно выяснить, где мы будем хранить музыку. Как и в случае с нашими изображениями, давайте поместим всю нашу музыку в отдельную подпапку основной папки hallwaygame. Назовем эту подпапку music.

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

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

Итак, давайте создадим отрывок под названием StoryInit и напишем следующий код:

<>
<>
 

Первая строка создает «аудиоактив» с именем main song (хотя вы можете называть его как хотите) из аудиофайла с именем dauphin.mp3, который находится в музыкальной подпапке относительно «Hallway Game.html». Вторая строка создает второй аудиоресурс с именем happysong из файла с именем henry.mp3, который мы поместили в эту же папку.

Теперь, когда наши песни загружены, давайте что-нибудь с ними сделаем! Допустим, мы хотим, чтобы основная песня начинала играть сразу, как только наш игрок запускает игру. Все, что нам нужно сделать, это добавить следующий код в первый проход:

<<аудио играет основную песню>>
 

Эта строка вызывает звуковой макрос SugarCube, затем указывает имя загруженной песни, которую мы хотим воспроизвести (основная песня, созданная в StoryInit), а затем указывает действие (игра начинает воспроизведение песни).

Если вы нажмете «Играть» в Twine, вы заметите, что это еще не работает. Ну конечно не работает! Нам нужно вывести нашу игру Twine из преисподней и использовать функцию «Опубликовать в файл», чтобы сохранить ее в виде конкретного HTML-файла в папке «Hallway Game» — ее истинном доме, где находятся все ее медиа-ресурсы! — до того, как он начнет работать. Если вы это сделаете, вы услышите свою песню.

Теперь предположим, что когда ваш игрок доходит до экрана «победа», вы хотите вознаградить его счастливой песней. Размещение следующих строк кода в этом «выигрышном» отрывке приведет к постепенному исчезновению основной песни и исчезновению счастливой песни, другой песни, которую мы создали в StoryInit

. 
<<остановка основной песни>>
<<аудио хэпписонг>>
 

После того, как вы снова опубликуете свою игру в папке «Hallway Game», вы обнаружите, что теперь у вас есть очень продвинутая игра Twine с саундтреком, который адаптируется к действию!

Далее вам нужно просмотреть полный список аудиокоманд SugarCube 2.x (он может делать намного больше, чем просто воспроизводить и останавливаться!).

В этом руководстве объясняется, как использовать переменные и выполнять базовое программирование в Twine 2.1. Все эти инструкции основаны на формате истории SugarCube 2. Прежде чем начать, убедитесь, что ваша игра Twine 2.1 настроена для формата SugarCube 2. Для этого нажмите на название своей истории в ее основном представлении «карта истории». Выберите «Изменить формат истории» и установите флажок рядом с «Sugarcube 2.x» 9.0128

Скачать PDF версию: Программирование в Twine

Что такое переменная?

Переменная — это контейнер, содержимое которого можно изменить. (Он получил свое название из-за того, что его содержимое «переменное».) Думайте об этом как о конверте. Вы можете положить в конверт лист бумаги с надписью «Адам». Вы можете положить в него лист бумаги с надписью 9. Вы можете вложить в него целый роман.

Переменные имеют имена и значения. Значением переменной является описанное выше «содержимое» — слово «Адам» или число 9.или весь роман. Имя — это просто сокращение, которое Twine будет использовать для доступа ко всему, что в нем есть. Вам нужно определиться с именем переменной, но вы можете называть ее как хотите. Единственное правило состоит в том, что переменные Twine всегда должны начинаться со знака доллара ($). Чтобы оживить переменную, используйте команду SugarCube <>, которая делает две вещи: создает переменную с определенным именем и присваивает ей ее начальное «значение».

<<установите для $myvariable значение "Адам">>
<< установить $myothervariable в 99>>
<<установить для $yetanother значение true>>
 

Это три основных типа переменных, которые могут потребоваться: текстовые (также известные как «строки»), числа (также известные как «числовые» переменные) и истина/ложь (также известные как «логические значения»). Обратите внимание, что вам нужно заключать в кавычки содержимое текстовых переменных. Не используйте кавычки для чисел или переменных true/false.

Приложение №1: Использование ключа в игре

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

Вам понадобится переменная с именем вроде $hasKey, которая будет принимать одно из двух значений: false, когда у игрока ее нет, и true, когда она ее находит.

По умолчанию у игрока нет ключа. Итак, в первом прохождении вашей игры вы захотите создать свою переменную и установить для нее значение false, например:

.
<<установить для $hasKey значение false>>
 

В отрывке, когда ваш читатель входит в потайную комнату и обнаруживает ключ, вы захотите установить для $hasKey значение true. Вы можете сделать это, вставив в этот отрывок следующую строку кода:

<<установить для $hasKey значение true>>
 

(Обратите внимание, что <> может создать переменных, но если переменная уже существует, она просто изменяет значение переменной.)

Хорошо, теперь представьте, что мы находимся в проходе вашего игра, в которой игрок наконец добрался до главной двери замка и пытается сбежать. Если у них есть ключ, они могут сбежать. Если нет, то не могут. Чтобы реализовать это, вы можете использовать условный оператор SugarCube, например:

<<если $hasKey равно true>>Вы вставляете ключ в дверь, и она открывается.  Вы [[проходите через дверь|снаружи]].
<>Вы пытаетесь открыть дверь, но она заперта и не поддается. Вам нужно будет [[продолжать искать ключ|начать]].
<>
 

Twine начинает с оценки первой строки оператора if; если это не так, он просматривает первую строку elseif, затем просматривает остальные строки elseif (если есть еще), а затем прекращает работу, когда достигает <>, что означает, что оператор if кончено. В дополнение к if и elseif вы также можете написать else, что просто означает «Если ни одно из условий if или elseif не выполняется, то выполните это .) Кроме того, обратите внимание, что если вы работаете с числами, вы можете использовать условные операторы, такие как gt («больше») и lt («меньше») вместо просто is.

Все это означает следующее. Во-первых, Twine проверит, истинно ли значение $hasKey. Если это так, он отобразит текст «Вы вставляете свой ключ в дверь, и она открывается» и дает пользователю возможность щелкнуть ссылку на проход, где он находится за пределами замка. Если $hasKey не соответствует действительности, Twine не будет отобразит этот текст пользователю, и пользователь не сможет щелкнуть по этой ссылке. Теперь Twine оценит следующую возможность. Здесь он будет оценивать, является ли $hasKey ложным. Если оно равно false (что по умолчанию, поскольку мы установили его в качестве начального значения в начальном проходе), то Twine отобразит текст «Вы пытаетесь открыть дверь, но она заперта и не поддается». и единственным вариантом будет щелкнуть ссылку, которая вернет их к началу игры, чтобы заново начать поиск того неясного прохода, где для $hasKey установлено значение true.  

Приложение № 2. Проверка имени игрока

Предположим, вы хотите создать игру, в которой вы спрашиваете имя игрока, а затем, если узнаете его, даете индивидуальный отзыв.

При первом прохождении используйте встроенный код SugarCube для отображения текстового поля и вставки того, что игрок пишет в переменную:

Введите ваше имя:
<<текстовое поле "$имя" "">>
Когда будете готовы, нажмите [[здесь]]. 
 

Этот код указывает, что все, что игрок вводит в текстовое поле, будет сохранено в переменной с именем $name («» просто означает, что в поле нет текста по умолчанию — если вы написали «Введите свое имя здесь» в этом пробел, сначала появится текстовое поле с надписью «Введите свое имя здесь».)

Теперь на следующей странице вы можете сделать так, чтобы ваша игра отображала специальное сообщение, если кто-то ввел свое имя как «Адам».

<>Эй, тебя зовут Адам! Так и мой!
<>Привет, $name.
<>
 

Twine будет отображать только «Эй, тебя зовут Адам! Как и мой!» если переменная $name равна «Адам». В противном случае — <> — он просто скажет «Привет» и повторит ей имя человека (да, это крутая штука с переменными. Если вы напишете имя переменной в обычный отрезок текста, Twine замените его значением переменной, когда оно действительно показывает его игроку.)

Приложение №3: Запись «счастливости» игрока

Предположим, вы хотите, чтобы ваша игра записывала текущий подсчет того, насколько «счастлив» ваш игрок. Вы можете сделать это с помощью числовой переменной. Например, в начале игры вы можете указать:

.
<<установить $счастье на 0>>
 

Затем, всякий раз, когда происходит что-то, что делает вашего игрока счастливым, вы можете включить эту строку:

<<установите для $happiness значение $happiness + 1>>
 

Если уровень счастья игрока равен нулю перед этим проходом, эта строка кода установит его равным 1 (0 + 1 = 1). Если уровень счастья игрока равен 3, эта строка кода установит его равным 4 (3 + 1 = 4). Причина, по которой вы не хотите, чтобы эта строка была <<установить $happiness на 1>>, заключается в том, что это сотрет все ваши «текущие подсчеты» и просто установит значение счастья на 1, независимо от того, насколько вы счастливы. был ваш игрок до того, как наткнулся на этот конкретный проход.

Когда что-то делает вашего игрока несчастным, вы можете включить эту строку кода:

<< установить для $happiness значение $happiness - 1>>
 

Позже предположим, что вашему игроку звонит друг.