添加：教程

README.md

@@ -1,6 +1,7 @@
-# SPARKLE GAME ENGINE
+# SPARKLE.JS GAME ENGINE
 
-Sparkle.js 是一个基于WebGL的HTML5的0依赖轻量级游戏引擎，让游戏开发变得简单且有趣！
+Sparkle.js 是一个基于WebGL的HTML5的0依赖轻量级小巧的游戏引擎，让游戏开发变得简单且有趣！
+^_^
 
 # 目录
 
@@ -12,25 +13,25 @@ Sparkle.js 是一个基于WebGL的HTML5的0依赖轻量级游戏引擎，让游
 * [快速开始](#快速开始)
 * [第一个项目：HelloWord](#第一个项目HelloWord)
 * [第二个项目：乒乓球](#第二个项目乒乓球)
-* [场景](#场景)
-* [节点](#节点)
-  * [生命周期](#生命周期)
-  * [事件](#事件)
-  * [标签查找](#标签查找)
-* [游戏节点](#游戏节点)
-  * [精灵](#精灵)
-  * [文字](#文字)
-  * [计时器](#计时器)
-  * [碰撞](#碰撞)
-* [资源]()
-  * [资源预加载](#资源预加载)
-  * [纹理](#纹理)
-  * [音频](#音频)
-  * [动画](#动画)
-* [调试工具](#调试工具)
-* [输入](#输入)
-  * [鼠标输入](#鼠标输入)
-  * [键盘输入](#键盘输入)
+* [场景](./blob/main/tutorial.md#场景)
+* [节点](./blob/main/tutorial.md#节点)
+  * [生命周期](./blob/main/tutorial.md#生命周期)
+  * [事件](./blob/main/tutorial.md#事件)
+  * [标签查找](./blob/main/tutorial.md#标签查找)
+* [游戏节点](./blob/main/tutorial.md#游戏节点)
+  * [精灵](./blob/main/tutorial.md#精灵)
+  * [文字](./blob/main/tutorial.md#文字)
+  * [计时器](./blob/main/tutorial.md#计时器)
+  * [碰撞](./blob/main/tutorial.md#碰撞)
+* [资源](./blob/main/tutorial.md#资源)
+  * [资源预加载](./blob/main/tutorial.md#资源预加载)
+  * [纹理](./blob/main/tutorial.md#纹理)
+  * [音频](./blob/main/tutorial.md#音频)
+  * [动画](./blob/main/tutorial.md#动画)
+* [调试工具](./blob/main/tutorial.md#调试工具)
+* [输入](./blob/main/tutorial.md#输入)
+  * [鼠标输入](./blob/main/tutorial.md#鼠标输入)
+  * [键盘输入](./blob/main/tutorial.md#键盘输入)
 
 # 快速开始
 
@@ -110,7 +111,7 @@ const engine = new SparkleEngine({
 })
 ```
 
-然后编写一个[场景](#场景)，这个场景比 Helloworld 中的场景多了一个`preload`方法，在`preload`方法中加载需要预加载的资源，当`perload`方法中的所有资源加载完毕，会调用场景的`create`方法返回的节点将作为场景根节点，资源可以使用`engine.getAssets("jump")`获取
+然后编写一个[场景](./blob/main/tutorial.md#场景)，这个场景比 Helloworld 中的场景多了一个`preload`方法，在`preload`方法中加载需要预加载的资源，当`perload`方法中的所有资源加载完毕，会调用场景的`create`方法返回的节点将作为场景根节点，资源可以使用`engine.getAssets("jump")`获取
 ```js
 class MainSence extends Sence {
     preload(){
@@ -161,7 +162,7 @@ class Board extends Graphical {
     }
 }
 ```
-标签是一个很有用的东西，能简化很多工作，详细信息请查看[标签查找](#标签查找)
+标签是一个很有用的东西，能简化很多工作，详细信息请查看[标签查找](./blob/main/tutorial.md#标签查找)
 
 然后实例化两个板子，并加入到主场景
 ```js
@@ -230,7 +231,7 @@ class Ball extends Graphical {
     }
 }
 ```
-`onUpdate`是每一帧都会调用的一个函数，`onReady`是该节点准备好且其子节点也准备好时被调用。具体请查看[生命周期](#生命周期)
+`onUpdate`是每一帧都会调用的一个函数，`onReady`是该节点准备好且其子节点也准备好时被调用。具体请查看[生命周期](./blob/main/tutorial.md#生命周期)
 
 二维向量操作函数一般后面都一个`create`参数，代表是否创建一个新的向量或者是修改原本的向量，然后把ball加入到主场景
 
@@ -270,7 +271,7 @@ class Ball extends Graphical {
     }
 }
 ```
-`engine.getAssets("jump")`用于获取资源，`onBodyEnter`将在有物理体进入ball时被调用，但你也可使用[事件](#事件)来监听，好了现在你可以看见球碰到板子会反弹了
+`engine.getAssets("jump")`用于获取资源，`onBodyEnter`将在有物理体进入ball时被调用，但你也可使用[事件](./blob/main/tutorial.md#事件)来监听，好了现在你可以看见球碰到板子会反弹了
 
 接下来添加一个分数
 ```js
@@ -299,7 +300,7 @@ class scoreText extends Text{
     }
 }
 ```
-你可能会好奇，为什么scoreText和collision写法有点不一样，这两种都是可以的，具体查看[节点](#节点)，然后把scoreText加入到主场景，并在碰撞到板子的时候加分，球跑出屏幕外时restart
+你可能会好奇，为什么scoreText和collision写法有点不一样，这两种都是可以的，具体查看[节点](./blob/main/tutorial.md#节点)，然后把scoreText加入到主场景，并在碰撞到板子的时候加分，球跑出屏幕外时restart
 ```js
 class Ball extends Graphical {
     constructor() {
@@ -336,154 +337,5 @@ class MainSence extends Sence {
 
 ### 接下来干什么...：
 * 阅读[小鸟跑步](https://nightre.github.io/sparkle.js/demo/chrome-dino)demo的源码
-* 继续阅读文档
+* 阅读[教程](./blob/main/tutorial.md)
 * 阅读[API](https://nightre.github.io/sparkle.js/docs/index)
-
-# 场景
-
-上面`MainSence`是一个游戏场景，场景的preload方法用于预加载资源
-当preload方法的所有资源都加载完成后，会调用场景的`create`方法，并将该方法返回的节点作为场景树的根节点
-场景树是组织和管理游戏场景中各个元素的数据结构。它类似于一棵树，而每个节点可以包含子节点。
-在sparkle.js中组件（比如下图的Timer就是一个组件）也是一个节点
-
-```
-Sprite（用于显示）
-  |
-  +-- Timer（计时器，可以用于计时加分）
-  |
-  +-- Collision（碰撞，可以用于检测碰撞）
-```
-
-通过场景树，游戏开发者可以方便地管理场景中的元素，以及它们的相对位置、旋转、缩放等属性都是相对于父节点。
-
-使用`engine.changeToSence`来切换场景，如果想直接切换到一个节点那么可以使用`engine.changeSenceToContainer`
-
-# 节点
-
-节点是构成场景树的基本单元，每个节点可以包含多个子节点和一个父节点，这样就可以形成一个层次化的结构。编写节点的代码时有两种方法
-
-```js
-const player = ()=>{
-    // 创建节点
-    const node = new Sprite({
-        texture:YourTexture
-    })
-    const timer = new Timer({
-        // ...
-    })
-    node.addChild(
-        // 将timer节点加入到player节点，作为一个组件
-        timer
-    )
-    return player
-}
-// root 指向场景根节点
-engine.root.addChild(player())
-// 另外一种写法
-class Player extends Sprite{
-    constructor(){
-        super({
-            texture:YourTexture
-        })
-        this.timer = new Timer({
-            // ...
-        })
-        this.addChild(
-            this.timer
-        )
-    }
-}
-engine.root.addChild(new Player())
-```
-
-两种写法都可以
-
-### 生命周期
-
-节点的生命周期
-
-```js
-// 创建这个节点
-const node = new Container()
-node.onReady = () => {
-    // 当前节点且其子节点都已准备就绪
-}
-node.onUpdate = (dt) => {
-    // 每一帧调用
-}
-node.onEnterTree = () => {
-    // 当节点进入场景树
-}
-node.onExitTree = () => {
-    // 当节点离开场景树
-}
-// 销毁这个节点
-node.destory()
-```
-
-#### 常驻节点
-
-常驻节点在场景切换时不会被销毁
-`new Container({resident:true})` 来创建一个常驻节点，注意：常驻节点只能作为根节点的子节点
-
-### 事件
-
-节点有可以监听事件，或者发出事件
-使用下面这种方法监听事件，当节点被销毁时或是被移除场景树时自动取消监听
-
-```js
-const node = new Container()
-node.onEvent(timer, "timeout", ()=>{
-    alert("timeout !")
-})
-// 使用offEvent来取消监听
-```
-
-还可以使用`waitEvent`来等待一个事件发出
-
-```js
-const node = new Container()
-await node.waitEvent(timer, "timeout")
-alert("timeout !")
-```
-
-若想知道每个节点的具体事件有那些，请查阅[API 文档](https://nightre.github.io/sparkle.js/docs/index)
-
-### 标签查找
-
-当场景树中的节点变得越来越多，很难管理，这个时候就需要`TAG`了
-在实例化节点的时候可以设置tag，也可以在未来修改
-
-```js
-const node = new Container({
-    tags:[
-        "enemy","monster"
-    ]
-})
-```
-
-```js
-// 可以根据tag来查找节点
-engine.root.findByTag(["enemy","monster"])
-// 或者查看某个节点是否包含tag
-node.tags.has("enemy")
-```
-
-# 游戏节点
-
-### 精灵
-
-### 文字
-
-### 计时器
-
-### 碰撞
-### 资源
-#### 资源预加载
-#### 纹理
-#### 音频
-#### 动画
-### 调试工具
-### 输入
-### 鼠标输入
-### 键盘输入

demo/chrome-dino/index.js

@@ -9,7 +9,7 @@ import {
     Text,
     TextAnchor,
     Timer,
-} from "../../src/main" //"https://unpkg.com/sparkle-engine/dist/sparkle.js"
+} from "https://unpkg.com/sparkle-engine/dist/sparkle.js"
 
 const engine = new SparkleEngine({
     // 指定游戏画布元素

demo/pong/index.js

@@ -9,7 +9,7 @@ import {
     GraphicalType,
     Rect,
     Collision
-} from "../../src/main"
+} from "https://unpkg.com/sparkle-engine/dist/sparkle.js"
 import Graphical from "../../src/nodes/graphical"
 
 const engine = new SparkleEngine({

package.json

@@ -1,7 +1,7 @@
 {
   "name": "sparkle-engine",
   "private": false,
-  "version": "0.0.7",
+  "version": "0.0.8",
   "type": "module",
   "files": [
     "dist/*",

src/interface.ts

@@ -5,7 +5,7 @@ import Color from "./math/color"
 import { Renderer } from "./video/renderer"
 import { Texture } from "./video/texture/texture"
 import Collision from "./nodes/collision"
-import { Audio, Drawable, EventEmitter, GLShader, Rect } from "./main"
+import { Audio, EventEmitter, GLShader, Rect } from "./main"
 import Animations from "./animation/animation"
 
 export interface ICopyable<T> {

src/video/compositors/primitive_compositor.ts

@@ -55,8 +55,8 @@ class PrimitiveCompositors extends Compositor {
     }
 
     private linePathToVertex() {
-        let prevEndUp: Vector2 | null = null;
-        let prevEndDown: Vector2 | null = null;
+        // let _prevEndUp: Vector2 | null = null;
+        // let _prevEndDown: Vector2 | null = null;
 
         this.path.forEachLine((start: Vector2, end: Vector2) => {
             const dis = start.sub(end, true)
@@ -76,8 +76,8 @@ class PrimitiveCompositors extends Compositor {
             this.addVertex(endUp)
             this.addVertex(endDown)
 
-            prevEndUp = endUp;
-            prevEndDown = endDown;
+            // _prevEndUp = endUp;
+            // _prevEndDown = endDown;
         })
     }
     pointPathToVertex() {