spi 动画支持

resource/res.json

@@ -36,6 +36,10 @@
 			"keys": "nx1.jpg,ny1.jpg,nz1.jpg,px1.jpg,py1.jpg,pz1.jpg",
 			"name": "skybox"
 		},
+		{
+			"keys": "rabbit.spi",
+			"name": "spine"
+		},
 		{
 			"keys": "产品1.png,产品2.png,产品3.png,产品4.png,产品5.png,产品6.png,产品7.png,产品8.png",
 			"name": "产品输出"

scripts/mergeSpine.js

+const fs = require("fs")
+
+let arg = process.argv.splice(2);
+
+if (!arg[0]) {
+    console.error("未输入路径");
+    return
+}
+var inUrl = arg[0];
+
+var img = fs.readFileSync(inUrl + ".png")
+var atlas = fs.readFileSync(inUrl + ".atlas")
+var json = fs.readFileSync(inUrl + ".json")
+
+// console.log(img.byteLength)
+// console.log(atlas.byteLength)
+// console.log(json.byteLength)
+
+
+//头部信息
+var header = new ArrayBuffer(12);
+var headerView = new DataView(header);
+headerView.setUint32(0, img.byteLength, true);
+headerView.setUint32(4, atlas.byteLength, true);
+headerView.setUint32(8, json.byteLength, true);
+
+fs.writeFileSync(inUrl + ".spi", Buffer.concat([
+    toBuffer(header),
+    img,
+    atlas,
+    json
+], 12 + img.byteLength + atlas.byteLength + json.byteLength), { encoding: "binary" })
+
+
+function string2buffer(str) {
+    // 首先将字符串转为16进制
+    let val = ""
+    for (let i = 0; i < str.length; i++) {
+        if (val === '') {
+            val = str.charCodeAt(i).toString(16)
+        } else {
+            val += ',' + str.charCodeAt(i).toString(16)
+        }
+    }
+    // 将16进制转化为ArrayBuffer
+    return new Uint8Array(val.match(/[\da-f]{2}/gi).map(function (h) {
+        return parseInt(h, 16)
+    }))
+}
+
+function bytesToBinary(bytes) {
+    const length = bytes.length;
+    let result = '';
+    for (let i = 0; i < length; i++) {
+        const binStr = Number(bytes[i]).toString(2)
+        result += '0'.repeat(8 - binStr.length) + binStr; // 不足八位前置补0
+    }
+    return result.toString();
+}
+
+function toBuffer(ab) {
+    // var buf = new Buffer(ab.byteLength);
+    var buf = Buffer.alloc(ab.byteLength);
+    var view = new Uint8Array(ab);
+    for (var i = 0; i < buf.length; ++i) {
+        buf[i] = view[i];
+    }
+    return buf;
+}
+function toArrayBuffer(buf) {
+    var ab = new ArrayBuffer(buf.length);
+    var view = new Uint8Array(ab);
+    for (var i = 0; i < buf.length; ++i) {
+        view[i] = buf[i];
+    }
+    return ab;
+}
\ No newline at end of file

scripts/rabbit/rabbit.atlas

+
+tuzi跳.png
+size: 256,256
+format: RGBA8888
+filter: Linear,Linear
+repeat: none
+erdy
+  rotate: true
+  xy: 112, 120
+  size: 49, 65
+  orig: 69, 81
+  offset: 0, 1
+  index: -1
+erdz
+  rotate: false
+  xy: 95, 31
+  size: 36, 78
+  orig: 36, 94
+  offset: 0, 1
+  index: -1
+jb
+  rotate: false
+  xy: 133, 13
+  size: 38, 38
+  orig: 39, 42
+  offset: 0, 3
+  index: -1
+st
+  rotate: false
+  xy: 2, 111
+  size: 108, 136
+  orig: 138, 139
+  offset: 26, 2
+  index: -1
+toua
+  rotate: false
+  xy: 2, 21
+  size: 91, 88
+  orig: 94, 89
+  offset: 3, 1
+  index: -1
+weib
+  rotate: false
+  xy: 220, 100
+  size: 27, 29
+  orig: 31, 33
+  offset: 2, 2
+  index: -1
+ys
+  rotate: false
+  xy: 133, 53
+  size: 36, 65
+  orig: 39, 69
+  offset: 1, 3
+  index: -1
+yziz
+  rotate: false
+  xy: 112, 171
+  size: 135, 76
+  orig: 176, 107
+  offset: 27, 17
+  index: -1
+zs
+  rotate: true
+  xy: 179, 131
+  size: 38, 65
+  orig: 41, 67
+  offset: 1, 1
+  index: -1
+zsy
+  rotate: true
+  xy: 179, 98
+  size: 31, 39
+  orig: 36, 42
+  offset: 3, 1
+  index: -1

scripts/searchImgUrl.js

+var path = require("path");
+var fs = require("fs");
+var filePath = process.argv[2];
+var lookingForString = process.argv[3];
+recursiveReadFile(filePath);
+
+function recursiveReadFile(fileName) {
+    if (!fs.existsSync(fileName)) return;
+    if (isFile(fileName)) {
+        check(fileName);
+    }
+    if (isDirectory(fileName)) {
+        var files = fs.readdirSync(fileName);
+        files.forEach(function (val, key) {
+            var temp = path.join(fileName, val);
+            if (isDirectory(temp)) recursiveReadFile(temp);
+            if (isFile(temp)) check(temp);
+        })
+    }
+}
+function check(fileName) {
+    var data = readFile(fileName);
+    var exc = new RegExp(lookingForString);
+    if (exc.test(data))
+        console.log(fileName);
+}
+
+function isDirectory(fileName) {
+    if (fs.existsSync(fileName)) return fs.statSync(fileName).isDirectory();
+}
+
+function isFile(fileName) {
+    if (fs.existsSync(fileName)) return fs.statSync(fileName).isFile();
+}
+
+function readFile(fileName) {
+    if (fs.existsSync(fileName)) return fs.readFileSync(fileName, "utf-8");
+}
+

src/ResJson.ts

@@ -36,6 +36,10 @@ export const ResJson = {
 			"keys": "nx1.jpg,ny1.jpg,nz1.jpg,px1.jpg,py1.jpg,pz1.jpg",
 			"name": "skybox"
 		},
+		{
+			"keys": "rabbit.spi",
+			"name": "spine"
+		},
 		{
 			"keys": "产品1.png,产品2.png,产品3.png,产品4.png,产品5.png,产品6.png,产品7.png,产品8.png",
 			"name": "产品输出"

src/modules/RES.ts

@@ -77,6 +77,9 @@ export namespace RES {
     let textureHash: {
         [name: string]: FYGE.Texture;
     } = {};
+    let spineDataHash: {
+        [name: string]: FYGE.ISkeletonData
+    } = {}
     /**
      * movieClip的ve数据
      */
@@ -248,6 +251,33 @@ export namespace RES {
                 return p
             }
         }
+        else if (type == 'spi') {
+            console.log(str)
+            if (spineDataHash[str]) {
+                comFun && comFun.call(thisObj, spineDataHash[str], str)
+                return new Promise((r) => {
+                    r(spineDataHash[str])
+                })
+            } else if (singleResPromiseHash[str]) {
+                return returnSingleResPromise(str, comFun, thisObj)
+            } else {
+                var groupName = hasRes(str);
+                var src = groupName ? resPath + groupName + "/" + str : str;
+                return singleResPromiseHash[str] = new Promise((resolve, reject) => {
+                    FYGE.loadSpine(src, (spineData) => {
+                        delete singleResPromiseHash[str]
+                        spineDataHash[str] = spineData
+                        comFun && comFun.call(thisObj, spineData, str)
+                        resolve(spineData)
+                    }, (err) => {
+                        delete singleResPromiseHash[str];
+                        comFun && comFun.call(thisObj, null, str)
+                        reject(err)
+                    })
+                })
+            }
+            return
+        }
         else if (type == "svga") {
             if (videoEntityHash[str]) {
                 comFun && comFun.call(thisObj, videoEntityHash[str], str)
@@ -332,6 +362,10 @@ export namespace RES {
         if (type == "png" || type == "jpg") {
             return textureHash[str] || FYGE.TextureCache[str] || null;
         }
+        else if (type == 'spi') {
+            // @ts-ignore
+            return spineDataHash[str] || null
+        }
         else if (type == "svga") {
             // @ts-ignore
             return videoEntityHash[str] || null;

src/scenes/GameScene/GameScene.tsx

@@ -14,6 +14,45 @@ import { GameOverModal } from "../../panels/GameOverModal/GameOverModal";
 import { GameResumeModal } from "../../panels/GameResumeModal/GameResumeModal";
 import { GameEle } from "./GameEle";
 
+
+/**
+ * 切换spine 皮肤
+ * @param {*} spine 
+ * @param {*} skinName 
+ * @returns 
+ */
+ function setSpineSkin(spine: FYGE.Spine, skinName: string) {
+  if (!spine) return
+  if (!skinName) {
+    spine.setSkin(spine.skinNames[0]);
+    return
+  }
+  if (!spine.skinNames.includes(skinName)) {
+    console.error('找不到对应皮肤:', skinName)
+    return
+  }
+  console.error('切换皮肤:', skinName)
+  spine.setSkin(skinName);
+}
+
+/**
+ * 设置 spine 交互动作
+ * @param {*} spine 
+ * @param {*} aniName 
+ * @param {*} loop 
+ * @param {*} cb 
+ * @returns 
+ */
+function setSpineAni(spine: FYGE.Spine, aniName: string, loop?: number, cb?: Function) {
+  if (!spine || !aniName) {
+    return
+  }
+  spine.animationManager.showAni(aniName, loop, () => {
+    cb && cb()
+  });
+}
+
+
 class ScoreBoard extends Dream.RenderContainer {
   scoreTextField: FYGE.TextField
   _score: number = 0
@@ -52,18 +91,23 @@ class ScoreBoard extends Dream.RenderContainer {
     await RES.loadGroup('GameScene')
     await RES.loadGroup('产品输出')
     await RES.loadGroup('countDown')
+    await RES.loadGroup('spine')
   }
 })
 export class GameScene extends Dream.RenderContainer {
   ScoreBoardIns: any
   sceneCont: FYGE.Container
   didRendered(): void {
-
+    
     const tt = this.sceneCont.addChild(new FYGE.Lottie(countDown))
     tt.position.set(200, 200)
     tt.play()
     console.log(tt)
     
+    const tp = this.sceneCont.addChild(new FYGE.Spine(RES.getRes('rabbit.spi')))
+    setSpineAni(tp, 'zuizhong')
+    tp.position.set(200, 200)
+    console.log(tp)
   }
 
   onAddScore() {