Pixi’VNUser Interface (UI)
React, Vue, PixiJS와 같은 외부 JavaScript 프레임워크를 사용하여 Pixi’VN에서 UI 화면을 구축하고 통합하는 방법.
Pixi’VN은 게임 UI를 만들기 위한 내장 구성 요소를 제공하지 않으며, JavaScript 생태계에 이미 존재하는 것을 다시 만들어내지 않습니다. 특정 프레임워크에 종속시키는 대신, 원하는 외부 JavaScript 프레임워크를 사용하여 UI를 만들 수 있게 해주므로 React, Vue 등의 시스템을 활용하여 복잡하고 고성능인 UI 화면을 만들 수 있습니다.
이러한 유연성 덕분에 Pixi’VN은 AI 지원 개발에도 매우 적합합니다. UI가 독자적인 시스템이 아니라 표준적이고 널리 사용되는 프레임워크로 구축되므로, AI 코딩 어시스턴트가 이러한 도구들을 이미 잘 알고 있어 UI 코드를 매우 효과적으로 생성, 이해, 수정할 수 있습니다.
React
설정, 템플릿, 최고의 UI 라이브러리를 포함하여 Pixi’VN을 React와 통합하세요.
Vue
설정, 템플릿, UI 예제를 포함하여 Pixi’VN을 Vue와 통합하세요.
PixiJS
PixiJS 레이어와 구성 요소를 사용하여 사용자 지정 UI 화면을 만들고, 이를 HTML UI와 결합하세요.
Pixi’VN은 다른 JavaScript 프레임워크와의 호환성을 향상시키는 기능을 제공합니다:
UI와 캔버스의 차이점
Pixi’VN이 설계되고 구상된 방식에 따라, UI와 캔버스는 서로 다른 독립적인 두 요소입니다. UI는 캔버스 위에 위치하며 버튼, 폼 등을 만드는 데 사용됩니다. 캔버스는 이미지, 비디오 등을 표시하는 데 사용됩니다.
캔버스의 현재 상태에 대한 모든 정보는 저장 데이터에 포함되며, 이전 단계의 상태를 복원할 수 있습니다. UI의 현재 상태는 저장 데이터에 포함되지 않습니다. 따라서 필요한 정보를 저장하여 직접 관리하려면 게임 저장소 또는 브라우저 저장소를 사용해야 합니다.
캔버스에서는 각 단계마다 구성 요소를 추가할 수 있습니다. UI에서는 그렇게 할 수 없으며, 여러 개의 "화면"을 만들어 그 사이를 이동할 수 있습니다.
캔버스에서는 Pixi’VN 구성 요소만 추가할 수 있습니다. UI에서는 원하는 HTML/PixiJS 구성 요소를 추가하거나 원하는 UI 구성 요소 라이브러리를 사용할 수 있으므로 훨씬 더 복잡한 인터페이스를 만들 수 있습니다.