2.0.24

examples/3d.html

@@ -73,7 +73,11 @@
             1624,//设计高度
             sysInfo && sysInfo.windowWidth || document.body.clientWidth,
             sysInfo && sysInfo.windowHeight || document.body.clientHeight,
-            FYGE.RENDERER_TYPE.WEBGL
+            FYGE.RENDERER_TYPE.WEBGL,
+            false,
+            false,
+            null,
+            {antialias:true}
         );
         //鼠标事件
         var mouseEvent = stage.onMouseEvent.bind(stage);
@@ -85,6 +89,7 @@
         canvas.addEventListener('mousemove', mouseEvent, false);
         canvas.addEventListener('mouseup', mouseEvent, false);
 
+        stage.webMouseEventPreventDefault =true
         //stage初始化
         stage.addEventListener(FYGE.Event.INIT_STAGE, async () => {
             //加个2d矢量背景
@@ -363,7 +368,7 @@
             }
             FYGE.Tween.flush()
 
-            FYGE.getRequestAnimationFrame()(loop);
+            requestAnimationFrame(loop);
         }
     })
 </script>

examples/cc.js

@@ -205,4 +205,47 @@ class LightBgCanvas {
         }
         return canvas
     }
+}
+
+/**
+ * 文字一个一个出现
+ */
+export class ShowWord extends FYGE.TextField {
+    /**
+     * 
+     * @param text 文本 例子：这里是生命值，闯关失败后\n都会扣除一点生命值
+     * @param deltaTime 文字间隔时间，毫秒计
+     * @param callback 播放完后的回调
+     */
+    playWords(text, deltaTime = 100, callback) {
+        var spiltStrs = text.split("\n");
+        //拆分文本
+        let strs = []
+        for (var i = 0; i < spiltStrs.length; i++) {
+            var spiltStr = spiltStrs[i];
+            var ori = "";
+            var index = 0;
+            while (index < i) {
+                ori += spiltStrs[index];
+                ori += "\n";
+                index++;
+            }
+            for (var j = 0; j < spiltStr.length; j++) {
+                var str = "" + ori;
+                str += spiltStr.substring(0, j + 1)
+                strs.push(str)
+            }
+        }
+        // console.log(strs)
+        //轮流替换文本
+        for (let m = 0; m < strs.length; m++) {
+            let str = strs[m];
+            setTimeout(() => {
+                this.text = str;
+                if (m == strs.length - 1) {
+                    callback && callback();
+                }
+            }, deltaTime * m)
+        }
+    }
 }
\ No newline at end of file

examples/previewLottie.html → examples/previewLottieSvga.html

@@ -20,7 +20,7 @@
             overflow-y: auto;
         }
     </style>
-
+    <script src="//yun.duiba.com.cn/db_games/libs0924/svgaParser.minWeb.js" crossorigin="anonymous"></script>
     <script src="../build/fyge.min.js"></script>
 </head>
 
@@ -72,14 +72,23 @@
                 var src = URL.createObjectURL(files[0]);
                 //清空
                 stage.removeAllChildren()
-                // console.log(files)
-                //加载
-                FYGE.GlobalLoader.loadJson((s, json) => {
-                    var l = stage.addChild(new FYGE.Lottie(json))
-                    l.position.set((750 - json.w) / 2, (stage.viewRect.height - json.h) / 2);
-                    l.play();
-                }, src)
-
+                if (name.indexOf(".svga") >= 0) {
+                    SvgaParser.loadSvga(src, (v) => {
+                        console.log(v)
+                        stage.addChild(new FYGE.MovieClip(v))
+                            // .position.set(
+                            //     (750 - v.videoSize.width) / 2,
+                            //     (stage.viewRect.height - v.videoSize.height) / 2,
+                            // )
+                    })
+                } else {
+                    //加载
+                    FYGE.GlobalLoader.loadJson((s, json) => {
+                        var l = stage.addChild(new FYGE.Lottie(json))
+                        // l.position.set((750 - json.w) / 2, (stage.viewRect.height - json.h) / 2);
+                        l.play();
+                    }, src)
+                }
             }
         })
     </script>

examples/previewSpine.html

@@ -27,9 +27,14 @@
             color: #fff;
             text-shadow: 0 -1px 0 rgb(0 0 0 / 12%);
         }
+
+        input::-webkit-input-placeholder {
+            color: #000000;
+        }
     </style>
 
     <script src="../build/fyge.min.js"></script>
+    <!-- <script src="//yun.duiba.com.cn/db_games/libs0924/fyge2023.min.js"></script> -->
 
 </head>
 
@@ -41,10 +46,13 @@
     </div>
     <div id="skins" style="position: absolute;z-index: 999;top:5%;right:0%;width: 5%;">
     </div>
-    <input type="text" id="key0" value="x" style="position: absolute;z-index: 999;width: 10%;left:35%;top:5%">
-    <input type="text" id="val0" value="y" style="position: absolute;z-index: 999;width: 10%;right:35%;top:5%">
+    <input type="text" id="x" value="" placeholder="x坐标"
+        style="position: absolute;z-index: 999;width: 10%;left:35%;top:5%">
+    <input type="text" id="y" value="" placeholder="y坐标"
+        style="position: absolute;z-index: 999;width: 10%;right:35%;top:5%">
     <script>
         window.addEventListener("load", async function () {
+
             //舞台
             var stage = new FYGE.Stage(
                 document.getElementById("canvas"),
@@ -130,7 +138,7 @@
                     },
                         URL.createObjectURL(getFile(files, "json")),
                     )
-                }else{
+                } else {
                     console.error("文件有误")
                 }
 
@@ -150,6 +158,20 @@
                 createAnis(spine)
                 createSkins(spine)
                 //添加输入框xy
+                var inputX = document.getElementById("x");
+                inputX.oninput = () => {
+                    var x = parseInt(inputX.value)
+                    if (x) {
+                        spine.x = x;
+                    }
+                }
+                var inputY = document.getElementById("y");
+                inputY.oninput = () => {
+                    var y = parseInt(inputY.value)
+                    if (y) {
+                        spine.y = y;
+                    }
+                }
             }
         })
 

examples/为了ppt.html

@@ -12,7 +12,7 @@
     <meta name="x5-fullscreen" content="true" />
     <meta name="360-fullscreen" content="true" />
     <!-- 加载svga文件用 npm svga-parser-->
-    <script src="./js/svgaParser.min.js"></script>
+    <!-- <script src="./js/svgaParser.min.js"></script> -->
     <!-- 主引擎 -->
     <script src="../build/fyge.min.js"></script>
     <style>
@@ -54,7 +54,7 @@
             FYGE.RENDERER_TYPE.WEBGL,
         );
         //监听窗口缩放,按需,一般移动端的不需要
-        window.addEventListener('resize', () => { stage.resize() });
+        // window.addEventListener('resize', () => { stage.resize() });
         //鼠标事件
         var mouseEvent = stage.onMouseEvent.bind(stage);
         canvas.addEventListener("touchstart", mouseEvent, false);
@@ -85,10 +85,12 @@
             // FYGE.Tween.get(f1,{loop:true})
             //     .to({x:300}, 2000)
             //     .to({x:175}, 2000)
-
+            var tex = await new Promise((r) => {
+                FYGE.GlobalLoader.loadImage((s, image) => { r(FYGE.Texture.fromImage(image)) }, "res/11.png")
+            })
             //好多图
             for (var i = 0; i < 20000; i++) {
-                let a = stage.addChild(FYGE.Sprite.fromUrl("res/11.png"))
+                let a = stage.addChild(new FYGE.Sprite(tex))
                     .addEventListener(FYGE.Event.ENTER_FRAME, () => {
                         a.rotation += 3
                     })

package.json

 {
     "name": "fyge",
-    "version": "2.0.23",
+    "version": "2.0.24",
     "description": "canvas渲染引擎",
     "main": "./build/fyge.min.js",
     "types": "./build/types.d.ts",

record.txt

@@ -312,9 +312,38 @@
         Spine添加ik约束
         Spine的findSlot方法变成公共的，为了显示隐藏插槽，这样做不保险，后续考虑优化
         新增IkConstraint
+
+2.0.24  删除sound文件夹      
+        删除ShowWord
+        GDispatcher不往外导出,只在内部使用（虽然内部也没在用）,有需要自行实例
+        矢量图Graphics和Shape属性名isUsedToMask修改为_isUsedToMask（Shape里原先isUsedToMask被注释了），还涉及Container,DisplayObject,ScrollPage.
+        DisplayObject添加方法needUpdateBounds
+        Stage销毁方法多一个web环境且webgl模式时移除上下文丢失事件
+        MouseEvent删除updateAfterEvent方法，没地方用到
+        Loader删除loadAudio方法
+        Plane的构造传参verticesX，verticesY直接加public，文件最后加了例子Ripple
+        CanvasRenderer的plugins添加了类型声明，构造函数里赋值形式改了
+        WebglRenderer构造函数handleContextLost和handleContextRestored打开注释，还涉及Stage上的上下文丢失事件监听
+        WebglRenderer的render方法里this.textureGC.update()打开注释，待测试有啥影响
+        TextureManager的destroyTexture方法判断了是否为事件触发
+        RenderTexture导出
+        Texture.WHITE改回离屏canvas方式，待测试
+        ShowWord删除
+        ScrollPage的ENTER_FRAME监听里在触发下拉和上拉后添加s.addSpeed = 0;
+        ScrollPage的onMouseEvent方法里其他鼠标事件里添加if (!s.isMouseDownState) return;
+        utils的index里不再往外导出getTintedTexture，mapWebGLBlendModes，mapCanvasBlendModes，premultiplyBlendMode，具体其他影响搜索
+        mapPremultipliedBlendModes直接导出修正后的premultiplyBlendMode
+        tbminiAdapte全部修改，具体自行对比，原来的注释了
+        删除sound文件夹
+        Geometry构造函数里colors默认值从map方法改成for
+        AdvancedBloomFilter构造函数里assign替换成...
+        extractUniformsFromSrc返回值assign替换成...
+        DrawOrderAniTrack添加resetValue重置方法
+        Stage构造函数添加webglOption参数，以防webgl需要一些特殊属性时无法传入，比如抗锯齿antialias等
         
 
 
+
 现在不改，索引数据过大时得用Uint32Array，同时开扩展gl.getExtension( "OES_element_index_uint" )和drawElements改参数类型为gl.UNSIGNED_INT
 //现在不改，DisplayObject的getLocalBounds最后是否考虑计算一次updateTransform(不用计算自己的,为了计算子级的)
 现在不改，D3Renderer里的aSkinIndex传值用了Uint8Array，类型是gl.UNSIGNED_BYTE，估计那个外星头是因为这个
@@ -394,4 +423,6 @@ FloatDisplay现在是body上面的。以后有时间取canvas的父级
 
 文本以后按照bottom来，但是真实高度怎么拿
 
-gltf加载考虑怎么变成加载数据，通过数据初始化一个显示对象，或者用paser生成个新的对象
\ No newline at end of file
+gltf加载考虑怎么变成加载数据，通过数据初始化一个显示对象，或者用paser生成个新的对象
+
+有时间兼容下微信小游戏
\ No newline at end of file

src/2d/const.ts

@@ -7,7 +7,7 @@
  * @name VERSION
  * @type {string}
  */
-export const VERSION = "2.0.23";
+export const VERSION = "2.0.24";
 
 
 /**

src/2d/display/Container.ts

@@ -407,7 +407,7 @@ export default class Container extends DisplayObject {
         for (var i = length - 1; i >= 0; i--) {
             child = children[i];
             //当作遮罩的不作为检测，跳过
-            if (child.isUsedToMask) continue;
+            if (child._isUsedToMask) continue;
             //有遮罩，但是不在遮罩内，跳过
             if (child.mask && !child.mask.hitTestPoint(globalPoint, isMouseEvent)) continue;
             //检测

src/2d/display/DisplayObject.ts

@@ -275,7 +275,12 @@ export class DisplayObject extends EventDispatcher {
         if (this._lastBoundsID == this._boundsID) return
         this._lastBoundsID = this._boundsID
     }
-
+    /**
+     * 手动调用calculateBounds或getBounds或getLocalBounds时如果发现包围盒计算有误，可以尝试前置调用needUpdateBounds
+     */
+    needUpdateBounds() {
+        this._lastBoundsID = -1;
+    }
 
     /**
      *将全局坐标转换到本地坐标值
@@ -347,7 +352,7 @@ export class DisplayObject extends EventDispatcher {
     }
 
     /**
-     * 根据常规属性，设置矩阵属性，挺少用，自己赋值也完全一样，考虑废弃
+     * 根据常规属性，设置矩阵属性，挺少用，自己赋值也完全一样，可用于初始化所有数据，考虑废弃
      * @param {number} [x=0] - 位置x
      * @param {number} [y=0] - 位置y
      * @param {number} [scaleX=1] - 缩放x
@@ -653,7 +658,7 @@ export class DisplayObject extends EventDispatcher {
         if (this._mask) {
             //原先有的遮罩,重置属性
             this._mask.renderable = true;
-            this._mask.isUsedToMask = false;
+            this._mask._isUsedToMask = false;
             // if (this._mask.parent) {
             //     this._mask.parent.removeChild(this._mask)
             //     //是否销毁
@@ -664,7 +669,7 @@ export class DisplayObject extends EventDispatcher {
 
         if (this._mask) {
             this._mask.renderable = false;
-            this._mask.isUsedToMask = true;
+            this._mask._isUsedToMask = true;
 
             //保证更新包围盒
             this._boundsID++;

src/2d/display/Stage.ts

@@ -161,15 +161,17 @@ export class Stage extends Container {
     private _stageCenter: boolean;
     /**
      * 建立舞台
+     * 注意淘宝小程序canvas实际宽高/显示宽高必须是dpr，要么传dpr（参数resolution），要么外部自行设置实际宽高（canvas.width）及显示宽高（样式）
      * @param canvas canvas标签
-     * @param desWidth 舞台设计宽
-     * @param desHeight 舞台设计高
-     * @param divWidth canvas显示宽
-     * @param divHeight canvas显示高
+     * @param desWidth 舞台设计宽，为了直接在舞台加东西不需要考虑缩放
+     * @param desHeight 舞台设计高，为了直接在舞台加东西不需要考虑缩放
+     * @param divWidth canvas显示宽，或视图宽度，或样式宽度，全屏就是屏幕宽度document.body.clientWidth(web环境)或my.getSystemInfoSync().windowWidth(淘宝小程序)
+     * @param divHeight canvas显示高，或视图高度，或样式高度，全屏就是屏幕宽度document.body.clientHeight(web环境)或my.getSystemInfoSync().windowHeight(淘宝小程序)
      * @param renderType 渲染类型,默认canvas
      * @param stageCenter 舞台是否根据设计尺寸居中,默认false(左上角置顶)
      * @param fixedHeight 是否定高,默认false(定宽)
-     * @param resolution 分辨率，一般传设备的devicePixelRatio，不传意味着外部自行处理了canvas的实际宽高及显示宽高
+     * @param resolution 分辨率，一般传设备的devicePixelRatio，不传意味着外部自行处理了canvas的实际宽高及显示宽高（注意淘宝小程序实际宽高/显示宽高必须是dpr，要么传dpr，要么外部设置）
+     * @param webglOptions 获取webgl上下文时需要的参数，一般用默认的，默认alpha:true,antialias:false,premultipliedAlpha:true,stencil:true,preserveDrawingBuffer:false
      */
     public constructor(
         canvas: HTMLCanvasElement,
@@ -180,7 +182,8 @@ export class Stage extends Container {
         renderType: RENDERER_TYPE = RENDERER_TYPE.CANVAS,
         stageCenter: boolean = false,
         fixedHeight: boolean = false,
-        resolution?: number
+        resolution?: number,
+        webglOptions?: WebGLContextAttributes
     ) {
         super();
         this.canvas = canvas;
@@ -232,8 +235,9 @@ export class Stage extends Container {
                 antialias: false,//抗锯齿尽量别开，耗性能
                 premultipliedAlpha: true,  //一般png图片都不会预乘alpha，所以必为true,除非有些图集工具选择了premultipliedAlpha
                 stencil: true,
-                // preserveDrawingBuffer: this.options.preserveDrawingBuffer,//需要toDataUrl时要开
+                // preserveDrawingBuffer: true,//需要toDataUrl时要开，不开的话渲染一次后马上toDataUrl也能截到
                 // powerPreference: this.options.powerPreference,
+                ...webglOptions
             };
             let context = canvas.getContext("webgl", contextOptions) || canvas.getContext("experimental-webgl", contextOptions) as WebGLRenderingContext;
             s.renderObj = new WebglRenderer(context, canvas.width, canvas.height);
@@ -241,12 +245,12 @@ export class Stage extends Container {
             if (getEnv() == "web") {
                 canvas.addEventListener(
                     'webglcontextlost',
-                    (s.renderObj as WebglRenderer).handleContextLost.bind(s.renderObj),
+                    (s.renderObj as WebglRenderer).handleContextLost,
                     false
                 );
                 canvas.addEventListener(
                     'webglcontextrestored',
-                    (s.renderObj as WebglRenderer).handleContextRestored.bind(s.renderObj),
+                    (s.renderObj as WebglRenderer).handleContextRestored,
                     false
                 );
             }
@@ -689,6 +693,20 @@ export class Stage extends Container {
     public destroy(): void {
         let s = this;
         // if (getEnv() == "tb") clearInterval(s.offsetTimeId);
+        //web环境下，渲染方式webgl模式时，移除webgl上下文丢失事件
+        if (getEnv() == "web" && s.renderObj.type == RENDERER_TYPE.WEBGL) {
+            s.canvas.removeEventListener(
+                'webglcontextlost',
+                (s.renderObj as WebglRenderer).handleContextLost,
+                false
+            );
+            s.canvas.removeEventListener(
+                'webglcontextrestored',
+                (s.renderObj as WebglRenderer).handleContextRestored,
+                false
+            );
+        }
+        //然后销毁渲染器
         s.renderObj.destroy();
         s.renderObj = null;
         s.viewRect = null;

src/2d/events/Event.ts

@@ -7,9 +7,6 @@ import { HashObject } from "../HashObject";
  * @since 1.0.0
  */
 export class Event extends HashObject {
-
-    // public static IMAGE_LOADED: string = "onImageLoaded"
-
     /**
      * 舞台尺寸发生变化时触发
      * @Event

src/2d/events/EventDispatcher.ts

@@ -2,7 +2,7 @@
 import { HashObject } from "../HashObject";
 import { Event } from "./Event";
 /**
- * 事件触发基类 功能简单，如果需全能的，到时用EventEmitter3，现成库，事件名，事件，once否集合成实例
+ * 事件触发基类 功能简单
  * @class EventDispatcher
  * @extends HashObject
  * @public
@@ -71,7 +71,7 @@ export class EventDispatcher extends HashObject {
      * @param context thisObject
      * @param {boolean} useCapture true 捕获阶段 false 冒泡阶段 默认 true
      * @example
-     *      this.addEventListener(Event.ADD_TO_STAGE,function(e){trace(this);},this);
+     *      this.addEventListener(Event.ADD_TO_STAGE,function(e){console.log(this);},this);
      */
     public addEventListener(type: string, listener: Function, context?: any, useCapture: boolean = true): this {
         if (!type) {
@@ -173,9 +173,9 @@ export class EventDispatcher extends HashObject {
      * @example
      *      var mySprite=new Sprite(),
      *          yourEvent=new Event("yourCustomerEvent");
-     *       yourEvent.data='false2x';
+     *       yourEvent.data='aaa';
      *       mySprite.addEventListener("yourCustomerEvent",function(e){
-     *          trace(e.data);
+     *          console.log(e.data);
      *        })
      *       mySprite.dispatchEvent(yourEvent);
      */

src/2d/events/MouseEvent.ts

@@ -63,7 +63,7 @@ export class MouseEvent extends Event {
      */
     public static MOUSE_OUT: string = "onMouseOut";
     /**
-     * mouse或touch事件时rootDiv坐标x点
+     * mouse或touch事件时canvas实际尺寸坐标x点
      * @property clientX
      * @public
      * @since 1.0.0
@@ -71,7 +71,7 @@ export class MouseEvent extends Event {
      */
     public clientX: number = 0;
     /**
-     * mouse或touch事件时rootDiv坐标y点
+     * mouse或touch事件时canvas实际尺寸坐标y点
      * @property clientY
      * @public
      * @since 1.0.0
@@ -79,7 +79,7 @@ export class MouseEvent extends Event {
      */
     public clientY: number = 0;
     /**
-     * mouse或touch事件时全局坐标x点
+     * mouse或touch事件时stage上坐标x点
      * @property stageX
      * @public
      * @since 1.0.0
@@ -87,7 +87,7 @@ export class MouseEvent extends Event {
      */
     public stageX: number = 0;
     /**
-     * mouse或touch事件时全局坐标y点
+     * mouse或touch事件时stage上坐标y点
      * @property stageY
      * @public
      * @since 1.0.0
@@ -95,7 +95,7 @@ export class MouseEvent extends Event {
      */
     public stageY: number = 0;
     /**
-     * mouse或touch事件时本地坐标x点
+     * mouse或touch事件时显示对象本地坐标x点
      * @property localX
      * @public
      * @since 1.0.0
@@ -103,7 +103,7 @@ export class MouseEvent extends Event {
      */
     public localX: number = 0;
     /**
-     * mouse或touch事件时本地坐标y点
+     * mouse或touch事件时显示对象本地坐标y点
      * @property localY
      * @public
      * @since 1.0.0
@@ -138,14 +138,8 @@ export class MouseEvent extends Event {
         this._instanceType = "MouseEvent";
     }
     /**
-     * 事件后立即更新显示列表状态
-     * @method updateAfterEvent
-     * @since 1.0.9
-     * @public
+     * 销毁
      */
-    public updateAfterEvent() {
-        this.target.stage._cp = true;
-    }
     public destroy(): void {
         //清除相应的数据引用
         let s = this;

src/2d/events/index.ts

 
 export * from "./Event";
 export * from "./EventDispatcher";
-export * from "./GDispatcher";
+// export * from "./GDispatcher";//不往外导了，因为引擎内部也没有用到，外部如果需要，自行new
 export * from "./MouseEvent";
\ No newline at end of file

src/2d/filter/advanced-bloom/AdvancedBloomFilter.ts

@@ -63,7 +63,18 @@ export class AdvancedBloomFilter extends Filter {
             options = { threshold: options };
         }
 
-        options = Object["assign"]({
+        // options = Object["assign"]({
+        //     threshold: 0.5,
+        //     bloomScale: 1.0,
+        //     brightness: 1.0,
+        //     kernels: null,
+        //     blur: 8,
+        //     quality: 4,
+        //     pixelSize: 1,
+        //     resolution: 1,
+        // }, options);
+        //替换成...
+        options = {
             threshold: 0.5,
             bloomScale: 1.0,
             brightness: 1.0,
@@ -72,7 +83,11 @@ export class AdvancedBloomFilter extends Filter {
             quality: 4,
             pixelSize: 1,
             resolution: 1,
-        }, options);
+
+            ...options,
+        }
+
+
 
         /**
          * To adjust the strength of the bloom. Higher values is more intense brightness.

src/2d/filter/extractUniformsFromSrc.ts

@@ -4,7 +4,8 @@ import { defaultValue } from "../../glCore";
 export default function extractUniformsFromSrc(vertexSrc, fragmentSrc) {
     const vertUniforms = extractUniformsFromString(vertexSrc);
     const fragUniforms = extractUniformsFromString(fragmentSrc);
-    return Object["assign"](vertUniforms, fragUniforms);
+    // return Object["assign"](vertUniforms, fragUniforms);
+    return { ...vertUniforms, ...fragUniforms };
 }
 
 function extractUniformsFromString(string) {

src/2d/filter/index.ts

 /**
- * 
+ * filter模块基本延用pixi模块
  * {@link http://pixijs.io/pixi-filters/tools/demo/}
  * This namespace contains WebGL-only display filters that can be applied
  * to DisplayObjects using the {@link DisplayObject#filters filters} property.

src/2d/graphics/Graphics.ts

@@ -41,9 +41,9 @@ fillCommands[SHAPES.RREC] = buildRoundedRectangle;
 
 /**
  * @class Graphics
- * 不继承container，不然缓存时太麻烦了
  * 自身matrix无效，暂时不用
  * style的纹理matrix无效，暂时不用
+ * 最终都会按照三角形数据存储，包括画面和画线
  */
 export default class Graphics extends Container {
     /**
@@ -141,10 +141,10 @@ export default class Graphics extends Container {
     graphicsData: GraphicsData[];
 
     /**
-     * 是否用作mask
+     * 标记是否作为遮罩，作为遮罩时不会被当作hittest检测对象，默认false，内部逻辑处理用，外部不建议修改
      * @member {boolean}
      */
-    isUsedToMask: boolean;
+    _isUsedToMask: boolean;
     /**
      * 计算包围盒的时的偏移，默认0
      * @member {number}
@@ -205,7 +205,7 @@ export default class Graphics extends Container {
         this._currentPath = null;
 
         this.graphicsData = [];
-        this.isUsedToMask = false;
+        this._isUsedToMask = false;
         this.boundsPadding = 0;
         this.dirty = 0;
         this.boundsDirty = -1;
@@ -235,7 +235,7 @@ export default class Graphics extends Container {
         clone._fillStyle = this._fillStyle;
         clone._lineStyle = this._lineStyle;
 
-        clone.isUsedToMask = this.isUsedToMask;
+        clone._isUsedToMask = this._isUsedToMask;
         clone.boundsPadding = this.boundsPadding;
         clone.dirty = 0;
 
@@ -1091,7 +1091,7 @@ export default class Graphics extends Container {
      * @private
      * @param {CanvasRenderer} renderer - The renderer
      */
-    _renderCanvas(renderer/*: CanvasRenderer*/) {
+    _renderCanvas(renderer: CanvasRenderer) {
         //以防没有end，
         this.finishPoly();
         if (this.cacheAsBitmap) {
@@ -1143,7 +1143,7 @@ export default class Graphics extends Container {
 
     /**
      * 碰撞检测方法重写
-     * @param {Point} point - the point to test
+     * @param {Point} point - 全局坐标点
      */
     hitTestPoint(point: Point, isMouseEvent: boolean = false): DisplayObject {
         //不可见，直接返回
@@ -1337,9 +1337,8 @@ export default class Graphics extends Container {
      * 生成离屏canvas纹理
      * 不包括变形的，只根据图形数据产生的原生贴图，经过变形的，考虑，是否新建方法，这个暂时只为canvas缓存
      * 也不考虑遮罩
-     * @param {number} scaleMode - The scale mode of the texture.
-     * @param {number} resolution - The resolution of the texture.
-     * @return {Texture} The new texture.
+     * @param {SCALE_MODES} scaleMode 纹理缩放模式
+     * @return {Texture} 离屏纹理
      */
     private generateCanvasTexture(scaleMode: number = SCALE_MODES.LINEAR): Texture {
         this.updateLocalBoundsSelf();
@@ -1378,7 +1377,7 @@ export default class Graphics extends Container {
     }
 
     /**
-     * 
+     * 销毁
      */
     destroy() {
         super.destroy();
@@ -1403,14 +1402,13 @@ export default class Graphics extends Container {
 
     /**
      * 设置会影响缩放
-     * @member {number}
      */
-    get width() {
+    get width(): number {
         this.updateLocalBoundsSelf()
         return Math.abs(this.scale.x) * this._localBoundsSelf.width;
     }
 
-    set width(value) {
+    set width(value: number) {
         this.updateLocalBoundsSelf();
         const width = this._localBoundsSelf.width;
         if (width !== 0) {
@@ -1424,14 +1422,13 @@ export default class Graphics extends Container {
 
     /**
      * 设置会影响缩放
-     * @member {number}
      */
-    get height() {
+    get height(): number {
         this.updateLocalBoundsSelf()
         return Math.abs(this.scale.y) * this._localBoundsSelf.height;
     }
 
-    set height(value) {
+    set height(value: number) {
         this.updateLocalBoundsSelf()
         const height = this._localBoundsSelf.height;
         if (height !== 0) {

src/2d/graphics/Shape.ts

@@ -6,15 +6,14 @@ import { hex2string, getRGBA, getGradientColor, getBackupCanvasCtx, getCanvasBit
 import Sprite from "../display/Sprite";
 
 /**
- * 容器级的shape，和shape区别，继承sprite，hittest重写
+ * 继承sprite，hittest重写
  * 矢量对象，
  * 记录指令，对于复杂的不常绘制的图形，用canvas上下文的指令比较方便，比如消消乐项目时的格子地图
  * 复杂路径，自己没法确定哪些区域该填充的时候，用canvas的api
  * 支持pattern和渐变填充，与Graphic的纹理填充区分，不一致
- * 不能用于webgl遮罩，暂不与gra做兼容，canvas形式可以
- * 待测试
- * anchorTexture被使用，尽量不手动修改
- * 如要改锚点，用anchor
+ * anchorTexture被使用，尽量不手动修改，如要改锚点，用anchor
+ * 作为Webgl模式的遮罩时，需要注意：
+ * 遮罩绘制指令不变的且有矩阵变化的（比如自身或父级的位置有改变），需要shape._boundsID++，为了重新计算包围盒
  * @class Shape
  * @extends Sprite
  */
@@ -340,7 +339,7 @@ export class Shape extends Sprite {
     public beginFill(color: number | string = 0, alpha: number = 1): this {
         //颜色做个兼容
         if (typeof (color) == "string") color = string2hex(color);
-        
+
         var sColor = getRGBA(hex2string(color), alpha);
         this._fill(sColor);
         return this;
@@ -500,7 +499,10 @@ export class Shape extends Sprite {
         }
         return s;
     }
-    // protected isUsedToMask: boolean = false;
+    /**
+     * 标记是否作为遮罩，作为遮罩时不会被当作hittest检测对象，默认false，内部逻辑处理用，外部不建议修改
+     */
+    _isUsedToMask: boolean = false;
     /**
      * 结束画线
      * @method endStroke

src/2d/loader/Loader.ts

@@ -10,6 +10,8 @@ import { createImage, getEnv } from "../utils";
  * 感觉没必要集成EventDispatcher
  * 加载方法都是回调方式
  * 无特殊要求的直接用GlobalLoader
+ * 这里所有load方法参数都是（回调函数，路径）
+ * 兼容了web和tb环境
  */
 export class Loader extends EventDispatcher {
     /**
@@ -176,31 +178,6 @@ export class Loader extends EventDispatcher {
         if (url.indexOf('data:') !== 0) img.crossOrigin = "anonymous";
         img.src = url;
     }
-    /**
-     * 加载小程序的音频，暂时不用，完全废弃
-     * @param callback 
-     * @param url 
-     */
-    loadAudio(callback: (s: boolean, audio?) => void, url) {
-        //@ts-ignore
-        const innerAudioContext = my.createInnerAudioContext()
-        // innerAudioContext.autoplay = true
-        innerAudioContext.src = url;
-        innerAudioContext.onCanplay(() => {
-            callback(true, innerAudioContext)
-        })
-        // innerAudioContext.onPlay(() => {
-        //     console.log('开始播放')
-        // })
-        innerAudioContext.onError((res) => {
-            // console.log(res.errMsg)
-            callback(false)
-        })
-        // innerAudioContext.onEnded(() => {
-        //     console.log('播放结束')
-        // })
-    }
-
     /**
      * 淘宝加载方式
      * @param callback 
@@ -281,7 +258,9 @@ export class Loader extends EventDispatcher {
 
 
 }
-
+/**
+ * 一个全局加载器实例
+ */
 export const GlobalLoader = new Loader();
   //https://yun.duiba.com.cn/db_games/activity/yilian0726/1565580040/resource/result/resultAlta1.json
     //"https://yun.duiba.com.cn/db_games/activity/etc/optionImages/%E5%8D%8E%E4%B8%BAP30.jpg"
\ No newline at end of file

src/2d/math/Matrix.ts

@@ -421,11 +421,11 @@ export class Matrix extends HashObject {
     }
 
     /**
-     * Creates an array from the current Matrix object.与glsl中的mat3对应,注意行列主序执行transpose;
-     *
-     * @param {boolean} transpose - Whether we need to transpose the matrix or not
-     * @param {Float32Array} [out=new Float32Array(9)] - If provided the array will be assigned to out
-     * @return {number[]} the newly created array which contains the matrix
+     * 输出数组.与glsl中的mat3对应,注意行列主序执行transpose;
+     * 参数与3d的区别很大
+     * @param {boolean} transpose - 是否转置,默认false,glsl中传入需要true
+     * @param {Float32Array} [out=new Float32Array(9)] - 输出数组,如不传使用自身的array
+     * @return {number[]} 返回数组
      */
     public toArray(transpose = false, out?) {
         if (!this.array) {
@@ -498,8 +498,7 @@ export class Matrix extends HashObject {
         return transform;
     }
     /**
-     * A default (identity) matrix
-     *
+     * 获取一个初始化矩阵，返回新的实例
      * @static
      * @const
      */
@@ -508,8 +507,7 @@ export class Matrix extends HashObject {
     }
 
     /**
-     * A temp matrix
-     *
+     * 获取一个临时矩阵，返回新的实例
      * @static
      * @const
      */

src/2d/math/Rectangle.ts

@@ -93,28 +93,28 @@ export class Rectangle extends HashObject {
     public height: number = 0;
 
     /**
-     * returns the left edge of the rectangle
+     * 左边界
      */
     get left(): number {
         return this.x;
     }
 
     /**
-     * returns the right edge of the rectangle
+     * 右边界
      */
     get right(): number {
         return this.x + this.width;
     }
 
     /**
-     * returns the top edge of the rectangle
+     * 上边界
      */
     get top(): number {
         return this.y;
     }
 
     /**
-     * returns the bottom edge of the rectangle
+     * 下边界
      */
     get bottom(): number {
         return this.y + this.height;

src/2d/mesh/Mesh.ts

@@ -4,7 +4,7 @@ import Container from "../display/Container";
 import Texture from "../texture/Texture";
 import { BLEND_MODES } from "../const";
 import TextureMatrix from "../texture/TextureMatrix";
-import {CanvasRenderer} from "../renderers/CanvasRenderer";
+import { CanvasRenderer } from "../renderers/CanvasRenderer";
 import { WebglRenderer } from "../renderers/WebglRenderer";
 import { DisplayObject } from "../display";
 
@@ -34,8 +34,7 @@ export class Mesh extends Container {
         // if (value != this._blendMode) this._blendMode = value
     }
     /**
-     * The texture of the Mesh
-     *
+     * 纹理
      * @member {Texture}
      * @default Texture.EMPTY
      * @private
@@ -58,10 +57,8 @@ export class Mesh extends Container {
      */
     _vertexData: Float32Array;
     /**
-     * 传入批处理的永远是上面三个，上面三个的计算需要记录dirty
+     * 传入批处理的永远是上面三个，上面三个的计算需要记录dirty，标记修改_vertexDirty++
      * 但是每次都需要传Gpu,性能再说吧
-     * Version of mesh verticies are dirty or not
-     * 原来是dirty，
      * @member {number}
      */
     protected _vertexDirty: number;
@@ -82,16 +79,12 @@ export class Mesh extends Container {
      */
     private _transformID: number
     /**
-     * Triangles in canvas mode are automatically antialiased, use this value to force triangles
-     * to overlap a bit with each other.
-     *
+     * canvas模式下下三角形重合量，默认0
      * @member {number}
      */
     canvasPadding: number;
     /**
-     * 色值调色
-     * The tint applied to the mesh. This is a [r,g,b] value. A value of [1,1,1] will remove any
-     * tint effect.
+     * 色值调色，十六进制，和Sprite的一样
      */
     private _tint: number;
     /**
@@ -99,19 +92,16 @@ export class Mesh extends Container {
      */
     private _tintRGB: number;
     /**
-     * transform that is applied to UV to get the texture coords
-     * its updated independently from texture uvTransform
-     * updates of uvs are tied to that thing
-     *
+     * 二次纹理坐标矩阵
      * @member {TextureMatrix}
      * @private
      */
     private _uvTransform: TextureMatrix;
     /**
-     * @param {Texture} texture - The texture to use
-     * @param {Float32Array} [vertices] - if you want to specify the vertices
-     * @param {Float32Array} [uvs] - if you want to specify the uvs
-     * @param {Uint16Array} [indices] - if you want to specify the indices
+     * @param {Texture} texture - 纹理
+     * @param {Float32Array} [vertices] - 顶点，类型化数组，默认[0,0, 100,0, 100,100, 0,100]
+     * @param {Float32Array} [uvs] - uv坐标，类型化数组，[0,0, 1,0, 1,1, 0,1]
+     * @param {Uint16Array} [indices] - 索引，类型化数组，默认[0, 1, 3, 2]
      */
     constructor(texture?: Texture, vertices?: Float32Array, uvs?: Float32Array, indices?: Uint16Array) {
         super();
@@ -157,10 +147,9 @@ export class Mesh extends Container {
     }
 
     /**
-     * Renders the object using the WebGL renderer
-     *
+     * webgl渲染自身方法
      * @private
-     * @param {WebGLRenderer} renderer - a reference to the WebGL renderer
+     * @param {WebGLRenderer} renderer
      */
     _renderWebGL(renderer: WebglRenderer) {
         //刷一次
@@ -172,10 +161,9 @@ export class Mesh extends Container {
     }
 
     /**
-     * Renders the object using the Canvas renderer
-     *
+     * canvas渲染自身方法
      * @private
-     * @param {CanvasRenderer} renderer - The canvas renderer.
+     * @param {CanvasRenderer} renderer
      */
     _renderCanvas(renderer: CanvasRenderer) {
         this.refresh();
@@ -183,8 +171,7 @@ export class Mesh extends Container {
     }
 
     /**
-     * When the texture is updated, this event will fire to update the scale and frame
-     *
+     * 纹理更新时触发
      * @private
      */
     private _onTextureUpdate() {
@@ -200,10 +187,8 @@ export class Mesh extends Container {
     }
 
     /**
-     * Refreshes uvs for generated meshes (rope, plane)
-     * sometimes refreshes vertices too
-     *
-     * @param {boolean} [forceUpdate=false] if true, matrices will be updated any case
+     * 就是为了_refresh
+     * @param {boolean} [forceUpdate=false] 是否强制更新，默认false
      */
     refresh(forceUpdate: boolean = false) {
         //贴图不可用，返回
@@ -258,8 +243,7 @@ export class Mesh extends Container {
 
 
     /**
-     * Returns the bounds of the mesh as a rectangle. The bounds calculation takes the worldTransform into account.
-     *
+     * 计算自己全局包围盒
      */
     _calculateBounds() {
         // TODO - we can cache local bounds and use them if they are dirty (like graphics)
@@ -337,8 +321,7 @@ export class Mesh extends Container {
     }
 
     /**
-     * The texture that the mesh uses.
-     *
+     * 纹理
      * @member {Texture}
      */
     get texture() {
@@ -369,8 +352,7 @@ export class Mesh extends Container {
     }
 
     /**
-     * Destroys the Mesh object.
-     *
+     * 销毁
      */
     destroy() {
         super.destroy();

src/2d/mesh/NineSlicePlane.ts

 import { Plane, calculatePlaneIndices } from './Plane';
 import { Texture } from '../texture';
-import {CanvasRenderer} from '../renderers/CanvasRenderer';
+import { CanvasRenderer } from '../renderers/CanvasRenderer';
 import { Mesh } from './Mesh';
 
 //提前计算好的索引
@@ -62,7 +62,7 @@ export class NineSlicePlane extends Mesh {
     private _bottomHeight: number;
 
     /**
-     * @param {Texture} texture - The texture to use on the NineSlicePlane.
+     * @param {Texture} texture 纹理
      * @param {int} [leftWidth=10] size of the left vertical bar (A)
      * @param {int} [topHeight=10] size of the top horizontal bar (C)
      * @param {int} [rightWidth=10] size of the right vertical bar (B)
@@ -97,8 +97,7 @@ export class NineSlicePlane extends Mesh {
     }
 
     /**
-     * Updates the horizontal vertices.
-     *
+     * 更新水平顶点
      */
     private updateHorizontalVertices() {
         const vertices = this._vertices;
@@ -112,8 +111,7 @@ export class NineSlicePlane extends Mesh {
     }
 
     /**
-     * Updates the vertical vertices.
-     *
+     * 更新垂直顶点
      */
     private updateVerticalVertices() {
         const vertices = this._vertices;
@@ -127,10 +125,10 @@ export class NineSlicePlane extends Mesh {
     }
 
     /**
-     * Renders the object using the Canvas renderer
+     * canvas渲染
      * 考虑是否用缓存，不然每次相当于9次绘制，到时应该是集成到一个插件里的
      * @private
-     * @param {CanvasRenderer} renderer - The canvas renderer to render with.
+     * @param {CanvasRenderer} renderer
      */
     _renderCanvas(renderer: CanvasRenderer) {
         const context = renderer.context;
@@ -162,15 +160,13 @@ export class NineSlicePlane extends Mesh {
     }
 
     /**
-     * Renders one segment of the plane.
-     * to mimic the exact drawing behavior of stretching the image like WebGL does, we need to make sure
-     * that the source area is at least 1 pixel in size, otherwise nothing gets drawn when a slice size of 0 is used.
-     *
+     * 绘制某块平面
+     * 至少1像素
      * @private
-     * @param {CanvasRenderingContext2D} context - The context to draw with.
-     * @param {CanvasImageSource} textureSource - The source to draw.
-     * @param {number} w - width of the texture
-     * @param {number} h - height of the texture
+     * @param {CanvasRenderingContext2D} context - 上下文
+     * @param {CanvasImageSource} textureSource - 图片标签
+     * @param {number} w - 图片宽度
+     * @param {number} h - 图片高度
      * @param {number} x1 - x index 1
      * @param {number} y1 - y index 1
      * @param {number} x2 - x index 2
@@ -209,8 +205,7 @@ export class NineSlicePlane extends Mesh {
     }
 
     /**
-     * The width of the NineSlicePlane, setting this will actually modify the vertices and UV's of this plane
-     * 
+     * 宽度
      * @member {number}
      */
     get width() {
@@ -218,7 +213,7 @@ export class NineSlicePlane extends Mesh {
     }
 
     /**
-     * 不再修改缩放，修改uv和顶点
+     * 不再修改缩放，设置后会修改uv和顶点
      */
     set width(value) {
         this._width = value;
@@ -226,14 +221,15 @@ export class NineSlicePlane extends Mesh {
     }
 
     /**
-     * The height of the NineSlicePlane, setting this will actually modify the vertices and UV's of this plane
-     *
+     * 高度
      * @member {number}
      */
     get height() {
         return this._height;
     }
-
+    /**
+     * 不再修改缩放，设置后会修改uv和顶点
+     */
     set height(value) {
         this._height = value;
         this._needRefresh = true;
@@ -296,7 +292,7 @@ export class NineSlicePlane extends Mesh {
     }
 
     /**
-     * Refreshes NineSlicePlane coords. All of them.
+     * 刷新所有坐标
      */
     _refresh() {
 

src/2d/mesh/Plane.ts

@@ -2,30 +2,19 @@ import { Mesh } from './Mesh';
 import { Texture } from '../texture';
 
 /**
- * The Plane allows you to draw a texture across several points and them manipulate these points
- *
- *```js
- * for (let i = 0; i < 20; i++) {
- *     points.push(new Point(i * 50, 0));
- * };
- * let Plane = new Plane(Texture.fromImage("snake.png"), points);
- *  ```
- *
  * @class
  * @extends Mesh
  *
  */
 export class Plane extends Mesh {
-    verticesX: number;
-    verticesY: number;
     /**
-     * @param {Texture} texture - The texture to use on the Plane.
-     * @param {number} [verticesX=10] - The number of vertices in the x-axis
-     * @param {number} [verticesY=10] - The number of vertices in the y-axis
+     * @param {Texture} texture - 纹理
+     * @param {number} [verticesX=10] - x轴顶点数
+     * @param {number} [verticesY=10] - y轴顶点数
      */
-    constructor(texture: Texture, verticesX: number = 10, verticesY: number = 10) {
+    constructor(texture: Texture, public verticesX: number = 10, public verticesY: number = 10) {
         super(texture);
-        this.verticesX = verticesX || 10;
+        this.verticesX = verticesX || 10;//先留着吧，万一有传null，或0的
         this.verticesY = verticesY || 10;
         this.refresh();
     }
@@ -61,7 +50,7 @@ export class Plane extends Mesh {
         // console.log(indices)
         this._vertices = new Float32Array(verts);
         this._uvs = new Float32Array(uvs);
-        this._indices = calculatePlaneIndices(this.verticesX,this.verticesY);
+        this._indices = calculatePlaneIndices(this.verticesX, this.verticesY);
 
         this._vertexDirty++;
 
@@ -93,3 +82,148 @@ export function calculatePlaneIndices(verticesX: number, verticesY: number): Uin
     }
     return new Uint16Array(indices);
 }
+
+// new Ripple(texutre, 50, 108, 3)
+
+// class Ripple extends Plane {
+//     /**
+//      * 波源影响半径
+//      */
+//     private radius: number;
+//     private oldNew: boolean;
+//     private heightOld: number[][];
+//     private heightNew: number[][];
+//     private _verticesOri
+//     /**
+//      * 分段数
+//      * @param segX 
+//      * @param segY 
+//      */
+//     constructor(texture: Texture, segX: number = 10, segY: number = 10, radius: number = 5) {
+//         super(texture, segX, segY)
+
+//         this.radius = radius;
+//         this.oldNew = false;
+//         this.heightOld = [];
+//         this.heightNew = [];
+//         for (var i = 0; i < this.verticesX; i++) {
+//             this.heightOld[i] = [];
+//             this.heightNew[i] = [];
+//             for (var j = 0; j < this.verticesY; j++) {
+//                 this.heightOld[i][j] = 0;
+//                 this.heightNew[i][j] = 0;
+//             }
+//         }
+//         //拷贝一个源数据
+//         this._verticesOri = this._vertices.slice();
+//         let fun = (a, e) => {
+//             var x1 = Math.round(e.localX / (texture.width / (this.verticesX - 1)));
+//             var y1 = Math.round(e.localY / (texture.height / (this.verticesY - 1)));
+//             // console.log(x1,y1)
+//             this.disturb(x1, y1, a);
+//         }
+//         this.addEventListener(MouseEvent.MOUSE_MOVE, fun.bind(this, "m"), this)
+//         this.addEventListener(MouseEvent.MOUSE_DOWN, fun.bind(this, "d"), this)
+//     }
+
+//     getEnergy(e, r, d) {
+//         return e * (1 - d / r);
+//     };
+//     refractionOff(i, j, rect) {
+//         var xl = i - 1;
+//         var xr = i + 1;
+//         if (i == 0) xl = 0;
+
+//         if (i == this.verticesX - 1) xr = this.verticesX - 1;
+
+//         var yu = j - 1;
+//         var yd = j + 1;
+//         if (j == 0) yu = 0
+
+//         if (j == this.verticesY - 1) yd = this.verticesY - 1
+
+//         var xoff = rect[i][yu] - rect[i][yd];
+//         var yoff = rect[xr][j] - rect[xl][j];
+//         return { xoff: xoff, yoff: yoff }
+//     };
+//     distance(a, b) {
+//         var x = b.x - a.x, y = b.y - a.y;
+//         return Math.sqrt(x * x + y * y);
+//     };
+//     getAmplitude(i, j, rect) {
+//         var xl = i - 1;
+//         var xr = i + 1;
+//         if (i == 0) xl = 0;
+
+//         if (i == this.verticesX - 1) xr = this.verticesX - 1;
+//         var yu = j - 1;
+//         var yd = j + 1;
+//         if (j == 0) yu = 0;
+
+//         if (j == this.verticesY - 1) yd = this.verticesY - 1
+//         return (rect[i][yu] + rect[i][yd] + rect[xl][j] + rect[xr][j]) / 2
+//     };
+//     disturb(i, j, type = "d") {
+//         var rectsv = this.heightOld;
+//         var rectsNewv = this.heightNew;
+//         var xmin = i - this.radius;
+//         if (xmin < 0) xmin = 0;
+
+//         var xmax = i + this.radius;
+//         if (xmax > this.verticesX - 1) xmax = this.verticesX - 1;
+//         var ymin = j - this.radius;
+//         if (ymin < 0) ymin = 0;
+
+//         var ymax = j + this.radius;
+//         if (ymax > this.verticesY - 1) ymax = this.verticesY - 1;
+//         for (var m = xmin; m <= xmax; m++) {
+//             for (var n = ymin; n <= ymax; n++) {
+//                 var dist = this.distance({ x: i, y: j }, { x: m, y: n });
+
+//                 if (dist <= this.radius) {
+//                     if (type == "d") {
+//                         rectsv[m][n] += this.getEnergy(64, this.radius, dist);
+//                         rectsNewv[m][n] += this.getEnergy(64, this.radius, dist);
+//                     } else {
+//                         rectsv[m][n] += this.getEnergy(16, this.radius, dist);
+//                         rectsNewv[m][n] += this.getEnergy(16, this.radius, dist);
+//                     }
+
+
+//                 }
+//             }
+//         }
+//     };
+//     update() {
+//         super.update();
+//         for (var i = 0; i < this.verticesX; i++) {
+//             for (var j = 0; j < this.verticesY; j++) {
+//                 var rectsv = this.heightOld;
+//                 var rectsNewv = this.heightNew;
+//                 var d;
+//                 var off;
+//                 if (this.oldNew) {
+//                     d = this.getAmplitude(i, j, rectsv);
+//                     d -= rectsNewv[i][j];
+//                     d -= d / 64;
+//                     rectsNewv[i][j] = d;
+//                     off = this.refractionOff(i, j, this.heightNew);
+//                 } else {
+//                     d = this.getAmplitude(i, j, rectsNewv);
+//                     d -= rectsv[i][j];
+//                     d -= d / 64;
+//                     rectsv[i][j] = d;
+//                     off = this.refractionOff(i, j, this.heightOld);
+//                 }
+//                 var index = j * this.verticesX + i;
+//                 this._vertices[index * 2] = this._verticesOri[index * 2] - off.xoff;
+//                 this._vertices[index * 2 + 1] = this._verticesOri[index * 2 + 1] - off.yoff;
+//                 // this.vets[index].z = d;
+//             }
+//         }
+//         this.oldNew = !this.oldNew;
+//         //确保会更新
+//         this._vertexDirty++
+//     };
+
+// }
\ No newline at end of file

src/2d/renderers/CanvasRenderer.ts

@@ -8,8 +8,8 @@ import RenderTexture from "../texture/RenderTexture";
 import { Matrix } from "../math";
 import { SystemRenderer } from "./SystemRenderer";
 import CanvasRenderTarget from "./renderTarget/CanvasRenderTarget";
-import { mapCanvasBlendModes } from "../utils";
 import { CanvasMeshRenderer } from "./plugins/CanvasMeshRenderer";
+import { mapCanvasBlendModes } from "../utils/mapCanvasBlendModes";
 
 
 /**
@@ -29,9 +29,13 @@ export class CanvasRenderer extends SystemRenderer {
    */
   maskManager: CanvasMaskManager;
   /**
-   * 插件，暂时只有图形和图片的
+   * 插件，暂时只有图形、图片和网格，以后有需要再加
    */
-  plugins;
+  plugins: {
+    sprite: CanvasSpriteRenderer,
+    graphics: CanvasGraphicsRenderer,
+    mesh: CanvasMeshRenderer,
+  };
 
   /**
    * 当前使用的混色模式
@@ -57,12 +61,10 @@ export class CanvasRenderer extends SystemRenderer {
 
     // this.initPlugins();
     this.plugins = {
-      sprite: null,
-      graphics: null,
+      sprite: new CanvasSpriteRenderer(this),
+      graphics: new CanvasGraphicsRenderer(this),
+      mesh: new CanvasMeshRenderer(this)
     }
-    this.plugins.sprite = new CanvasSpriteRenderer(this);
-    this.plugins.graphics = new CanvasGraphicsRenderer(this);
-    this.plugins.mesh = new CanvasMeshRenderer(this);
 
     this.blendModes = mapCanvasBlendModes();
     this._activeBlendMode = null;
@@ -209,6 +211,7 @@ export class CanvasRenderer extends SystemRenderer {
   destroyPlugins() {
     this.plugins.sprite.destroy();
     this.plugins.graphics.destroy();
+    this.plugins.mesh.destroy();
   }
 }
 

src/2d/renderers/WebglRenderer.ts

-import { EventDispatcher } from "../events/EventDispatcher";
-import BatchRenderer from "./plugins/BatchRenderer";
-// import { RendererOptions } from "./RendererOptions";
+import { BatchRenderer } from "./plugins/BatchRenderer";
 import { SystemRenderer } from "./SystemRenderer";
 import { RENDERER_TYPE, BLEND_MODES } from "../const";
 import { createContext, GLShader, VertexArrayObject } from "../../glCore";
@@ -24,7 +22,7 @@ import FilterManager from "./managers/FilterManager";
 
 let CONTEXT_UID = 0;
 
-
+//渲染方式基本用了pixi的方式
 export class WebglRenderer extends SystemRenderer {
     /**
      * 所有插件列表，目前只有batch
@@ -88,7 +86,7 @@ export class WebglRenderer extends SystemRenderer {
     rootRenderTarget: RenderTarget;
 
     /**
-     * 直接传入的尺寸
+     * 只传入上下文和尺寸，canvas标签在stage上处理
      * @param gl 
      * @param width 
      * @param height 
@@ -98,22 +96,22 @@ export class WebglRenderer extends SystemRenderer {
         this._instanceType = "WebglRenderer";
 
         this.type = RENDERER_TYPE.WEBGL;
-
-        // this.handleContextLost = this.handleContextLost.bind(this);
-        // this.handleContextRestored = this.handleContextRestored.bind(this);
-
+        //修改下函数this指向，stage里直接用
+        this.handleContextLost = this.handleContextLost.bind(this);
+        this.handleContextRestored = this.handleContextRestored.bind(this);
+        //在stage里处理
         // this.htmlElement.addEventListener('webglcontextlost', this.handleContextLost, false);
         // this.htmlElement.addEventListener('webglcontextrestored', this.handleContextRestored, false);
 
-        //The options passed in to create a new webgl context.
-        var contextOptions = {
-            alpha: true,
-            antialias: false,
-            premultipliedAlpha: true,  //一般png图片都不会预乘alpha，所以必为true,除非有些图集工具选择了premultipliedAlpha
-            stencil: true,
-            preserveDrawingBuffer: false,
-            // powerPreference: this.options.powerPreference,
-        };
+        //stage上处理了
+        // var contextOptions = {
+        //     alpha: true,
+        //     antialias: false,
+        //     premultipliedAlpha: true,  //一般png图片都不会预乘alpha，所以必为true,除非有些图集工具选择了premultipliedAlpha
+        //     stencil: true,
+        //     preserveDrawingBuffer: false,
+        //     // powerPreference: this.options.powerPreference,
+        // };
         this._backgroundColorRgba[3] = this.transparent ? 0 : 1;
 
         // this.gl = createContext(this.htmlElement, contextOptions);
@@ -136,11 +134,6 @@ export class WebglRenderer extends SystemRenderer {
 
         this.renderingToScreen = true;
 
-        /**
-         * Holds the current shader
-         *
-         * @member {Shader}
-         */
         this._activeShader = null;
 
         this._activeVao = null;
@@ -219,7 +212,7 @@ export class WebglRenderer extends SystemRenderer {
         }
 
         //回收纹理,回收长时间不用的纹理,从gpu移除,对于很多场景,很多图片的时候很有用,否则gpu容易崩溃
-        // this.textureGC.update();
+        this.textureGC.update();//20210601打开注释，忘了为啥之前一直注释
 
         //触发onPostRender
         this.dispatchEvent('onPostRender');
@@ -424,16 +417,16 @@ export class WebglRenderer extends SystemRenderer {
     destroy() {
         //插件销毁
         this.destroyPlugins();
-        // remove listeners
+        // remove listeners，这部分逻辑放舞台里，注意舞台先移除监听，再销毁渲染器
         // this.htmlElement.removeEventListener('webglcontextlost', this.handleContextLost);
         // this.htmlElement.removeEventListener('webglcontextrestored', this.handleContextRestored);
-
+        //纹理管理器销毁
         this.textureManager.destroy();
 
-        // call base destroy
+        //父级销毁方法
         super.destroy();
 
-        // destroy the managers
+        // 销毁所有管理器
         this.maskManager.destroy();
         this.stencilManager.destroy();
         this.filterManager.destroy();
@@ -445,7 +438,7 @@ export class WebglRenderer extends SystemRenderer {
         this.handleContextLost = null;
         this.handleContextRestored = null;
 
-        //小程序内会有问题，这样执行
+        //淘宝小程序内会有问题，这样执行，暂时先注释，如果web环境出问题再修改
         // this.gl.useProgram(null);
 
         // if (this.gl.getExtension('WEBGL_lose_context')) {
@@ -470,8 +463,7 @@ export class WebglRenderer extends SystemRenderer {
 
     /**
      * webgl上下文丢失时
-     * @private
-     * @param {WebGLContextEvent} event - The context lost event.
+     * @param {WebGLContextEvent} event - 事件
      */
     handleContextLost(event) {
         event.preventDefault();
@@ -480,14 +472,16 @@ export class WebglRenderer extends SystemRenderer {
     /**
      * 初始化插件
      * @protected
-     * @param {object} staticMap - The dictionary of statically saved plugins.
+     * @param {object} staticMap - 静态属性里存的插件列表
      */
     initPlugins(staticMap) {
         for (const o in staticMap) {
             this.plugins[o] = new (staticMap[o])(this);
         }
     }
-
+    /**
+     * 销毁插件
+     */
     destroyPlugins() {
         for (const o in this.plugins) {
             this.plugins[o].destroy();
@@ -495,14 +489,15 @@ export class WebglRenderer extends SystemRenderer {
         }
         this.plugins = null;
     }
-
+    /**
+     * 插件列表
+     */
     static __plugins;
     /**
-     * Adds a plugin to the renderer.
-     *
+     * 添加插件，用于initPlugins时生成所有插件实例，webgl渲染器估计插件可扩展多，所以加静态方法
      * @method
-     * @param {string} pluginName - The name of the plugin.
-     * @param {Function} ctor - The constructor function or class for the plugin.
+     * @param {string} pluginName - 插件名，用于区分键值
+     * @param {Function} ctor - 插件类
      */
     static registerPlugin(pluginName, ctor) {
         WebglRenderer.__plugins = WebglRenderer.__plugins || {};
@@ -510,6 +505,6 @@ export class WebglRenderer extends SystemRenderer {
     }
 }
 
-//注册所有插件，当前只有batch
+//注册2d批处理插件，不放这里BatchRenderer文件里，因为不往外引，不会执行，
 WebglRenderer.registerPlugin('batch', BatchRenderer);
 

src/2d/renderers/managers/TextureManager.ts

@@ -280,6 +280,11 @@ export default class TextureManager {
      * @param {boolean} [skipRemove=false] - Whether to skip removing the texture from the TextureManager.
      */
     destroyTexture(texture, skipRemove) {
+        //如果是事件返回的
+        if (texture.instanceType === "Event") {
+            //选择它的target
+            texture = texture.target;
+        }
         texture = texture.baseTexture || texture;
 
         if (!texture.hasLoaded) {

src/2d/renderers/plugins/BatchRenderer.ts

@@ -8,10 +8,11 @@ import { BatchBuffer } from '../webgl/BatchBuffer';
 import { generateMultiTextureShader } from '../webgl/generateMultiTextureShader';
 import { WebglRenderer } from '../WebglRenderer';
 import { GLShader, GLBuffer, VertexArrayObject } from '../../../glCore';
-import { nextPow2, log2, premultiplyTint, premultiplyBlendMode } from '../../utils';
+import { nextPow2, log2, premultiplyTint } from '../../utils';
 import { DisplayObject } from '../../display/DisplayObject';
 import Texture from '../../texture/Texture';
 import BaseTexture from '../../texture/BaseTexture';
+import { premultiplyBlendMode } from '../../utils/mapPremultipliedBlendModes';
 
 let TICK = 0;
 
@@ -21,7 +22,7 @@ let TICK = 0;
  * @class
  * @extends ObjectRenderer
  */
-export default class BatchRenderer extends ObjectRenderer {
+export class BatchRenderer extends ObjectRenderer {
     vertSize: number;
     vertByteSize: number;
     size: number;
@@ -360,6 +361,7 @@ export default class BatchRenderer extends ObjectRenderer {
 
         //        this.indexBuffer.update();
         //暂时出现了bug，ios不做特殊处理先，以后有时间排查，暂时应该影响不大
+        //貌似没问题了（20210601），但是感觉性能差别不大，先不加了，到时要加的话，也要打开start方法里的注释
         if (osType == "ios" && false) {
             //可能有一帧，在多个地方执行flush
             // this is still needed for IOS performance..
@@ -517,6 +519,9 @@ export default class BatchRenderer extends ObjectRenderer {
         super.destroy();
     }
 }
+//放WebglRenderer那执行，BatchRenderer不往外引，不会执行，
+// WebglRenderer.registerPlugin('batch', BatchRenderer);
+
 
 interface batchElementInterface {
     _blendMode: BLEND_MODES,

src/2d/renderers/plugins/CanvasSpriteRenderer.ts

@@ -4,7 +4,7 @@ import { Matrix, GroupD8 } from '../../math';
 import Sprite from '../../display/Sprite';
 import { DisplayObject } from '../../display/DisplayObject';
 import Graphics from '../../graphics/Graphics';
-import { getTintedTexture } from '../../utils';
+import { getTintedTexture } from '../../utils/getTintedTexture';
 
 const canvasRenderWorldTransform = new Matrix();
 

src/2d/renderers/webgl/WebGLState.ts

-import { mapWebGLBlendModes } from '../../utils';
+import { mapWebGLBlendModes } from "../../utils/mapWebGLBlendModes";
 
 const BLEND = 0;
 const DEPTH_TEST = 1;

src/2d/text/EditableText.ts

@@ -4,7 +4,7 @@ import { osType } from "../const";
 
 
 /**
- * 这是最新的20200918；到时放到引擎里去
+ * 可编辑文本
  */
 export class EditableText extends TextField {
 

src/2d/texture/BaseRenderTexture.ts

@@ -2,18 +2,14 @@ import BaseTexture from './BaseTexture';
 import { SCALE_MODES } from '../const';
 
 /**
- * 将显示对象画在上面的贴图
- * A BaseRenderTexture is a special texture that allows any display object to be rendered to it.
- *
- * __Hint__: All DisplayObjects (i.e. Sprites) that render to a BaseRenderTexture should be preloaded
- * otherwise black rectangles will be drawn instead.
- *
- * A BaseRenderTexture takes a snapshot of any Display Object given to its render method. The position
- * and rotation of the given Display Objects is ignored. For example:
+ * 将显示对象画在上面的贴图，这是基础纹理，一般用RenderTexture
+ * 注意绘制前纹理加载完成
+ * For example:
  *
  * ```js
- * let renderer = autoDetectRenderer(1024, 1024, { view: canvas, ratio: 1 });
+ * let renderer = CanvasRenderer(context,1024, 1024);
  * let baseRenderTexture = new BaseRenderTexture(800, 600);
+ * let renderTexture = new RenderTexture(baseRenderTexture);
  * let sprite = Sprite.fromImage("spinObj_01.png");
  *
  * sprite.position.x = 800/2;
@@ -21,48 +17,35 @@ import { SCALE_MODES } from '../const';
  * sprite.anchorTexture.x = 0.5;
  * sprite.anchorTexture.y = 0.5;
  *
- * renderer.render(sprite,baseRenderTexture);
+ * renderer.render(sprite,renderTexture);
  * ```
  *
- * The Sprite in this case will be rendered using its local transform. To render this sprite at 0,0
- * you can clear the transform
- *
- * ```js
- *
- * sprite.setTransform()
- *
- * let baseRenderTexture = new BaseRenderTexture(100, 100);
- * let renderTexture = new RenderTexture(baseRenderTexture);
- *
- * renderer.render(sprite, renderTexture);  // Renders to center of RenderTexture
- * ```
  *
  * @class
  * @extends BaseTexture
  */
 export default class BaseRenderTexture extends BaseTexture {
     /**
-     * A map of renderer IDs to webgl renderTargets
+     * webgl帧缓存列表，键值为渲染器的id
      * 画在他的帧缓存中
      * @private
      * @member {object<number, WebGLTexture>}
      */
     _glRenderTargets: {};
     /**
-     * A reference to the canvas render target (we only need one as this can be shared across renderers)
-     * 画在他的上下文中canvas中
+     * 离屏canvas，多canvas渲染器可共享，所以不需要列表
      * @private
-     * @member {object<number, WebGLTexture>}
+     * @member {CanvasRenderTarget}
      */
     _canvasRenderTarget: any;
     /**
-     * This will let the renderer know if the texture is valid. If it's not then it cannot be rendered.
+     * 是否可用
      */
     valid: boolean;
     /**
-     * @param {number} [width=100] - The width of the base render texture
-     * @param {number} [height=100] - The height of the base render texture
-     * @param {number} [scaleMode=SCALE_MODES.LINEAR] - See {@link SCALE_MODES} for possible values
+     * @param {number} [width=100] - 宽度
+     * @param {number} [height=100] - 高度
+     * @param {number} [scaleMode=SCALE_MODES.LINEAR] -  {@link SCALE_MODES}
      */
     constructor(width: number = 100, height: number = 100, scaleMode: number = SCALE_MODES.LINEAR) {
         super(null, scaleMode);
@@ -84,10 +67,9 @@ export default class BaseRenderTexture extends BaseTexture {
     }
 
     /**
-     * Resizes the BaseRenderTexture.
-     *
-     * @param {number} width - The width to resize to.
-     * @param {number} height - The height to resize to.
+     * 重置尺寸
+     * @param {number} width - 宽度
+     * @param {number} height - 高度
      */
     resize(width: number, height: number) {
         width = Math.ceil(width);
@@ -110,8 +92,7 @@ export default class BaseRenderTexture extends BaseTexture {
     }
 
     /**
-     * Destroys this texture
-     *
+     * 销毁
      */
     destroy() {
         super.destroy();

src/2d/texture/BaseTexture.ts

@@ -89,24 +89,19 @@ export default class BaseTexture extends EventDispatcher {
     textureCacheIds: string[];
 
     /**
-     * 
-     * 小程序里用得是imageData，文本多数用这个，改成canvas;
-   * {
-   * data:Uint8Array,
-   * width:number,
-   * height:number,
-   * type:string,
-   * path:string
-   * }
-   * 或者是canvas.createImage()对象，用source.data区分
-   * 加一个离屏的canvas
+     * image对象，canvas对象，或者imageData（canvas渲染模式用不了，是否考虑去掉），以后类型增多后再说
+     * {
+     * data:Uint8Array,
+     * width:number,
+     * height:number,
+     * type:string,
+     * path:string
+     * }
      */
     source;
-
-
     /**
      * @param {} [source] - 源数据
-     * @param {number} - possible values
+     * @param {SCALE_MODES}
      */
     constructor(source = null, scaleMode: SCALE_MODES = SCALE_MODES.LINEAR) {
         super();
@@ -141,7 +136,8 @@ export default class BaseTexture extends EventDispatcher {
                     this._sourceChange(source);
                     this.dispatchEvent("loaded");
                 } else {
-                    var self = this
+                    var self = this;
+                    //会覆盖onload方法
                     source.onload = function () {
                         self._sourceChange(source);
                         self.dispatchEvent("loaded");
@@ -212,7 +208,7 @@ export default class BaseTexture extends EventDispatcher {
 
     //辅助静态方法
     /**
-     * 根据路径
+     * 根据路径，会缓存baseTexture
      * @param {string} url  路径
      */
     static fromUrl(url: string) {
@@ -237,7 +233,7 @@ export default class BaseTexture extends EventDispatcher {
     }
 
     /**
-     * 从离屏canvas创建的
+     * 从离屏canvas创建的，会给canvas加唯一标识_canvasId，并缓存
      */
     static fromCanvas(canvas: HTMLCanvasElement, origin: string = 'canvas') {
         //标记canvasId
@@ -266,7 +262,11 @@ export default class BaseTexture extends EventDispatcher {
         }
         return baseTexture;
     }
-    //不包括data形式，data用
+    /**
+     * 所有形式，图片路径，canvas标签，图片标签，或者数据
+     * @param anything 
+     * @returns 
+     */
     static from(anything: string | HTMLCanvasElement | HTMLImageElement) {
         //路径
         if (typeof anything === 'string') {
@@ -287,7 +287,7 @@ export default class BaseTexture extends EventDispatcher {
     }
 
     /**
-     * 加入缓存
+     * 加入全局基础纹理缓存
      * @static
      * @param {BaseTexture} baseTexture
      * @param {string} id
@@ -300,7 +300,7 @@ export default class BaseTexture extends EventDispatcher {
 
             if (BaseTextureCache[id]) {
                 //覆盖
-                console.warn(`BaseTexture added to the cache with an id [${id}] that already had an entry`);
+                console.warn(`id为${id}的基础纹理已存在，即将覆盖`);
             }
             BaseTextureCache[id] = baseTexture;
         }
@@ -312,7 +312,7 @@ export default class BaseTexture extends EventDispatcher {
      * @param {string|BaseTexture} baseTexture id或者BaseTexture
      * @return {BaseTexture|null} 移除的BaseTexture或null
      */
-    static removeFromCache(baseTexture: string | BaseTexture): BaseTexture | null {
+    static removeFromCache(baseTexture: string | BaseTexture): BaseTexture {
         if (typeof baseTexture === 'string') {
             const baseTextureFromCache = BaseTextureCache[baseTexture];
             if (baseTextureFromCache) {

src/2d/texture/RenderTexture.ts

@@ -4,46 +4,34 @@ import { Rectangle } from '../math';
 import { SCALE_MODES } from '../const';
 
 /**
- * A RenderTexture is a special texture that allows any display object to be rendered to it.
- *
- * __Hint__: All DisplayObjects (i.e. Sprites) that render to a RenderTexture should be preloaded
- * otherwise black rectangles will be drawn instead.
- *
- * A RenderTexture takes a snapshot of any Display Object given to its render method. For example:
+ * 将显示对象画在上面的贴图，就是快照
+ * 注意绘制前纹理加载完成
+ * For example:
  *
  * ```js
- * let renderer = autoDetectRenderer(1024, 1024, { view: canvas, ratio: 1 });
+ * let renderer = CanvasRenderer(1024, 1024);
  * let renderTexture = RenderTexture.create(800, 600);
- * let sprite = Sprite.fromImage("spinObj_01.png");
- *
- * sprite.position.x = 800/2;
- * sprite.position.y = 600/2;
- * sprite.anchorTexture.x = 0.5;
- * sprite.anchorTexture.y = 0.5;
+ * let sprite = Sprite.fromImage("aaa.png");
+ * 
+ * sprite.x = 800/2;
+ * sprite.y = 600/2;
+ * sprite.anchorTexture.set(0.5,0.5);
+ * //sprite.setTransform();会重置属性
  *
  * renderer.render(sprite, renderTexture);
  * ```
  *
- * The Sprite in this case will be rendered using its local transform. To render this sprite at 0,0
- * you can clear the transform
- *
- * ```js
- *
- * sprite.setTransform()
- *
- * let renderTexture = new RenderTexture.create(100, 100);
- *
- * renderer.render(sprite, renderTexture);  // Renders to center of RenderTexture
- * ```
- *
  * @class
  * @extends Texture
  */
 export default class RenderTexture extends Texture {
+    /**
+     * 它的基础纹理变成了BaseRenderTexture
+     */
     baseTexture: BaseRenderTexture
     /**
-     * @param {BaseRenderTexture} baseRenderTexture - The renderer used for this RenderTexture
-     * @param {Rectangle} [frame] - The rectangle frame of the texture to show
+     * @param {BaseRenderTexture} baseRenderTexture
+     * @param {Rectangle} [frame]
      */
     constructor(baseRenderTexture: BaseRenderTexture, frame?: Rectangle) {
 
@@ -58,11 +46,10 @@ export default class RenderTexture extends Texture {
     }
 
     /**
-     * Resizes the RenderTexture.
-     *
-     * @param {number} width - The width to resize to.
-     * @param {number} height - The height to resize to.
-     * @param {boolean} doNotResizeBaseTexture - Should the baseTexture.width and height values be resized as well?
+     * 重置尺寸
+     * @param {number} width - 宽度
+     * @param {number} height - 高度
+     * @param {boolean} doNotResizeBaseTexture - 是否不重置基础纹理的尺寸，默认false，表示也重置
      */
     resize(width: number, height: number, doNotResizeBaseTexture: boolean = false) {
         width = Math.ceil(width);
@@ -82,12 +69,11 @@ export default class RenderTexture extends Texture {
     }
 
     /**
-     * A short hand way of creating a render texture.
-     *
-     * @param {number} [width=100] - The width of the render texture
-     * @param {number} [height=100] - The height of the render texture
-     * @param {number} [scaleMode=settings.SCALE_MODE] - See {@link SCALE_MODES} for possible values
-     * @return {RenderTexture} The new render texture
+     * 创建renderTexture快捷静态方法
+     * @param {number} [width=100] - 宽度
+     * @param {number} [height=100] - 高度
+     * @param {number} [scaleMode=settings.SCALE_MODE] - {@link SCALE_MODES}
+     * @return {RenderTexture}
      */
     static create(width: number, height: number, scaleMode: number = SCALE_MODES.LINEAR): RenderTexture {
         return new RenderTexture(new BaseRenderTexture(width, height, scaleMode));

src/2d/texture/Texture.ts

@@ -3,7 +3,7 @@ import TextureUvs from './TextureUvs';
 import { EventDispatcher } from '../events/EventDispatcher';
 import { Event } from "../events/Event";
 import { Rectangle, Point } from '../math';
-import { TextureCache } from '../utils';
+import { createCanvas, TextureCache } from '../utils';
 import { SCALE_MODES } from '../const';
 import TextureMatrix from './TextureMatrix';
 
@@ -105,7 +105,6 @@ export default class Texture extends EventDispatcher {
      * @param {Rectangle} [trim] - Trimmed rectangle of original texture
      * @param {number} [rotate] - indicates how the texture was rotated by texture packer. See {@link GroupD8}
      * @param {Point} [anchor] - Default anchor point used for sprite placement / rotation
-     * 暂时不需要rotate
      */
     constructor(
         baseTexture: BaseTexture | Texture,
@@ -267,8 +266,7 @@ export default class Texture extends EventDispatcher {
     }
 
     /**
-     * 
-     * Updates the internal WebGL UV cache. Use it after you change `frame` or `trim` of the texture.
+     * 更新uv，比如在frame改变或trim改变之后
      */
     updateUvs() {
         if (!this._uvs) this._uvs = new TextureUvs();
@@ -278,8 +276,7 @@ export default class Texture extends EventDispatcher {
 
     /**
       * The frame specifies the region of the base texture that this texture uses.
-      * Please call `updateUvs()` after you change coordinates of `frame` manually.
-      *
+      * 手动修改frame时，而不是set赋值，比如frame.x=111,frame.width=333,需要手动调用updateUvs，不推荐这种方式修改
       * @member {Rectangle}
       */
     get frame() {
@@ -335,9 +332,7 @@ export default class Texture extends EventDispatcher {
     }
 
     /**
-     * 宽高都是贴图真实的宽高，不管trim
-     * The width of the Texture in pixels.
-     *
+     * 宽高都是纹理真实的宽高，不管trim
      * @member {number}
      */
     get width() {
@@ -345,8 +340,7 @@ export default class Texture extends EventDispatcher {
     }
 
     /**
-     * The height of the Texture in pixels.
-     *
+     * 宽高都是纹理真实的宽高，不管trim
      * @member {number}
      */
     get height() {
@@ -355,7 +349,7 @@ export default class Texture extends EventDispatcher {
 
     //辅助方法
     /**
-     * 会缓存
+     * 会缓存进全局纹理
      * @param {string} url 
      */
     static fromUrl(url: string) {
@@ -384,7 +378,11 @@ export default class Texture extends EventDispatcher {
         }
         return texture;
     }
-    //不包括data形式
+    /**
+     * 图片路径，canvas标签，图片标签，图片数据
+     * @param anything 
+     * @returns 
+     */
     static from(anything: string | HTMLCanvasElement | HTMLImageElement) {
         //路径
         if (typeof anything === 'string') {
@@ -405,10 +403,10 @@ export default class Texture extends EventDispatcher {
     }
 
     /**
-     * 加入全局缓存，TextureCache[name]调用
+     * 加入全局纹理缓存，TextureCache[name]调用
      * @static
-     * @param {Texture} texture - The Texture to add to the cache.
-     * @param {string} id - The id that the Texture will be stored against.
+     * @param {Texture} texture
+     * @param {string} id
      */
     static addToCache(texture: Texture, id: string) {
         if (id) {
@@ -417,7 +415,7 @@ export default class Texture extends EventDispatcher {
             }
             if (TextureCache[id]) {
                 //覆盖
-                console.warn(`Texture added to the cache with an id [${id}] that already had an entry`);
+                console.warn(`id为${id}的纹理已存在，即将覆盖`);
             }
             TextureCache[id] = texture;
         }
@@ -426,8 +424,8 @@ export default class Texture extends EventDispatcher {
     /**
      * 从全局缓存中移除
      * @static
-     * @param {string|Texture} texture - id of a Texture to be removed, or a Texture instance itself
-     * @return {Texture|null} The Texture that was removed
+     * @param {string|Texture} texture - 纹理的id或纹理自身
+     * @return {Texture} 返回移除的纹理
      */
     static removeFromCache(texture: any): Texture {
         if (typeof texture === 'string') {
@@ -462,7 +460,7 @@ export default class Texture extends EventDispatcher {
     }
 }
 
-//将事件置空
+//将事件置空，空纹理或白纹理不需要响应任何加载或更新事件
 function removeAllHandlers(tex) {
     tex.destroy = function _emptyDestroy() { /* empty */ };
     tex.addEventListener = function _emptyOn() { /* empty */ };
@@ -479,29 +477,43 @@ Texture.EMPTY = new Texture(new BaseTexture());
 removeAllHandlers(Texture.EMPTY);
 removeAllHandlers(Texture.EMPTY.baseTexture);
 
-/**
- * 16*16的数据
- */
-const whiteSource = {
-    data: (function () {
-        var arr = []
-        for (var i = 0; i < 16 * 16 * 4; i++) {
-            arr.push(255);
-        }
-        return new Uint8Array(arr)
-    })(),
-    width: 16,
-    height: 16,
-    type: null,
-    path: null
-}
-
-/**
- * 白色纹理，几何形状的纹理16*16
- * 仅用于webgl模式的Graphics
- * @static
- * @constant
- */
-Texture.WHITE = new Texture(new BaseTexture(whiteSource));
+// /**
+//  * 16*16的数据
+//  */
+// const whiteSource = {
+//     data: (function () {
+//         var arr = []
+//         for (var i = 0; i < 16 * 16 * 4; i++) {
+//             arr.push(255);
+//         }
+//         return new Uint8Array(arr)
+//     })(),
+//     width: 16,
+//     height: 16,
+//     type: null,
+//     path: null
+// }
+
+// /**
+//  * 白色纹理，几何形状的纹理16*16
+//  * 仅用于webgl模式的Graphics
+//  * @static
+//  * @constant
+//  */
+// Texture.WHITE = new Texture(new BaseTexture(whiteSource));
+// removeAllHandlers(Texture.WHITE);
+// removeAllHandlers(Texture.WHITE.baseTexture);
+
+//用离屏canvas，否则canvas渲染模式用不了
+Texture.WHITE = (() => {
+    const canvas = createCanvas();
+    canvas.width = 16;
+    canvas.height = 16;
+    const context = canvas.getContext('2d');
+    context.clearRect(0, 0, 16, 16);//淘宝小程序的问题，必须先调用过clearRect，否则有几率绘制无效
+    context.fillStyle = 'white';//淘宝小程序待测试
+    context.fillRect(0, 0, 16, 16);
+    return new Texture(new BaseTexture(canvas));
+})();
 removeAllHandlers(Texture.WHITE);
-removeAllHandlers(Texture.WHITE.baseTexture);
+removeAllHandlers(Texture.WHITE.baseTexture);
\ No newline at end of file

src/2d/texture/createTextureSheet.ts

@@ -21,8 +21,8 @@ var expData = {
 
 /**
  * 
- * @param baseTexture 
- * @param altaData 
+ * @param {BaseTexture} baseTexture 
+ * @param {dataTm} altaData 
  * @return 返回贴图集。不常用
  */
 export function createTextureSheet(baseTexture: BaseTexture, altaData): { [key: string]: Texture } {

src/2d/texture/index.ts

@@ -2,4 +2,6 @@ export { default as Texture } from "./Texture";
 
 export { default as BaseTexture } from "./BaseTexture";
 
-export * from "./createTextureSheet";
\ No newline at end of file
+export * from "./createTextureSheet";
+
+export { default as RenderTexture } from "./RenderTexture";
\ No newline at end of file

src/2d/ui/ScrollPage.ts

@@ -168,8 +168,8 @@ export class ScrollPage extends Container {
         if (!isFull) {
             //不全屏才设置mask
             s.view.mask = s.maskObj;
-            //为了能接收鼠标事件设置isUsedToMask
-            s.maskObj.isUsedToMask = false;
+            //为了能接收鼠标事件设置_isUsedToMask
+            s.maskObj._isUsedToMask = false;
         }
         s.maskObj.alpha = 0;
         s.maxDistance = maxDistance;
@@ -244,6 +244,7 @@ export class ScrollPage extends Container {
                                 } else {
                                     s.dispatchEvent(Event.SCROLL_TO_HEAD);
                                 }
+                                s.addSpeed = 0;
                             }
                         }
                     } else {
@@ -353,6 +354,7 @@ export class ScrollPage extends Container {
             s.lastValue = currentValue;
             s.stopTimes = 0;
         } else {
+            if (!s.isMouseDownState) return;//先不加，讲道理需要，否则stage的up事件会触发这里，使得isStop改变
             s.isStop = false;
             s.stopTimes = -1;
             if (s.speed == 0 && s.isMouseDownState == 2) {

src/2d/ui/ShowWord.ts

-
-import { TextField } from "../text/TextField";
-
-/**
- * 文字一个一个出现
- */
-export class ShowWord extends TextField {
-    /**
-     * 
-     * @param text 文本 例子：这里是生命值，闯关失败后\n都会扣除一点生命值
-     * @param deltaTime 文字间隔时间，毫秒计
-     * @param callback 播放完后的回调
-     */
-    playWords(text: string, deltaTime: number = 100, callback?: Function) {
-        var spiltStrs = text.split("\n");
-        //拆分文本
-        let strs: string[] = []
-        for (var i = 0; i < spiltStrs.length; i++) {
-            var spiltStr: string = spiltStrs[i];
-            var ori: string = "";
-            var index = 0;
-            while (index < i) {
-                ori += spiltStrs[index];
-                ori += "\n";
-                index++;
-            }
-            for (var j = 0; j < spiltStr.length; j++) {
-                var str = "" + ori;
-                str += spiltStr.substring(0, j + 1)
-                strs.push(str)
-            }
-        }
-        // console.log(strs)
-        //轮流替换文本
-        for (let m = 0; m < strs.length; m++) {
-            let str = strs[m];
-            setTimeout(() => {
-                this.text = str;
-                if (m == strs.length - 1) {
-                    callback && callback();
-                }
-            }, deltaTime * m)
-        }
-    }
-}
\ No newline at end of file

src/2d/ui/index.ts

@@ -2,7 +2,6 @@ export * from "./Button";
 export * from "./FrameAni";
 export * from "./ScrollPage";
 export * from "./ScrollList";
-export * from "./ShowWord";
 
 export * from "./MovieClip";
 

src/2d/utils/index.ts

 /**
- * 记录的一些方法和设置
+ * 记录的一些方法和设置，还有index都是会往引擎导的，所以内部方法尽量不导
  */
 
 import { RENDERER_TYPE } from "../const";
-import { mapPremultipliedBlendModes } from "./mapPremultipliedBlendModes";
+// import { mapPremultipliedBlendModes } from "./mapPremultipliedBlendModes";
 import { createCanvas, getEnv } from "./tbminiAdapte";
 
 export * from './twiddle';
 export { default as toDisplayDataURL } from "./toDisplayDataURL";
 
-export * from "./getTintedTexture";
-export * from "./mapWebGLBlendModes";
-export * from "./mapCanvasBlendModes";
+// export * from "./getTintedTexture";//外部用不到
+// export * from "./mapWebGLBlendModes";//只在webglState里使用一次，外部用不到
+// export * from "./mapCanvasBlendModes";//只在canvasRenderer里使用一次，外部用不到
 
 // export * from "./DrawAllToCanvas";
 
 export * from "./tbminiAdapte";
-
-export const premultiplyBlendMode = mapPremultipliedBlendModes();
+//在mapPremultipliedBlendModes文件内自行导出，以防在引擎外暴露
+// export const premultiplyBlendMode = mapPremultipliedBlendModes();
 
 let nextUid = 0;
 
@@ -151,6 +151,7 @@ export function getRGBA(color: string, alpha: number): string {
     return color;
 }
 
+/////////////uri解析基本用不到，考虑沉淀到其他地方后废弃decomposeDataUri
 /**
  * Regexp for data URI.
  * Based on: {@link https://github.com/ragingwind/data-uri-regex}
@@ -183,6 +184,7 @@ export function decomposeDataUri(dataUri) {
     return undefined;
 }
 
+//路劲后缀名解析基本用不到，考虑沉淀到其他地方后废弃getUrlFileExtension
 /**
  * Regexp for image type by extension.
  *
@@ -295,7 +297,7 @@ export function clearTextureCache() {
 }
 
 /**
- * 用于记录引擎全局属性记录，暂时没用到
+ * 用于记录引擎全局属性记录，暂时没用到，考虑废弃
  * 除了引擎内部修改赋值，外部仅供读取
  */
 export const GlobalPro = {

src/2d/utils/mapPremultipliedBlendModes.ts

 import { BLEND_MODES } from "../const";
 
 /**
- * Corrects blend, takes premultiplied alpha into account
- *
+ * 矫正混色模式，因为有预乘alpha的
  * @private
  * @return {Array<number[]>} Mapped modes.
  */
-export function mapPremultipliedBlendModes() {
+function mapPremultipliedBlendModes() {
     var pm = [];
     var npm = [];
 
@@ -30,4 +29,6 @@ export function mapPremultipliedBlendModes() {
     array.push(pm);
 
     return array;
-}
\ No newline at end of file
+}
+//导出矫正后的
+export const premultiplyBlendMode = mapPremultipliedBlendModes();
\ No newline at end of file

src/2d/utils/tbminiAdapte.ts

 
 
+// let env: "tb" | "web" = "web";
+// //如果是浏览器环境，声明个my为null，为了无声明不报错
+// if (window) window["my"] = null;//在用webview的小程序环境内，只要在小程序的sdk前加js就无所谓，
+// export function getEnv(): "tb" | "web" {
+//     return env
+// }
+// /**
+//  * 创建一个离屏的canvas
+//  */
+// export function createCanvas(): HTMLCanvasElement {
+//     //@ts-ignore
+//     return document && document.createElement("canvas") || my._createOffscreenCanvas();
+// }
+
+// let contentByCanvas: {
+//     createImage: () => HTMLImageElement,
+//     requestAnimationFrame: (fun: Function) => number,
+//     cancelAnimationFrame: (id) => void,
+// };
+// /**
+//  * 淘宝小程序项目，拿到canvas先执行这个,,,TODO为啥不直接记录canvas.也许有问题,暂时不改
+//  * @param canvas 
+//  */
+// export function initedByCanvas(canvas) {
+//     contentByCanvas = {
+//         createImage: canvas.createImage.bind(canvas),
+//         //必须加bind，函数内存在this指向
+//         requestAnimationFrame: canvas.requestAnimationFrame.bind(canvas),
+//         cancelAnimationFrame: canvas.cancelAnimationFrame.bind(canvas),
+//     }
+//     env = "tb";
+// }
+// export function destroyCanvasContent() {
+//     if (contentByCanvas) {
+//         contentByCanvas.createImage = null;
+//         contentByCanvas.requestAnimationFrame = null;
+//         contentByCanvas.cancelAnimationFrame = null;
+//         contentByCanvas = null
+//     }
+// }
+
+// export function createImage() {
+//     return contentByCanvas && contentByCanvas.createImage() || new Image();
+// }
+// //下面两个尽量自己外层写循环，不用这里的，因为淘宝小程序不同page用了canvas，最好都用各自的requestAnimationFrame，不相互覆盖
+// export function getRequestAnimationFrame() {
+//     return contentByCanvas && contentByCanvas.requestAnimationFrame || window.requestAnimationFrame.bind(window)
+// }
+// export function getCancelAnimationFrame() {
+//     return contentByCanvas && contentByCanvas.cancelAnimationFrame || window.cancelAnimationFrame.bind(window)
+// }
+
+//TODO上面所有的以后考虑这么些写,待测试
 let env: "tb" | "web" = "web";
 //如果是浏览器环境，声明个my为null，为了无声明不报错
 if (window) window["my"] = null;//在用webview的小程序环境内，只要在小程序的sdk前加js就无所谓，
 export function getEnv(): "tb" | "web" {
     return env
 }
+/**
+ * 设置运行环境，一般不需要调用，预留
+ * 方法initedByTbCanvas会自行设置env为tb
+ * @param e 环境
+ */
+export function setEnv(e: "tb" | "web") {
+    env = e;
+}
 /**
  * 创建一个离屏的canvas
  */
 export function createCanvas(): HTMLCanvasElement {
+    //web环境
+    if (getEnv() == "web") return document.createElement("canvas");
     //@ts-ignore
-    return document && document.createElement("canvas") || my._createOffscreenCanvas();
+    if (getEnv() == "tb") return my._createOffscreenCanvas();
+    //提示下
+    console.warn("未知环境，创建canvas失败")
 }
-
-let contentByCanvas: {
-    createImage: () => HTMLImageElement,
-    requestAnimationFrame: (fun: Function) => number,
-    cancelAnimationFrame: (id) => void,
-};
 /**
- * 淘宝小程序项目，拿到canvas先执行这个,,,TODO为啥不直接记录canvas.也许有问题,暂时不改
+ * 临时记录的淘宝小程序的主canvas
+ */
+let tbCanvas;
+/**
+ * 淘宝小程序项目，拿到canvas先执行这个,修改当前环境
  * @param canvas 
  */
+export function initedByTbCanvas(canvas) {
+    tbCanvas = canvas;
+    setEnv("tb");
+}
+//兼容老版本，TODO废弃
 export function initedByCanvas(canvas) {
-    contentByCanvas = {
-        createImage: canvas.createImage.bind(canvas),
-        //必须加bind，函数内存在this指向
-        requestAnimationFrame: canvas.requestAnimationFrame.bind(canvas),
-        cancelAnimationFrame: canvas.cancelAnimationFrame.bind(canvas),
-    }
-    env = "tb";
+    console.warn("方法initedByCanvas即将废弃，请使用方法initedByTbCanvas代替")
+    initedByTbCanvas(canvas)
+}
+/**
+ * 销毁记录的tbCanvas，一般也没必要执行，
+ * 尤其多页面的淘宝小程序，销毁的话，createImage会有问题
+ */
+export function destroyTbCanvas() {
+    tbCanvas = null;
 }
+//兼容老版本，TODO废弃
 export function destroyCanvasContent() {
-    if (contentByCanvas) {
-        contentByCanvas.createImage = null;
-        contentByCanvas.requestAnimationFrame = null;
-        contentByCanvas.cancelAnimationFrame = null;
-        contentByCanvas = null
-    }
+    console.warn("方法destroyCanvasContent即将废弃，请使用方法destroyTbCanvas代替")
+    destroyTbCanvas();
 }
 
-export function createImage() {
-    return contentByCanvas && contentByCanvas.createImage() || new Image();
+/**
+ * 返回图片
+ * @returns 
+ */
+export function createImage(): HTMLImageElement {
+    if (getEnv() == "web") return new Image();
+    if (getEnv() == "tb") {
+        if (tbCanvas) return tbCanvas.createImage();
+        console.warn("淘宝小程序初始化canvas不存在");
+    }
+    console.warn("未知环境，创建Image失败")
 }
-//下面两个尽量自己外层写循环，不用这里的，因为淘宝小程序不同page用了canvas，最好都用各自的requestAnimationFrame，不相互覆盖
-export function getRequestAnimationFrame() {
-    return contentByCanvas && contentByCanvas.requestAnimationFrame || window.requestAnimationFrame.bind(window)
+/**
+ * 尽量外部自行调用循环，不用引擎给的，即将废弃
+ * @param callback 
+ * @returns 
+ */
+export function requestAnimationFrame(callback) {
+    //直接用window的
+    if (getEnv() == "web") return window.requestAnimationFrame(callback);
+    //淘宝小程序环境
+    if (getEnv() == "tb") {
+        if (tbCanvas) return tbCanvas.requestAnimationFrame(callback);
+        console.warn("淘宝小程序初始化canvas不存在");
+    }
+    console.warn("未知环境，requestAnimationFrame调用无效")
 }
-export function getCancelAnimationFrame() {
-    return contentByCanvas && contentByCanvas.cancelAnimationFrame || window.cancelAnimationFrame.bind(window)
+export function cancelAnimationFrame(id: number) {
+    if (getEnv() == "web") {
+        window.cancelAnimationFrame(id);
+        return;
+    }
+    //淘宝小程序环境
+    else if (getEnv() == "tb") {
+        if (tbCanvas) {
+            tbCanvas.cancelAnimationFrame(id);
+            return;
+        }
+        console.warn("淘宝小程序初始化canvas不存在");
+    }
+    console.warn("未知环境，cancelAnimationFrame调用无效")
 }
 
-//TODO上面所有的以后考虑这么些写,待测试
-// let env: "tb" | "web" = "web";
-// //如果是浏览器环境，声明个my为null，为了无声明不报错
-// if (window) window["my"] = null;//在用webview的小程序环境内，只要在小程序的sdk前加js就无所谓，
-// export function getEnv(): "tb" | "web" {
-//     return env
-// }
-// /**
-//  * 创建一个离屏的canvas
-//  */
-// export function createCanvas(): HTMLCanvasElement {
-//     //@ts-ignore
-//     return getEnv() == "web" && document.createElement("canvas") || my._createOffscreenCanvas();
-// }
-// /**
-//  * 临时记录的淘宝小程序的主canvas
-//  */
-// let tbCanvas;
-// /**
-//  * 淘宝小程序项目，拿到canvas先执行这个,修改当前环境
-//  * @param canvas 
-//  */
-// export function initedByCanvas(canvas) {
-//     tbCanvas = canvas;
-//     env = "tb";
-// }
-// export function destroyCanvasContent() {
-//     tbCanvas = null;
-// }
-// export function createImage(): HTMLImageElement {
-//     return tbCanvas && tbCanvas.createImage() || new Image();
-// }
-// export function requestAnimationFrame(callback) {
-//     return tbCanvas && tbCanvas.requestAnimationFrame(callback) || window.requestAnimationFrame(callback)
-// }
-// export function cancelAnimationFrame(id: number) {
-//     return tbCanvas && tbCanvas.cancelAnimationFrame(id) || window.cancelAnimationFrame(id)
-// }
+//老版本使用提示，TODO废弃
+export function getRequestAnimationFrame() {
+    console.error("requestAnimationFrame,cancelAnimationFrame统统外部自行调用，引擎内不给方法，淘宝小程序在canvas上，web环境在window上")
+}
\ No newline at end of file

src/3d/Geometry.ts

@@ -89,7 +89,11 @@ export class Geometry extends HashObject {
 
         this._vertices = vertices;
         this._normals = normals || new Float32Array(vertices.length);
-        this._colors = colors || new Float32Array(vertices.length).map(() => { return 1 });//不传就全是白色
+        this._colors = colors || (() => {
+            var f = new Float32Array(vertices.length);
+            for (var i = 0; i < vertices.length; i++)f[i] = 1;
+            return f;
+        })()//new Float32Array(vertices.length).map(() => { return 1 });//不传就全是白色
         this._uvs = uvs || new Float32Array(vertices.length / 3 * 2);
         //索引直接用，可能没有
         this._indices = indices ? new Uint16Array(indices) : null;
@@ -184,103 +188,76 @@ export interface VaoBufferInt {
 }
 
 
-var vertices = new Float32Array([
-    2.0, 2.0, 2.0, -2.0, 2.0, 2.0, -2.0, -2.0, 2.0, 2.0, -2.0, 2.0, // v0-v1-v2-v3 front
-    2.0, 2.0, 2.0, 2.0, -2.0, 2.0, 2.0, -2.0, -2.0, 2.0, 2.0, -2.0, // v0-v3-v4-v5 right
-    2.0, 2.0, 2.0, 2.0, 2.0, -2.0, -2.0, 2.0, -2.0, -2.0, 2.0, 2.0, // v0-v5-v6-v1 up
-    -2.0, 2.0, 2.0, -2.0, 2.0, -2.0, -2.0, -2.0, -2.0, -2.0, -2.0, 2.0, // v1-v6-v7-v2 left
-    -2.0, -2.0, -2.0, 2.0, -2.0, -2.0, 2.0, -2.0, 2.0, -2.0, -2.0, 2.0, // v7-v4-v3-v2 down
-    2.0, -2.0, -2.0, -2.0, -2.0, -2.0, -2.0, 2.0, -2.0, 2.0, 2.0, -2.0  // v4-v7-v6-v5 back
-]);
-
-var colors = new Float32Array([    // Colors
-    1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0,     // v0-v1-v2-v3 front
-    1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0,     // v0-v3-v4-v5 right
-    1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0,     // v0-v5-v6-v1 up
-    1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0,     // v1-v6-v7-v2 left
-    1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0,     // v7-v4-v3-v2 down
-    1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0　    // v4-v7-v6-v5 back
-]);
-colors = colors.map(() => {
-    return 1
-})
-
-var normals = new Float32Array([    // Normal
-    0.0, 0.0, 1.0, 0.0, 0.0, 1.0, 0.0, 0.0, 1.0, 0.0, 0.0, 1.0,  // v0-v1-v2-v3 front
-    1.0, 0.0, 0.0, 1.0, 0.0, 0.0, 1.0, 0.0, 0.0, 1.0, 0.0, 0.0,  // v0-v3-v4-v5 right
-    0.0, 1.0, 0.0, 0.0, 1.0, 0.0, 0.0, 1.0, 0.0, 0.0, 1.0, 0.0,  // v0-v5-v6-v1 up
-    -1.0, 0.0, 0.0, -1.0, 0.0, 0.0, -1.0, 0.0, 0.0, -1.0, 0.0, 0.0,  // v1-v6-v7-v2 left
-    0.0, -1.0, 0.0, 0.0, -1.0, 0.0, 0.0, -1.0, 0.0, 0.0, -1.0, 0.0,  // v7-v4-v3-v2 down
-    0.0, 0.0, -1.0, 0.0, 0.0, -1.0, 0.0, 0.0, -1.0, 0.0, 0.0, -1.0   // v4-v7-v6-v5 back
-]);
-
-var uvs = new Float32Array([
-    1.0, 1.0,
-    0.0, 1.0,
-    0.0, 0.0,
-    1.0, 0.0,
-
-    1.0, 1.0,
-    0.0, 1.0,
-    0.0, 0.0,
-    1.0, 0.0,
-
-    1.0, 1.0,
-    0.0, 1.0,
-    0.0, 0.0,
-    1.0, 0.0,
-
-    1.0, 1.0,
-    0.0, 1.0,
-    0.0, 0.0,
-    1.0, 0.0,
-
-    1.0, 1.0,
-    0.0, 1.0,
-    0.0, 0.0,
-    1.0, 0.0,
-
-    1.0, 1.0,
-    0.0, 1.0,
-    0.0, 0.0,
-    1.0, 0.0,
-]);
-
-var indices = new Uint16Array([       // Indices of the vertices
-    0, 1, 2, 0, 2, 3,    // front
-    4, 5, 6, 4, 6, 7,    // right
-    8, 9, 10, 8, 10, 11,    // up
-    12, 13, 14, 12, 14, 15,    // left
-    16, 17, 18, 16, 18, 19,    // down
-    20, 21, 22, 20, 22, 23     // back
-]);
-
-
-// function createNineTextures(imageUrl: string): Promise<FYGE.Texture[]> {
-//     return new Promise((resolve, reject) => {
-//         let image = new Image();
-//         image.onload = function () {
-//             var obj = {}
-//             //名字。
-//             var name = "lalala";
-//             var w = image.width / 3;
-//             var h = image.height / 3;
-//             //生成9张图的数据
-//             for (var i = 0; i < 9; i++)
-//                 obj[name + i] = {
-//                     "x": i % 3 * w,
-//                     "y": ~~(i / 3) * h,
-//                     w, h, sw: w, sh: h, ox: 0, oy: 0, ro: false
-//                 };
-//             var textures = FYGE.createTextureSheet(new FYGE.BaseTexture(image), obj);
-//             //取TextureCache里的
-//             var arr = [];
-//             for (var i = 0; i < 9; i++)arr.push(textures[name + i])
-//             resolve(arr)
-//         }
-//         image.onerror = function () {
-//             reject()
-//         }
-//         image.src = imageUrl
-//     })
-// }
+// var vertices = new Float32Array([
+//     2.0, 2.0, 2.0, -2.0, 2.0, 2.0, -2.0, -2.0, 2.0, 2.0, -2.0, 2.0, // v0-v1-v2-v3 front
+//     2.0, 2.0, 2.0, 2.0, -2.0, 2.0, 2.0, -2.0, -2.0, 2.0, 2.0, -2.0, // v0-v3-v4-v5 right
+//     2.0, 2.0, 2.0, 2.0, 2.0, -2.0, -2.0, 2.0, -2.0, -2.0, 2.0, 2.0, // v0-v5-v6-v1 up
+//     -2.0, 2.0, 2.0, -2.0, 2.0, -2.0, -2.0, -2.0, -2.0, -2.0, -2.0, 2.0, // v1-v6-v7-v2 left
+//     -2.0, -2.0, -2.0, 2.0, -2.0, -2.0, 2.0, -2.0, 2.0, -2.0, -2.0, 2.0, // v7-v4-v3-v2 down
+//     2.0, -2.0, -2.0, -2.0, -2.0, -2.0, -2.0, 2.0, -2.0, 2.0, 2.0, -2.0  // v4-v7-v6-v5 back
+// ]);
+
+// var colors = new Float32Array([    // Colors
+//     1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0,     // v0-v1-v2-v3 front
+//     1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0,     // v0-v3-v4-v5 right
+//     1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0,     // v0-v5-v6-v1 up
+//     1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0,     // v1-v6-v7-v2 left
+//     1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0,     // v7-v4-v3-v2 down
+//     1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0　    // v4-v7-v6-v5 back
+// ]);
+// colors = colors.map(() => {
+//     return 1
+// })
+
+// var normals = new Float32Array([    // Normal
+//     0.0, 0.0, 1.0, 0.0, 0.0, 1.0, 0.0, 0.0, 1.0, 0.0, 0.0, 1.0,  // v0-v1-v2-v3 front
+//     1.0, 0.0, 0.0, 1.0, 0.0, 0.0, 1.0, 0.0, 0.0, 1.0, 0.0, 0.0,  // v0-v3-v4-v5 right
+//     0.0, 1.0, 0.0, 0.0, 1.0, 0.0, 0.0, 1.0, 0.0, 0.0, 1.0, 0.0,  // v0-v5-v6-v1 up
+//     -1.0, 0.0, 0.0, -1.0, 0.0, 0.0, -1.0, 0.0, 0.0, -1.0, 0.0, 0.0,  // v1-v6-v7-v2 left
+//     0.0, -1.0, 0.0, 0.0, -1.0, 0.0, 0.0, -1.0, 0.0, 0.0, -1.0, 0.0,  // v7-v4-v3-v2 down
+//     0.0, 0.0, -1.0, 0.0, 0.0, -1.0, 0.0, 0.0, -1.0, 0.0, 0.0, -1.0   // v4-v7-v6-v5 back
+// ]);
+
+// var uvs = new Float32Array([
+//     1.0, 1.0,
+//     0.0, 1.0,
+//     0.0, 0.0,
+//     1.0, 0.0,
+
+//     1.0, 1.0,
+//     0.0, 1.0,
+//     0.0, 0.0,
+//     1.0, 0.0,
+
+//     1.0, 1.0,
+//     0.0, 1.0,
+//     0.0, 0.0,
+//     1.0, 0.0,
+
+//     1.0, 1.0,
+//     0.0, 1.0,
+//     0.0, 0.0,
+//     1.0, 0.0,
+
+//     1.0, 1.0,
+//     0.0, 1.0,
+//     0.0, 0.0,
+//     1.0, 0.0,
+
+//     1.0, 1.0,
+//     0.0, 1.0,
+//     0.0, 0.0,
+//     1.0, 0.0,
+// ]);
+
+// var indices = new Uint16Array([       // Indices of the vertices
+//     0, 1, 2, 0, 2, 3,    // front
+//     4, 5, 6, 4, 6, 7,    // right
+//     8, 9, 10, 8, 10, 11,    // up
+//     12, 13, 14, 12, 14, 15,    // left
+//     16, 17, 18, 16, 18, 19,    // down
+//     20, 21, 22, 20, 22, 23     // back
+// ]);
+
+
+

src/index.ts

@@ -21,16 +21,12 @@ export * from "./2d/renderers/WebglRenderer";
 
 export * from "./2d/text";
 
-
 export * from "./2d/texture";
 
 export * from "./2d/ui";
 
 export * from "./2d/utils";
 
-//音频不用这个，到时外部弄个库
-// export * from "./sound"
-
 export * from "./tween";
 
 //3D

src/sound/index.ts

-
-export { SoundChannel } from "./SoundChannel"
-export { Sound } from "./Sound"
\ No newline at end of file

src/spine/Spine.ts

@@ -420,7 +420,7 @@ export class Spine extends Container {
                         slot.currentMeshName = attachment.name;
                         slot.addChild(mesh);
                     }
-                    // else if (attachment instanceof pixi_spine.core.ClippingAttachment) {
+                    // else if (attachment instanceof ClippingAttachment) {
                     //     _this.createGraphics(slot, attachment);
                     //     slotContainer.addChild(slot.clippingContainer);
                     //     slotContainer.addChild(slot.currentGraphics);

src/spine/SpineAniManager.ts

@@ -40,7 +40,9 @@ export class SpineAniClip extends AnimationClip {
 export class SpineAniManager extends AnimationManager {
     currentClip: SpineAniClip
     /**
-     * 
+     * 切换动画
+     * 有切换闪帧问题时尝试setTimeout延时0后执行showAni，
+     * 因为resetState更新的部分插槽初始值并不是0时间，所以延时到本帧结束，下帧开始前，利用下帧逻辑覆盖显示
      * @param name 
      * @param loops 
      * @param callback 

src/spine/animation/DrawOrderAniTrack.ts

@@ -40,7 +40,7 @@ export class DrawOrderAniTrack extends BaseTrack {
             frame = frames.length - 1;
         else
             frame = binarySearch(frames, time) - 1;
-        var drawOrderToSetupIndex =frames[frame].drawOrder ;
+        var drawOrderToSetupIndex = frames[frame].drawOrder;
         if (!drawOrderToSetupIndex)
             arrayCopy(slots, 0, drawOrder, 0, slots.length);
         else {
@@ -48,6 +48,14 @@ export class DrawOrderAniTrack extends BaseTrack {
                 drawOrder[i] = slots[drawOrderToSetupIndex[i]];
         }
     }
+    /**
+     * 层级需要加个重置方法，因为部分动画并没有层级时间轴，会导致当前动画层级根据上一个动画来
+     */
+    resetValue() {
+        this.slots.forEach((s, i) => {
+            this.drawOrder[i] = s;
+        })
+    }
 }
 function binarySearch(values: IDrawOrderAniData[], target: number) {
     var low = 0;