LogoPixi’VN

Пользовательский интерфейс (UI)

Как создавать и интегрировать экраны интерфейса (UI) в Pixi’VN с помощью внешних JavaScript-фреймворков, таких как React, Vue и PixiJS.

Pixi’VN не предоставляет встроенных компонентов для создания игрового интерфейса (UI) и не изобретает заново то, что уже существует в экосистеме JavaScript. Вместо того чтобы привязывать вас к конкретному фреймворку, он позволяет использовать любой внешний JavaScript-фреймворк, который вы предпочитаете, для создания интерфейса, так что вы можете использовать такие системы, как React, Vue и т. д., чтобы создавать сложные и высокопроизводительные экраны интерфейса (UI).

Эта гибкость также делает Pixi’VN отличным выбором для разработки с помощью ИИ: поскольку интерфейс (UI) создаётся с использованием стандартных, широко используемых фреймворков, а не проприетарной системы, ИИ-ассистенты для программирования уже хорошо знают эти инструменты и могут очень эффективно генерировать, понимать и изменять код интерфейса.

Pixi’VN предлагает функции для улучшения совместимости с другими JavaScript-фреймворками:

Различия между интерфейсом (UI) и канвасом

По замыслу и в соответствии с архитектурой Pixi’VN, интерфейс (UI) и канвас — это два отдельных и независимых элемента. Интерфейс находится над канвасом и используется для создания кнопок, форм и т. д. Канвас используется для отображения изображений, видео и т. д.

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

В канвасе вы можете добавлять компоненты на каждом шаге (step). В интерфейсе так сделать нельзя — вместо этого можно создавать несколько «экранов» и переключаться между ними.

В канвасе можно добавлять только компоненты Pixi’VN. В интерфейсе можно добавлять любые компоненты HTML/PixiJS или использовать любую библиотеку UI-компонентов, что позволяет создавать гораздо более сложные интерфейсы.

На этой странице