docs: update the README and provide the Chinese version

README-zh_CN.md

@@ -0,0 +1,56 @@
+<div align="center"><a name="readme-top"></a>
+
+<h1>Galacean Effects</h1>
+
+加载并渲染酷炫的动效，通过 effects-core 提供的 APIs 也可以让你的引擎使用动效产物，快速的接入图层、粒子等动画效果。
+
+![GitHub release (with filter)](https://img.shields.io/github/v/release/galacean/effects-runtime)
+![GitHub License](https://img.shields.io/github/license/galacean/effects-runtime)
+![GitHub top language](https://img.shields.io/github/languages/top/galacean/effects-runtime)
+
+[更新日志](./CHANGELOG.md) · [报告问题][github-issues-url] · [特性需求][github-issues-url] · [English](./README.md) · 中文
+
+![](https://raw.githubusercontent.com/andreasbm/readme/master/assets/lines/rainbow.png)
+
+[github-issues-url]: https://github.com/galacean/effects-runtime/issues
+</div>
+
+## 安装
+
+``` bash
+npm install @galacean/effects --save
+```
+
+``` bash
+pnpm add @galacean/effects
+```
+
+## 示例
+
+``` html
+<div id="J-Container"></div>
+```
+
+``` ts
+import { Player } from '@galacean/effects';
+
+// 1. 实例化一个播放器
+const player = new Player({
+  container: document.getElementById('J-Container'),
+});
+
+// 2. 加载并播放动效资源
+player.loadScene('./demo.json');
+```
+
+> 通过 [Galacean Effects](https://galacean.antgroup.com/effects/) 编辑器获取 `demo.json` 产物
+
+## 相关文档
+
+- [开发文档](https://galacean.antgroup.com/effects/#/user/dgmswcgk63yfngku)
+- [接入指南](https://galacean.antgroup.com/effects/#/user/ti4f2yx1rot4hs1n)
+- [API 文档](https://galacean.antgroup.com/effects/#/api)
+- 其他链接:
+  - [本地开发](docs/developing.md)
+
+

README.md

@@ -1,85 +1,56 @@
-# Galacean Effects Runtime
+<div align="center"><a name="readme-top"></a>
+
+<h1>Galacean Effects</h1>
+
+It can load and render cool animation effects, The APIs provided by effects-core allow your engine to quickly access animation data such as layer and particle animation.
 
 ![GitHub release (with filter)](https://img.shields.io/github/v/release/galacean/effects-runtime)
 ![GitHub License](https://img.shields.io/github/license/galacean/effects-runtime)
 ![GitHub top language](https://img.shields.io/github/languages/top/galacean/effects-runtime)
 
-Galacean Effects runtime, It can load and render cool animation effects, The APIs provided by effects-core allow your engine to quickly access animation data such as layer and particle animation.
-
-## [Integration Guide](https://galacean.antgroup.com/effects/#/user/ti4f2yx1rot4hs1n)
-
-## [API Documentation](https://galacean.antgroup.com/effects/#/api)
+[Changelog](./CHANGELOG.md) · [Report Bug][github-issues-url] · [Request Feature][github-issues-url] · English · [中文](./README-zh_CN.md)
 
-## Development
+![](https://raw.githubusercontent.com/andreasbm/readme/master/assets/lines/rainbow.png)
 
-### Environment Setup
+[github-issues-url]: https://github.com/galacean/effects-runtime/issues
+</div>
 
-- Node.js `>= 16.0.0`
-- [Pnpm](https://pnpm.io/)  `latest`
-  - Install:
-    - `npm install -g pnpm`
-  - Upgrade：
-    - `pnpm install -g pnpm`
-
-### Getting Started
+## Install
 
 ``` bash
-# 1. Install dependencies (first time)
-pnpm install
-# 2. Start the demo
-pnpm dev
+npm install @galacean/effects
 ```
 
-> Open in browser: http://localhost:8080/
-
-## Plugin Example
-
 ``` bash
-# demo
-pnpm --filter @galacean/xxx dev
+pnpm add @galacean/effects
 ```
 
-> Open in browser: http://localhost:8081/demo/
-
-### Low-End Device Testing
+## Usage
 
-``` bash
-# Run the legacy version of the demo
-pnpm preview
+``` html
+<div id="J-Container"></div>
 ```
 
-## Testing
+``` ts
+import { Player } from '@galacean/effects';
 
-``` bash
-pnpm test
+// 1. Instantiate a player
+const player = new Player({
+  container: document.getElementById('J-Container'),
+});
+
+// 2. Load and play the animation resource
+player.loadScene('./demo.json');
 ```
 
-> Open in browser: http://localhost:9090/
+> Get the `demo.json` by using the [Galacean Effects](https://galacean.antgroup.com/effects/) editor.
 
-### Installing Single Packages
+## Documentation
 
-``` bash
-# Install to the root directory
-pnpm add ajv@^6.5.3 -w -D
-# Install to a specific package
-pnpm add ajv@^6.5.3 --filter @galacean/effects-core
-```
+- [Development Documentation](https://galacean.antgroup.com/effects/#/user/dgmswcgk63yfngku)
+- [Integration Guide](https://galacean.antgroup.com/effects/#/user/ti4f2yx1rot4hs1n)
+- [API Documentation](https://galacean.antgroup.com/effects/#/api)
+- Useful Links:
+  - [Developing](docs/developing.md)
 
-## Other Commands
 
-``` bash
-# lint
-pnpm lint
-# Type checking
-pnpm check:ts
-# Clean all ignore files
-pnpm clean:all
-# Build packages
-pnpm build
-# Build plugins
-pnpm build:plugins
-# Generate API documentation
-pnpm build:docs
-# Build a specific package
-pnpm --filter @galacean/xxx build
-```

docs/developing.md

@@ -0,0 +1,81 @@
+# How to build Galacean Effects and the examples
+
+## Prerequisites
+
+- Node.js `>= 16.0.0`
+- [Pnpm](https://pnpm.io/)  `latest`
+  - Install:
+    - `npm install -g pnpm`
+  - Upgrade：
+    - `pnpm install -g pnpm`
+
+## Quick Start
+
+``` bash
+# 1. clone from github
+git clone https://github.com/galacean/effects-runtime \
+  && cd effects-runtime
+# 2. Install dependencies (first time)
+pnpm install
+# 3. Start the demo
+pnpm dev
+```
+
+> Open in browser: http://localhost:8080/
+
+## Build
+
+``` bash
+# Build packages
+pnpm build
+# Build plugins
+pnpm build:plugins
+```
+
+## Plugin Example
+
+``` bash
+# demo
+pnpm --filter @galacean/xxx dev
+```
+
+> Open in browser: http://localhost:8081/demo/
+
+## Testing
+
+``` bash
+pnpm test
+```
+
+> Open in browser: http://localhost:9090/
+
+### Low-End Device Testing
+
+``` bash
+# Run the legacy version of the demo
+pnpm preview
+```
+
+## Other Commands
+
+``` bash
+# lint
+pnpm lint
+# Type checking
+pnpm check:ts
+# Clean all ignore files
+pnpm clean:all
+# Generate API documentation
+pnpm build:docs
+# Build a specific package
+pnpm --filter @galacean/xxx build
+```
+
+Installing Single Packages:
+
+``` bash
+# Install to the root directory
+pnpm add ajv@^6.5.3 -w -D
+# Install to a specific package
+pnpm add ajv@^6.5.3 --filter @galacean/effects-core
+```