feat: add Multi Loading example and enhance Review component with back buffer and antialias options

Author: hairyf

docs/.vitepress/config.ts

@@ -144,6 +144,7 @@ const themeConfig: DefaultTheme.Config = {
           { text: 'Async', link: '/examples/assets/async' },
           { text: 'Background Loading', link: '/examples/assets/background-loading' },
           { text: 'Manifest Bundles', link: '/examples/assets/manifest_bundles' },
+          { text: 'Multi Loading', link: '/examples/assets/multi-loading' },
         ],
       },
       // {

docs/.vitepress/theme/components/PixiJSContainer/components/Review.vue

@@ -35,6 +35,8 @@ const size = computed(() => {
           :background="background"
           :background-color="backgroundColor"
           :background-alpha="backgroundAlpha"
+          use-back-buffer
+          antialias
         >
           <slot />
         </Application>

docs/examples/assets/demo/multi-loading.vue

@@ -0,0 +1,28 @@
+<script lang="ts" setup>
+import { useScreen } from 'vue3-pixi'
+
+const screen = useScreen()
+</script>
+
+<template>
+  <assets
+    v-slot="{ data }"
+    :entry="[
+      { alias: 'flowerTop', src: 'https://pixijs.com/assets/flowerTop.png' },
+      { alias: 'eggHead', src: 'https://pixijs.com/assets/eggHead.png' },
+    ]"
+  >
+    <sprite
+      :texture="data.flowerTop"
+      :x="screen.width * 0.25"
+      :y="screen.height / 2"
+      :anchor="0.5"
+    />
+    <sprite
+      :texture="data.eggHead"
+      :x="screen.width * 0.75"
+      :y="screen.height / 2"
+      :anchor="0.5"
+    />
+  </assets>
+</template>

docs/examples/assets/multi-loading.md

@@ -0,0 +1 @@
+<demo mode="full" :background-alpha="0" src="./demo/multi-loading.vue" />

docs/examples/container/demo/blend-modes_comparison.ts

@@ -1,3 +1,93 @@
+<script lang="ts" setup>
+import type { BLEND_MODES } from 'pixi.js'
+import { ref } from 'vue'
+import { onTick } from 'vue3-pixi'
+
+const allBlendModes: BLEND_MODES[] = [
+  'normal',
+  'add',
+  'screen',
+  'darken',
+  'lighten',
+  'color-dodge',
+  'color-burn',
+  'linear-burn',
+  'linear-dodge',
+  'linear-light',
+  'hard-light',
+  'soft-light',
+  'pin-light',
+  'difference',
+  'exclusion',
+  'overlay',
+  'saturation',
+  'color',
+  'luminosity',
+  'add-npm',
+  'subtract',
+  'divide',
+  'vivid-light',
+  'hard-mix',
+  'negation',
+]
+
+const pandas = ref<Array<{ rotation: number }>>([])
+
+// Initialize pandas rotation state
+for (let i = 0; i < allBlendModes.length; i++) {
+  pandas.value.push({ rotation: 0 })
+}
+
+onTick(() => {
+  pandas.value.forEach((panda, i) => {
+    panda.rotation += 0.01 * (i % 2 ? 1 : -1)
+  })
+})
+</script>
+
 <template>
-  -
+  <assets
+    v-slot="{ data }"
+    :entry="[
+      { alias: 'panda', src: 'https://pixijs.com/assets/panda.png' },
+      { alias: 'rainbowGradient', src: 'https://pixijs.com/assets/rainbow-gradient.png' },
+    ]"
+  >
+    <container
+      v-for="(blendMode, i) in allBlendModes"
+      :key="i"
+      :x="(i % 5) * 100"
+      :y="Math.floor(i / 5) * 100"
+    >
+      <!-- 彩虹渐变（背景，正常显示，在底层，先渲染） -->
+      <sprite
+        :texture="data.rainbowGradient"
+        :width="100"
+        :height="100"
+      />
+      <!-- 熊猫精灵（前景，应用混合模式，在上层，后渲染） -->
+      <sprite
+        :texture="data.panda"
+        :width="100"
+        :height="100"
+        :anchor="0.5"
+        :x="100 / 2"
+        :y="100 / 2"
+        :rotation="pandas[i].rotation"
+        :blend-mode="blendMode"
+      />
+      <!-- 文本标签 -->
+      <text
+        :x="100 / 2"
+        :y="100 - 20"
+        :anchor="{ x: 0.5, y: 0.5 }"
+        :style="{
+          fontSize: 16,
+          fontFamily: 'short-stack',
+        }"
+      >
+        {{ blendMode }}
+      </text>
+    </container>
+  </assets>
 </template>