Специальные функции для Интернета

⇐ ПредыдущаяСтр 2 из 3Следующая ⇒

Чернила были разработаны так, чтобы максимально сосредоточиться на одной задаче: написание интерактивного текста. Мы сопротивлялись перегрузке языка дополнительными функциями, чтобы сохранить хороший баланс мощности, гибкости и простоты.

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

Тем не менее, Inky предоставляет некоторые дополнительные функции, которые можно использовать специально для сохранения в Интернете (начиная с версии 0.10.0 ). Все эти дополнительные функции используют чернильную систему тегов, которая позволяет вам предоставлять специальные текстовые аннотации для каждой строки, перед ней или над ней. Теги - это просто чистый текст, который невидим для читателя, но может быть прочитан игровой системой или, в нашем случае, веб-шаблоном.

Изображений

Вот как вы вставляете изображение:

# IMAGE: imageName.jpg

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

# IMAGE: myImages/imageName.jpg

Вы также можете добавить тег изображения в конце строки. Изображение всегда будет отображаться над текстом в игре.

The above picture is a dog. # IMAGE: dog.jpg

(Это на самом деле потому, что все теги связаны с определенными строками текста, и когда у вас есть тег в отдельной строке, он будет связан со строкой текста под ним.)

Очистка экрана

Еще одна особенность, характерная для веб-шаблона Inky, - это тег clear :

# CLEAR

Это удалит весь текст в текущем потоке, и начнется снова с верхней части страницы. Убедитесь, что вы вставляете это сразу после выбора! Если вы вставите его в середину фрагмента текста, верхняя часть будет очищена до его просмотра.

Глобальные теги: темная тема и автор

Чтобы использовать темную тему, просто поместите это в самый верх вашего файла с чернилами:

# theme: dark

Веб-шаблон может считывать это как глобальный тег и имеет встроенный стиль для изменения темы. (Он использует «темный» как класс для всей страницы. Когда вы видите использование .darkселектора в файле CSS, это переопределения для темной темы.)

Чтобы установить имя автора, поместите его в верхней части вашего файла чернил:

# author: Your Name

Это будет найдено чернильным веб-шаблоном и использовано для вставки подписи непосредственно под основным заголовком.

Пользовательские классы CSS

Вы также можете полностью настроить внешний вид отдельных строк текста с помощью классов CSS . Чернилами добавьте тег в строку, например:

You make your way into the forest.

There's a pool of blood on the ground. # CLASS: danger

Затем вы можете сказать браузеру, как выглядит « опасный » класс, добавив следующее в ваш style.css :

.danger {

color: red;

}

Точка, за которой следует слово, определяет, как мы определяем класс стилей в CSS. В большинстве наших предыдущих примеров не было точек, поскольку они были встроены в такие элементы, как «p» для «абзаца». Они также могут быть объединены, p.dangerчто означало бы «параграф с классом опасности » и сработало бы так же хорошо в нашем примере.

Пользовательский пример CSS: конец

Шаблон Inky содержит встроенные стили для класса с именем end, если вы хотите показать слова The End в центрированном / жирном стиле. Итак, чтобы использовать это, поместите следующее в конце вашей истории:

# CLASS: end

The End

-> END

Подведем итог:

Средняя линия - это сам текст.
Первая строка применяет класс CSS «конец» к тексту.
Последняя строка сообщает механизму чернил, что мы намеренно закончили, это не конец.

А чтобы настроить стиль конечного класса CSS, найдите .endв нижней части файла CSS.

Перезапуск истории

Веб-шаблон Inky имеет еще одну встроенную функцию. Если вы вставите # RESTARTтег, он немедленно очистит ход истории (включая всю историю выборов игрока и все переменные) и начнет заново с самого начала. Поскольку это немедленно, вы, вероятно, захотите оставить выбор, например:

You died!

+ Try again from the beginning.

# RESTART

-> END

На -> ENDсамом деле переадресация никогда не будет достигнута, но это хорошая практика: вы все равно захотите, чтобы Инки не жаловался, что у вас плохой конец.

Настройка внешнего вида

Это руководство предназначено для начинающих - оно не предполагает никаких знаний о веб-технологиях.

Приведенный выше шаг экспорта должен был сохранить папку со следующими файлами:

index.html - файл HTML, который связывает другие вместе, и является основным, который вы дважды щелкаете, если хотите просмотреть свою историю. Он сообщает браузеру приблизительную структуру страницы и загружает другие файлы.
main.js - это основной файл JavaScript, где вы можете настроить поведение представления истории.
style.css - это основной файл CSS, который определяет такие вещи, как цвета, шрифты, а также информацию о размерах и интервале, такую как ширина абзацев и поля. Мы также можем определить переходы, например, как исчезают абзацы.
yourStoryName.js - это фактическое содержание чернил, экспортированное Inky. Это единственный файл, который полностью уникален для вашей истории, в отличие от части общего шаблона, сохраненного Inky. Вы никогда не должны редактировать этот файл напрямую.
ink.js - это порт JavaScript самого движка чернил .

Чтобы изменить любой из этих файлов, вы должны открыть их в текстовом редакторе. Мы рекомендуем Sublime Text , но вы также можете использовать Notepad ++ для Windows, TextEdit для Mac или любой другой редактор, с которым вы знакомы. Однако не используйте Microsoft Word!

Как изменить шрифты и цвета

Все шрифты и цвета контролируются из файла CSS - style.css . Если вы откроете файл, вы увидите ряд блоков, подобных этому:

body {

font-family: 'Open Sans', sans-serif;

font-weight: lighter;

background: white;

}

Каждый начинается с имени, такого как «тело» или «h1». В CSS это называется селектором, поскольку он выбирает определенную часть веб-страницы для стилизации. В приведенном выше случае он выбирает тело, которое фактически составляет всю страницу.

Список следующих шрифтов font-familyнаходится в порядке приоритета; это зависит от того, что доступно на компьютере пользователя. В приведенном выше примере Open Sans - это веб-шрифт, который импортируется вверху файла - просто зайдите на сайт fonts.google.com, чтобы выбрать нужный вариант , и инструкции по их использованию (он дает вам одну из тех @importстрок, которые вы можете вставь в себя). Если по какой-либо причине этот шрифт не может быть загружен, он вернется к sans-serifопции.

Вы также можете использовать шрифт, встроенный в пользовательскую систему, но проблема в том, что существует очень ограниченный выбор, который гарантированно существует. Самые основные запасные варианты можно указать, используя просто serifи sans-serif.

Некоторые из CSS-селекторов и правил в файле включают в себя:

h1- это означает «уровень заголовка 1» - то есть самый большой заголовок, который используется для основного заголовка истории в верхней части страницы. Если вы хотите изменить размер заголовка, вы можете изменить font-sizeсвойство здесь. Точно так же h1, h2это ярлык для установки правил сразу для двух селекторов - уровней заголовков 1 и 2. Последний используется для подписи, если у вас есть # author: Your Nameметка вверху чернил.
.header- Имя, которому предшествует точка, является именем класса . Этот конкретный пример выбирает элемент, который является просто контейнером для заголовка и подписи . Часто в HTML / CSS элементам присваиваются контейнеры, чтобы помочь с структурированием или дать точный контроль над пространством и макетом.
p- это означает «абзац». Это селектор для основного текста на странице. Так что это то, куда вы должны обратиться, если хотите изменить размер шрифта, цвет текста и т. Д.
a- Это обозначает тег привязки , который является терминологией HTML для кликабельной ссылки - они в основном используются на нашей странице для кликабельного выбора, но могут быть любыми.
p.choice- Это означает «параграф с классом« выбор »». Если бы это было просто .choice, это означало бы «что-нибудь с выбором класса». Выборы на нашей странице фактически структурированы как специально разработанные абзацы, которые содержат кликабельные ссылки (якорные теги).
a:hover- Здесь :hoverон называется псевдоклассом и используется для выбора элемента, когда на него наведен указатель мыши.

CSS применяет стили в соответствии с приоритетами, которые основаны на том, насколько конкретным является селектор (более конкретным является более высокий приоритет) и позицией в файле (нижний - более высокий приоритет). Это позволяет вам сначала определять стили широкими штрихами, а затем постепенно переопределять их. Например, мы h2сначала определяем , а затем опускаем вниз .dark h2часть стиля h2: мы меняем цвет, когда активна темная тема (когда .darkкласс отдается всей странице -).

Чтобы узнать больше о различных способах изменения стиля с помощью одного только CSS, попробуйте поискать «Учебник CSS» - есть множество отличных ресурсов!

Вот пара учебников для начала:

Дата добавления: 2021-04-05; просмотров: 61; Мы поможем в написании вашей работы!

Поделиться с друзьями:

⇐ Предыдущая 123 Следующая ⇒

Мы поможем в написании ваших работ!