Pixi’VNUser Interface (UI) with JavaScript Framework
How to build and integrate UI screens in Pixi’VN using external JavaScript frameworks like React, Vue, and PixiJS.
What is UI? UI stands for User Interface. It refers to the visual elements and interactive components through which a user interacts with a digital device, application, or website. The UI includes everything that users interact with, such as buttons, menus, icons, text fields, and layout. The goal of UI design is to create an interface that is both aesthetically pleasing and functional, providing a seamless and intuitive experience for users.
Pixi’VN does not provide built-in components to create the game UI. Instead, you should use external JavaScript frameworks to build your UI. This allows you to leverage systems such as React, Vue, etc., to create complex and high-performance UI screens.
Pixi’VN offers features to improve compatibility with other JavaScript frameworks:
Differences between the UI and the canvas
As Pixi’VN was designed and conceived, the UI and the canvas are two distinct and independent elements. The UI is above the canvas and is used to create buttons, forms, etc. The canvas is used to display images, videos, etc.
All information about the current state of the canvas is included in the save and it is possible to restore the state of a previous step. The current state of the UI will not be included in the saves. So you have to manage it yourself by saving the information you need to game storage or browser storage.
In the canvas you can add components during each step. In the UI you can't do that, you can create several "screens" and navigate between them.
In the canvas you can only add Pixi’VN components. In the UI you can add any HTML/PixiJS component or use any UI component library, so you can create much more complex interfaces.