Skip to content

Commit

Permalink
chore(readme): update features readme
Browse files Browse the repository at this point in the history
  • Loading branch information
Mr.Mao committed May 7, 2023
1 parent 002976b commit 2c2ae91
Showing 1 changed file with 28 additions and 20 deletions.
48 changes: 28 additions & 20 deletions README.md
Original file line number Diff line number Diff line change
@@ -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
<script setup lang="ts">
Expand All @@ -12,7 +35,7 @@ import textureUrl from "@/assets/myTexture.png";
const hitArea = new Rectangle(0, 0, 64, 64);
function onClick() {
console.log('sprite was clicked!');
console.log('sprite clicked!');
}
</script>

Expand All @@ -25,26 +48,11 @@ function onClick() {
</template>
```

## 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'
Expand All @@ -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
<sprite texture="@/assets/myTexture.png" />
Expand Down Expand Up @@ -162,7 +170,7 @@ const resolves: AssetsResolvers = {
</template>
```

## Creating an application manually
## Creating an pixi application manually

Using the custom renderer inside `vue3-pixi-renderer`

Expand Down

0 comments on commit 2c2ae91

Please sign in to comment.