diff --git a/README.md b/README.md index b9f7231..19eefe4 100644 --- a/README.md +++ b/README.md @@ -1,8 +1,31 @@ +帮我优化下面的文档: + # vue3-pixi-renderer -> Use Vue 3 to create PixiJS applications +Use Vue 3 to create PixiJS applications + +- 💚 Lightweight and flexible Vue 3 library for creating PixiJS applications. +- ✏️ Provides a custom Vue renderer that creates PixiJS objects instead of HTML elements. +- 📦 Supports all PixiJS objects, such as Container, Sprite, Graphics, Text, etc +- 🧑‍💻 Support specifying texture paths in templates to load texture objects +- ✨ All events emitted by PixiJS objects are supported +- 🗃️ Offers a `Assets` component for bundling assets. + +## Try it Online + +[![StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/edit/vue-pixi-renderer) + +## Install + +```sh +# with pnpm +pnpm add @overlays/vue + +# with yarn +yarn add @overlays/vue +``` -This library provides it's own vue renderer that will create PixiJS objects instead of html elements. +## Usage ```html @@ -25,26 +48,11 @@ function onClick() { ``` -## Try it Online - -[![StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/edit/vue-pixi-renderer) - -## Install - -```sh -# with pnpm -pnpm add @overlays/vue - -# with yarn -yarn add @overlays/vue -``` - ## Initialize vue plugin The vite plugin adds the ability to specify texture paths on sprites & other components that use textures, the same way as the `src` attribute on an image. ```ts -// vite.config.ts import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue' import { compilerOptions, transformAssetUrls } from 'vue3-pixi-renderer/compiler' @@ -65,7 +73,7 @@ export default defineConfig({ ### Usage in template -The vue plugin will detect any texture props containing the path to an image, and will replace it with a reference to a texture object. +The Vue Plugin detects any texture props containing the path to an image and replaces it with a reference to a texture object: ```html @@ -162,7 +170,7 @@ const resolves: AssetsResolvers = { ``` -## Creating an application manually +## Creating an pixi application manually Using the custom renderer inside `vue3-pixi-renderer`