Vue UI
Как интегрировать Pixi’VN с Vue, включая настройку, шаблоны и примеры UI. Создайте visual novel или сюжетную игру на Vue.
Что такое Vue? Vue — это прогрессивный фреймворк для создания пользовательских интерфейсов. Он разработан таким образом, чтобы его можно было внедрять постепенно, и он может легко масштабироваться от библиотеки до полнофункционального фреймворка.
Подробнее о Vue можно узнать на сайте Vue.
Как добавить Pixi’VN в приложение Vue
Шаблоны
Я ищу того, кто поможет мне разработать шаблоны для Vue. Готовы помочь?Если вам это интересно или вы можете помочь, пишите в чат ниже!
Если вам это интересно или вы можете помочь, пишите в чат ниже!
Сначала вам понадобится приложение Vue и нужно установить pixi-vn. Рекомендуется использовать Vite для создания нового приложения Vue.
Теперь вы можете заменить содержимое следующих файлов кодом ниже:
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);
},
);