Pixi’VN用户界面（UI）JavaScript框架
Vue UI
介绍如何将 Pixi’VN 与 Vue 集成，包括配置、模板和 UI 示例。 Create a Vue visual novel or story-driven game.
什么是 Vue？Vue 是一款用于构建用户界面的渐进式框架。 它的设计便于渐进式采用，既可直接作为轻量级库使用，也能轻松扩展为功能完备的框架。
你可以访问 Vue官网，以了解更多信息。
如何将 Pixi’VN 添加到 Vue 应用程序中
模板
我们正在寻找协助开发 Vue 模板的伙伴。 愿意来帮忙吗？If you are interested or available to help, feel free to write in the chat below!
If you are interested or available to help, feel free to write in the chat below!
First, you need a Vue application and to install pixi-vn. Is recommended to use Vite to create a new Vue application.
Now you can replace the content of the following files with the code below:
import {
canvas,
Container,
Game,
RotateTicker,
showImage,
} 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.addLayer("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 },
);
canvas.addTicker("juliette", new RotateTicker({ speed: 1 }));
// Vue setup
const app = document.getElementById("app");
if (!app) {
throw new Error("app element not found");
}
const htmlLayer = canvas.addHtmlLayer("ui", app, {
position: "absolute",
pointerEvents: "none",
});
if (!htmlLayer) {
throw new Error("htmlLayer not found");
}
createApp(App).mount(htmlLayer);
},
);