Fixed issues with pixi.js

package.json

@@ -12,9 +12,10 @@
     "serve": "vite preview --host"
   },
   "dependencies": {
-    "@pixi/app": "^6.4.2",
-    "@pixi/core": "^6.4.2",
+    "@pixi/app": "~6.3.2",
+    "@pixi/core": "~6.3.2",
     "@pixi/particle-emitter": "^5.0.4",
+    "@pixi/ticker": "~6.3.2",
     "@vitejs/plugin-vue": "^2.3.3",
     "@vitejs/plugin-vue-jsx": "^1.3.10",
     "is-plain-object": "^5.0.0",

src/features/particles/Particles.vue

@@ -8,8 +8,9 @@
 </template>
 
 <script lang="tsx">
-import type { StyleValue } from "features/feature";
 import { Application } from "@pixi/app";
+import type { StyleValue } from "features/feature";
+import "lib/pixi";
 import { processedPropType } from "util/vue";
 import type { PropType } from "vue";
 import { defineComponent, nextTick, onBeforeUnmount, onMounted, ref, unref } from "vue";

src/features/particles/particles.tsx

@@ -1,9 +1,9 @@
+import { Application } from "@pixi/app";
 import type { EmitterConfigV3 } from "@pixi/particle-emitter";
 import { Emitter, upgradeConfig } from "@pixi/particle-emitter";
 import type { GenericComponent, OptionsFunc, Replace, StyleValue } from "features/feature";
 import { Component, GatherProps, getUniqueID } from "features/feature";
 import ParticlesComponent from "features/particles/Particles.vue";
-import { Application } from "@pixi/app";
 import type { Computable, GetComputableType } from "util/computed";
 import { createLazyProxy } from "util/proxies";
 import { Ref, shallowRef, unref } from "vue";
@@ -62,7 +62,8 @@ export function createParticles<T extends ParticlesOptions>(
         }[] = [];
 
         function onInit(app: Application) {
-            (particles as GenericParticles).app.value = app;
+            const genericParticles = particles as GenericParticles;
+            genericParticles.app.value = app;
             emittersToAdd.forEach(({ resolve, config }) => resolve(new Emitter(app.stage, config)));
             emittersToAdd = [];
         }

src/features/resources/MainDisplay.vue

@@ -52,5 +52,6 @@ const showPrefix = computed(() => {
     vertical-align: middle;
     margin-bottom: 20px;
     display: flex;
+    transition-duration: 0s;
 }
 </style>

src/lib/pixi.ts

@@ -0,0 +1,7 @@
+import { Application } from "@pixi/app";
+import { BatchRenderer, Renderer } from "@pixi/core";
+import { TickerPlugin } from "@pixi/ticker";
+
+Application.registerPlugin(TickerPlugin);
+
+Renderer.registerPlugin("batch", BatchRenderer);