User Interface (UI)JavaScript Frameworks
Vue UI
설정, 템플릿, UI 예제를 포함해 Pixi’VN을 Vue와 통합하는 방법입니다. Vue로 비주얼 노벨이나 스토리 기반 게임을 만들어보세요.
Vue란 무엇인가요? Vue는 사용자 인터페이스를 구축하기 위한 점진적인 프레임워크입니다. 점진적으로 도입할 수 있도록 설계되었으며, 라이브러리와 완전한 기능을 갖춘 프레임워크 사이에서 쉽게 확장할 수 있습니다.
Vue 웹사이트에서 Vue에 대해 더 알아볼 수 있습니다.
Vue 애플리케이션에 Pixi’VN을 추가하는 방법
템플릿
Vue 템플릿 개발을 도와줄 분을 찾고 있습니다. 도와주실 수 있나요?관심이 있으시거나 도와주실 수 있다면 아래 채팅에 자유롭게 남겨주세요!
관심이 있으시거나 도와주실 수 있다면 아래 채팅에 자유롭게 남겨주세요!
먼저 Vue 애플리케이션이 필요하며, pixi-vn을 설치해야 합니다. 새 Vue 애플리케이션을 만들려면 Vite 사용을 권장합니다.
이제 다음 파일들의 내용을 아래 코드로 교체할 수 있습니다:
import {
canvas,
Container,
Game,
RotateTicker,
showImage,
tickers,
} from "@drincs/pixi-vn";
import { createApp } from "vue";
import "./style.css";
import App from "./App.vue";
createApp(App).mount("#app");
const body = document.body;
if (!body) {
throw new Error("body element not found");
}
Game.init(body, {
height: 1080,
width: 1920,
backgroundColor: "#303030",
})
.then(
() => {
// Pixi.JS UI Layer
canvas.layers.add("ui", new Container());
showImage(
"juliette",
"https://firebasestorage.googleapis.com/v0/b/pixi-vn.appspot.com/o/public%2Fcharacters%2Fjuliette-icon.webp?alt=media&token=cbcdd613-12e4-48b5-b7b3-16443b4e125e",
{ xAlign: 0.9, yAlign: 0.1, anchor: 0.5 },
);
tickers.add("juliette", new RotateTicker({ speed: 1 }));
// Vue setup
const app = document.getElementById("app");
if (!app) {
throw new Error("app element not found");
}
const htmlLayer = canvas.htmlLayers.add("ui", app, {
position: "absolute",
pointerEvents: "none",
});
if (!htmlLayer) {
throw new Error("htmlLayer not found");
}
createApp(App).mount(htmlLayer);
},
);