Vue-UI
Wie du Pixi’VN in Vue integrierst, einschließlich Einrichtung, Templates und UI-Beispielen. Erstelle eine Vue-Visual-Novel oder ein erzählgetriebenes Spiel.
Was ist Vue? Vue ist ein progressives Framework zum Erstellen von Benutzeroberflächen. Es ist so konzipiert, dass es sich schrittweise einführen lässt, und kann problemlos zwischen einer Bibliothek und einem vollwertigen Framework skalieren.
Mehr über Vue erfährst du auf der Vue-Website.
Pixi’VN zu einer Vue-Anwendung hinzufügen
Vorlagen
Ich suche jemanden, der mir hilft, Vue-Templates zu entwickeln. Bist du verfügbar, um zu helfen?Wenn du interessiert bist oder Zeit hast zu helfen, schreib gerne unten im Chat!
Wenn du interessiert bist oder Zeit hast zu helfen, schreib gerne unten im Chat!
Zunächst benötigst du eine Vue-Anwendung und musst pixi-vn installieren. Es wird empfohlen, Vite zu verwenden, um eine neue Vue-Anwendung zu erstellen.
Jetzt kannst du den Inhalt der folgenden Dateien durch den untenstehenden Code ersetzen:
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.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 },
);
canvas.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);
},
);