添加一个图片的demo

2026-05-31 22:49:23 +08:00 · 2019-07-13 15:47:46 +08:00
parent 6fe2f2d31e
commit 90f4a953b4
34 changed files with 26610 additions and 0 deletions
--- a/ImageLoaderDemo/.gitignore
+++ b/ImageLoaderDemo/.gitignore
@@ -0,0 +1,53 @@
+#/////////////////////////////////////////////////////////////////////////////
+# Fireball Projects
+#/////////////////////////////////////////////////////////////////////////////
+
+/library/
+/temp/
+/local/
+/build/
+
+#/////////////////////////////////////////////////////////////////////////////
+# npm files
+#/////////////////////////////////////////////////////////////////////////////
+
+npm-debug.log
+node_modules/
+
+#/////////////////////////////////////////////////////////////////////////////
+# Logs and databases
+#/////////////////////////////////////////////////////////////////////////////
+
+*.log
+*.sql
+*.sqlite
+
+#/////////////////////////////////////////////////////////////////////////////
+# files for debugger
+#/////////////////////////////////////////////////////////////////////////////
+
+*.sln
+*.csproj
+*.pidb
+*.unityproj
+*.suo
+
+#/////////////////////////////////////////////////////////////////////////////
+# OS generated files
+#/////////////////////////////////////////////////////////////////////////////
+
+.DS_Store
+ehthumbs.db
+Thumbs.db
+
+#/////////////////////////////////////////////////////////////////////////////
+# WebStorm files
+#/////////////////////////////////////////////////////////////////////////////
+
+.idea/
+
+#//////////////////////////
+# VS Code files
+#//////////////////////////
+
+.vscode/
--- a/ImageLoaderDemo/README.md
+++ b/ImageLoaderDemo/README.md
@@ -0,0 +1,2 @@
+# hello-world
+Hello world new project template.
--- a/ImageLoaderDemo/assets/Scene.meta
+++ b/ImageLoaderDemo/assets/Scene.meta
@@ -0,0 +1,6 @@
+{
+  "ver": "1.0.1",
+  "uuid": "29f52784-2fca-467b-92e7-8fd9ef8c57b7",
+  "isGroup": false,
+  "subMetas": {}
+}
--- a/ImageLoaderDemo/assets/Scene/helloworld.fire
+++ b/ImageLoaderDemo/assets/Scene/helloworld.fire
@@ -0,0 +1,538 @@
+[
+  {
+    "__type__": "cc.SceneAsset",
+    "_name": "",
+    "_objFlags": 0,
+    "_native": "",
+    "scene": {
+      "__id__": 1
+    }
+  },
+  {
+    "__type__": "cc.Scene",
+    "_objFlags": 0,
+    "_parent": null,
+    "_children": [
+      {
+        "__id__": 2
+      }
+    ],
+    "_active": true,
+    "_level": 0,
+    "_components": [],
+    "_prefab": null,
+    "_opacity": 255,
+    "_color": {
+      "__type__": "cc.Color",
+      "r": 255,
+      "g": 255,
+      "b": 255,
+      "a": 255
+    },
+    "_contentSize": {
+      "__type__": "cc.Size",
+      "width": 0,
+      "height": 0
+    },
+    "_anchorPoint": {
+      "__type__": "cc.Vec2",
+      "x": 0,
+      "y": 0
+    },
+    "_scale": {
+      "__type__": "cc.Vec3",
+      "x": 0.3328125,
+      "y": 0.3328125,
+      "z": 1
+    },
+    "_quat": {
+      "__type__": "cc.Quat",
+      "x": 0,
+      "y": 0,
+      "z": 0,
+      "w": 1
+    },
+    "groupIndex": 0,
+    "autoReleaseAssets": false,
+    "_id": "2d2f792f-a40c-49bb-a189-ed176a246e49"
+  },
+  {
+    "__type__": "cc.Node",
+    "_name": "Canvas",
+    "_objFlags": 0,
+    "_parent": {
+      "__id__": 1
+    },
+    "_children": [
+      {
+        "__id__": 3
+      },
+      {
+        "__id__": 5
+      },
+      {
+        "__id__": 8
+      },
+      {
+        "__id__": 10
+      }
+    ],
+    "_active": true,
+    "_level": 0,
+    "_components": [
+      {
+        "__id__": 12
+      },
+      {
+        "__id__": 13
+      }
+    ],
+    "_prefab": null,
+    "_opacity": 255,
+    "_color": {
+      "__type__": "cc.Color",
+      "r": 252,
+      "g": 252,
+      "b": 252,
+      "a": 255
+    },
+    "_contentSize": {
+      "__type__": "cc.Size",
+      "width": 960,
+      "height": 640
+    },
+    "_anchorPoint": {
+      "__type__": "cc.Vec2",
+      "x": 0.5,
+      "y": 0.5
+    },
+    "_position": {
+      "__type__": "cc.Vec3",
+      "x": 480,
+      "y": 320,
+      "z": 0
+    },
+    "_scale": {
+      "__type__": "cc.Vec3",
+      "x": 1,
+      "y": 1,
+      "z": 1
+    },
+    "_rotationX": 0,
+    "_rotationY": 0,
+    "_quat": {
+      "__type__": "cc.Quat",
+      "x": 0,
+      "y": 0,
+      "z": 0,
+      "w": 1
+    },
+    "_skewX": 0,
+    "_skewY": 0,
+    "groupIndex": 0,
+    "_id": "a286bbGknJLZpRpxROV6M94"
+  },
+  {
+    "__type__": "cc.Node",
+    "_name": "Main Camera",
+    "_objFlags": 0,
+    "_parent": {
+      "__id__": 2
+    },
+    "_children": [],
+    "_active": true,
+    "_level": 1,
+    "_components": [
+      {
+        "__id__": 4
+      }
+    ],
+    "_prefab": null,
+    "_opacity": 255,
+    "_color": {
+      "__type__": "cc.Color",
+      "r": 255,
+      "g": 255,
+      "b": 255,
+      "a": 255
+    },
+    "_contentSize": {
+      "__type__": "cc.Size",
+      "width": 0,
+      "height": 0
+    },
+    "_anchorPoint": {
+      "__type__": "cc.Vec2",
+      "x": 0.5,
+      "y": 0.5
+    },
+    "_position": {
+      "__type__": "cc.Vec3",
+      "x": 0,
+      "y": 0,
+      "z": 0
+    },
+    "_scale": {
+      "__type__": "cc.Vec3",
+      "x": 1,
+      "y": 1,
+      "z": 1
+    },
+    "_rotationX": 0,
+    "_rotationY": 0,
+    "_quat": {
+      "__type__": "cc.Quat",
+      "x": 0,
+      "y": 0,
+      "z": 0,
+      "w": 1
+    },
+    "_skewX": 0,
+    "_skewY": 0,
+    "groupIndex": 0,
+    "_id": "bajsC4KotFLZ6XLFLKnycL"
+  },
+  {
+    "__type__": "cc.Camera",
+    "_name": "",
+    "_objFlags": 0,
+    "node": {
+      "__id__": 3
+    },
+    "_enabled": true,
+    "_cullingMask": 4294967295,
+    "_clearFlags": 7,
+    "_backgroundColor": {
+      "__type__": "cc.Color",
+      "r": 0,
+      "g": 0,
+      "b": 0,
+      "a": 255
+    },
+    "_depth": -1,
+    "_zoomRatio": 1,
+    "_targetTexture": null,
+    "_id": "c7r5+B15dD56dUBiNj+0KH"
+  },
+  {
+    "__type__": "cc.Node",
+    "_name": "background",
+    "_objFlags": 0,
+    "_parent": {
+      "__id__": 2
+    },
+    "_children": [],
+    "_active": true,
+    "_level": 0,
+    "_components": [
+      {
+        "__id__": 6
+      },
+      {
+        "__id__": 7
+      }
+    ],
+    "_prefab": null,
+    "_opacity": 255,
+    "_color": {
+      "__type__": "cc.Color",
+      "r": 27,
+      "g": 38,
+      "b": 46,
+      "a": 255
+    },
+    "_contentSize": {
+      "__type__": "cc.Size",
+      "width": 960,
+      "height": 640
+    },
+    "_anchorPoint": {
+      "__type__": "cc.Vec2",
+      "x": 0.5,
+      "y": 0.5
+    },
+    "_position": {
+      "__type__": "cc.Vec3",
+      "x": 0,
+      "y": 0,
+      "z": 0
+    },
+    "_scale": {
+      "__type__": "cc.Vec3",
+      "x": 1,
+      "y": 1,
+      "z": 1
+    },
+    "_rotationX": 0,
+    "_rotationY": 0,
+    "_quat": {
+      "__type__": "cc.Quat",
+      "x": 0,
+      "y": 0,
+      "z": 0,
+      "w": 1
+    },
+    "_skewX": 0,
+    "_skewY": 0,
+    "groupIndex": 0,
+    "_id": "e2e0crkOLxGrpMxpbC4iQg1"
+  },
+  {
+    "__type__": "cc.Widget",
+    "_name": "",
+    "_objFlags": 0,
+    "node": {
+      "__id__": 5
+    },
+    "_enabled": true,
+    "alignMode": 1,
+    "_target": null,
+    "_alignFlags": 45,
+    "_left": 0,
+    "_right": 0,
+    "_top": 0,
+    "_bottom": 0,
+    "_verticalCenter": 0,
+    "_horizontalCenter": 0,
+    "_isAbsLeft": true,
+    "_isAbsRight": true,
+    "_isAbsTop": true,
+    "_isAbsBottom": true,
+    "_isAbsHorizontalCenter": true,
+    "_isAbsVerticalCenter": true,
+    "_originalWidth": 200,
+    "_originalHeight": 150,
+    "_id": "86+yud7pFDSrM+lsxByQvE"
+  },
+  {
+    "__type__": "cc.Sprite",
+    "_name": "",
+    "_objFlags": 0,
+    "node": {
+      "__id__": 5
+    },
+    "_enabled": true,
+    "_srcBlendFactor": 770,
+    "_dstBlendFactor": 771,
+    "_spriteFrame": {
+      "__uuid__": "410fb916-8721-4663-bab8-34397391ace7"
+    },
+    "_type": 1,
+    "_sizeMode": 0,
+    "_fillType": 0,
+    "_fillCenter": {
+      "__type__": "cc.Vec2",
+      "x": 0,
+      "y": 0
+    },
+    "_fillStart": 0,
+    "_fillRange": 0,
+    "_isTrimmedMode": true,
+    "_state": 0,
+    "_atlas": null,
+    "_id": "1bi08CbSBHsZSXfV2t6eKB"
+  },
+  {
+    "__type__": "cc.Node",
+    "_name": "cocos",
+    "_objFlags": 0,
+    "_parent": {
+      "__id__": 2
+    },
+    "_children": [],
+    "_active": true,
+    "_level": 0,
+    "_components": [
+      {
+        "__id__": 9
+      }
+    ],
+    "_prefab": null,
+    "_opacity": 255,
+    "_color": {
+      "__type__": "cc.Color",
+      "r": 255,
+      "g": 255,
+      "b": 255,
+      "a": 255
+    },
+    "_contentSize": {
+      "__type__": "cc.Size",
+      "width": 195,
+      "height": 270
+    },
+    "_anchorPoint": {
+      "__type__": "cc.Vec2",
+      "x": 0.5,
+      "y": 0.5
+    },
+    "_position": {
+      "__type__": "cc.Vec3",
+      "x": 0,
+      "y": 50,
+      "z": 0
+    },
+    "_scale": {
+      "__type__": "cc.Vec3",
+      "x": 1,
+      "y": 1,
+      "z": 1
+    },
+    "_rotationX": 0,
+    "_rotationY": 0,
+    "_quat": {
+      "__type__": "cc.Quat",
+      "x": 0,
+      "y": 0,
+      "z": 0,
+      "w": 1
+    },
+    "_skewX": 0,
+    "_skewY": 0,
+    "groupIndex": 0,
+    "_id": "c4f30YOS65G64U2TwufdJ+2"
+  },
+  {
+    "__type__": "cc.Sprite",
+    "_name": "",
+    "_objFlags": 0,
+    "node": {
+      "__id__": 8
+    },
+    "_enabled": true,
+    "_srcBlendFactor": 770,
+    "_dstBlendFactor": 771,
+    "_spriteFrame": {
+      "__uuid__": "31bc895a-c003-4566-a9f3-2e54ae1c17dc"
+    },
+    "_type": 0,
+    "_sizeMode": 1,
+    "_fillType": 0,
+    "_fillCenter": {
+      "__type__": "cc.Vec2",
+      "x": 0,
+      "y": 0
+    },
+    "_fillStart": 0,
+    "_fillRange": 0,
+    "_isTrimmedMode": true,
+    "_state": 0,
+    "_atlas": null,
+    "_id": "42SM+92GZAXYsjLj89MLM+"
+  },
+  {
+    "__type__": "cc.Node",
+    "_name": "label",
+    "_objFlags": 0,
+    "_parent": {
+      "__id__": 2
+    },
+    "_children": [],
+    "_active": true,
+    "_level": 0,
+    "_components": [
+      {
+        "__id__": 11
+      }
+    ],
+    "_prefab": null,
+    "_opacity": 255,
+    "_color": {
+      "__type__": "cc.Color",
+      "r": 255,
+      "g": 255,
+      "b": 255,
+      "a": 255
+    },
+    "_contentSize": {
+      "__type__": "cc.Size",
+      "width": 146.81,
+      "height": 60
+    },
+    "_anchorPoint": {
+      "__type__": "cc.Vec2",
+      "x": 0.5,
+      "y": 0.5
+    },
+    "_position": {
+      "__type__": "cc.Vec3",
+      "x": 0,
+      "y": -180,
+      "z": 0
+    },
+    "_scale": {
+      "__type__": "cc.Vec3",
+      "x": 1,
+      "y": 1,
+      "z": 1
+    },
+    "_rotationX": 0,
+    "_rotationY": 0,
+    "_quat": {
+      "__type__": "cc.Quat",
+      "x": 0,
+      "y": 0,
+      "z": 0,
+      "w": 1
+    },
+    "_skewX": 0,
+    "_skewY": 0,
+    "groupIndex": 0,
+    "_id": "31f1bH7V69Ajr1iXhluMpTB"
+  },
+  {
+    "__type__": "cc.Label",
+    "_name": "",
+    "_objFlags": 0,
+    "node": {
+      "__id__": 10
+    },
+    "_enabled": true,
+    "_useOriginalSize": false,
+    "_string": "Label",
+    "_N$string": "Label",
+    "_fontSize": 60,
+    "_lineHeight": 60,
+    "_enableWrapText": true,
+    "_N$file": null,
+    "_isSystemFontUsed": true,
+    "_spacingX": 0,
+    "_batchAsBitmap": false,
+    "_N$horizontalAlign": 1,
+    "_N$verticalAlign": 1,
+    "_N$fontFamily": "Arial",
+    "_N$overflow": 0,
+    "_N$cacheMode": 0,
+    "_id": "74saCdhnNHjbyDsdd1bTTt"
+  },
+  {
+    "__type__": "cc.Canvas",
+    "_name": "",
+    "_objFlags": 0,
+    "node": {
+      "__id__": 2
+    },
+    "_enabled": true,
+    "_designResolution": {
+      "__type__": "cc.Size",
+      "width": 960,
+      "height": 640
+    },
+    "_fitWidth": false,
+    "_fitHeight": true,
+    "_id": "6f5cteKmlPh6NGUsUqxlFR"
+  },
+  {
+    "__type__": "e2d06kPYCVNjo36s42pyQu6",
+    "_name": "",
+    "_objFlags": 0,
+    "node": {
+      "__id__": 2
+    },
+    "_enabled": true,
+    "image": {
+      "__id__": 9
+    },
+    "_id": "80ogaqvR1PkoN2zOdOXHW/"
+  }
+]
--- a/ImageLoaderDemo/assets/Scene/helloworld.fire.meta
+++ b/ImageLoaderDemo/assets/Scene/helloworld.fire.meta
@@ -0,0 +1,7 @@
+{
+  "ver": "1.0.1",
+  "uuid": "2d2f792f-a40c-49bb-a189-ed176a246e49",
+  "asyncLoadAssets": false,
+  "autoReleaseAssets": false,
+  "subMetas": {}
+}
--- a/ImageLoaderDemo/assets/Script.meta
+++ b/ImageLoaderDemo/assets/Script.meta
@@ -0,0 +1,6 @@
+{
+  "ver": "1.0.1",
+  "uuid": "4734c20c-0db8-4eb2-92ea-e692f4d70934",
+  "isGroup": false,
+  "subMetas": {}
+}
--- a/ImageLoaderDemo/assets/Script/ImageLoader.js
+++ b/ImageLoaderDemo/assets/Script/ImageLoader.js
@@ -0,0 +1,99 @@
+const MD5 = require('md5').MD5;
+class ImageLoader {
+    constructor() {
+        this.imageMap = new Map();
+    }
+
+    /**
+     * 
+     * @param {*} url 
+     * @param {*} fn 
+     * @param {*} type 
+     */
+    loaderImage(url, fn, type = 'jpg') {
+        if (!url) {
+            return;
+        }
+        if (this.imageMap.has(url)) {
+            fn(this.imageMap.get(url));
+            return;
+        }
+        let localRes = 'Avatar/';
+        console.log('url=', url, 'isLocal', url.indexOf(localRes));
+        if (url.indexOf(localRes) >= 0) {
+            //设置本地图片
+            this.loaderResImage(url, fn);
+            return;
+        }
+        //设置远程/手机
+        cc.loader.load({
+            url: url,
+            type: type
+        }, function (err, tex) {
+            if (err) {
+                console.log('loader image failure', err);
+                // this.loaderImage(url, fn);
+                return;
+            }
+            var spriteFrame = new cc.SpriteFrame(tex, cc.rect(0, 0, tex.width, tex.height));
+            this.imageMap.set(url, spriteFrame);
+            fn(spriteFrame);
+        }.bind(this));
+    }
+
+    /**
+     * 加载图片
+     * @param {*} url 
+     * @param {*} fn 
+     */
+    loaderResImage(url, fn) {
+        if (this.imageMap.has(url)) {
+            fn(this.imageMap.get(url));
+            return;
+        }
+        // console.log('loaderResImage ',url);
+        cc.loader.loadRes(url, cc.SpriteFrame, (err, spriteFrame) => {
+            if (err) {
+                console.log('loaderResImage failure');
+                return;
+            }
+            this.imageMap.set(url, spriteFrame);
+            fn(spriteFrame);
+        });
+    }
+
+    /**
+     * 通过 xml下载
+     * @param {*} url 
+     */
+    remoteImage(url, callBack, type) {
+        if (cc.sys.isBrowser) {
+            this.loaderImage(url, callBack);
+            return;
+        }
+        if (!type) {
+            let urlType = url.split('.');
+            type = urlType.pop();
+        }
+        let imagePath = jsb.fileUtils.getWritablePath() + MD5(url) + '.' + type;
+        let isExist = jsb.fileUtils.isFileExist(imagePath);
+        if (isExist) {
+            this.loaderImage(imagePath, callBack);
+            return;
+        }
+        var xhr = new XMLHttpRequest();
+        xhr.open('GET', url, true);
+        // xhr.overrideMimeType('text');
+        xhr.responseType = 'arraybuffer';
+        xhr.onreadystatechange = function () {
+            if (xhr.readyState == 4 && (xhr.status >= 200 && xhr.status < 400)) {
+                var response = new Uint8Array(xhr.response);
+                // console.log('onreadystatechange', response);
+                jsb.fileUtils.writeDataToFile(response, imagePath);
+                this.loaderImage(imagePath, callBack, type);
+            }
+        }.bind(this);
+        xhr.send();
+    }
+}
+module.exports = new ImageLoader();
--- a/ImageLoaderDemo/assets/Script/ImageLoader.js.meta
+++ b/ImageLoaderDemo/assets/Script/ImageLoader.js.meta
@@ -0,0 +1,9 @@
+{
+  "ver": "1.0.5",
+  "uuid": "e3ae40ac-2710-44d3-b699-6d8a08fab974",
+  "isPlugin": false,
+  "loadPluginInWeb": true,
+  "loadPluginInNative": true,
+  "loadPluginInEditor": false,
+  "subMetas": {}
+}
--- a/ImageLoaderDemo/assets/Script/ImageLoaderMgr.ts
+++ b/ImageLoaderDemo/assets/Script/ImageLoaderMgr.ts
@@ -0,0 +1,105 @@
+import { MD5 } from "./md5";
+
+
+export class ImageLoaderMgr {
+
+    static instance: ImageLoaderMgr;
+
+    private imageMap: Map<string, any> = new Map<string, any>();
+
+    static Instance(): ImageLoaderMgr {
+        if (!ImageLoaderMgr.instance) {
+            ImageLoaderMgr.instance = new ImageLoaderMgr();
+        }
+        return ImageLoaderMgr.instance;
+    }
+
+    /**
+     * 加载Resources图片
+     * @param {*} url 
+     * @param {*} fn 
+     */
+    public loaderResImage(url: string, fn: Function) {
+        if (this.imageMap.has(url)) {
+            fn(this.imageMap.get(url));
+            return;
+        }
+        cc.loader.loadRes(url, cc.SpriteFrame, (err, spriteFrame) => {
+            if (err) {
+                console.log('loaderResImage failure');
+                return;
+            }
+            this.imageMap.set(url, spriteFrame);
+            fn(spriteFrame);
+        });
+    }
+
+    /**
+     * 取得本地/远程图片
+     * @param url 
+     * @param fn 
+     * @param type 
+     */
+    public loaderImage(url: string, fn: Function, type = 'jpg') {
+        if (!url) {
+            return;
+        }
+        if (this.imageMap.has(url)) {
+            fn(this.imageMap.get(url));
+            return;
+        }
+        let localRes = 'Avatar/';
+        if (url.indexOf(localRes) >= 0) {
+            //设置本地图片
+            this.loaderResImage(url, fn);
+            return;
+        }
+        //设置远程/手机
+        cc.loader.load({
+            url: url,
+            type: type
+        }, function (err, tex) {
+            if (err) {
+                console.log('loader image failure', err);
+                return;
+            }
+            var spriteFrame = new cc.SpriteFrame(tex, cc.rect(0, 0, tex.width, tex.height));
+            this.imageMap.set(url, spriteFrame);
+            fn(spriteFrame);
+        }.bind(this));
+    }
+
+    /**
+     * 通过xml下载到本地再加载图片
+     * @param {*} url 
+     */
+    public remoteImage(url: string, callBack: Function, type = null) {
+        if (cc.sys.isBrowser) {
+            this.loaderImage(url, callBack);
+            return;
+        }
+        if (!type) {
+            let urlType = url.split('.');
+            type = urlType.pop();
+        }
+        let imagePath = jsb.fileUtils.getWritablePath() + MD5(url) + '.' + type;
+        let isExist = jsb.fileUtils.isFileExist(imagePath);
+        if (isExist) {
+            this.loaderImage(imagePath, callBack);
+            return;
+        }
+        let xhr = new XMLHttpRequest();
+        xhr.open('GET', url, true);
+        // xhr.overrideMimeType('text');
+        xhr.responseType = 'arraybuffer';
+        xhr.onreadystatechange = function () {
+            if (xhr.readyState == 4 && (xhr.status >= 200 && xhr.status < 400)) {
+                let response = new Uint8Array(xhr.response);
+                jsb.fileUtils.writeDataToFile(response, imagePath);
+                this.loaderImage(imagePath, callBack, type);
+            }
+        }.bind(this);
+        xhr.send();
+    }
+
+}
--- a/ImageLoaderDemo/assets/Script/ImageLoaderMgr.ts.meta
+++ b/ImageLoaderDemo/assets/Script/ImageLoaderMgr.ts.meta
@@ -0,0 +1,9 @@
+{
+  "ver": "1.0.5",
+  "uuid": "8c4d4ffe-0f51-499e-9be3-d2b24508db53",
+  "isPlugin": false,
+  "loadPluginInWeb": true,
+  "loadPluginInNative": true,
+  "loadPluginInEditor": false,
+  "subMetas": {}
+}
--- a/ImageLoaderDemo/assets/Script/TestJS.js
+++ b/ImageLoaderDemo/assets/Script/TestJS.js
@@ -0,0 +1,29 @@
+const ImageLoader = require('ImageLoader');
+cc.Class({
+    extends: cc.Component,
+
+    properties: {
+        image: cc.Sprite
+    },
+
+    // use this for initialization
+    onLoad: function () {
+
+    },
+
+    start() {
+        let test = 'https://www.cocos.com/wp-content/themes/cocos/image/home/example_01.png';
+        ImageLoader.remoteImage(test, (spriteFrame) => {
+            this.image.spriteFrame = spriteFrame;
+        }, 'png');
+
+        ImageLoader.loaderResImage('Image/example_02', (spriteFrame) => {
+            this.image.spriteFrame = spriteFrame;
+        });
+    },
+
+    // called every frame
+    update: function (dt) {
+
+    },
+});
--- a/ImageLoaderDemo/assets/Script/TestJS.js.meta
+++ b/ImageLoaderDemo/assets/Script/TestJS.js.meta
@@ -0,0 +1,9 @@
+{
+  "ver": "1.0.5",
+  "uuid": "280c3aec-6492-4a9d-9f51-a9b00b570b4a",
+  "isPlugin": false,
+  "loadPluginInWeb": true,
+  "loadPluginInNative": true,
+  "loadPluginInEditor": false,
+  "subMetas": {}
+}
--- a/ImageLoaderDemo/assets/Script/TestTS.ts
+++ b/ImageLoaderDemo/assets/Script/TestTS.ts
@@ -0,0 +1,26 @@
+import { ImageLoaderMgr } from "./ImageLoaderMgr";
+const { ccclass, property } = cc._decorator;
+
+@ccclass
+export default class NewClass extends cc.Component {
+
+    @property(cc.Sprite)
+    image: cc.Sprite = null;
+
+    // LIFE-CYCLE CALLBACKS:
+
+    // onLoad () {}
+
+    start() {
+        let test = 'https://www.cocos.com/wp-content/themes/cocos/image/home/example_01.png';
+        ImageLoaderMgr.Instance().remoteImage(test, (spriteFrame) => {
+            this.image.spriteFrame = spriteFrame;
+        }, 'png');
+
+        // ImageLoaderMgr.Instance().loaderResImage('Image/example_02', (spriteFrame) => {
+        //     this.image.spriteFrame = spriteFrame;
+        // });
+    }
+
+    // update (dt) {}
+}
--- a/ImageLoaderDemo/assets/Script/TestTS.ts.meta
+++ b/ImageLoaderDemo/assets/Script/TestTS.ts.meta
@@ -0,0 +1,9 @@
+{
+  "ver": "1.0.5",
+  "uuid": "e2d0690f-6025-4d8e-8dfa-b38da9c90bba",
+  "isPlugin": false,
+  "loadPluginInWeb": true,
+  "loadPluginInNative": true,
+  "loadPluginInEditor": false,
+  "subMetas": {}
+}
--- a/ImageLoaderDemo/assets/Script/md5.js
+++ b/ImageLoaderDemo/assets/Script/md5.js
@@ -0,0 +1,280 @@
+/*
+ * JavaScript MD5
+ * https://github.com/blueimp/JavaScript-MD5
+ *
+ * Copyright 2011, Sebastian Tschan
+ * https://blueimp.net
+ *
+ * Licensed under the MIT license:
+ * https://opensource.org/licenses/MIT
+ *
+ * Based on
+ * A JavaScript implementation of the RSA Data Security, Inc. MD5 Message
+ * Digest Algorithm, as defined in RFC 1321.
+ * Version 2.2 Copyright (C) Paul Johnston 1999 - 2009
+ * Other contributors: Greg Holt, Andrew Kepert, Ydnar, Lostinet
+ * Distributed under the BSD License
+ * See http://pajhome.org.uk/crypt/md5 for more info.
+ */
+
+/* global define */
+
+; (function ($) {
+  'use strict'
+
+  /*
+  * Add integers, wrapping at 2^32. This uses 16-bit operations internally
+  * to work around bugs in some JS interpreters.
+  */
+  function safeAdd(x, y) {
+    var lsw = (x & 0xffff) + (y & 0xffff)
+    var msw = (x >> 16) + (y >> 16) + (lsw >> 16)
+    return (msw << 16) | (lsw & 0xffff)
+  }
+
+  /*
+  * Bitwise rotate a 32-bit number to the left.
+  */
+  function bitRotateLeft(num, cnt) {
+    return (num << cnt) | (num >>> (32 - cnt))
+  }
+
+  /*
+  * These functions implement the four basic operations the algorithm uses.
+  */
+  function md5cmn(q, a, b, x, s, t) {
+    return safeAdd(bitRotateLeft(safeAdd(safeAdd(a, q), safeAdd(x, t)), s), b)
+  }
+  function md5ff(a, b, c, d, x, s, t) {
+    return md5cmn((b & c) | (~b & d), a, b, x, s, t)
+  }
+  function md5gg(a, b, c, d, x, s, t) {
+    return md5cmn((b & d) | (c & ~d), a, b, x, s, t)
+  }
+  function md5hh(a, b, c, d, x, s, t) {
+    return md5cmn(b ^ c ^ d, a, b, x, s, t)
+  }
+  function md5ii(a, b, c, d, x, s, t) {
+    return md5cmn(c ^ (b | ~d), a, b, x, s, t)
+  }
+
+  /*
+  * Calculate the MD5 of an array of little-endian words, and a bit length.
+  */
+  function binlMD5(x, len) {
+    /* append padding */
+    x[len >> 5] |= 0x80 << (len % 32)
+    x[((len + 64) >>> 9 << 4) + 14] = len
+
+    var i
+    var olda
+    var oldb
+    var oldc
+    var oldd
+    var a = 1732584193
+    var b = -271733879
+    var c = -1732584194
+    var d = 271733878
+
+    for (i = 0; i < x.length; i += 16) {
+      olda = a
+      oldb = b
+      oldc = c
+      oldd = d
+
+      a = md5ff(a, b, c, d, x[i], 7, -680876936)
+      d = md5ff(d, a, b, c, x[i + 1], 12, -389564586)
+      c = md5ff(c, d, a, b, x[i + 2], 17, 606105819)
+      b = md5ff(b, c, d, a, x[i + 3], 22, -1044525330)
+      a = md5ff(a, b, c, d, x[i + 4], 7, -176418897)
+      d = md5ff(d, a, b, c, x[i + 5], 12, 1200080426)
+      c = md5ff(c, d, a, b, x[i + 6], 17, -1473231341)
+      b = md5ff(b, c, d, a, x[i + 7], 22, -45705983)
+      a = md5ff(a, b, c, d, x[i + 8], 7, 1770035416)
+      d = md5ff(d, a, b, c, x[i + 9], 12, -1958414417)
+      c = md5ff(c, d, a, b, x[i + 10], 17, -42063)
+      b = md5ff(b, c, d, a, x[i + 11], 22, -1990404162)
+      a = md5ff(a, b, c, d, x[i + 12], 7, 1804603682)
+      d = md5ff(d, a, b, c, x[i + 13], 12, -40341101)
+      c = md5ff(c, d, a, b, x[i + 14], 17, -1502002290)
+      b = md5ff(b, c, d, a, x[i + 15], 22, 1236535329)
+
+      a = md5gg(a, b, c, d, x[i + 1], 5, -165796510)
+      d = md5gg(d, a, b, c, x[i + 6], 9, -1069501632)
+      c = md5gg(c, d, a, b, x[i + 11], 14, 643717713)
+      b = md5gg(b, c, d, a, x[i], 20, -373897302)
+      a = md5gg(a, b, c, d, x[i + 5], 5, -701558691)
+      d = md5gg(d, a, b, c, x[i + 10], 9, 38016083)
+      c = md5gg(c, d, a, b, x[i + 15], 14, -660478335)
+      b = md5gg(b, c, d, a, x[i + 4], 20, -405537848)
+      a = md5gg(a, b, c, d, x[i + 9], 5, 568446438)
+      d = md5gg(d, a, b, c, x[i + 14], 9, -1019803690)
+      c = md5gg(c, d, a, b, x[i + 3], 14, -187363961)
+      b = md5gg(b, c, d, a, x[i + 8], 20, 1163531501)
+      a = md5gg(a, b, c, d, x[i + 13], 5, -1444681467)
+      d = md5gg(d, a, b, c, x[i + 2], 9, -51403784)
+      c = md5gg(c, d, a, b, x[i + 7], 14, 1735328473)
+      b = md5gg(b, c, d, a, x[i + 12], 20, -1926607734)
+
+      a = md5hh(a, b, c, d, x[i + 5], 4, -378558)
+      d = md5hh(d, a, b, c, x[i + 8], 11, -2022574463)
+      c = md5hh(c, d, a, b, x[i + 11], 16, 1839030562)
+      b = md5hh(b, c, d, a, x[i + 14], 23, -35309556)
+      a = md5hh(a, b, c, d, x[i + 1], 4, -1530992060)
+      d = md5hh(d, a, b, c, x[i + 4], 11, 1272893353)
+      c = md5hh(c, d, a, b, x[i + 7], 16, -155497632)
+      b = md5hh(b, c, d, a, x[i + 10], 23, -1094730640)
+      a = md5hh(a, b, c, d, x[i + 13], 4, 681279174)
+      d = md5hh(d, a, b, c, x[i], 11, -358537222)
+      c = md5hh(c, d, a, b, x[i + 3], 16, -722521979)
+      b = md5hh(b, c, d, a, x[i + 6], 23, 76029189)
+      a = md5hh(a, b, c, d, x[i + 9], 4, -640364487)
+      d = md5hh(d, a, b, c, x[i + 12], 11, -421815835)
+      c = md5hh(c, d, a, b, x[i + 15], 16, 530742520)
+      b = md5hh(b, c, d, a, x[i + 2], 23, -995338651)
+
+      a = md5ii(a, b, c, d, x[i], 6, -198630844)
+      d = md5ii(d, a, b, c, x[i + 7], 10, 1126891415)
+      c = md5ii(c, d, a, b, x[i + 14], 15, -1416354905)
+      b = md5ii(b, c, d, a, x[i + 5], 21, -57434055)
+      a = md5ii(a, b, c, d, x[i + 12], 6, 1700485571)
+      d = md5ii(d, a, b, c, x[i + 3], 10, -1894986606)
+      c = md5ii(c, d, a, b, x[i + 10], 15, -1051523)
+      b = md5ii(b, c, d, a, x[i + 1], 21, -2054922799)
+      a = md5ii(a, b, c, d, x[i + 8], 6, 1873313359)
+      d = md5ii(d, a, b, c, x[i + 15], 10, -30611744)
+      c = md5ii(c, d, a, b, x[i + 6], 15, -1560198380)
+      b = md5ii(b, c, d, a, x[i + 13], 21, 1309151649)
+      a = md5ii(a, b, c, d, x[i + 4], 6, -145523070)
+      d = md5ii(d, a, b, c, x[i + 11], 10, -1120210379)
+      c = md5ii(c, d, a, b, x[i + 2], 15, 718787259)
+      b = md5ii(b, c, d, a, x[i + 9], 21, -343485551)
+
+      a = safeAdd(a, olda)
+      b = safeAdd(b, oldb)
+      c = safeAdd(c, oldc)
+      d = safeAdd(d, oldd)
+    }
+    return [a, b, c, d]
+  }
+
+  /*
+  * Convert an array of little-endian words to a string
+  */
+  function binl2rstr(input) {
+    var i
+    var output = ''
+    var length32 = input.length * 32
+    for (i = 0; i < length32; i += 8) {
+      output += String.fromCharCode((input[i >> 5] >>> (i % 32)) & 0xff)
+    }
+    return output
+  }
+
+  /*
+  * Convert a raw string to an array of little-endian words
+  * Characters >255 have their high-byte silently ignored.
+  */
+  function rstr2binl(input) {
+    var i
+    var output = []
+    output[(input.length >> 2) - 1] = undefined
+    for (i = 0; i < output.length; i += 1) {
+      output[i] = 0
+    }
+    var length8 = input.length * 8
+    for (i = 0; i < length8; i += 8) {
+      output[i >> 5] |= (input.charCodeAt(i / 8) & 0xff) << (i % 32)
+    }
+    return output
+  }
+
+  /*
+  * Calculate the MD5 of a raw string
+  */
+  function rstrMD5(s) {
+    return binl2rstr(binlMD5(rstr2binl(s), s.length * 8))
+  }
+
+  /*
+  * Calculate the HMAC-MD5, of a key and some data (raw strings)
+  */
+  function rstrHMACMD5(key, data) {
+    var i
+    var bkey = rstr2binl(key)
+    var ipad = []
+    var opad = []
+    var hash
+    ipad[15] = opad[15] = undefined
+    if (bkey.length > 16) {
+      bkey = binlMD5(bkey, key.length * 8)
+    }
+    for (i = 0; i < 16; i += 1) {
+      ipad[i] = bkey[i] ^ 0x36363636
+      opad[i] = bkey[i] ^ 0x5c5c5c5c
+    }
+    hash = binlMD5(ipad.concat(rstr2binl(data)), 512 + data.length * 8)
+    return binl2rstr(binlMD5(opad.concat(hash), 512 + 128))
+  }
+
+  /*
+  * Convert a raw string to a hex string
+  */
+  function rstr2hex(input) {
+    var hexTab = '0123456789abcdef'
+    var output = ''
+    var x
+    var i
+    for (i = 0; i < input.length; i += 1) {
+      x = input.charCodeAt(i)
+      output += hexTab.charAt((x >>> 4) & 0x0f) + hexTab.charAt(x & 0x0f)
+    }
+    return output
+  }
+
+  /*
+  * Encode a string as utf-8
+  */
+  function str2rstrUTF8(input) {
+    return unescape(encodeURIComponent(input))
+  }
+
+  /*
+  * Take string arguments and return either raw or hex encoded strings
+  */
+  function rawMD5(s) {
+    return rstrMD5(str2rstrUTF8(s))
+  }
+  function hexMD5(s) {
+    return rstr2hex(rawMD5(s))
+  }
+  function rawHMACMD5(k, d) {
+    return rstrHMACMD5(str2rstrUTF8(k), str2rstrUTF8(d))
+  }
+  function hexHMACMD5(k, d) {
+    return rstr2hex(rawHMACMD5(k, d))
+  }
+
+  function MD5(string, key, raw) {
+    if (!key) {
+      if (!raw) {
+        return hexMD5(string)
+      }
+      return rawMD5(string)
+    }
+    if (!raw) {
+      return hexHMACMD5(key, string)
+    }
+    return rawHMACMD5(key, string)
+  }
+
+  if (typeof define === 'function' && define.amd) {
+    define(function () {
+      return MD5
+    })
+  } else if (typeof module === 'object' && module.exports) {
+    module.exports = { MD5 }
+  } else {
+    $.MD5 = MD5
+  }
+})(this)
--- a/ImageLoaderDemo/assets/Script/md5.js.meta
+++ b/ImageLoaderDemo/assets/Script/md5.js.meta
@@ -0,0 +1,9 @@
+{
+  "ver": "1.0.5",
+  "uuid": "c6e3ce3f-1258-4fc1-8f5e-c766902ad302",
+  "isPlugin": false,
+  "loadPluginInWeb": true,
+  "loadPluginInNative": true,
+  "loadPluginInEditor": false,
+  "subMetas": {}
+}
--- a/ImageLoaderDemo/assets/Texture.meta
+++ b/ImageLoaderDemo/assets/Texture.meta
@@ -0,0 +1,6 @@
+{
+  "ver": "1.0.1",
+  "uuid": "7b81d4e8-ec84-4716-968d-500ac1d78a54",
+  "isGroup": false,
+  "subMetas": {}
+}
--- a/ImageLoaderDemo/assets/Texture/HelloWorld.png
+++ b/ImageLoaderDemo/assets/Texture/HelloWorld.png
--- a/ImageLoaderDemo/assets/Texture/HelloWorld.png.meta
+++ b/ImageLoaderDemo/assets/Texture/HelloWorld.png.meta
@@ -0,0 +1,31 @@
+{
+  "ver": "2.2.0",
+  "uuid": "6aa0aa6a-ebee-4155-a088-a687a6aadec4",
+  "type": "sprite",
+  "wrapMode": "clamp",
+  "filterMode": "bilinear",
+  "premultiplyAlpha": false,
+  "subMetas": {
+    "HelloWorld": {
+      "ver": "1.0.4",
+      "uuid": "31bc895a-c003-4566-a9f3-2e54ae1c17dc",
+      "rawTextureUuid": "6aa0aa6a-ebee-4155-a088-a687a6aadec4",
+      "trimType": "auto",
+      "trimThreshold": 1,
+      "rotated": false,
+      "offsetX": 0,
+      "offsetY": 0,
+      "trimX": 0,
+      "trimY": 0,
+      "width": 195,
+      "height": 270,
+      "rawWidth": 195,
+      "rawHeight": 270,
+      "borderTop": 0,
+      "borderBottom": 0,
+      "borderLeft": 0,
+      "borderRight": 0,
+      "subMetas": {}
+    }
+  }
+}
--- a/ImageLoaderDemo/assets/Texture/singleColor.png
+++ b/ImageLoaderDemo/assets/Texture/singleColor.png
--- a/ImageLoaderDemo/assets/Texture/singleColor.png.meta
+++ b/ImageLoaderDemo/assets/Texture/singleColor.png.meta
@@ -0,0 +1,31 @@
+{
+  "ver": "2.2.0",
+  "uuid": "a8027877-d8d6-4645-97a0-52d4a0123dba",
+  "type": "sprite",
+  "wrapMode": "clamp",
+  "filterMode": "bilinear",
+  "premultiplyAlpha": false,
+  "subMetas": {
+    "singleColor": {
+      "ver": "1.0.4",
+      "uuid": "410fb916-8721-4663-bab8-34397391ace7",
+      "rawTextureUuid": "a8027877-d8d6-4645-97a0-52d4a0123dba",
+      "trimType": "auto",
+      "trimThreshold": 1,
+      "rotated": false,
+      "offsetX": 0,
+      "offsetY": 0,
+      "trimX": 0,
+      "trimY": 0,
+      "width": 2,
+      "height": 2,
+      "rawWidth": 2,
+      "rawHeight": 2,
+      "borderTop": 0,
+      "borderBottom": 0,
+      "borderLeft": 0,
+      "borderRight": 0,
+      "subMetas": {}
+    }
+  }
+}
--- a/ImageLoaderDemo/assets/resources.meta
+++ b/ImageLoaderDemo/assets/resources.meta
@@ -0,0 +1,7 @@
+{
+  "ver": "1.0.1",
+  "uuid": "55758289-8c9a-4c74-8d64-bae9289d4635",
+  "isSubpackage": false,
+  "subpackageName": "",
+  "subMetas": {}
+}
--- a/ImageLoaderDemo/assets/resources/Image.meta
+++ b/ImageLoaderDemo/assets/resources/Image.meta
@@ -0,0 +1,7 @@
+{
+  "ver": "1.0.1",
+  "uuid": "6d2f932b-f810-4b90-9d69-285e210b83e4",
+  "isSubpackage": false,
+  "subpackageName": "",
+  "subMetas": {}
+}
--- a/ImageLoaderDemo/assets/resources/Image/example_02.png
+++ b/ImageLoaderDemo/assets/resources/Image/example_02.png
--- a/ImageLoaderDemo/assets/resources/Image/example_02.png.meta
+++ b/ImageLoaderDemo/assets/resources/Image/example_02.png.meta
@@ -0,0 +1,31 @@
+{
+  "ver": "2.2.0",
+  "uuid": "1ea2ce48-d709-47f1-9257-a9146796541e",
+  "type": "sprite",
+  "wrapMode": "clamp",
+  "filterMode": "bilinear",
+  "premultiplyAlpha": false,
+  "subMetas": {
+    "example_02": {
+      "ver": "1.0.4",
+      "uuid": "0d3e798e-8f49-4832-8be4-6529d1990ffb",
+      "rawTextureUuid": "1ea2ce48-d709-47f1-9257-a9146796541e",
+      "trimType": "auto",
+      "trimThreshold": 1,
+      "rotated": false,
+      "offsetX": 0,
+      "offsetY": 0,
+      "trimX": 0,
+      "trimY": 0,
+      "width": 255,
+      "height": 542,
+      "rawWidth": 255,
+      "rawHeight": 542,
+      "borderTop": 0,
+      "borderBottom": 0,
+      "borderLeft": 0,
+      "borderRight": 0,
+      "subMetas": {}
+    }
+  }
+}
--- a/ImageLoaderDemo/creator.d.ts
+++ b/ImageLoaderDemo/creator.d.ts
--- a/ImageLoaderDemo/jsconfig.json
+++ b/ImageLoaderDemo/jsconfig.json
@@ -0,0 +1,15 @@
+{
+    "compilerOptions": {
+        "target": "es6",
+        "module": "commonjs",
+        "experimentalDecorators": true
+    },
+    "exclude": [
+        "node_modules",
+        ".vscode",
+        "library",
+        "local",
+        "settings",
+        "temp"
+    ]
+}
--- a/ImageLoaderDemo/project.json
+++ b/ImageLoaderDemo/project.json
@@ -0,0 +1,4 @@
+{
+  "engine": "cocos2d-html5",
+  "packages": "packages"
+}
--- a/ImageLoaderDemo/settings/builder.json
+++ b/ImageLoaderDemo/settings/builder.json
@@ -0,0 +1,13 @@
+{
+  "excludeScenes": [],
+  "orientation": {
+    "landscapeLeft": true,
+    "landscapeRight": true,
+    "portrait": false,
+    "upsideDown": false
+  },
+  "packageName": "org.cocos2d.helloworld",
+  "startScene": "2d2f792f-a40c-49bb-a189-ed176a246e49",
+  "title": "hello_world",
+  "webOrientation": "auto"
+}
--- a/ImageLoaderDemo/settings/builder.panel.json
+++ b/ImageLoaderDemo/settings/builder.panel.json
@@ -0,0 +1,7 @@
+{
+  "excludeScenes": [],
+  "packageName": "org.cocos2d.helloworld",
+  "platform": "web-mobile",
+  "startScene": "2d2f792f-a40c-49bb-a189-ed176a246e49",
+  "title": "HelloWorld"
+}
--- a/ImageLoaderDemo/settings/project.json
+++ b/ImageLoaderDemo/settings/project.json
@@ -0,0 +1,35 @@
+{
+  "collision-matrix": [
+    [
+      true
+    ]
+  ],
+  "excluded-modules": [],
+  "group-list": [
+    "default"
+  ],
+  "start-scene": "current",
+  "design-resolution-width": 960,
+  "design-resolution-height": 640,
+  "fit-width": false,
+  "fit-height": true,
+  "use-project-simulator-setting": false,
+  "simulator-orientation": false,
+  "use-customize-simulator": false,
+  "simulator-resolution": {
+    "width": 960,
+    "height": 640
+  },
+  "last-module-event-record-time": 0,
+  "assets-sort-type": "name",
+  "facebook": {
+    "enable": false,
+    "appID": "",
+    "live": {
+      "enable": false
+    },
+    "audience": {
+      "enable": false
+    }
+  }
+}
--- a/ImageLoaderDemo/settings/services.json
+++ b/ImageLoaderDemo/settings/services.json
@@ -0,0 +1,137 @@
+{
+	"services": [
+		{
+			"service_id": "235",
+			"service_name": "Cocos Analytics",
+			"service_icon": "https://account.cocos.com/client/3f8f31ccf66995e183044f167c092395.png",
+			"service_desc": "提供最核心最基本的数据、标准化界面功能简洁易用、数据准确性最好",
+			"service_title": "精准了解游戏的新增、活跃、留存、付费等数据",
+			"service_guide_url": "https://n-analytics.cocos.com/docs/",
+			"service_sample_url": "https://github.com/cocos-creator/tutorial-dark-slash/tree/analytics",
+			"service_dev_url": "http://analytics.cocos.com/realtime/jump_to/<app_id>",
+			"service_type": "3",
+			"service_type_zh": "公司和个人游戏",
+			"support_platform": [
+				"Android",
+				"iOS",
+				"HTML5"
+			],
+			"package_download_url": "http://download.cocos.com/CocosServices/plugins/service-analytics/1.2.0_2.1.0.zip",
+			"package_version_desc": "1、优化SDK，修复H5-SDK 与多个小游戏平台适配问题，删除和优化init事件无用接口<br>2、 如有相关问题咨询或者需求， 可以联系我们技术支持邮箱 <a href=' '>support-cocos@cocos.com</a>",
+			"service_component_name": "service-analytics",
+			"package_versions": [
+				"1.0.0_1.0.5",
+				"1.1.2_2.0.0",
+				"1.1.3_2.0.1",
+				"1.1.4_2.0.1",
+				"1.1.5_2.0.1",
+				"1.1.6_2.0.1_2.0.2",
+				"1.1.7_2.0.3",
+				"1.1.8_2.0.4",
+				"1.1.9_2.1.0",
+				"1.2.0_2.1.0"
+			],
+			"build_platform": [
+				"web-mobile",
+				"web-desktop",
+				"wechatgame",
+				"android",
+				"ios",
+				"fb-instant-games",
+				"android-instant",
+				"baidugame",
+				"quickgame",
+				"qgame",
+				"qqplay",
+				"huawei"
+			],
+			"require_verify": 0,
+			"service_price": "",
+			"packpage_version_desc": "",
+			"service_protocol": "游戏首次开启该服务时，Cocos会后台通知服务方为游戏开通服务并初始化参数，服务方根据需要可能会获取您的Cocos账户信息，包括账户基本资料、游戏基本资料、账户余额等，点击确认开通按钮即视为您同意该服务访问您的账户信息，详见<a href='http://auth.cocos.com/CocosServiceAgreement.html'>《Cocos用户服务协议》</a>和<a href='http://auth.cocos.com/PrivacyPolicy.html'>《Cocos隐私政策》</a>"
+		},
+		{
+			"service_id": "241",
+			"service_name": "Matchvs",
+			"service_icon": "https://account.cocos.com/client/14406719a07eb3d714d36e5edc6e06fa.png",
+			"service_desc": "通过SDK接入快速实现联网功能、帧同步、国内外多节点、服务器独立部署、gameServer自定义游戏服务端逻辑。\n技术支持群QQ群：822523258",
+			"service_title": "专业成熟的移动游戏联网与服务端解决方案",
+			"service_guide_url": "http://doc.matchvs.com/QuickStart/QuickStart-CocosCreator",
+			"service_sample_url": "http://www.matchvs.com/serviceCourse",
+			"service_dev_url": "http://www.matchvs.com/cocosLogin",
+			"service_type": "3",
+			"service_type_zh": "公司和个人游戏",
+			"support_platform": [
+				"Android",
+				"iOS",
+				"HTML5"
+			],
+			"package_download_url": "http://download.cocos.com/CocosServices/plugins/service-matchvs/1.0.7_3.7.9.6.zip",
+			"package_version_desc": "更新日期：2019-05-15<br>更新内容：<br>1、调整getRoomListEx接口，获取系统创建房间<br>2、增加appkey等的校验<br>3、新增以下平台支持:<li>VIVO 小游戏<li>OPPO 小游戏<li>HUAWEI 快游戏<li>百度小游戏（默认不支持，需修改代码强制开启WSS选项）",
+			"service_component_name": "service-matchvs",
+			"package_versions": [
+				"1.0.3_3.7.6.4",
+				"1.0.5_3.7.7.3",
+				"1.0.6_3.7.9.2",
+				"1.0.7_3.7.9.6"
+			],
+			"build_platform": [
+				"web-mobile",
+				"web-desktop",
+				"fb-instant-games",
+				"wechatgame",
+				"wechatgame-subcontext",
+				"qqplay",
+				"android",
+				"android-instant",
+				"ios",
+				"mac",
+				"quickgame",
+				"qgame",
+				"huawei"
+			],
+			"require_verify": 0,
+			"service_price": "该服务按使用量计费，<a href='https://www.matchvs.com/price'><font color='#dddddd'>计费规则</font></a>，所产生的费用将由第三方从您的 <a href='https://account.cocos.com/#/finance/finance_list'><font color='#dddddd'>Cocos 账户余额</font></a> 中扣除。",
+			"packpage_version_desc": "",
+			"service_protocol": "游戏首次开启该服务时，Cocos会后台通知服务方为游戏开通服务并初始化参数，服务方根据需要可能会获取您的Cocos账户信息，包括账户基本资料、游戏基本资料、账户余额等，点击确认开通按钮即视为您同意该服务访问您的账户信息，详见<a href='http://auth.cocos.com/CocosServiceAgreement.html'>《Cocos用户服务协议》</a>和<a href='http://auth.cocos.com/PrivacyPolicy.html'>《Cocos隐私政策》</a>"
+		},
+		{
+			"service_id": "242",
+			"service_name": "Agora Voice",
+			"service_icon": "https://account.cocos.com/uploads/client_icon/date(\"Y-m-d\")/50fe52b789c2fc1e1fff9eec161c1bb3.png",
+			"service_desc": "稳定、低耗、76ms超低延时、全球200+数据中心覆盖；变声器、超高音质、听声辩位等丰富玩法极速接入；全平台支持：Android、iOS、Web。\n技术支持群QQ群：799099183\n",
+			"service_title": "游戏内置实时语音",
+			"service_guide_url": "https://docs.agora.io/cn/Interactive Gaming/game_c",
+			"service_sample_url": "https://github.com/AgoraIO/Voice-Call-for-Mobile-Gaming/tree/master/Basic-Voice-Call-for-Gaming/Hello-CocosCreator-Voice-Agora",
+			"service_dev_url": "https://sso.agora.io/api/oauth/cocos/login",
+			"service_type": "3",
+			"service_type_zh": "公司和个人游戏",
+			"support_platform": [
+				"Android",
+				"iOS",
+				"HTML5"
+			],
+			"package_download_url": "http://download.cocos.com/CocosServices/plugins/service-agora/1.0.2_2.2.3.20_2.5.2.zip",
+			"package_version_desc": "解决Bug：onAudioVolumeIndication 回调收不到.",
+			"service_component_name": "service-agora",
+			"package_versions": [
+				"1.0.1_2.2.3.20_2.5.2",
+				"1.0.2_2.2.3.20_2.5.2"
+			],
+			"build_platform": [
+				"web-mobile",
+				"web-desktop",
+				"android",
+				"ios"
+			],
+			"require_verify": 1,
+			"service_price": "该服务按使用量计费，<a href='https://docs.agora.io/cn/Agora Platform/billing_faq?platform=All Platforms'><font color='#dddddd'>计费规则</font></a>，所产生的费用将由第三方从您的 <a href='https://account.cocos.com/#/finance/finance_list'><font color='#dddddd'>Cocos 账户余额</font></a> 中扣除。",
+			"packpage_version_desc": "",
+			"service_protocol": "游戏首次开启该服务时，Cocos会后台通知服务方为游戏开通服务并初始化参数，服务方根据需要可能会获取您的Cocos账户信息，包括账户基本资料、游戏基本资料、账户余额等，点击确认开通按钮即视为您同意该服务访问您的账户信息，详见<a href='http://auth.cocos.com/CocosServiceAgreement.html'>《Cocos用户服务协议》</a>和<a href='http://auth.cocos.com/PrivacyPolicy.html'>《Cocos隐私政策》</a>"
+		}
+	],
+	"game": {
+		"name": "未知游戏",
+		"appid": "UNKNOW"
+	}
+}
--- a/ImageLoaderDemo/template-banner.png
+++ b/ImageLoaderDemo/template-banner.png
--- a/ImageLoaderDemo/template.json
+++ b/ImageLoaderDemo/template.json
@@ -0,0 +1,5 @@
+{
+	"name": "TEMPLATES.helloworld.name",
+	"desc": "TEMPLATES.helloworld.desc",
+	"banner": "template-banner.png"
+}