Розмітка
Атрамент використовує розмітку, схожу на BBCode, щоб оформлювати текст та додавати інтерактивні елементи.
Загальні поради
Підстановки та умови
Ви можете використовувати підстановки та умови Ink для керування тегами розмітки:
VAR fuel = 10
// змінна як значення атрибуту
[progress value={fuel}]Паливо[/progress]
// результат виконання функції як значення атрибуту
[progress value={get_current_fuel()}]Паливо[/progress]
// використання умови для додавання атрибуту
[button onclick=refuel {fuel==100:disabled=true}]Дозаправка[/button]
Багаторядкова розмітка
Теги розмітки працюють лише з одним рядком тексту. Використовуйте тег HTML <br> для розриву строки, якщо вам потрібно декілька рядків тексту всередині тегів розмітки.
[block width=50%]Це перший рядок.<br>Це другий рядок.[/block]
Використовуйте <> для зручності
Ви можете використовувати оператор "клею", <>, щоб вам було легше читати розмітку. Тоді ви можете писати розмітку в декілька рядків, які будуть об'єднані в один під час компіляції сценарію Ink.
[block width=50%]<>
Це перший рядок.<br><>
Це другий рядок.<>
[/block]
Лапки
Брати атрибути в лапки не обов'язково:
// обидва приклади працюють однаково
[table columns=20% 40% 20% border=false]
// але так краще читається
[table columns="20% 40% 20%" border=false]
Розміри
Інтерфейс Atrament UI адаптується під розмір екрану, тому рекомендується встановлювати розмір елементів у відсотках:
[block width=50%]
Однак ви можете використовувати і інші міри довжини CSS:
[block width=200px]
[block width=10em]
Кольори
Ви можете використовувати значення кольорів CSS, наприклад:
| Тип | Приклад |
|---|---|
| Іменовані кольори | [highlight color=red]text[/color] |
| Шістнадцятковий RGB | [highlight color=\#990000]text[/color] |
| RGB | [highlight color=rgb(255 0 153)]text[/color] |
| RGB з напівпрозорістю | [highlight color=rgb(255 0 153 / 0.5)]text[/color] |
Щоб використовувати шістнадцяткові коди кольорів, потрібно екранувати символи #: \#990000.
Розташування
Блоки
Ви можете використовувати тег розмітки [block], щоб змінити розташування тексту. Для блоків можна задати ширину та вирівнювання тексту. Декілька блоків поспіль виводяться в один рядок, тож ви можете робити декілька колонок тексту.
// приклад розташування в дві колонки
[block width=50%]Це перший блок тексту.[/block]<>
[block width=50% align=right]Інший блок тексту.[/block]
| Атрибут | Опис |
|---|---|
width | Ширина блока. Може бути задана у відсотках (дуже рекомендуються) або інших одиницях CSS. |
align | Вирівнювання тексту в блоці по горизонталі. Може бути left (ліворуч), center (по центру) чи right (праворуч). |
valign | Вирівнювання тексту в блоці по вертикалі. Може бути top (згори), middle (посередині), чи bottom (знизу). |
Таблиці
Таблиці створюються за допомогою таких тегів:
[table]<>
[header]Заголовок 1[ ]Заголовок 2[ ]Заголовок 3[/header]<>
[row]Клітинка 1[ ]Клітинка 2[ ]Клітинка 3[/row]<>
[row]Клітинка 4[ ]Клітинка 5[ ]Клітинка 6[/row]<>
[/table]
Зверніть увагу на оператор <> наприкінці кожного рядка таблиці - це необхідно для коректного її відображення.
Таблиця складається з заголовку [header][/header] (необов'язково) та рядів [row][/row]. Тег [ ] розділює клітинки.
Тег розмітки [table] має такі атрибути:
| Атрибут | Опис |
|---|---|
border=false | Прибирає рамки таблиці. |
padding=false | Прибирає відступи в клітинках таблиці. Корисно при поєднанні зображень за допомогою таблиці. |
columns="20% 20% 60%" | Визначає ширину стовпців. Має бути зазначена ширина кожного стовпця. |
fixed=true | Вмикає примусове перенесення тексту в клітинках, щоб ширина стовпців залишалася незмінною. |
Вигляд
Заголовок
Для відображення тексту заголовка використовуйте тег розмітки [banner]:
[banner]Перемога![/banner]
Тег розмітки [banner] має такі атрибути:
| Атрибут | Опис |
|---|---|
style=accent | Використовувати акцентний колір для тексту. |
allcaps=true | Відображати текст великими літерами. |
Інформація
Для відображення інформаційного блоку використовуйте тег розмітки [info]:
[info]Ви знайшли меч.[/info]
Тег розмітки [info] має такі атрибути:
| Атрибут | Опис |
|---|---|
font=system | Використовувати системний шрифт - наприклад, для підказок по грі |
side=highlight | Додати кольорову смужку ліворуч від блоку. Значення атрибуту може бути highlight (основний колір) або accent (акцентний колір). |
Спойлер
Для прихованого тексту використовуйте тег розмітки [spoiler]:
Щоб перемогти дракона, потрібно [spoiler]знайти зачарований меч.[/spoiler]
Коли гравець натискає на прихований текст, він відображається. Повторне натискання знову його ховає.
Виділення
Щоб виділити текст, використовуйте тег розмітки [highlight]. Текст виділяється акцентним кольором.
В цій печері заховані [highlight]скарби[/highlight].
Тег розмітки [highlight] має такі атрибути:
| Атрибут | Опис |
|---|---|
color=black | Задає колір тексту. |
bgcolor=yellow | Задає колір фону. |
Щоб використовувати шістнадцяткові коди кольорів, потрібно екранувати символи #:
В цій печері заховані [highlight color=\#990000 bgcolor=\#EEEEEE]скарби[/highlight].
Шрифт
Щоб застосувати шрифт до тексту, використовуйте тег розмітки [font]:
Цей текст [font=Courier New]використовує моноширинний шрифт[/font].
Індикатор
Тег розмітки [progress] відображає індикатор:
VAR fuel=10
[progress value={fuel}]Паливо[/progress]
За замовчуванням індикатор використовує шкалу від 0 до 100.
Тег розмітки [progress] має такі атрибути:
| Атрибут | Опис |
|---|---|
value=10 | Поточне значення індикатора. |
min=0 | Мінімальне значення шкали індикатора. |
max=100 | Максимальне значення шкали індикатора. |
style=accent | Виділити індикатор акцентним кольором. |
Посилання
Посилання на вибір
Тег розмітки [link] робить посилання на варіанти вибору. Зазвичай це використовується в гіпертекстовому режимі.
=== continue_story
[link=Продовжити]Натисніть для продовження[/link]
+ [Продовжити]
-> continue_knot
Інтернет-адреса
Для створення посилання на ресурс в інтернеті, використовуйте тег розмітки [url]:
Завітайте на сайт [url=http:\/\/atrament.ink/]Атраменту[/url].
Оскільки // використовується для коментаріїв в Ink, ви маєте екранувати подвійну косу риску в адресі, тож http:// стає http:\/\/.
Взаємодія
Введення даних
Для створення поля вводу використовуйте тег розмітки [input], зв'язавши його зі змінною:
VAR character_name="Невідомий"
=== markup_input
Введіть ваше ім'я:
[input var=character_name]
+ [OK]
-
Персонажа звуть "{character_name}".
Поле вводу показує поточне значення пов'язаної змінної. Значення змінної змінюється під час введення.
Тег розмітки [input] має такі атрибути:
| Атрибут | Опис |
|---|---|
var=your_variable | Обов'язковий атрибут. Ім'я змінної, куди зберігаються введені дані. |
type=text | Тип вводу. Може бути text ("текст", за замовчуванням) або number (число). Якщо атрибут type має значення number, введені дані будуть передані в змінну як число, а не як рядок. |
placeholder=Your name | Текст-заповнювач для поля вводу. Відображається, якщо значення змінної порожнє. |
Кнопка
Кнопки використовуються для виконання функції Ink.
[button onclick=stats]Показати характеристики[/button]
Якщо функція виводить текст, він буде показаний в повноекранному вікні поверх ігрового тексту - докладніше про це в розділі про оверлей. Якщо ні, вона оновлює контент поточного оверлею, якщо він присутній.
Тег розмітки [button] має такі атрибути:
| Атрибут | Опис |
|---|---|
onclick=your_function | Обов'язковий атрибут. Назва функції, яка викликається при натисканні кнопки. Функція не може приймати параметри. |
disabled=true | Якщо встановлений, кнопка буде неактивна і не реагуватиме на натискання. |
bordered=false | Не відображати рамки кнопки. Корисно, якщо використовувати зображення [img] в якості кнопки. |
display=modal | Якщо встановлений, натискання кнопки відображає модальне вікно оверлею замість повноекранного. |
Власна розмітка
Створення власних тегів розмітки описано в документації для розробників.