ApricityUI

ApricityUI

Создавайте интерфейсы с помощью HTML + CSS + JS. Синтаксис максимально близок к веб-стандартам.

Обзор

ApricityUI создавался с одной целью: UI-фреймворк, который прост в освоении, удобен и широко применим. Именно поэтому за основу взята классическая связка HTML + CSS + JS.

Сторона JS сейчас зависит от KubeJS (опционально), а значит авторы сборок могут рисовать любой интерфейс с крайне низким порогом входа.
Насколько низким? Вы можете поручить AI сгенерировать всё, что связано с ApricityUI. Веб-фреймворки достаточно популярны, чтобы AI хорошо их знал — результат может даже выглядеть лучше, чем вы нарисовали бы сами, и при этом вы сможете его прочитать.

Моды, которым нужен кастомный интерфейс, тоже могут зависеть от ApricityUI и строить легко расширяемые интерфейсы; JS и Java API в основном равнозначны.
В чём проявляется эта расширяемость? Вложенные маски, плавная прокрутка, скруглённые границы, матовое стекло на фоне, кастомные анимации, кастомные шрифты, воспроизведение GIF — вплоть до фильтров, масок и теней, вложенных друг в друга. То, что где-то требует сотен или тысяч строк, здесь — несколько строк.

Синтаксис ApricityUI по сути фиксирован и остаётся максимально близким к веб-стандартам, так что вы можете свободно обновляться и использовать его на разных версиях игры, не беспокоясь о поломке совместимости.

Начиная с 1.2.5 ApricityUI также может вызывать WebView, встроенный в вашу операционную систему, позволяя встроить в игру настоящий сайт или веб-страницу, которая принимает только аппаратный ввод (включая воспроизведение видео).

Если вы не уверены, что такое веб-фреймворк, запомните хотя бы три его известных преимущества:

• Богатый функционал: от простой отрисовки фигур до вложенных эффектов рендеринга — ApricityUI может даже отрисовать что-то на блоке в мире.
• Простота использования: большинство ускоренных курсов, что я видел, занимают меньше трёх часов (самый короткий — десять минут), а AI знает этот стек вдоль и поперёк.
• Простота отладки: почти всё мгновенно перезагружается на лету, а удобные инструменты разработчика дают визуальную отладку. В ApricityUI есть и то, и другое.

Примечание: ApricityUI не включает в себя среду выполнения Chrome. Он полностью написан на Java с нуля; по состоянию на 1.2.4 jar весит всего 2.5 MB, ничего дополнительно не скачивает и безопасен в использовании.

Демонстрация

Встроенные темы на чистом CSS

Темы Ore и AE встроены, а следом появятся и другие универсальные темы в духе MC (или намеренно не в духе MC). Все они используют одну и ту же схему именования CSS, так что переключение между ними бесшовное.

• 3D-принтер Limitless Vehicle

• Редактор Auto Seam Blend

Рисуйте где угодно

Он полностью интегрируется с рендерингом Minecraft — рисуйте где захотите. Одного KubeJS достаточно, чтобы настроить всплывающие подсказки предметов и радиальные меню.

• Всплывающая подсказка предмета 东方足道屿

• Простое радиальное меню (от SurpTalent)

Canvas

Поддержка Canvas, которой достаточно для графиков, отрисовки SVG, сложных вложенных эффектов, досок для рисования и подобных повседневных задач.

• Биржевой рынок Building Shop
• Доска для рисования Auto Seam Blend

Оконные окна в мире

HTML можно отрисовать в точке внутри мира с настраиваемым углом, прохождением сквозь блоки, дистанцией взаимодействия, дальностью прорисовки, следованием за камерой, LOD и другими деталями.

• 东方足道屿 массаж ног горничной

• Полоски здоровья мобов и отображение предметов (от ୧⍤⃝无月)

Нативные элементы Minecraft

Управляйте слотами контейнеров, предметами, жидкостями, текстурами, моделями, анимациями спрайтов, ключами перевода и другими нативными элементами средствами HTML.

• Building Shop магазин строительных материалов

• Cobblemon Skin Manager (от 卡杨巴)

Редактор форматированного текста

Редакторы форматированного текста можно создавать data-driven способом.

• Встроенный пример редактора форматированного текста

WebView

Чтобы интерфейсы разных модов оставались независимыми и при этом могли взаимодействовать друг с другом, ApricityUI использует многодокументную архитектуру. Это убирает большую часть смысла тега iframe, а Minecraft и так редко нуждается во вложенных интерфейсах — поэтому сегодня тег iframe в ApricityUI используется исключительно для встраивания WebView.

Проще говоря, создание документа с тегом iframe на самом деле открывает WebView и отрисовывает его за кадром в области iframe.

Минусы WebView очевидны: ни из Java, ни из KubeJS трудно найти элегантный способ логически с ним взаимодействовать, поэтому сейчас ApricityUI лишь передаёт ему аппаратный ввод.

Из-за высокого потребления памяти WebView также плохо подходит для оверлеев и окон в мире.

В небольшом числе окружений WebView вообще отсутствует (например, в Linux), но этот мод никогда не будет встраивать его сам.

Плюс в том, что WebView частично компенсирует неполное покрытие браузерных стандартов в ApricityUI. Он может отрисовывать сложные страницы, мало связанные с игрой, или напрямую открывать внешние сайты — живую документацию, списки изменений, обучающие видео по модам — и поддерживает создание кинотеатра прямо в мире.

Для разработчиков

Примечание: все документы и навыки встроены в файл модуля, и AI готов к использованию.

Для использования ApricityUI не нужно знать исходный код. Если он понадобится, доступен официальный Maven:

repositories {
    maven {
        url "https://maven.sighs.cc/repository/maven-public/"
    }
}
dependencies {
    implementation 'com.sighs:ApricityUI-forge-1.20.1:1.2.7'
}

Разрабатывать веб-приложения с помощью AI очень легко — вам даже не нужен SKILL, и то же самое касается ApricityUI.

Простой пример: одно предложение генерирует интерфейс.

Генерация случайных дизайнов, пока один из них не понравится, а затем адаптация статического шаблона — это высокоэффективный рабочий процесс.

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

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

Начиная с 1.2.4 jar содержит полную документацию, а в конфиге есть опции для автоматических скриншотов (хранится до 20 штук) и для перезагрузки подходящего интерфейса, как только файл изменится. Всё это рассчитано на ИИ.

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

Задача — создать или изменить UI; можно менять только HTML/CSS/JS.
Следуй указаниям из встроенной документации.
Известно: папка run/screenshots/aui выдаёт скриншот игры каждую секунду; за статическими ресурсами следят автоматически, и при изменении они вызывают перезагрузку.
Цикл тестирования: редактируй файлы html/css/js -> следи в логе за сообщением о перезагрузке -> подожди три секунды, затем проверь самый свежий скриншот в папке screenshots -> оцени, соответствует ли он требованию; если нет — продолжай редактировать, если да — остановись.
Целевой HTML-файл: run/apricity/test/quest.html
Требуемый результат: список квестов в игре, современный плоский стиль, красно-белая палитра
Референсное изображение: run/screenshots/image_614748742442633.png

Полный SKILL описан в официальной документации и входит в jar вместе с полной документацией.

Сложные потребности в UI в Minecraft редки. Обычно ИИ достаточно прочитать встроенную документацию, чтобы выполнить большую часть работы над дизайном за один проход, а со встроенной темой результат уже выглядит хорошо.

Когда интерфейс в целом готов, можно открыть инструменты отладки, похожие на браузерные — они тоже не привязаны по умолчанию начиная с 1.2.4.

В DevTools можно находить и выбирать элементы на странице и редактировать стили и содержимое напрямую, с отменой и повтором, а затем сохранять стили или всё содержимое DOM.

Логи о неподдерживаемых функциях, синтаксических ошибках, внутренних исключениях и подобных проблемах дублируются в консоль DevTools.

Также можно позаимствовать готовые стили с Codepen. Если вам попадётся нужное CSS-свойство, которого не хватает, откройте issue на Github.

Распространение ресурсов

ApricityUI поддерживает HTML, CSS, Javascript, шрифты TTF/OTF и большинство форматов изображений, включая GIF, в качестве статических ресурсов; аудио и видео запланированы.
Ресурсы лежат в папке apricity экземпляра версии и в ресурспаках. У ресурспаков приоритет ниже, но стандартные глобальные стили и встроенные шрифты поставляются в собственных ресурсах мода.
Разработчикам модпаков рекомендуется размещать их в папке apricity. Горячая перезагрузка по умолчанию привязана к END и обычно занимает меньше секунды.

Подробности смотрите в главе Resource Manager официальной документации.

Если хотите упаковать и поделиться, подойдёт либо ресурспак, либо обычный архив. Поскольку ресурспак к тому же требует перезагрузки игры, рекомендуется простой архив.
Для модов, использующих ApricityUI как зависимость, лучше подходит форма ресурспака: стандартные пути загрузки включают путь ресурспака для разработки с наивысшим приоритетом, что очень удобно.
Ещё один вариант — сетевые ресурсы, например хостинги изображений или открытые площадки для статики. ApricityUI поддерживает асинхронную загрузку сетевых ресурсов — только не делайте с этим ничего плохого.

ApricityUI также предлагает ретро-воркфлоу «сервер отправляет HTML клиенту для отрисовки», который позволяет полностью управлять клиентским UI с сервера.

Хотите узнать больше?

• ApricityUI также реализует браузерный зум: зажмите CTRL и прокручивайте на странице, чтобы приближать и отдалять, так что игроки могут адаптироваться к любому размеру окна.
• KubeJS — необязательная зависимость. Без него нельзя выполнить JavaScript, написанный внутри HTML, и консоль недоступна — но для разработчиков модов это редко имеет значение, ведь работу с DOM можно делать на Java.
• Горячая перезагрузка быстрая: двадцать разных аватарок из QQ плюс три кастомных шрифта, включая инлайн-JS, перезагружают целый документ примерно за одну секунду. Если вы пишете клиентские скрипты на KubeJS, возможно, этим даже удастся срезать углы — хотя пути к ресурсам не дают автодополнения PJS. Учтите, что эта перезагрузка не перезагружает ресурспаки.
• В обычном использовании у ApricityUI нет очевидного узкого места по производительности, а на 26.1 и выше почти не о чем беспокоиться. Но автор не может протестировать все случаи — если вам случится поймать внезапный лаг, пожалуйста, сразу сообщите о нём.
• Лёгкие порты современных фронтенд-фреймворков, таких как Vue и Svelte, активно разрабатываются. Простой Vue уже имеет PR от kltyton, а Svelte будет встроен позже. Присоединяйтесь к группе, если интересно!

Галерея

• win98

• Machine-Max настройки транспорта

• FindMe управление компаньонами