UnityMirror/spine-runtimes
1
0
Fork 0
mirror of https://github.com/EsotericSoftware/spine-runtimes.git synced 2026-03-26 22:49:01 +08:00
Code Issues Packages Projects Releases Wiki Activity

[ts] Refactor module resolution, switch to esbuild

Browse Source
This commit is contained in:
Mario Zechner 2021-08-25 19:30:46 +02:00
parent ca6b3d0bac
commit 79f0abf765
36 changed files with 11613 additions and 28064 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
.gitignore vendored
View File

@ -149,5 +149,9 @@ cmake-build-debug-visual-studio
spine-cocos2dx/build-v4/ spine-cocos2dx/build-v4/
spine-cocos2dx/example-v4/cocos2d spine-cocos2dx/example-v4/cocos2d
spine-cocos2dx/example-v4/cocos2dx.zip spine-cocos2dx/example-v4/cocos2dx.zip
spine-ts/spine-canvas/dist
spine-ts/spine-core/dist spine-ts/spine-core/dist
spine-ts/spine-canvas/dist
spine-ts/spine-webgl/dist
spine-ts/spine-player/dist
spine-ts/spine-threejs/dist

2
spine-ts/README.md
View File

@ -1,5 +1,7 @@
# spine-ts # spine-ts
# In VS Code config, set Extensions > TypeScript > Import Module Specifier to non-relative
The spine-ts runtime provides functionality to load and manipulate [Spine](http://esotericsoftware.com) skeletal animation data using TypeScript and JavaScript. spine-ts is split The spine-ts runtime provides functionality to load and manipulate [Spine](http://esotericsoftware.com) skeletal animation data using TypeScript and JavaScript. spine-ts is split
up into multiple modules: up into multiple modules:

10354
spine-ts/build/spine-canvas.js
View File

File diff suppressed because it is too large Load Diff

8
spine-ts/build/spine-canvas.js.map
View File

File diff suppressed because one or more lines are too long

3299
spine-ts/build/spine-core.d.ts vendored
View File

File diff suppressed because it is too large Load Diff

10990
spine-ts/build/spine-core.js
View File

File diff suppressed because it is too large Load Diff

1
spine-ts/build/spine-core.js.map
View File

File diff suppressed because one or more lines are too long

261
spine-ts/package-lock.json generated
View File

@ -15,8 +15,10 @@
"spine-webgl" "spine-webgl"
], ],
"devDependencies": { "devDependencies": {
"@rollup/plugin-typescript": "^8.2.5",
"esbuild": "^0.12.22",
"npx": "^10.2.2", "npx": "^10.2.2",
"rollup": "^2.56.2", "rollup": "^2.56.3",
"rollup-plugin-dts": "^3.0.2", "rollup-plugin-dts": "^3.0.2",
"typescript": "^4.3.5" "typescript": "^4.3.5"
} }
@ -59,13 +61,50 @@
"node": ">=6.9.0" "node": ">=6.9.0"
} }
}, },
"node_modules/@esotericsoftware/spine-canvas": { "node_modules/@esotericsoftware/spine-webgl": {
"resolved": "spine-canvas", "resolved": "spine-webgl",
"link": true "link": true
}, },
"node_modules/@esotericsoftware/spine-core": { "node_modules/@rollup/plugin-typescript": {
"resolved": "spine-core", "version": "8.2.5",
"link": true "resolved": "https://registry.npmjs.org/@rollup/plugin-typescript/-/plugin-typescript-8.2.5.tgz",
"integrity": "sha512-QL/LvDol/PAGB2O0S7/+q2HpSUNodpw7z6nGn9BfoVCPOZ0r4EALrojFU29Bkoi2Hr2jgTocTejJ5GGWZfOxbQ==",
"dev": true,
"dependencies": {
"@rollup/pluginutils": "^3.1.0",
"resolve": "^1.17.0"
},
"engines": {
"node": ">=8.0.0"
},
"peerDependencies": {
"rollup": "^2.14.0",
"tslib": "*",
"typescript": ">=3.7.0"
}
},
"node_modules/@rollup/pluginutils": {
"version": "3.1.0",
"resolved": "https://registry.npmjs.org/@rollup/pluginutils/-/pluginutils-3.1.0.tgz",
"integrity": "sha512-GksZ6pr6TpIjHm8h9lSQ8pi8BE9VeubNT0OMJ3B5uZJ8pz73NPiqOtCog/x2/QzM1ENChPKxMDhiQuRHsqc+lg==",
"dev": true,
"dependencies": {
"@types/estree": "0.0.39",
"estree-walker": "^1.0.1",
"picomatch": "^2.2.2"
},
"engines": {
"node": ">= 8.0.0"
},
"peerDependencies": {
"rollup": "^1.20.0||^2.0.0"
}
},
"node_modules/@types/estree": {
"version": "0.0.39",
"resolved": "https://registry.npmjs.org/@types/estree/-/estree-0.0.39.tgz",
"integrity": "sha512-EYNwp3bU+98cpU4lAWYYL7Zz+2gryWH1qbdDTidVd6hkiR6weksdbMadyXKXNPEkQFhXM+hVO9ZygomHXp+AIw==",
"dev": true
}, },
"node_modules/ansi-styles": { "node_modules/ansi-styles": {
"version": "3.2.1", "version": "3.2.1",
@ -112,6 +151,16 @@
"dev": true, "dev": true,
"optional": true "optional": true
}, },
"node_modules/esbuild": {
"version": "0.12.22",
"resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.12.22.tgz",
"integrity": "sha512-yWCr9RoFehpqoe/+MwZXJpYOEIt7KOEvNnjIeMZpMSyQt+KCBASM3y7yViiN5dJRphf1wGdUz1+M4rTtWd/ulA==",
"dev": true,
"hasInstallScript": true,
"bin": {
"esbuild": "bin/esbuild"
}
},
"node_modules/escape-string-regexp": { "node_modules/escape-string-regexp": {
"version": "1.0.5", "version": "1.0.5",
"resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz", "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
@ -122,6 +171,12 @@
"node": ">=0.8.0" "node": ">=0.8.0"
} }
}, },
"node_modules/estree-walker": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-1.0.1.tgz",
"integrity": "sha512-1fMXF3YP4pZZVozF8j/ZLfvnR8NSIljt56UhbZ5PeeDmmGHpgpdwQt7ITlGvYaQukCvuBRMLEiKiYC+oeIg4cg==",
"dev": true
},
"node_modules/fsevents": { "node_modules/fsevents": {
"version": "2.3.2", "version": "2.3.2",
"resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz", "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz",
@ -136,6 +191,24 @@
"node": "^8.16.0 || ^10.6.0 || >=11.0.0" "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
} }
}, },
"node_modules/function-bind": {
"version": "1.1.1",
"resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz",
"integrity": "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==",
"dev": true
},
"node_modules/has": {
"version": "1.0.3",
"resolved": "https://registry.npmjs.org/has/-/has-1.0.3.tgz",
"integrity": "sha512-f2dvO0VU6Oej7RkWJGrehjbzMAjFp5/VKPp5tTpWIV4JHHZK1/BxbFRtf/siA2SWTe09caDmVtYYzWEIbBS4zw==",
"dev": true,
"dependencies": {
"function-bind": "^1.1.1"
},
"engines": {
"node": ">= 0.4.0"
}
},
"node_modules/has-flag": { "node_modules/has-flag": {
"version": "3.0.0", "version": "3.0.0",
"resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz", "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
@ -146,6 +219,18 @@
"node": ">=4" "node": ">=4"
} }
}, },
"node_modules/is-core-module": {
"version": "2.6.0",
"resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.6.0.tgz",
"integrity": "sha512-wShG8vs60jKfPWpF2KZRaAtvt3a20OAn7+IJ6hLPECpSABLcKtFKTTI4ZtH5QcBruBHlq+WsdHWyz0BCZW7svQ==",
"dev": true,
"dependencies": {
"has": "^1.0.3"
},
"funding": {
"url": "https://github.com/sponsors/ljharb"
}
},
"node_modules/js-tokens": { "node_modules/js-tokens": {
"version": "4.0.0", "version": "4.0.0",
"resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz", "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
@ -5203,10 +5288,41 @@
"inBundle": true, "inBundle": true,
"license": "ISC" "license": "ISC"
}, },
"node_modules/path-parse": {
"version": "1.0.7",
"resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz",
"integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==",
"dev": true
},
"node_modules/picomatch": {
"version": "2.3.0",
"resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.0.tgz",
"integrity": "sha512-lY1Q/PiJGC2zOv/z391WOTD+Z02bCgsFfvxoXXf6h7kv9o+WmsmzYqrAwY63sNgOxE4xEdq0WyUnXfKeBrSvYw==",
"dev": true,
"engines": {
"node": ">=8.6"
},
"funding": {
"url": "https://github.com/sponsors/jonschlinkert"
}
},
"node_modules/resolve": {
"version": "1.20.0",
"resolved": "https://registry.npmjs.org/resolve/-/resolve-1.20.0.tgz",
"integrity": "sha512-wENBPt4ySzg4ybFQW2TT1zMQucPK95HSh/nq2CFTZVOGut2+pQvSsgtda4d26YrYcr067wjbmzOG8byDPBX63A==",
"dev": true,
"dependencies": {
"is-core-module": "^2.2.0",
"path-parse": "^1.0.6"
},
"funding": {
"url": "https://github.com/sponsors/ljharb"
}
},
"node_modules/rollup": { "node_modules/rollup": {
"version": "2.56.2", "version": "2.56.3",
"resolved": "https://registry.npmjs.org/rollup/-/rollup-2.56.2.tgz", "resolved": "https://registry.npmjs.org/rollup/-/rollup-2.56.3.tgz",
"integrity": "sha512-s8H00ZsRi29M2/lGdm1u8DJpJ9ML8SUOpVVBd33XNeEeL3NVaTiUcSBHzBdF3eAyR0l7VSpsuoVUGrRHq7aPwQ==", "integrity": "sha512-Au92NuznFklgQCUcV96iXlxUbHuB1vQMaH76DHl5M11TotjOHwqk9CwcrT78+Tnv4FN9uTBxq6p4EJoYkpyekg==",
"dev": true, "dev": true,
"bin": { "bin": {
"rollup": "dist/bin/rollup" "rollup": "dist/bin/rollup"
@ -5259,6 +5375,13 @@
"node": ">=4" "node": ">=4"
} }
}, },
"node_modules/tslib": {
"version": "2.3.1",
"resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.1.tgz",
"integrity": "sha512-77EbyPPpMz+FRFRuAFlWMtmgUWGe9UOG2Z25NqCwiIjRhOf5iKGuzSe5P2w1laq+FkRy4p+PCuVkJSGkzTEKVw==",
"dev": true,
"peer": true
},
"node_modules/typescript": { "node_modules/typescript": {
"version": "4.3.5", "version": "4.3.5",
"resolved": "https://registry.npmjs.org/typescript/-/typescript-4.3.5.tgz", "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.3.5.tgz",
@ -5275,17 +5398,18 @@
"spine-canvas": { "spine-canvas": {
"name": "@esotericsoftware/spine-canvas", "name": "@esotericsoftware/spine-canvas",
"version": "4.0.1", "version": "4.0.1",
"license": "LicenseRef-LICENSE", "extraneous": true,
"devDependencies": { "license": "LicenseRef-LICENSE"
"npx": "^10.2.2",
"rollup": "^2.56.2",
"rollup-plugin-dts": "^3.0.2",
"typescript": "^4.3.5"
}
}, },
"spine-core": { "spine-core": {
"name": "@esotericsoftware/spine-core", "name": "@esotericsoftware/spine-core",
"version": "4.0.1", "version": "4.0.1",
"extraneous": true,
"license": "LicenseRef-LICENSE"
},
"spine-webgl": {
"name": "@esotericsoftware/spine-webgl",
"version": "4.0.1",
"license": "LicenseRef-LICENSE" "license": "LicenseRef-LICENSE"
} }
}, },
@ -5319,17 +5443,35 @@
"js-tokens": "^4.0.0" "js-tokens": "^4.0.0"
} }
}, },
"@esotericsoftware/spine-canvas": { "@esotericsoftware/spine-webgl": {
"version": "file:spine-canvas", "version": "file:spine-webgl"
},
"@rollup/plugin-typescript": {
"version": "8.2.5",
"resolved": "https://registry.npmjs.org/@rollup/plugin-typescript/-/plugin-typescript-8.2.5.tgz",
"integrity": "sha512-QL/LvDol/PAGB2O0S7/+q2HpSUNodpw7z6nGn9BfoVCPOZ0r4EALrojFU29Bkoi2Hr2jgTocTejJ5GGWZfOxbQ==",
"dev": true,
"requires": { "requires": {
"npx": "^10.2.2", "@rollup/pluginutils": "^3.1.0",
"rollup": "^2.56.2", "resolve": "^1.17.0"
"rollup-plugin-dts": "^3.0.2",
"typescript": "^4.3.5"
} }
}, },
"@esotericsoftware/spine-core": { "@rollup/pluginutils": {
"version": "file:spine-core" "version": "3.1.0",
"resolved": "https://registry.npmjs.org/@rollup/pluginutils/-/pluginutils-3.1.0.tgz",
"integrity": "sha512-GksZ6pr6TpIjHm8h9lSQ8pi8BE9VeubNT0OMJ3B5uZJ8pz73NPiqOtCog/x2/QzM1ENChPKxMDhiQuRHsqc+lg==",
"dev": true,
"requires": {
"@types/estree": "0.0.39",
"estree-walker": "^1.0.1",
"picomatch": "^2.2.2"
}
},
"@types/estree": {
"version": "0.0.39",
"resolved": "https://registry.npmjs.org/@types/estree/-/estree-0.0.39.tgz",
"integrity": "sha512-EYNwp3bU+98cpU4lAWYYL7Zz+2gryWH1qbdDTidVd6hkiR6weksdbMadyXKXNPEkQFhXM+hVO9ZygomHXp+AIw==",
"dev": true
}, },
"ansi-styles": { "ansi-styles": {
"version": "3.2.1", "version": "3.2.1",
@ -5370,6 +5512,12 @@
"dev": true, "dev": true,
"optional": true "optional": true
}, },
"esbuild": {
"version": "0.12.22",
"resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.12.22.tgz",
"integrity": "sha512-yWCr9RoFehpqoe/+MwZXJpYOEIt7KOEvNnjIeMZpMSyQt+KCBASM3y7yViiN5dJRphf1wGdUz1+M4rTtWd/ulA==",
"dev": true
},
"escape-string-regexp": { "escape-string-regexp": {
"version": "1.0.5", "version": "1.0.5",
"resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz", "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
@ -5377,6 +5525,12 @@
"dev": true, "dev": true,
"optional": true "optional": true
}, },
"estree-walker": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-1.0.1.tgz",
"integrity": "sha512-1fMXF3YP4pZZVozF8j/ZLfvnR8NSIljt56UhbZ5PeeDmmGHpgpdwQt7ITlGvYaQukCvuBRMLEiKiYC+oeIg4cg==",
"dev": true
},
"fsevents": { "fsevents": {
"version": "2.3.2", "version": "2.3.2",
"resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz", "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz",
@ -5384,6 +5538,21 @@
"dev": true, "dev": true,
"optional": true "optional": true
}, },
"function-bind": {
"version": "1.1.1",
"resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz",
"integrity": "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==",
"dev": true
},
"has": {
"version": "1.0.3",
"resolved": "https://registry.npmjs.org/has/-/has-1.0.3.tgz",
"integrity": "sha512-f2dvO0VU6Oej7RkWJGrehjbzMAjFp5/VKPp5tTpWIV4JHHZK1/BxbFRtf/siA2SWTe09caDmVtYYzWEIbBS4zw==",
"dev": true,
"requires": {
"function-bind": "^1.1.1"
}
},
"has-flag": { "has-flag": {
"version": "3.0.0", "version": "3.0.0",
"resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz", "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
@ -5391,6 +5560,15 @@
"dev": true, "dev": true,
"optional": true "optional": true
}, },
"is-core-module": {
"version": "2.6.0",
"resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.6.0.tgz",
"integrity": "sha512-wShG8vs60jKfPWpF2KZRaAtvt3a20OAn7+IJ6hLPECpSABLcKtFKTTI4ZtH5QcBruBHlq+WsdHWyz0BCZW7svQ==",
"dev": true,
"requires": {
"has": "^1.0.3"
}
},
"js-tokens": { "js-tokens": {
"version": "4.0.0", "version": "4.0.0",
"resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz", "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
@ -9345,10 +9523,32 @@
} }
} }
}, },
"path-parse": {
"version": "1.0.7",
"resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz",
"integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==",
"dev": true
},
"picomatch": {
"version": "2.3.0",
"resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.0.tgz",
"integrity": "sha512-lY1Q/PiJGC2zOv/z391WOTD+Z02bCgsFfvxoXXf6h7kv9o+WmsmzYqrAwY63sNgOxE4xEdq0WyUnXfKeBrSvYw==",
"dev": true
},
"resolve": {
"version": "1.20.0",
"resolved": "https://registry.npmjs.org/resolve/-/resolve-1.20.0.tgz",
"integrity": "sha512-wENBPt4ySzg4ybFQW2TT1zMQucPK95HSh/nq2CFTZVOGut2+pQvSsgtda4d26YrYcr067wjbmzOG8byDPBX63A==",
"dev": true,
"requires": {
"is-core-module": "^2.2.0",
"path-parse": "^1.0.6"
}
},
"rollup": { "rollup": {
"version": "2.56.2", "version": "2.56.3",
"resolved": "https://registry.npmjs.org/rollup/-/rollup-2.56.2.tgz", "resolved": "https://registry.npmjs.org/rollup/-/rollup-2.56.3.tgz",
"integrity": "sha512-s8H00ZsRi29M2/lGdm1u8DJpJ9ML8SUOpVVBd33XNeEeL3NVaTiUcSBHzBdF3eAyR0l7VSpsuoVUGrRHq7aPwQ==", "integrity": "sha512-Au92NuznFklgQCUcV96iXlxUbHuB1vQMaH76DHl5M11TotjOHwqk9CwcrT78+Tnv4FN9uTBxq6p4EJoYkpyekg==",
"dev": true, "dev": true,
"requires": { "requires": {
"fsevents": "~2.3.2" "fsevents": "~2.3.2"
@ -9380,6 +9580,13 @@
"has-flag": "^3.0.0" "has-flag": "^3.0.0"
} }
}, },
"tslib": {
"version": "2.3.1",
"resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.1.tgz",
"integrity": "sha512-77EbyPPpMz+FRFRuAFlWMtmgUWGe9UOG2Z25NqCwiIjRhOf5iKGuzSe5P2w1laq+FkRy4p+PCuVkJSGkzTEKVw==",
"dev": true,
"peer": true
},
"typescript": { "typescript": {
"version": "4.3.5", "version": "4.3.5",
"resolved": "https://registry.npmjs.org/typescript/-/typescript-4.3.5.tgz", "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.3.5.tgz",

4
spine-ts/package.json
View File

@ -33,8 +33,10 @@
"spine-webgl" "spine-webgl"
], ],
"devDependencies": { "devDependencies": {
"@rollup/plugin-typescript": "^8.2.5",
"esbuild": "^0.12.22",
"npx": "^10.2.2", "npx": "^10.2.2",
"rollup": "^2.56.2", "rollup": "^2.56.3",
"rollup-plugin-dts": "^3.0.2", "rollup-plugin-dts": "^3.0.2",
"typescript": "^4.3.5" "typescript": "^4.3.5"
} }

34
spine-ts/rollup.config.js
View File

@ -1,34 +0,0 @@
import dts from 'rollup-plugin-dts'
export default [
{
input: 'spine-core/dist/index.js',
context: 'this',
output: [
{
file: 'build/spine-core.js',
name: 'spine',
format: 'umd',
exports: 'named',
}
]
},
{
input: 'spine-core/dist/index.d.ts',
output: [{ file: 'build/spine-core.d.ts', format: 'es' }],
plugins: [dts()],
},
{
input: 'spine-canvas/dist/index.js',
context: 'this',
output: [
{
file: 'build/spine-canvas.js',
name: 'spine',
format: 'umd',
exports: 'named',
}
]
}
]

2
spine-ts/spine-canvas/src/AssetManager.ts
View File

@ -27,7 +27,7 @@
* THE SPINE RUNTIMES, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. * THE SPINE RUNTIMES, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
*****************************************************************************/ *****************************************************************************/
import { Downloader, AssetManagerBase } from "../../spine-core/dist/index"; import { AssetManagerBase, Downloader } from "spine-core";
import { CanvasTexture } from "./CanvasTexture"; import { CanvasTexture } from "./CanvasTexture";
export class AssetManager extends AssetManagerBase { export class AssetManager extends AssetManagerBase {

2
spine-ts/spine-canvas/src/CanvasTexture.ts
View File

@ -27,7 +27,7 @@
* THE SPINE RUNTIMES, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. * THE SPINE RUNTIMES, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
*****************************************************************************/ *****************************************************************************/
import { Texture, TextureFilter, TextureWrap } from "../../spine-core/dist/index"; import { Texture, TextureFilter, TextureWrap } from "spine-core";
export class CanvasTexture extends Texture { export class CanvasTexture extends Texture {
constructor(image: HTMLImageElement) { constructor(image: HTMLImageElement) {

2
spine-ts/spine-canvas/src/SkeletonRenderer.ts
View File

@ -27,7 +27,7 @@
* THE SPINE RUNTIMES, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. * THE SPINE RUNTIMES, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
*****************************************************************************/ *****************************************************************************/
import { Utils, Color, Skeleton, RegionAttachment, TextureAtlasRegion, BlendMode, MeshAttachment, Slot } from "../../spine-core/dist/index"; import { Utils, Color, Skeleton, RegionAttachment, TextureAtlasRegion, BlendMode, MeshAttachment, Slot } from "spine-core";
import { CanvasTexture } from "./CanvasTexture"; import { CanvasTexture } from "./CanvasTexture";
export class SkeletonRenderer { export class SkeletonRenderer {

43
spine-ts/spine-canvas/src/index.ts
View File

@ -1,28 +1,31 @@
import { AssetManager } from "./AssetManager";
import { CanvasTexture } from "./CanvasTexture";
import { SkeletonRenderer } from "./SkeletonRenderer";
export * from "./AssetManager"; export * from "./AssetManager";
export * from "./CanvasTexture"; export * from "./CanvasTexture";
export * from "./SkeletonRenderer"; export * from "./SkeletonRenderer";
export * from "../../spine-core/dist/index"
// Needed for compatibility with the old way of how export * from "spine-core";
// spine-canvas worked. We'd set all exported types
// on the global spine.canvas. However, with rollup // Before modularization, we would expose spine-core on the global
// we can only specify a single default object global // `spine` object, and spine-canvas on the global `spine.canvas` object.
// name, which is spine, not spine.canvas. If spine-canvas.js // This was used by clients when including spine-canvas via <script src="spine-canvas.js">
// is used in vanilla.js, we added a property spine.canvas //
// and assign the types of spine-canvas to it. This way // Now with modularization and using esbuild for bundling, we need to emulate this old
// old code keeps on working. // behaviour as to not break old clients.
//
// We pass `--global-name=spine` to esbuild. This will create an object containing
// all exports and assign it to the global variable called `spine`.
//
// That solves half the issue. We also need to assign the exports object to
// `spine.canvas`. esbuild creates a local variable called `scr_exports` pointing
// to the exports object. We get to it via eval, then assign it to itself, on a new
// property called `canvas`. The client can then access the APIs through `spine` and
// `spine.canvas` as before (with the caveat that both spine-core and spine-canvas are
// now in `spine` and `spine.canvas`).
//
// This will break if esbuild renames the variable `src_exports` pointing to
// the exports object.
declare global { declare global {
var spine: any; var spine: any;
} }
if (globalThis.spine) { let exports = eval("src_exports");
globalThis.spine.canvas = { exports.canvas = exports;
AssetManager: AssetManager,
CanvasTexture: CanvasTexture,
SkeletonRenderer: SkeletonRenderer
};
}

7
spine-ts/spine-canvas/tsconfig.json
View File

@ -1,9 +1,14 @@
{ {
"extends": "../tsconfig.base.json", "extends": "../tsconfig.base.json",
"compilerOptions": { "compilerOptions": {
"baseUrl": ".",
"rootDir": "./src", "rootDir": "./src",
"outDir": "./dist", "outDir": "./dist",
"moduleResolution": "node", "paths": {
"spine-core": [
"../spine-core/src"
]
}
}, },
"include": [ "include": [
"**/*.ts" "**/*.ts"

3
spine-ts/spine-core/tsconfig.json
View File

@ -1,8 +1,9 @@
{ {
"extends": "../tsconfig.base.json", "extends": "../tsconfig.base.json",
"compilerOptions": { "compilerOptions": {
"baseUrl": ".",
"rootDir": "./src", "rootDir": "./src",
"outDir": "./dist", "outDir": "./dist"
}, },
"include": [ "include": [
"**/*.ts" "**/*.ts"

26
spine-ts/spine-webgl/package.json Normal file
View File

@ -0,0 +1,26 @@
{
"name": "@esotericsoftware/spine-webgl",
"version": "4.0.1",
"description": "The official Spine Runtimes for the web.",
"main": "dist/index.js",
"scripts": {},
"repository": {
"type": "git",
"url": "git+https://github.com/esotericsoftware/spine-runtimes.git"
},
"keywords": [
"gamedev",
"animations",
"2d",
"spine",
"game-dev",
"runtimes",
"skeletal"
],
"author": "Esoteric Software LLC",
"license": "LicenseRef-LICENSE",
"bugs": {
"url": "https://github.com/esotericsoftware/spine-runtimes/issues"
},
"homepage": "https://github.com/esotericsoftware/spine-runtimes#readme"
}

10
spine-ts/spine-webgl/src/AssetManager.ts
View File

@ -27,12 +27,14 @@
* THE SPINE RUNTIMES, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. * THE SPINE RUNTIMES, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
*****************************************************************************/ *****************************************************************************/
module spine.webgl { import { AssetManagerBase, Downloader } from "spine-core";
export class AssetManager extends spine.AssetManager { import { ManagedWebGLRenderingContext } from "./WebGL";
constructor (context: ManagedWebGLRenderingContext | WebGLRenderingContext, pathPrefix: string = "", downloader: Downloader = null) {
export class AssetManager extends AssetManagerBase {
constructor(context: ManagedWebGLRenderingContext | WebGLRenderingContext, pathPrefix: string = "", downloader: Downloader = null) {
super((image: HTMLImageElement | ImageBitmap) => { super((image: HTMLImageElement | ImageBitmap) => {
return new spine.webgl.GLTexture(context, image); return new spine.webgl.GLTexture(context, image);
}, pathPrefix, downloader); }, pathPrefix, downloader);
} }
}
} }

17
spine-ts/spine-webgl/src/Camera.ts
View File

@ -27,8 +27,10 @@
* THE SPINE RUNTIMES, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. * THE SPINE RUNTIMES, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
*****************************************************************************/ *****************************************************************************/
module spine.webgl { import { Matrix4 } from "./Matrix4";
export class OrthoCamera { import { Vector3 } from "./Vector3";
export class OrthoCamera {
position = new Vector3(0, 0, 0); position = new Vector3(0, 0, 0);
direction = new Vector3(0, 0, -1); direction = new Vector3(0, 0, -1);
up = new Vector3(0, 1, 0); up = new Vector3(0, 1, 0);
@ -42,13 +44,13 @@ module spine.webgl {
projection = new Matrix4(); projection = new Matrix4();
view = new Matrix4(); view = new Matrix4();
constructor (viewportWidth: number, viewportHeight: number) { constructor(viewportWidth: number, viewportHeight: number) {
this.viewportWidth = viewportWidth; this.viewportWidth = viewportWidth;
this.viewportHeight = viewportHeight; this.viewportHeight = viewportHeight;
this.update(); this.update();
} }
update () { update() {
let projection = this.projection; let projection = this.projection;
let view = this.view; let view = this.view;
let projectionView = this.projectionView; let projectionView = this.projectionView;
@ -63,7 +65,7 @@ module spine.webgl {
inverseProjectionView.set(projectionView.values).invert(); inverseProjectionView.set(projectionView.values).invert();
} }
screenToWorld (screenCoords: Vector3, screenWidth: number, screenHeight: number) { screenToWorld(screenCoords: Vector3, screenWidth: number, screenHeight: number) {
let x = screenCoords.x, y = screenHeight - screenCoords.y - 1; let x = screenCoords.x, y = screenHeight - screenCoords.y - 1;
screenCoords.x = (2 * x) / screenWidth - 1; screenCoords.x = (2 * x) / screenWidth - 1;
screenCoords.y = (2 * y) / screenHeight - 1; screenCoords.y = (2 * y) / screenHeight - 1;
@ -72,7 +74,7 @@ module spine.webgl {
return screenCoords; return screenCoords;
} }
worldToScreen (worldCoords: Vector3, screenWidth: number, screenHeight: number) { worldToScreen(worldCoords: Vector3, screenWidth: number, screenHeight: number) {
worldCoords.project(this.projectionView); worldCoords.project(this.projectionView);
worldCoords.x = screenWidth * (worldCoords.x + 1) / 2; worldCoords.x = screenWidth * (worldCoords.x + 1) / 2;
worldCoords.y = screenHeight * (worldCoords.y + 1) / 2; worldCoords.y = screenHeight * (worldCoords.y + 1) / 2;
@ -80,9 +82,8 @@ module spine.webgl {
return worldCoords; return worldCoords;
} }
setViewport (viewportWidth: number, viewportHeight: number) { setViewport(viewportWidth: number, viewportHeight: number) {
this.viewportWidth = viewportWidth; this.viewportWidth = viewportWidth;
this.viewportHeight = viewportHeight; this.viewportHeight = viewportHeight;
} }
}
} }

25
spine-ts/spine-webgl/src/GLTexture.ts
View File

@ -27,8 +27,10 @@
* THE SPINE RUNTIMES, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. * THE SPINE RUNTIMES, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
*****************************************************************************/ *****************************************************************************/
module spine.webgl { import { Texture, Disposable, Restorable, TextureFilter, TextureWrap } from "spine-core";
export class GLTexture extends Texture implements Disposable, Restorable { import { ManagedWebGLRenderingContext } from "./WebGL";
export class GLTexture extends Texture implements Disposable, Restorable {
context: ManagedWebGLRenderingContext; context: ManagedWebGLRenderingContext;
private texture: WebGLTexture = null; private texture: WebGLTexture = null;
private boundUnit = 0; private boundUnit = 0;
@ -36,7 +38,7 @@ module spine.webgl {
public static DISABLE_UNPACK_PREMULTIPLIED_ALPHA_WEBGL = false; public static DISABLE_UNPACK_PREMULTIPLIED_ALPHA_WEBGL = false;
constructor (context: ManagedWebGLRenderingContext | WebGLRenderingContext, image: HTMLImageElement | ImageBitmap, useMipMaps: boolean = false) { constructor(context: ManagedWebGLRenderingContext | WebGLRenderingContext, image: HTMLImageElement | ImageBitmap, useMipMaps: boolean = false) {
super(image); super(image);
this.context = context instanceof ManagedWebGLRenderingContext ? context : new ManagedWebGLRenderingContext(context); this.context = context instanceof ManagedWebGLRenderingContext ? context : new ManagedWebGLRenderingContext(context);
this.useMipMaps = useMipMaps; this.useMipMaps = useMipMaps;
@ -44,14 +46,14 @@ module spine.webgl {
this.context.addRestorable(this); this.context.addRestorable(this);
} }
setFilters (minFilter: TextureFilter, magFilter: TextureFilter) { setFilters(minFilter: TextureFilter, magFilter: TextureFilter) {
let gl = this.context.gl; let gl = this.context.gl;
this.bind(); this.bind();
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, minFilter); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, minFilter);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, GLTexture.validateMagFilter(magFilter)); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, GLTexture.validateMagFilter(magFilter));
} }
static validateMagFilter (magFilter: TextureFilter) { static validateMagFilter(magFilter: TextureFilter) {
switch (magFilter) { switch (magFilter) {
case TextureFilter.MipMap: case TextureFilter.MipMap:
case TextureFilter.MipMapLinearLinear: case TextureFilter.MipMapLinearLinear:
@ -64,14 +66,14 @@ module spine.webgl {
} }
} }
setWraps (uWrap: TextureWrap, vWrap: TextureWrap) { setWraps(uWrap: TextureWrap, vWrap: TextureWrap) {
let gl = this.context.gl; let gl = this.context.gl;
this.bind(); this.bind();
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, uWrap); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, uWrap);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, vWrap); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, vWrap);
} }
update (useMipMaps: boolean) { update(useMipMaps: boolean) {
let gl = this.context.gl; let gl = this.context.gl;
if (!this.texture) this.texture = this.context.gl.createTexture(); if (!this.texture) this.texture = this.context.gl.createTexture();
this.bind(); this.bind();
@ -84,28 +86,27 @@ module spine.webgl {
if (useMipMaps) gl.generateMipmap(gl.TEXTURE_2D); if (useMipMaps) gl.generateMipmap(gl.TEXTURE_2D);
} }
restore () { restore() {
this.texture = null; this.texture = null;
this.update(this.useMipMaps); this.update(this.useMipMaps);
} }
bind (unit: number = 0) { bind(unit: number = 0) {
let gl = this.context.gl; let gl = this.context.gl;
this.boundUnit = unit; this.boundUnit = unit;
gl.activeTexture(gl.TEXTURE0 + unit); gl.activeTexture(gl.TEXTURE0 + unit);
gl.bindTexture(gl.TEXTURE_2D, this.texture); gl.bindTexture(gl.TEXTURE_2D, this.texture);
} }
unbind () { unbind() {
let gl = this.context.gl; let gl = this.context.gl;
gl.activeTexture(gl.TEXTURE0 + this.boundUnit); gl.activeTexture(gl.TEXTURE0 + this.boundUnit);
gl.bindTexture(gl.TEXTURE_2D, null); gl.bindTexture(gl.TEXTURE_2D, null);
} }
dispose () { dispose() {
this.context.removeRestorable(this); this.context.removeRestorable(this);
let gl = this.context.gl; let gl = this.context.gl;
gl.deleteTexture(this.texture); gl.deleteTexture(this.texture);
} }
}
} }

36
spine-ts/spine-webgl/src/Input.ts
View File

@ -27,8 +27,9 @@
* THE SPINE RUNTIMES, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. * THE SPINE RUNTIMES, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
*****************************************************************************/ *****************************************************************************/
module spine.webgl { import { Pool } from "spine-core";
export class Input {
export class Input {
element: HTMLElement; element: HTMLElement;
lastX = 0; lastX = 0;
lastY = 0; lastY = 0;
@ -36,16 +37,16 @@ module spine.webgl {
currTouch: Touch = null; currTouch: Touch = null;
private listeners = new Array<InputListener>(); private listeners = new Array<InputListener>();
touchesPool = new Pool<spine.webgl.Touch>(() => { touchesPool = new Pool<Touch>(() => {
return new spine.webgl.Touch(0, 0, 0); return new spine.webgl.Touch(0, 0, 0);
}); });
constructor (element: HTMLElement) { constructor(element: HTMLElement) {
this.element = element; this.element = element;
this.setupCallbacks(element); this.setupCallbacks(element);
} }
private setupCallbacks (element: HTMLElement) { private setupCallbacks(element: HTMLElement) {
let mouseDown = (ev: UIEvent) => { let mouseDown = (ev: UIEvent) => {
if (ev instanceof MouseEvent) { if (ev instanceof MouseEvent) {
let rect = element.getBoundingClientRect(); let rect = element.getBoundingClientRect();
@ -207,27 +208,26 @@ module spine.webgl {
}, false); }, false);
} }
addListener (listener: InputListener) { addListener(listener: InputListener) {
this.listeners.push(listener); this.listeners.push(listener);
} }
removeListener (listener: InputListener) { removeListener(listener: InputListener) {
let idx = this.listeners.indexOf(listener); let idx = this.listeners.indexOf(listener);
if (idx > -1) { if (idx > -1) {
this.listeners.splice(idx, 1); this.listeners.splice(idx, 1);
} }
} }
} }
export class Touch { export class Touch {
constructor (public identifier: number, public x: number, public y: number) { constructor(public identifier: number, public x: number, public y: number) {
}
}
export interface InputListener {
down (x: number, y: number): void;
up (x: number, y: number): void;
moved (x: number, y: number): void;
dragged (x: number, y: number): void;
} }
} }
export interface InputListener {
down(x: number, y: number): void;
up(x: number, y: number): void;
moved(x: number, y: number): void;
dragged(x: number, y: number): void;
}

29
spine-ts/spine-webgl/src/LoadingScreen.ts
View File

File diff suppressed because one or more lines are too long

68
spine-ts/spine-webgl/src/Matrix4.ts
View File

@ -27,25 +27,26 @@
* THE SPINE RUNTIMES, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. * THE SPINE RUNTIMES, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
*****************************************************************************/ *****************************************************************************/
module spine.webgl { import { Vector3 } from "./Vector3";
export const M00 = 0;
export const M01 = 4;
export const M02 = 8;
export const M03 = 12;
export const M10 = 1;
export const M11 = 5;
export const M12 = 9;
export const M13 = 13;
export const M20 = 2;
export const M21 = 6;
export const M22 = 10;
export const M23 = 14;
export const M30 = 3;
export const M31 = 7;
export const M32 = 11;
export const M33 = 15;
export class Matrix4 { export const M00 = 0;
export const M01 = 4;
export const M02 = 8;
export const M03 = 12;
export const M10 = 1;
export const M11 = 5;
export const M12 = 9;
export const M13 = 13;
export const M20 = 2;
export const M21 = 6;
export const M22 = 10;
export const M23 = 14;
export const M30 = 3;
export const M31 = 7;
export const M32 = 11;
export const M33 = 15;
export class Matrix4 {
temp: Float32Array = new Float32Array(16); temp: Float32Array = new Float32Array(16);
values: Float32Array = new Float32Array(16); values: Float32Array = new Float32Array(16);
@ -54,7 +55,7 @@ module spine.webgl {
private static zAxis: Vector3 = null; private static zAxis: Vector3 = null;
private static tmpMatrix = new Matrix4(); private static tmpMatrix = new Matrix4();
constructor () { constructor() {
let v = this.values; let v = this.values;
v[M00] = 1; v[M00] = 1;
v[M11] = 1; v[M11] = 1;
@ -62,12 +63,12 @@ module spine.webgl {
v[M33] = 1; v[M33] = 1;
} }
set (values: ArrayLike<number>): Matrix4 { set(values: ArrayLike<number>): Matrix4 {
this.values.set(values); this.values.set(values);
return this; return this;
} }
transpose (): Matrix4 { transpose(): Matrix4 {
let t = this.temp; let t = this.temp;
let v = this.values; let v = this.values;
t[M00] = v[M00]; t[M00] = v[M00];
@ -89,7 +90,7 @@ module spine.webgl {
return this.set(t); return this.set(t);
} }
identity (): Matrix4 { identity(): Matrix4 {
let v = this.values; let v = this.values;
v[M00] = 1; v[M00] = 1;
v[M01] = 0; v[M01] = 0;
@ -110,7 +111,7 @@ module spine.webgl {
return this; return this;
} }
invert (): Matrix4 { invert(): Matrix4 {
let v = this.values; let v = this.values;
let t = this.temp; let t = this.temp;
let l_det = v[M30] * v[M21] * v[M12] * v[M03] - v[M20] * v[M31] * v[M12] * v[M03] - v[M30] * v[M11] * v[M22] * v[M03] let l_det = v[M30] * v[M21] * v[M12] * v[M03] - v[M20] * v[M31] * v[M12] * v[M03] - v[M30] * v[M11] * v[M22] * v[M03]
@ -174,7 +175,7 @@ module spine.webgl {
return this; return this;
} }
determinant (): number { determinant(): number {
let v = this.values; let v = this.values;
return v[M30] * v[M21] * v[M12] * v[M03] - v[M20] * v[M31] * v[M12] * v[M03] - v[M30] * v[M11] * v[M22] * v[M03] return v[M30] * v[M21] * v[M12] * v[M03] - v[M20] * v[M31] * v[M12] * v[M03] - v[M30] * v[M11] * v[M22] * v[M03]
+ v[M10] * v[M31] * v[M22] * v[M03] + v[M20] * v[M11] * v[M32] * v[M03] - v[M10] * v[M21] * v[M32] * v[M03] + v[M10] * v[M31] * v[M22] * v[M03] + v[M20] * v[M11] * v[M32] * v[M03] - v[M10] * v[M21] * v[M32] * v[M03]
@ -186,7 +187,7 @@ module spine.webgl {
- v[M00] * v[M21] * v[M12] * v[M33] - v[M10] * v[M01] * v[M22] * v[M33] + v[M00] * v[M11] * v[M22] * v[M33]; - v[M00] * v[M21] * v[M12] * v[M33] - v[M10] * v[M01] * v[M22] * v[M33] + v[M00] * v[M11] * v[M22] * v[M33];
} }
translate (x: number, y: number, z: number): Matrix4 { translate(x: number, y: number, z: number): Matrix4 {
let v = this.values; let v = this.values;
v[M03] += x; v[M03] += x;
v[M13] += y; v[M13] += y;
@ -194,11 +195,11 @@ module spine.webgl {
return this; return this;
} }
copy (): Matrix4 { copy(): Matrix4 {
return new Matrix4().set(this.values); return new Matrix4().set(this.values);
} }
projection (near: number, far: number, fovy: number, aspectRatio: number): Matrix4 { projection(near: number, far: number, fovy: number, aspectRatio: number): Matrix4 {
this.identity(); this.identity();
let l_fd = (1.0 / Math.tan((fovy * (Math.PI / 180)) / 2.0)); let l_fd = (1.0 / Math.tan((fovy * (Math.PI / 180)) / 2.0));
let l_a1 = (far + near) / (near - far); let l_a1 = (far + near) / (near - far);
@ -223,11 +224,11 @@ module spine.webgl {
return this; return this;
} }
ortho2d (x: number, y: number, width: number, height: number): Matrix4 { ortho2d(x: number, y: number, width: number, height: number): Matrix4 {
return this.ortho(x, x + width, y, y + height, 0, 1); return this.ortho(x, x + width, y, y + height, 0, 1);
} }
ortho (left: number, right: number, bottom: number, top: number, near: number, far: number): Matrix4 { ortho(left: number, right: number, bottom: number, top: number, near: number, far: number): Matrix4 {
this.identity(); this.identity();
let x_orth = 2 / (right - left); let x_orth = 2 / (right - left);
let y_orth = 2 / (top - bottom); let y_orth = 2 / (top - bottom);
@ -257,7 +258,7 @@ module spine.webgl {
return this; return this;
} }
multiply (matrix: Matrix4): Matrix4 { multiply(matrix: Matrix4): Matrix4 {
let t = this.temp; let t = this.temp;
let v = this.values; let v = this.values;
let m = matrix.values; let m = matrix.values;
@ -280,7 +281,7 @@ module spine.webgl {
return this.set(this.temp); return this.set(this.temp);
} }
multiplyLeft (matrix: Matrix4): Matrix4 { multiplyLeft(matrix: Matrix4): Matrix4 {
let t = this.temp; let t = this.temp;
let v = this.values; let v = this.values;
let m = matrix.values; let m = matrix.values;
@ -303,7 +304,7 @@ module spine.webgl {
return this.set(this.temp); return this.set(this.temp);
} }
lookAt (position: Vector3, direction: Vector3, up: Vector3) { lookAt(position: Vector3, direction: Vector3, up: Vector3) {
Matrix4.initTemps(); Matrix4.initTemps();
let xAxis = Matrix4.xAxis, yAxis = Matrix4.yAxis, zAxis = Matrix4.zAxis; let xAxis = Matrix4.xAxis, yAxis = Matrix4.yAxis, zAxis = Matrix4.zAxis;
zAxis.setFrom(direction).normalize(); zAxis.setFrom(direction).normalize();
@ -331,10 +332,9 @@ module spine.webgl {
return this; return this;
} }
static initTemps () { static initTemps() {
if (Matrix4.xAxis === null) Matrix4.xAxis = new Vector3(); if (Matrix4.xAxis === null) Matrix4.xAxis = new Vector3();
if (Matrix4.yAxis === null) Matrix4.yAxis = new Vector3(); if (Matrix4.yAxis === null) Matrix4.yAxis = new Vector3();
if (Matrix4.zAxis === null) Matrix4.zAxis = new Vector3(); if (Matrix4.zAxis === null) Matrix4.zAxis = new Vector3();
} }
}
} }

93
spine-ts/spine-webgl/src/Mesh.ts
View File

@ -27,8 +27,12 @@
* THE SPINE RUNTIMES, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. * THE SPINE RUNTIMES, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
*****************************************************************************/ *****************************************************************************/
module spine.webgl { import { Disposable, Restorable } from "spine-core";
export class Mesh implements Disposable, Restorable { import { Shader } from "./Shader";
import { ManagedWebGLRenderingContext } from "./WebGL";
export class Mesh implements Disposable, Restorable {
private context: ManagedWebGLRenderingContext; private context: ManagedWebGLRenderingContext;
private vertices: Float32Array; private vertices: Float32Array;
private verticesBuffer: WebGLBuffer; private verticesBuffer: WebGLBuffer;
@ -40,25 +44,25 @@ module spine.webgl {
private dirtyIndices = false; private dirtyIndices = false;
private elementsPerVertex = 0; private elementsPerVertex = 0;
getAttributes (): VertexAttribute[] { return this.attributes; } getAttributes(): VertexAttribute[] { return this.attributes; }
maxVertices (): number { return this.vertices.length / this.elementsPerVertex; } maxVertices(): number { return this.vertices.length / this.elementsPerVertex; }
numVertices (): number { return this.verticesLength / this.elementsPerVertex; } numVertices(): number { return this.verticesLength / this.elementsPerVertex; }
setVerticesLength (length: number) { setVerticesLength(length: number) {
this.dirtyVertices = true; this.dirtyVertices = true;
this.verticesLength = length; this.verticesLength = length;
} }
getVertices (): Float32Array { return this.vertices; } getVertices(): Float32Array { return this.vertices; }
maxIndices (): number { return this.indices.length; } maxIndices(): number { return this.indices.length; }
numIndices (): number { return this.indicesLength; } numIndices(): number { return this.indicesLength; }
setIndicesLength (length: number) { setIndicesLength(length: number) {
this.dirtyIndices = true; this.dirtyIndices = true;
this.indicesLength = length; this.indicesLength = length;
} }
getIndices (): Uint16Array { return this.indices }; getIndices(): Uint16Array { return this.indices };
getVertexSizeInFloats (): number { getVertexSizeInFloats(): number {
let size = 0; let size = 0;
for (var i = 0; i < this.attributes.length; i++) { for (var i = 0; i < this.attributes.length; i++) {
let attribute = this.attributes[i]; let attribute = this.attributes[i];
@ -67,7 +71,7 @@ module spine.webgl {
return size; return size;
} }
constructor (context: ManagedWebGLRenderingContext | WebGLRenderingContext, private attributes: VertexAttribute[], maxVertices: number, maxIndices: number) { constructor(context: ManagedWebGLRenderingContext | WebGLRenderingContext, private attributes: VertexAttribute[], maxVertices: number, maxIndices: number) {
this.context = context instanceof ManagedWebGLRenderingContext ? context : new ManagedWebGLRenderingContext(context); this.context = context instanceof ManagedWebGLRenderingContext ? context : new ManagedWebGLRenderingContext(context);
this.elementsPerVertex = 0; this.elementsPerVertex = 0;
for (let i = 0; i < attributes.length; i++) { for (let i = 0; i < attributes.length; i++) {
@ -78,25 +82,25 @@ module spine.webgl {
this.context.addRestorable(this); this.context.addRestorable(this);
} }
setVertices (vertices: Array<number>) { setVertices(vertices: Array<number>) {
this.dirtyVertices = true; this.dirtyVertices = true;
if (vertices.length > this.vertices.length) throw Error("Mesh can't store more than " + this.maxVertices() + " vertices"); if (vertices.length > this.vertices.length) throw Error("Mesh can't store more than " + this.maxVertices() + " vertices");
this.vertices.set(vertices, 0); this.vertices.set(vertices, 0);
this.verticesLength = vertices.length; this.verticesLength = vertices.length;
} }
setIndices (indices: Array<number>) { setIndices(indices: Array<number>) {
this.dirtyIndices = true; this.dirtyIndices = true;
if (indices.length > this.indices.length) throw Error("Mesh can't store more than " + this.maxIndices() + " indices"); if (indices.length > this.indices.length) throw Error("Mesh can't store more than " + this.maxIndices() + " indices");
this.indices.set(indices, 0); this.indices.set(indices, 0);
this.indicesLength = indices.length; this.indicesLength = indices.length;
} }
draw (shader: Shader, primitiveType: number) { draw(shader: Shader, primitiveType: number) {
this.drawWithOffset(shader, primitiveType, 0, this.indicesLength > 0 ? this.indicesLength : this.verticesLength / this.elementsPerVertex); this.drawWithOffset(shader, primitiveType, 0, this.indicesLength > 0 ? this.indicesLength : this.verticesLength / this.elementsPerVertex);
} }
drawWithOffset (shader: Shader, primitiveType: number, offset: number, count: number) { drawWithOffset(shader: Shader, primitiveType: number, offset: number, count: number) {
let gl = this.context.gl; let gl = this.context.gl;
if (this.dirtyVertices || this.dirtyIndices) this.update(); if (this.dirtyVertices || this.dirtyIndices) this.update();
this.bind(shader); this.bind(shader);
@ -108,7 +112,7 @@ module spine.webgl {
this.unbind(shader); this.unbind(shader);
} }
bind (shader: Shader) { bind(shader: Shader) {
let gl = this.context.gl; let gl = this.context.gl;
gl.bindBuffer(gl.ARRAY_BUFFER, this.verticesBuffer); gl.bindBuffer(gl.ARRAY_BUFFER, this.verticesBuffer);
let offset = 0; let offset = 0;
@ -122,7 +126,7 @@ module spine.webgl {
if (this.indicesLength > 0) gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this.indicesBuffer); if (this.indicesLength > 0) gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this.indicesBuffer);
} }
unbind (shader: Shader) { unbind(shader: Shader) {
let gl = this.context.gl; let gl = this.context.gl;
for (let i = 0; i < this.attributes.length; i++) { for (let i = 0; i < this.attributes.length; i++) {
let attrib = this.attributes[i]; let attrib = this.attributes[i];
@ -133,7 +137,7 @@ module spine.webgl {
if (this.indicesLength > 0) gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, null); if (this.indicesLength > 0) gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, null);
} }
private update () { private update() {
let gl = this.context.gl; let gl = this.context.gl;
if (this.dirtyVertices) { if (this.dirtyVertices) {
if (!this.verticesBuffer) { if (!this.verticesBuffer) {
@ -154,55 +158,54 @@ module spine.webgl {
} }
} }
restore () { restore() {
this.verticesBuffer = null; this.verticesBuffer = null;
this.indicesBuffer = null; this.indicesBuffer = null;
this.update(); this.update();
} }
dispose () { dispose() {
this.context.removeRestorable(this); this.context.removeRestorable(this);
let gl = this.context.gl; let gl = this.context.gl;
gl.deleteBuffer(this.verticesBuffer); gl.deleteBuffer(this.verticesBuffer);
gl.deleteBuffer(this.indicesBuffer); gl.deleteBuffer(this.indicesBuffer);
} }
} }
export class VertexAttribute { export class VertexAttribute {
constructor (public name: string, public type: VertexAttributeType, public numElements: number) { } constructor(public name: string, public type: VertexAttributeType, public numElements: number) { }
} }
export class Position2Attribute extends VertexAttribute { export class Position2Attribute extends VertexAttribute {
constructor () { constructor() {
super(Shader.POSITION, VertexAttributeType.Float, 2); super(Shader.POSITION, VertexAttributeType.Float, 2);
} }
} }
export class Position3Attribute extends VertexAttribute { export class Position3Attribute extends VertexAttribute {
constructor () { constructor() {
super(Shader.POSITION, VertexAttributeType.Float, 3); super(Shader.POSITION, VertexAttributeType.Float, 3);
} }
} }
export class TexCoordAttribute extends VertexAttribute { export class TexCoordAttribute extends VertexAttribute {
constructor (unit: number = 0) { constructor(unit: number = 0) {
super(Shader.TEXCOORDS + (unit == 0 ? "" : unit), VertexAttributeType.Float, 2); super(Shader.TEXCOORDS + (unit == 0 ? "" : unit), VertexAttributeType.Float, 2);
} }
} }
export class ColorAttribute extends VertexAttribute { export class ColorAttribute extends VertexAttribute {
constructor () { constructor() {
super(Shader.COLOR, VertexAttributeType.Float, 4); super(Shader.COLOR, VertexAttributeType.Float, 4);
} }
} }
export class Color2Attribute extends VertexAttribute { export class Color2Attribute extends VertexAttribute {
constructor () { constructor() {
super(Shader.COLOR2, VertexAttributeType.Float, 4); super(Shader.COLOR2, VertexAttributeType.Float, 4);
} }
} }
export enum VertexAttributeType { export enum VertexAttributeType {
Float Float
}
} }

26
spine-ts/spine-webgl/src/PolygonBatcher.ts
View File

@ -27,8 +27,13 @@
* THE SPINE RUNTIMES, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. * THE SPINE RUNTIMES, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
*****************************************************************************/ *****************************************************************************/
module spine.webgl { import { Disposable } from "spine-core";
export class PolygonBatcher implements Disposable { import { GLTexture } from "./GLTexture";
import { Mesh, Position2Attribute, ColorAttribute, TexCoordAttribute, Color2Attribute } from "./Mesh";
import { Shader } from "./Shader";
import { ManagedWebGLRenderingContext } from "./WebGL";
export class PolygonBatcher implements Disposable {
private context: ManagedWebGLRenderingContext; private context: ManagedWebGLRenderingContext;
private drawCalls: number; private drawCalls: number;
private isDrawing = false; private isDrawing = false;
@ -41,7 +46,7 @@ module spine.webgl {
private srcAlphaBlend: number; private srcAlphaBlend: number;
private dstBlend: number; private dstBlend: number;
constructor (context: ManagedWebGLRenderingContext | WebGLRenderingContext, twoColorTint: boolean = true, maxVertices: number = 10920) { constructor(context: ManagedWebGLRenderingContext | WebGLRenderingContext, twoColorTint: boolean = true, maxVertices: number = 10920) {
if (maxVertices > 10920) throw new Error("Can't have more than 10920 triangles per batch: " + maxVertices); if (maxVertices > 10920) throw new Error("Can't have more than 10920 triangles per batch: " + maxVertices);
this.context = context instanceof ManagedWebGLRenderingContext ? context : new ManagedWebGLRenderingContext(context); this.context = context instanceof ManagedWebGLRenderingContext ? context : new ManagedWebGLRenderingContext(context);
let attributes = twoColorTint ? let attributes = twoColorTint ?
@ -54,7 +59,7 @@ module spine.webgl {
this.dstBlend = gl.ONE_MINUS_SRC_ALPHA; this.dstBlend = gl.ONE_MINUS_SRC_ALPHA;
} }
begin (shader: Shader) { begin(shader: Shader) {
if (this.isDrawing) throw new Error("PolygonBatch is already drawing. Call PolygonBatch.end() before calling PolygonBatch.begin()"); if (this.isDrawing) throw new Error("PolygonBatch is already drawing. Call PolygonBatch.end() before calling PolygonBatch.begin()");
this.drawCalls = 0; this.drawCalls = 0;
this.shader = shader; this.shader = shader;
@ -66,7 +71,7 @@ module spine.webgl {
gl.blendFuncSeparate(this.srcColorBlend, this.dstBlend, this.srcAlphaBlend, this.dstBlend); gl.blendFuncSeparate(this.srcColorBlend, this.dstBlend, this.srcAlphaBlend, this.dstBlend);
} }
setBlendMode (srcColorBlend: number, srcAlphaBlend: number, dstBlend: number) { setBlendMode(srcColorBlend: number, srcAlphaBlend: number, dstBlend: number) {
this.srcColorBlend = srcColorBlend; this.srcColorBlend = srcColorBlend;
this.srcAlphaBlend = srcAlphaBlend; this.srcAlphaBlend = srcAlphaBlend;
this.dstBlend = dstBlend; this.dstBlend = dstBlend;
@ -77,7 +82,7 @@ module spine.webgl {
} }
} }
draw (texture: GLTexture, vertices: ArrayLike<number>, indices: Array<number>) { draw(texture: GLTexture, vertices: ArrayLike<number>, indices: Array<number>) {
if (texture != this.lastTexture) { if (texture != this.lastTexture) {
this.flush(); this.flush();
this.lastTexture = texture; this.lastTexture = texture;
@ -98,7 +103,7 @@ module spine.webgl {
this.mesh.setIndicesLength(this.indicesLength); this.mesh.setIndicesLength(this.indicesLength);
} }
flush () { flush() {
if (this.verticesLength == 0) return; if (this.verticesLength == 0) return;
this.lastTexture.bind(); this.lastTexture.bind();
@ -111,7 +116,7 @@ module spine.webgl {
this.drawCalls++; this.drawCalls++;
} }
end () { end() {
if (!this.isDrawing) throw new Error("PolygonBatch is not drawing. Call PolygonBatch.begin() before calling PolygonBatch.end()"); if (!this.isDrawing) throw new Error("PolygonBatch is not drawing. Call PolygonBatch.begin() before calling PolygonBatch.end()");
if (this.verticesLength > 0 || this.indicesLength > 0) this.flush(); if (this.verticesLength > 0 || this.indicesLength > 0) this.flush();
this.shader = null; this.shader = null;
@ -122,12 +127,11 @@ module spine.webgl {
gl.disable(gl.BLEND); gl.disable(gl.BLEND);
} }
getDrawCalls () { getDrawCalls() {
return this.drawCalls; return this.drawCalls;
} }
dispose () { dispose() {
this.mesh.dispose(); this.mesh.dispose();
} }
}
} }

75
spine-ts/spine-webgl/src/SceneRenderer.ts
View File

@ -27,17 +27,27 @@
* THE SPINE RUNTIMES, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. * THE SPINE RUNTIMES, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
*****************************************************************************/ *****************************************************************************/
module spine.webgl { import { Color, Disposable, Skeleton, MathUtils, TextureAtlasRegion } from "spine-core";
const quad = [ import { OrthoCamera } from "./Camera";
0, 0, 1, 1, 1, 1, 0, 0, import { GLTexture } from "./GLTexture";
0, 0, 1, 1, 1, 1, 0, 0, import { PolygonBatcher } from "./PolygonBatcher";
0, 0, 1, 1, 1, 1, 0, 0, import { Shader } from "./Shader";
0, 0, 1, 1, 1, 1, 0, 0, import { ShapeRenderer } from "./ShapeRenderer";
]; import { SkeletonDebugRenderer } from "./SkeletonDebugRenderer";
const QUAD_TRIANGLES = [0, 1, 2, 2, 3, 0]; import { SkeletonRenderer } from "./SkeletonRenderer";
const WHITE = new Color(1, 1, 1, 1); import { ManagedWebGLRenderingContext } from "./WebGL";
;
export class SceneRenderer implements Disposable { const quad = [
0, 0, 1, 1, 1, 1, 0, 0,
0, 0, 1, 1, 1, 1, 0, 0,
0, 0, 1, 1, 1, 1, 0, 0,
0, 0, 1, 1, 1, 1, 0, 0,
];
const QUAD_TRIANGLES = [0, 1, 2, 2, 3, 0];
const WHITE = new Color(1, 1, 1, 1);
export class SceneRenderer implements Disposable {
context: ManagedWebGLRenderingContext; context: ManagedWebGLRenderingContext;
canvas: HTMLCanvasElement; canvas: HTMLCanvasElement;
camera: OrthoCamera; camera: OrthoCamera;
@ -50,7 +60,7 @@ module spine.webgl {
skeletonRenderer: SkeletonRenderer; skeletonRenderer: SkeletonRenderer;
skeletonDebugRenderer: SkeletonDebugRenderer; skeletonDebugRenderer: SkeletonDebugRenderer;
constructor (canvas: HTMLCanvasElement, context: ManagedWebGLRenderingContext | WebGLRenderingContext, twoColorTint: boolean = true) { constructor(canvas: HTMLCanvasElement, context: ManagedWebGLRenderingContext | WebGLRenderingContext, twoColorTint: boolean = true) {
this.canvas = canvas; this.canvas = canvas;
this.context = context instanceof ManagedWebGLRenderingContext ? context : new ManagedWebGLRenderingContext(context); this.context = context instanceof ManagedWebGLRenderingContext ? context : new ManagedWebGLRenderingContext(context);
this.twoColorTint = twoColorTint; this.twoColorTint = twoColorTint;
@ -63,24 +73,24 @@ module spine.webgl {
this.skeletonDebugRenderer = new SkeletonDebugRenderer(this.context); this.skeletonDebugRenderer = new SkeletonDebugRenderer(this.context);
} }
begin () { begin() {
this.camera.update(); this.camera.update();
this.enableRenderer(this.batcher); this.enableRenderer(this.batcher);
} }
drawSkeleton (skeleton: Skeleton, premultipliedAlpha = false, slotRangeStart = -1, slotRangeEnd = -1) { drawSkeleton(skeleton: Skeleton, premultipliedAlpha = false, slotRangeStart = -1, slotRangeEnd = -1) {
this.enableRenderer(this.batcher); this.enableRenderer(this.batcher);
this.skeletonRenderer.premultipliedAlpha = premultipliedAlpha; this.skeletonRenderer.premultipliedAlpha = premultipliedAlpha;
this.skeletonRenderer.draw(this.batcher, skeleton, slotRangeStart, slotRangeEnd); this.skeletonRenderer.draw(this.batcher, skeleton, slotRangeStart, slotRangeEnd);
} }
drawSkeletonDebug (skeleton: Skeleton, premultipliedAlpha = false, ignoredBones: Array<string> = null) { drawSkeletonDebug(skeleton: Skeleton, premultipliedAlpha = false, ignoredBones: Array<string> = null) {
this.enableRenderer(this.shapes); this.enableRenderer(this.shapes);
this.skeletonDebugRenderer.premultipliedAlpha = premultipliedAlpha; this.skeletonDebugRenderer.premultipliedAlpha = premultipliedAlpha;
this.skeletonDebugRenderer.draw(this.shapes, skeleton, ignoredBones); this.skeletonDebugRenderer.draw(this.shapes, skeleton, ignoredBones);
} }
drawTexture (texture: GLTexture, x: number, y: number, width: number, height: number, color: Color = null) { drawTexture(texture: GLTexture, x: number, y: number, width: number, height: number, color: Color = null) {
this.enableRenderer(this.batcher); this.enableRenderer(this.batcher);
if (color === null) color = WHITE; if (color === null) color = WHITE;
var i = 0; var i = 0;
@ -143,7 +153,7 @@ module spine.webgl {
this.batcher.draw(texture, quad, QUAD_TRIANGLES); this.batcher.draw(texture, quad, QUAD_TRIANGLES);
} }
drawTextureUV (texture: GLTexture, x: number, y: number, width: number, height: number, u: number, v: number, u2: number, v2: number, color: Color = null) { drawTextureUV(texture: GLTexture, x: number, y: number, width: number, height: number, u: number, v: number, u2: number, v2: number, color: Color = null) {
this.enableRenderer(this.batcher); this.enableRenderer(this.batcher);
if (color === null) color = WHITE; if (color === null) color = WHITE;
var i = 0; var i = 0;
@ -206,7 +216,7 @@ module spine.webgl {
this.batcher.draw(texture, quad, QUAD_TRIANGLES); this.batcher.draw(texture, quad, QUAD_TRIANGLES);
} }
drawTextureRotated (texture: GLTexture, x: number, y: number, width: number, height: number, pivotX: number, pivotY: number, angle: number, color: Color = null) { drawTextureRotated(texture: GLTexture, x: number, y: number, width: number, height: number, pivotX: number, pivotY: number, angle: number, color: Color = null) {
this.enableRenderer(this.batcher); this.enableRenderer(this.batcher);
if (color === null) color = WHITE; if (color === null) color = WHITE;
@ -336,7 +346,7 @@ module spine.webgl {
this.batcher.draw(texture, quad, QUAD_TRIANGLES); this.batcher.draw(texture, quad, QUAD_TRIANGLES);
} }
drawRegion (region: TextureAtlasRegion, x: number, y: number, width: number, height: number, color: Color = null) { drawRegion(region: TextureAtlasRegion, x: number, y: number, width: number, height: number, color: Color = null) {
this.enableRenderer(this.batcher); this.enableRenderer(this.batcher);
if (color === null) color = WHITE; if (color === null) color = WHITE;
var i = 0; var i = 0;
@ -399,53 +409,53 @@ module spine.webgl {
this.batcher.draw(<GLTexture>region.page.texture, quad, QUAD_TRIANGLES); this.batcher.draw(<GLTexture>region.page.texture, quad, QUAD_TRIANGLES);
} }
line (x: number, y: number, x2: number, y2: number, color: Color = null, color2: Color = null) { line(x: number, y: number, x2: number, y2: number, color: Color = null, color2: Color = null) {
this.enableRenderer(this.shapes); this.enableRenderer(this.shapes);
this.shapes.line(x, y, x2, y2, color); this.shapes.line(x, y, x2, y2, color);
} }
triangle (filled: boolean, x: number, y: number, x2: number, y2: number, x3: number, y3: number, color: Color = null, color2: Color = null, color3: Color = null) { triangle(filled: boolean, x: number, y: number, x2: number, y2: number, x3: number, y3: number, color: Color = null, color2: Color = null, color3: Color = null) {
this.enableRenderer(this.shapes); this.enableRenderer(this.shapes);
this.shapes.triangle(filled, x, y, x2, y2, x3, y3, color, color2, color3); this.shapes.triangle(filled, x, y, x2, y2, x3, y3, color, color2, color3);
} }
quad (filled: boolean, x: number, y: number, x2: number, y2: number, x3: number, y3: number, x4: number, y4: number, color: Color = null, color2: Color = null, color3: Color = null, color4: Color = null) { quad(filled: boolean, x: number, y: number, x2: number, y2: number, x3: number, y3: number, x4: number, y4: number, color: Color = null, color2: Color = null, color3: Color = null, color4: Color = null) {
this.enableRenderer(this.shapes); this.enableRenderer(this.shapes);
this.shapes.quad(filled, x, y, x2, y2, x3, y3, x4, y4, color, color2, color3, color4); this.shapes.quad(filled, x, y, x2, y2, x3, y3, x4, y4, color, color2, color3, color4);
} }
rect (filled: boolean, x: number, y: number, width: number, height: number, color: Color = null) { rect(filled: boolean, x: number, y: number, width: number, height: number, color: Color = null) {
this.enableRenderer(this.shapes); this.enableRenderer(this.shapes);
this.shapes.rect(filled, x, y, width, height, color); this.shapes.rect(filled, x, y, width, height, color);
} }
rectLine (filled: boolean, x1: number, y1: number, x2: number, y2: number, width: number, color: Color = null) { rectLine(filled: boolean, x1: number, y1: number, x2: number, y2: number, width: number, color: Color = null) {
this.enableRenderer(this.shapes); this.enableRenderer(this.shapes);
this.shapes.rectLine(filled, x1, y1, x2, y2, width, color); this.shapes.rectLine(filled, x1, y1, x2, y2, width, color);
} }
polygon (polygonVertices: ArrayLike<number>, offset: number, count: number, color: Color = null) { polygon(polygonVertices: ArrayLike<number>, offset: number, count: number, color: Color = null) {
this.enableRenderer(this.shapes); this.enableRenderer(this.shapes);
this.shapes.polygon(polygonVertices, offset, count, color); this.shapes.polygon(polygonVertices, offset, count, color);
} }
circle (filled: boolean, x: number, y: number, radius: number, color: Color = null, segments: number = 0) { circle(filled: boolean, x: number, y: number, radius: number, color: Color = null, segments: number = 0) {
this.enableRenderer(this.shapes); this.enableRenderer(this.shapes);
this.shapes.circle(filled, x, y, radius, color, segments); this.shapes.circle(filled, x, y, radius, color, segments);
} }
curve (x1: number, y1: number, cx1: number, cy1: number, cx2: number, cy2: number, x2: number, y2: number, segments: number, color: Color = null) { curve(x1: number, y1: number, cx1: number, cy1: number, cx2: number, cy2: number, x2: number, y2: number, segments: number, color: Color = null) {
this.enableRenderer(this.shapes); this.enableRenderer(this.shapes);
this.shapes.curve(x1, y1, cx1, cy1, cx2, cy2, x2, y2, segments, color); this.shapes.curve(x1, y1, cx1, cy1, cx2, cy2, x2, y2, segments, color);
} }
end () { end() {
if (this.activeRenderer === this.batcher) this.batcher.end(); if (this.activeRenderer === this.batcher) this.batcher.end();
else if (this.activeRenderer === this.shapes) this.shapes.end(); else if (this.activeRenderer === this.shapes) this.shapes.end();
this.activeRenderer = null; this.activeRenderer = null;
} }
resize (resizeMode: ResizeMode) { resize(resizeMode: ResizeMode) {
let canvas = this.canvas; let canvas = this.canvas;
var dpr = window.devicePixelRatio || 1; var dpr = window.devicePixelRatio || 1;
var w = Math.round(canvas.clientWidth * dpr); var w = Math.round(canvas.clientWidth * dpr);
@ -471,7 +481,7 @@ module spine.webgl {
this.camera.update(); this.camera.update();
} }
private enableRenderer (renderer: PolygonBatcher | ShapeRenderer | SkeletonDebugRenderer) { private enableRenderer(renderer: PolygonBatcher | ShapeRenderer | SkeletonDebugRenderer) {
if (this.activeRenderer === renderer) return; if (this.activeRenderer === renderer) return;
this.end(); this.end();
if (renderer instanceof PolygonBatcher) { if (renderer instanceof PolygonBatcher) {
@ -489,18 +499,17 @@ module spine.webgl {
this.activeRenderer = this.skeletonDebugRenderer; this.activeRenderer = this.skeletonDebugRenderer;
} }
dispose () { dispose() {
this.batcher.dispose(); this.batcher.dispose();
this.batcherShader.dispose(); this.batcherShader.dispose();
this.shapes.dispose(); this.shapes.dispose();
this.shapesShader.dispose(); this.shapesShader.dispose();
this.skeletonDebugRenderer.dispose(); this.skeletonDebugRenderer.dispose();
} }
} }
export enum ResizeMode { export enum ResizeMode {
Stretch, Stretch,
Expand, Expand,
Fit Fit
}
} }

59
spine-ts/spine-webgl/src/Shader.ts
View File

@ -27,8 +27,10 @@
* THE SPINE RUNTIMES, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. * THE SPINE RUNTIMES, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
*****************************************************************************/ *****************************************************************************/
module spine.webgl { import { Disposable, Restorable } from "spine-core";
export class Shader implements Disposable, Restorable { import { ManagedWebGLRenderingContext } from "./WebGL";
export class Shader implements Disposable, Restorable {
public static MVP_MATRIX = "u_projTrans"; public static MVP_MATRIX = "u_projTrans";
public static POSITION = "a_position"; public static POSITION = "a_position";
public static COLOR = "a_color"; public static COLOR = "a_color";
@ -46,13 +48,13 @@ module spine.webgl {
private tmp3x3: Float32Array = new Float32Array(3 * 3); private tmp3x3: Float32Array = new Float32Array(3 * 3);
private tmp4x4: Float32Array = new Float32Array(4 * 4); private tmp4x4: Float32Array = new Float32Array(4 * 4);
public getProgram () { return this.program; } public getProgram() { return this.program; }
public getVertexShader () { return this.vertexShader; } public getVertexShader() { return this.vertexShader; }
public getFragmentShader () { return this.fragmentShader; } public getFragmentShader() { return this.fragmentShader; }
public getVertexShaderSource () { return this.vsSource; } public getVertexShaderSource() { return this.vsSource; }
public getFragmentSource () { return this.fsSource; } public getFragmentSource() { return this.fsSource; }
constructor (context: ManagedWebGLRenderingContext | WebGLRenderingContext, private vertexShader: string, private fragmentShader: string) { constructor(context: ManagedWebGLRenderingContext | WebGLRenderingContext, private vertexShader: string, private fragmentShader: string) {
this.vsSource = vertexShader; this.vsSource = vertexShader;
this.fsSource = fragmentShader; this.fsSource = fragmentShader;
this.context = context instanceof ManagedWebGLRenderingContext ? context : new ManagedWebGLRenderingContext(context); this.context = context instanceof ManagedWebGLRenderingContext ? context : new ManagedWebGLRenderingContext(context);
@ -60,7 +62,7 @@ module spine.webgl {
this.compile(); this.compile();
} }
private compile () { private compile() {
let gl = this.context.gl; let gl = this.context.gl;
try { try {
this.vs = this.compileShader(gl.VERTEX_SHADER, this.vertexShader); this.vs = this.compileShader(gl.VERTEX_SHADER, this.vertexShader);
@ -72,7 +74,7 @@ module spine.webgl {
} }
} }
private compileShader (type: number, source: string) { private compileShader(type: number, source: string) {
let gl = this.context.gl; let gl = this.context.gl;
let shader = gl.createShader(type); let shader = gl.createShader(type);
gl.shaderSource(shader, source); gl.shaderSource(shader, source);
@ -85,7 +87,7 @@ module spine.webgl {
return shader; return shader;
} }
private compileProgram (vs: WebGLShader, fs: WebGLShader) { private compileProgram(vs: WebGLShader, fs: WebGLShader) {
let gl = this.context.gl; let gl = this.context.gl;
let program = gl.createProgram(); let program = gl.createProgram();
gl.attachShader(program, vs); gl.attachShader(program, vs);
@ -100,71 +102,71 @@ module spine.webgl {
return program; return program;
} }
restore () { restore() {
this.compile(); this.compile();
} }
public bind () { public bind() {
this.context.gl.useProgram(this.program); this.context.gl.useProgram(this.program);
} }
public unbind () { public unbind() {
this.context.gl.useProgram(null); this.context.gl.useProgram(null);
} }
public setUniformi (uniform: string, value: number) { public setUniformi(uniform: string, value: number) {
this.context.gl.uniform1i(this.getUniformLocation(uniform), value); this.context.gl.uniform1i(this.getUniformLocation(uniform), value);
} }
public setUniformf (uniform: string, value: number) { public setUniformf(uniform: string, value: number) {
this.context.gl.uniform1f(this.getUniformLocation(uniform), value); this.context.gl.uniform1f(this.getUniformLocation(uniform), value);
} }
public setUniform2f (uniform: string, value: number, value2: number) { public setUniform2f(uniform: string, value: number, value2: number) {
this.context.gl.uniform2f(this.getUniformLocation(uniform), value, value2); this.context.gl.uniform2f(this.getUniformLocation(uniform), value, value2);
} }
public setUniform3f (uniform: string, value: number, value2: number, value3: number) { public setUniform3f(uniform: string, value: number, value2: number, value3: number) {
this.context.gl.uniform3f(this.getUniformLocation(uniform), value, value2, value3); this.context.gl.uniform3f(this.getUniformLocation(uniform), value, value2, value3);
} }
public setUniform4f (uniform: string, value: number, value2: number, value3: number, value4: number) { public setUniform4f(uniform: string, value: number, value2: number, value3: number, value4: number) {
this.context.gl.uniform4f(this.getUniformLocation(uniform), value, value2, value3, value4); this.context.gl.uniform4f(this.getUniformLocation(uniform), value, value2, value3, value4);
} }
public setUniform2x2f (uniform: string, value: ArrayLike<number>) { public setUniform2x2f(uniform: string, value: ArrayLike<number>) {
let gl = this.context.gl; let gl = this.context.gl;
this.tmp2x2.set(value); this.tmp2x2.set(value);
gl.uniformMatrix2fv(this.getUniformLocation(uniform), false, this.tmp2x2); gl.uniformMatrix2fv(this.getUniformLocation(uniform), false, this.tmp2x2);
} }
public setUniform3x3f (uniform: string, value: ArrayLike<number>) { public setUniform3x3f(uniform: string, value: ArrayLike<number>) {
let gl = this.context.gl; let gl = this.context.gl;
this.tmp3x3.set(value); this.tmp3x3.set(value);
gl.uniformMatrix3fv(this.getUniformLocation(uniform), false, this.tmp3x3); gl.uniformMatrix3fv(this.getUniformLocation(uniform), false, this.tmp3x3);
} }
public setUniform4x4f (uniform: string, value: ArrayLike<number>) { public setUniform4x4f(uniform: string, value: ArrayLike<number>) {
let gl = this.context.gl; let gl = this.context.gl;
this.tmp4x4.set(value); this.tmp4x4.set(value);
gl.uniformMatrix4fv(this.getUniformLocation(uniform), false, this.tmp4x4); gl.uniformMatrix4fv(this.getUniformLocation(uniform), false, this.tmp4x4);
} }
public getUniformLocation (uniform: string): WebGLUniformLocation { public getUniformLocation(uniform: string): WebGLUniformLocation {
let gl = this.context.gl; let gl = this.context.gl;
let location = gl.getUniformLocation(this.program, uniform); let location = gl.getUniformLocation(this.program, uniform);
if (!location && !gl.isContextLost()) throw new Error(`Couldn't find location for uniform ${uniform}`); if (!location && !gl.isContextLost()) throw new Error(`Couldn't find location for uniform ${uniform}`);
return location; return location;
} }
public getAttributeLocation (attribute: string): number { public getAttributeLocation(attribute: string): number {
let gl = this.context.gl; let gl = this.context.gl;
let location = gl.getAttribLocation(this.program, attribute); let location = gl.getAttribLocation(this.program, attribute);
if (location == -1 && !gl.isContextLost()) throw new Error(`Couldn't find location for attribute ${attribute}`); if (location == -1 && !gl.isContextLost()) throw new Error(`Couldn't find location for attribute ${attribute}`);
return location; return location;
} }
public dispose () { public dispose() {
this.context.removeRestorable(this); this.context.removeRestorable(this);
let gl = this.context.gl; let gl = this.context.gl;
@ -184,7 +186,7 @@ module spine.webgl {
} }
} }
public static newColoredTextured (context: ManagedWebGLRenderingContext | WebGLRenderingContext): Shader { public static newColoredTextured(context: ManagedWebGLRenderingContext | WebGLRenderingContext): Shader {
let vs = ` let vs = `
attribute vec4 ${Shader.POSITION}; attribute vec4 ${Shader.POSITION};
attribute vec4 ${Shader.COLOR}; attribute vec4 ${Shader.COLOR};
@ -219,7 +221,7 @@ module spine.webgl {
return new Shader(context, vs, fs); return new Shader(context, vs, fs);
} }
public static newTwoColoredTextured (context: ManagedWebGLRenderingContext | WebGLRenderingContext): Shader { public static newTwoColoredTextured(context: ManagedWebGLRenderingContext | WebGLRenderingContext): Shader {
let vs = ` let vs = `
attribute vec4 ${Shader.POSITION}; attribute vec4 ${Shader.POSITION};
attribute vec4 ${Shader.COLOR}; attribute vec4 ${Shader.COLOR};
@ -260,7 +262,7 @@ module spine.webgl {
return new Shader(context, vs, fs); return new Shader(context, vs, fs);
} }
public static newColored (context: ManagedWebGLRenderingContext | WebGLRenderingContext): Shader { public static newColored(context: ManagedWebGLRenderingContext | WebGLRenderingContext): Shader {
let vs = ` let vs = `
attribute vec4 ${Shader.POSITION}; attribute vec4 ${Shader.POSITION};
attribute vec4 ${Shader.COLOR}; attribute vec4 ${Shader.COLOR};
@ -289,5 +291,4 @@ module spine.webgl {
return new Shader(context, vs, fs); return new Shader(context, vs, fs);
} }
}
} }

53
spine-ts/spine-webgl/src/ShapeRenderer.ts
View File

@ -27,8 +27,12 @@
* THE SPINE RUNTIMES, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. * THE SPINE RUNTIMES, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
*****************************************************************************/ *****************************************************************************/
module spine.webgl { import { Disposable, Color, Vector2, MathUtils } from "spine-core";
export class ShapeRenderer implements Disposable { import { Mesh, Position2Attribute, ColorAttribute } from "./Mesh";
import { Shader } from "./Shader";
import { ManagedWebGLRenderingContext } from "./WebGL";
export class ShapeRenderer implements Disposable {
private context: ManagedWebGLRenderingContext; private context: ManagedWebGLRenderingContext;
private isDrawing = false; private isDrawing = false;
private mesh: Mesh; private mesh: Mesh;
@ -41,7 +45,7 @@ module spine.webgl {
private srcAlphaBlend: number; private srcAlphaBlend: number;
private dstBlend: number; private dstBlend: number;
constructor (context: ManagedWebGLRenderingContext | WebGLRenderingContext, maxVertices: number = 10920) { constructor(context: ManagedWebGLRenderingContext | WebGLRenderingContext, maxVertices: number = 10920) {
if (maxVertices > 10920) throw new Error("Can't have more than 10920 triangles per batch: " + maxVertices); if (maxVertices > 10920) throw new Error("Can't have more than 10920 triangles per batch: " + maxVertices);
this.context = context instanceof ManagedWebGLRenderingContext ? context : new ManagedWebGLRenderingContext(context); this.context = context instanceof ManagedWebGLRenderingContext ? context : new ManagedWebGLRenderingContext(context);
this.mesh = new Mesh(context, [new Position2Attribute(), new ColorAttribute()], maxVertices, 0); this.mesh = new Mesh(context, [new Position2Attribute(), new ColorAttribute()], maxVertices, 0);
@ -51,7 +55,7 @@ module spine.webgl {
this.dstBlend = gl.ONE_MINUS_SRC_ALPHA; this.dstBlend = gl.ONE_MINUS_SRC_ALPHA;
} }
begin (shader: Shader) { begin(shader: Shader) {
if (this.isDrawing) throw new Error("ShapeRenderer.begin() has already been called"); if (this.isDrawing) throw new Error("ShapeRenderer.begin() has already been called");
this.shader = shader; this.shader = shader;
this.vertexIndex = 0; this.vertexIndex = 0;
@ -62,7 +66,7 @@ module spine.webgl {
gl.blendFuncSeparate(this.srcColorBlend, this.dstBlend, this.srcAlphaBlend, this.dstBlend); gl.blendFuncSeparate(this.srcColorBlend, this.dstBlend, this.srcAlphaBlend, this.dstBlend);
} }
setBlendMode (srcColorBlend: number, srcAlphaBlend: number, dstBlend: number) { setBlendMode(srcColorBlend: number, srcAlphaBlend: number, dstBlend: number) {
this.srcColorBlend = srcColorBlend; this.srcColorBlend = srcColorBlend;
this.srcAlphaBlend = srcAlphaBlend; this.srcAlphaBlend = srcAlphaBlend;
this.dstBlend = dstBlend; this.dstBlend = dstBlend;
@ -73,21 +77,21 @@ module spine.webgl {
} }
} }
setColor (color: Color) { setColor(color: Color) {
this.color.setFromColor(color); this.color.setFromColor(color);
} }
setColorWith (r: number, g: number, b: number, a: number) { setColorWith(r: number, g: number, b: number, a: number) {
this.color.set(r, g, b, a); this.color.set(r, g, b, a);
} }
point (x: number, y: number, color: Color = null) { point(x: number, y: number, color: Color = null) {
this.check(ShapeType.Point, 1); this.check(ShapeType.Point, 1);
if (color === null) color = this.color; if (color === null) color = this.color;
this.vertex(x, y, color); this.vertex(x, y, color);
} }
line (x: number, y: number, x2: number, y2: number, color: Color = null) { line(x: number, y: number, x2: number, y2: number, color: Color = null) {
this.check(ShapeType.Line, 2); this.check(ShapeType.Line, 2);
let vertices = this.mesh.getVertices(); let vertices = this.mesh.getVertices();
let idx = this.vertexIndex; let idx = this.vertexIndex;
@ -96,7 +100,7 @@ module spine.webgl {
this.vertex(x2, y2, color); this.vertex(x2, y2, color);
} }
triangle (filled: boolean, x: number, y: number, x2: number, y2: number, x3: number, y3: number, color: Color = null, color2: Color = null, color3: Color = null) { triangle(filled: boolean, x: number, y: number, x2: number, y2: number, x3: number, y3: number, color: Color = null, color2: Color = null, color3: Color = null) {
this.check(filled ? ShapeType.Filled : ShapeType.Line, 3); this.check(filled ? ShapeType.Filled : ShapeType.Line, 3);
let vertices = this.mesh.getVertices(); let vertices = this.mesh.getVertices();
let idx = this.vertexIndex; let idx = this.vertexIndex;
@ -119,7 +123,7 @@ module spine.webgl {
} }
} }
quad (filled: boolean, x: number, y: number, x2: number, y2: number, x3: number, y3: number, x4: number, y4: number, color: Color = null, color2: Color = null, color3: Color = null, color4: Color = null) { quad(filled: boolean, x: number, y: number, x2: number, y2: number, x3: number, y3: number, x4: number, y4: number, color: Color = null, color2: Color = null, color3: Color = null, color4: Color = null) {
this.check(filled ? ShapeType.Filled : ShapeType.Line, 3); this.check(filled ? ShapeType.Filled : ShapeType.Line, 3);
let vertices = this.mesh.getVertices(); let vertices = this.mesh.getVertices();
let idx = this.vertexIndex; let idx = this.vertexIndex;
@ -138,11 +142,11 @@ module spine.webgl {
} }
} }
rect (filled: boolean, x: number, y: number, width: number, height: number, color: Color = null) { rect(filled: boolean, x: number, y: number, width: number, height: number, color: Color = null) {
this.quad(filled, x, y, x + width, y, x + width, y + height, x, y + height, color, color, color, color); this.quad(filled, x, y, x + width, y, x + width, y + height, x, y + height, color, color, color, color);
} }
rectLine (filled: boolean, x1: number, y1: number, x2: number, y2: number, width: number, color: Color = null) { rectLine(filled: boolean, x1: number, y1: number, x2: number, y2: number, width: number, color: Color = null) {
this.check(filled ? ShapeType.Filled : ShapeType.Line, 8); this.check(filled ? ShapeType.Filled : ShapeType.Line, 8);
if (color === null) color = this.color; if (color === null) color = this.color;
let t = this.tmp.set(y2 - y1, x1 - x2); let t = this.tmp.set(y2 - y1, x1 - x2);
@ -172,12 +176,12 @@ module spine.webgl {
} }
} }
x (x: number, y: number, size: number) { x(x: number, y: number, size: number) {
this.line(x - size, y - size, x + size, y + size); this.line(x - size, y - size, x + size, y + size);
this.line(x - size, y + size, x + size, y - size); this.line(x - size, y + size, x + size, y - size);
} }
polygon (polygonVertices: ArrayLike<number>, offset: number, count: number, color: Color = null) { polygon(polygonVertices: ArrayLike<number>, offset: number, count: number, color: Color = null) {
if (count < 3) throw new Error("Polygon must contain at least 3 vertices"); if (count < 3) throw new Error("Polygon must contain at least 3 vertices");
this.check(ShapeType.Line, count * 2); this.check(ShapeType.Line, count * 2);
if (color === null) color = this.color; if (color === null) color = this.color;
@ -211,7 +215,7 @@ module spine.webgl {
} }
} }
circle (filled: boolean, x: number, y: number, radius: number, color: Color = null, segments: number = 0) { circle(filled: boolean, x: number, y: number, radius: number, color: Color = null, segments: number = 0) {
if (segments === 0) segments = Math.max(1, (6 * MathUtils.cbrt(radius)) | 0); if (segments === 0) segments = Math.max(1, (6 * MathUtils.cbrt(radius)) | 0);
if (segments <= 0) throw new Error("segments must be > 0."); if (segments <= 0) throw new Error("segments must be > 0.");
if (color === null) color = this.color; if (color === null) color = this.color;
@ -252,7 +256,7 @@ module spine.webgl {
this.vertex(x + cx, y + cy, color); this.vertex(x + cx, y + cy, color);
} }
curve (x1: number, y1: number, cx1: number, cy1: number, cx2: number, cy2: number, x2: number, y2: number, segments: number, color: Color = null) { curve(x1: number, y1: number, cx1: number, cy1: number, cx2: number, cy2: number, x2: number, y2: number, segments: number, color: Color = null) {
this.check(ShapeType.Line, segments * 2 + 2); this.check(ShapeType.Line, segments * 2 + 2);
if (color === null) color = this.color; if (color === null) color = this.color;
@ -298,7 +302,7 @@ module spine.webgl {
this.vertex(x2, y2, color); this.vertex(x2, y2, color);
} }
private vertex (x: number, y: number, color: Color) { private vertex(x: number, y: number, color: Color) {
let idx = this.vertexIndex; let idx = this.vertexIndex;
let vertices = this.mesh.getVertices(); let vertices = this.mesh.getVertices();
vertices[idx++] = x; vertices[idx++] = x;
@ -310,7 +314,7 @@ module spine.webgl {
this.vertexIndex = idx; this.vertexIndex = idx;
} }
end () { end() {
if (!this.isDrawing) throw new Error("ShapeRenderer.begin() has not been called"); if (!this.isDrawing) throw new Error("ShapeRenderer.begin() has not been called");
this.flush(); this.flush();
let gl = this.context.gl; let gl = this.context.gl;
@ -318,14 +322,14 @@ module spine.webgl {
this.isDrawing = false; this.isDrawing = false;
} }
private flush () { private flush() {
if (this.vertexIndex == 0) return; if (this.vertexIndex == 0) return;
this.mesh.setVerticesLength(this.vertexIndex); this.mesh.setVerticesLength(this.vertexIndex);
this.mesh.draw(this.shader, this.shapeType); this.mesh.draw(this.shader, this.shapeType);
this.vertexIndex = 0; this.vertexIndex = 0;
} }
private check (shapeType: ShapeType, numVertices: number) { private check(shapeType: ShapeType, numVertices: number) {
if (!this.isDrawing) throw new Error("ShapeRenderer.begin() has not been called"); if (!this.isDrawing) throw new Error("ShapeRenderer.begin() has not been called");
if (this.shapeType == shapeType) { if (this.shapeType == shapeType) {
if (this.mesh.maxVertices() - this.mesh.numVertices() < numVertices) this.flush(); if (this.mesh.maxVertices() - this.mesh.numVertices() < numVertices) this.flush();
@ -336,14 +340,13 @@ module spine.webgl {
} }
} }
dispose () { dispose() {
this.mesh.dispose(); this.mesh.dispose();
} }
} }
export enum ShapeType { export enum ShapeType {
Point = 0x0000, Point = 0x0000,
Line = 0x0001, Line = 0x0001,
Filled = 0x0004 Filled = 0x0004
}
} }

14
spine-ts/spine-webgl/src/SkeletonDebugRenderer.ts
View File

@ -27,8 +27,11 @@
* THE SPINE RUNTIMES, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. * THE SPINE RUNTIMES, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
*****************************************************************************/ *****************************************************************************/
module spine.webgl { import { Disposable, Color, SkeletonBounds, Utils, Skeleton, RegionAttachment, MeshAttachment, PathAttachment, ClippingAttachment } from "spine-core";
export class SkeletonDebugRenderer implements Disposable { import { ShapeRenderer } from "./ShapeRenderer";
import { ManagedWebGLRenderingContext } from "./WebGL";
export class SkeletonDebugRenderer implements Disposable {
boneLineColor = new Color(1, 0, 0, 1); boneLineColor = new Color(1, 0, 0, 1);
boneOriginColor = new Color(0, 1, 0, 1); boneOriginColor = new Color(0, 1, 0, 1);
attachmentLineColor = new Color(0, 0, 1, 0.5); attachmentLineColor = new Color(0, 0, 1, 0.5);
@ -55,11 +58,11 @@ module spine.webgl {
private static LIGHT_GRAY = new Color(192 / 255, 192 / 255, 192 / 255, 1); private static LIGHT_GRAY = new Color(192 / 255, 192 / 255, 192 / 255, 1);
private static GREEN = new Color(0, 1, 0, 1); private static GREEN = new Color(0, 1, 0, 1);
constructor (context: ManagedWebGLRenderingContext | WebGLRenderingContext) { constructor(context: ManagedWebGLRenderingContext | WebGLRenderingContext) {
this.context = context instanceof ManagedWebGLRenderingContext ? context : new ManagedWebGLRenderingContext(context); this.context = context instanceof ManagedWebGLRenderingContext ? context : new ManagedWebGLRenderingContext(context);
} }
draw (shapes: ShapeRenderer, skeleton: Skeleton, ignoredBones: Array<string> = null) { draw(shapes: ShapeRenderer, skeleton: Skeleton, ignoredBones: Array<string> = null) {
let skeletonX = skeleton.x; let skeletonX = skeleton.x;
let skeletonY = skeleton.y; let skeletonY = skeleton.y;
let gl = this.context.gl; let gl = this.context.gl;
@ -219,7 +222,6 @@ module spine.webgl {
} }
} }
dispose () { dispose() {
}
} }
} }

24
spine-ts/spine-webgl/src/SkeletonRenderer.ts
View File

@ -27,19 +27,24 @@
* THE SPINE RUNTIMES, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. * THE SPINE RUNTIMES, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
*****************************************************************************/ *****************************************************************************/
module spine.webgl { import { NumberArrayLike, VertexEffect, Color, SkeletonClipping, Vector2, Utils, Skeleton, BlendMode, RegionAttachment, TextureAtlasRegion, MeshAttachment, ClippingAttachment } from "spine-core";
class Renderable { import { GLTexture } from "./GLTexture";
constructor (public vertices: ArrayLike<number>, public numVertices: number, public numFloats: number) { } import { PolygonBatcher } from "./PolygonBatcher";
}; import { ManagedWebGLRenderingContext, WebGLBlendModeConverter } from "./WebGL";
export class SkeletonRenderer {
class Renderable {
constructor(public vertices: NumberArrayLike, public numVertices: number, public numFloats: number) { }
};
export class SkeletonRenderer {
static QUAD_TRIANGLES = [0, 1, 2, 2, 3, 0]; static QUAD_TRIANGLES = [0, 1, 2, 2, 3, 0];
premultipliedAlpha = false; premultipliedAlpha = false;
vertexEffect: VertexEffect = null; vertexEffect: VertexEffect = null;
private tempColor = new Color(); private tempColor = new Color();
private tempColor2 = new Color(); private tempColor2 = new Color();
private vertices: ArrayLike<number>; private vertices: NumberArrayLike;
private vertexSize = 2 + 2 + 4; private vertexSize = 2 + 2 + 4;
private twoColorTint = false; private twoColorTint = false;
private renderable: Renderable = new Renderable(null, 0, 0); private renderable: Renderable = new Renderable(null, 0, 0);
@ -49,14 +54,14 @@ module spine.webgl {
private temp3 = new Color(); private temp3 = new Color();
private temp4 = new Color(); private temp4 = new Color();
constructor (context: ManagedWebGLRenderingContext, twoColorTint: boolean = true) { constructor(context: ManagedWebGLRenderingContext, twoColorTint: boolean = true) {
this.twoColorTint = twoColorTint; this.twoColorTint = twoColorTint;
if (twoColorTint) if (twoColorTint)
this.vertexSize += 4; this.vertexSize += 4;
this.vertices = Utils.newFloatArray(this.vertexSize * 1024); this.vertices = Utils.newFloatArray(this.vertexSize * 1024);
} }
draw (batcher: PolygonBatcher, skeleton: Skeleton, slotRangeStart: number = -1, slotRangeEnd: number = -1) { draw(batcher: PolygonBatcher, skeleton: Skeleton, slotRangeStart: number = -1, slotRangeEnd: number = -1) {
let clipper = this.clipper; let clipper = this.clipper;
let premultipliedAlpha = this.premultipliedAlpha; let premultipliedAlpha = this.premultipliedAlpha;
let twoColorTint = this.twoColorTint; let twoColorTint = this.twoColorTint;
@ -68,7 +73,7 @@ module spine.webgl {
let tempDark = this.temp4; let tempDark = this.temp4;
let renderable: Renderable = this.renderable; let renderable: Renderable = this.renderable;
let uvs: ArrayLike<number> = null; let uvs: NumberArrayLike = null;
let triangles: Array<number> = null; let triangles: Array<number> = null;
let drawOrder = skeleton.drawOrder; let drawOrder = skeleton.drawOrder;
let attachmentColor: Color = null; let attachmentColor: Color = null;
@ -295,5 +300,4 @@ module spine.webgl {
} }
clipper.clipEnd(); clipper.clipEnd();
} }
}
} }

32
spine-ts/spine-webgl/src/Vector3.ts
View File

@ -27,54 +27,55 @@
* THE SPINE RUNTIMES, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. * THE SPINE RUNTIMES, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
*****************************************************************************/ *****************************************************************************/
module spine.webgl { import { Matrix4, M00, M01, M02, M03, M10, M11, M12, M13, M20, M21, M22, M23, M30, M31, M32, M33 } from "./Matrix4";
export class Vector3 {
export class Vector3 {
x = 0; x = 0;
y = 0; y = 0;
z = 0; z = 0;
constructor (x: number = 0, y: number = 0, z: number = 0) { constructor(x: number = 0, y: number = 0, z: number = 0) {
this.x = x; this.x = x;
this.y = y; this.y = y;
this.z = z; this.z = z;
} }
setFrom (v: Vector3): Vector3 { setFrom(v: Vector3): Vector3 {
this.x = v.x; this.x = v.x;
this.y = v.y; this.y = v.y;
this.z = v.z; this.z = v.z;
return this; return this;
} }
set (x: number, y: number, z: number): Vector3 { set(x: number, y: number, z: number): Vector3 {
this.x = x; this.x = x;
this.y = y; this.y = y;
this.z = z; this.z = z;
return this; return this;
} }
add (v: Vector3): Vector3 { add(v: Vector3): Vector3 {
this.x += v.x; this.x += v.x;
this.y += v.y; this.y += v.y;
this.z += v.z; this.z += v.z;
return this; return this;
} }
sub (v: Vector3): Vector3 { sub(v: Vector3): Vector3 {
this.x -= v.x; this.x -= v.x;
this.y -= v.y; this.y -= v.y;
this.z -= v.z; this.z -= v.z;
return this; return this;
} }
scale (s: number): Vector3 { scale(s: number): Vector3 {
this.x *= s; this.x *= s;
this.y *= s; this.y *= s;
this.z *= s; this.z *= s;
return this; return this;
} }
normalize (): Vector3 { normalize(): Vector3 {
let len = this.length(); let len = this.length();
if (len == 0) return this; if (len == 0) return this;
len = 1 / len; len = 1 / len;
@ -84,18 +85,18 @@ module spine.webgl {
return this; return this;
} }
cross (v: Vector3): Vector3 { cross(v: Vector3): Vector3 {
return this.set(this.y * v.z - this.z * v.y, this.z * v.x - this.x * v.z, this.x * v.y - this.y * v.x) return this.set(this.y * v.z - this.z * v.y, this.z * v.x - this.x * v.z, this.x * v.y - this.y * v.x)
} }
multiply (matrix: Matrix4): Vector3 { multiply(matrix: Matrix4): Vector3 {
let l_mat = matrix.values; let l_mat = matrix.values;
return this.set(this.x * l_mat[M00] + this.y * l_mat[M01] + this.z * l_mat[M02] + l_mat[M03], return this.set(this.x * l_mat[M00] + this.y * l_mat[M01] + this.z * l_mat[M02] + l_mat[M03],
this.x * l_mat[M10] + this.y * l_mat[M11] + this.z * l_mat[M12] + l_mat[M13], this.x * l_mat[M10] + this.y * l_mat[M11] + this.z * l_mat[M12] + l_mat[M13],
this.x * l_mat[M20] + this.y * l_mat[M21] + this.z * l_mat[M22] + l_mat[M23]); this.x * l_mat[M20] + this.y * l_mat[M21] + this.z * l_mat[M22] + l_mat[M23]);
} }
project (matrix: Matrix4): Vector3 { project(matrix: Matrix4): Vector3 {
let l_mat = matrix.values; let l_mat = matrix.values;
let l_w = 1 / (this.x * l_mat[M30] + this.y * l_mat[M31] + this.z * l_mat[M32] + l_mat[M33]); let l_w = 1 / (this.x * l_mat[M30] + this.y * l_mat[M31] + this.z * l_mat[M32] + l_mat[M33]);
return this.set((this.x * l_mat[M00] + this.y * l_mat[M01] + this.z * l_mat[M02] + l_mat[M03]) * l_w, return this.set((this.x * l_mat[M00] + this.y * l_mat[M01] + this.z * l_mat[M02] + l_mat[M03]) * l_w,
@ -103,19 +104,18 @@ module spine.webgl {
(this.x * l_mat[M20] + this.y * l_mat[M21] + this.z * l_mat[M22] + l_mat[M23]) * l_w); (this.x * l_mat[M20] + this.y * l_mat[M21] + this.z * l_mat[M22] + l_mat[M23]) * l_w);
} }
dot (v: Vector3): number { dot(v: Vector3): number {
return this.x * v.x + this.y * v.y + this.z * v.z; return this.x * v.x + this.y * v.y + this.z * v.z;
} }
length (): number { length(): number {
return Math.sqrt(this.x * this.x + this.y * this.y + this.z * this.z); return Math.sqrt(this.x * this.x + this.y * this.y + this.z * this.z);
} }
distance (v: Vector3): number { distance(v: Vector3): number {
let a = v.x - this.x; let a = v.x - this.x;
let b = v.y - this.y; let b = v.y - this.y;
let c = v.z - this.z; let c = v.z - this.z;
return Math.sqrt(a * a + b * b + c * c); return Math.sqrt(a * a + b * b + c * c);
} }
}
} }

36
spine-ts/spine-webgl/src/WebGL.ts
View File

@ -27,13 +27,14 @@
* THE SPINE RUNTIMES, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. * THE SPINE RUNTIMES, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
*****************************************************************************/ *****************************************************************************/
module spine.webgl { import { Restorable, BlendMode } from "spine-core";
export class ManagedWebGLRenderingContext {
export class ManagedWebGLRenderingContext {
public canvas: HTMLCanvasElement | OffscreenCanvas; public canvas: HTMLCanvasElement | OffscreenCanvas;
public gl: WebGLRenderingContext; public gl: WebGLRenderingContext;
private restorables = new Array<Restorable>(); private restorables = new Array<Restorable>();
constructor (canvasOrContext: HTMLCanvasElement | WebGLRenderingContext | EventTarget, contextConfig: any = { alpha: "true" }) { constructor(canvasOrContext: HTMLCanvasElement | WebGLRenderingContext | EventTarget, contextConfig: any = { alpha: "true" }) {
if (!((canvasOrContext instanceof WebGLRenderingContext) || (typeof WebGL2RenderingContext !== 'undefined' && canvasOrContext instanceof WebGL2RenderingContext))) if (!((canvasOrContext instanceof WebGLRenderingContext) || (typeof WebGL2RenderingContext !== 'undefined' && canvasOrContext instanceof WebGL2RenderingContext)))
this.setupCanvas(canvasOrContext, contextConfig); this.setupCanvas(canvasOrContext, contextConfig);
else { else {
@ -42,7 +43,7 @@ module spine.webgl {
} }
} }
private setupCanvas (canvas: any, contextConfig: any) { private setupCanvas(canvas: any, contextConfig: any) {
this.gl = <WebGLRenderingContext>(canvas.getContext("webgl2", contextConfig) || canvas.getContext("webgl", contextConfig)); this.gl = <WebGLRenderingContext>(canvas.getContext("webgl2", contextConfig) || canvas.getContext("webgl", contextConfig));
this.canvas = canvas; this.canvas = canvas;
canvas.addEventListener("webglcontextlost", (e: any) => { canvas.addEventListener("webglcontextlost", (e: any) => {
@ -56,25 +57,25 @@ module spine.webgl {
}); });
} }
addRestorable (restorable: Restorable) { addRestorable(restorable: Restorable) {
this.restorables.push(restorable); this.restorables.push(restorable);
} }
removeRestorable (restorable: Restorable) { removeRestorable(restorable: Restorable) {
let index = this.restorables.indexOf(restorable); let index = this.restorables.indexOf(restorable);
if (index > -1) this.restorables.splice(index, 1); if (index > -1) this.restorables.splice(index, 1);
} }
} }
const ONE = 1; const ONE = 1;
const ONE_MINUS_SRC_COLOR = 0x0301; const ONE_MINUS_SRC_COLOR = 0x0301;
const SRC_ALPHA = 0x0302; const SRC_ALPHA = 0x0302;
const ONE_MINUS_SRC_ALPHA = 0x0303; const ONE_MINUS_SRC_ALPHA = 0x0303;
const ONE_MINUS_DST_ALPHA = 0x0305; const ONE_MINUS_DST_ALPHA = 0x0305;
const DST_COLOR = 0x0306; const DST_COLOR = 0x0306;
export class WebGLBlendModeConverter { export class WebGLBlendModeConverter {
static getDestGLBlendMode (blendMode: BlendMode) { static getDestGLBlendMode(blendMode: BlendMode) {
switch (blendMode) { switch (blendMode) {
case BlendMode.Normal: return ONE_MINUS_SRC_ALPHA; case BlendMode.Normal: return ONE_MINUS_SRC_ALPHA;
case BlendMode.Additive: return ONE; case BlendMode.Additive: return ONE;
@ -84,7 +85,7 @@ module spine.webgl {
} }
} }
static getSourceColorGLBlendMode (blendMode: BlendMode, premultipliedAlpha: boolean = false) { static getSourceColorGLBlendMode(blendMode: BlendMode, premultipliedAlpha: boolean = false) {
switch (blendMode) { switch (blendMode) {
case BlendMode.Normal: return premultipliedAlpha ? ONE : SRC_ALPHA; case BlendMode.Normal: return premultipliedAlpha ? ONE : SRC_ALPHA;
case BlendMode.Additive: return premultipliedAlpha ? ONE : SRC_ALPHA; case BlendMode.Additive: return premultipliedAlpha ? ONE : SRC_ALPHA;
@ -94,7 +95,7 @@ module spine.webgl {
} }
} }
static getSourceAlphaGLBlendMode (blendMode: BlendMode) { static getSourceAlphaGLBlendMode(blendMode: BlendMode) {
switch (blendMode) { switch (blendMode) {
case BlendMode.Normal: return ONE; case BlendMode.Normal: return ONE;
case BlendMode.Additive: return ONE; case BlendMode.Additive: return ONE;
@ -103,5 +104,4 @@ module spine.webgl {
default: throw new Error("Unknown blend mode: " + blendMode); default: throw new Error("Unknown blend mode: " + blendMode);
} }
} }
}
} }

43
spine-ts/spine-webgl/src/index.ts Normal file
View File

@ -0,0 +1,43 @@
export * from './AssetManager';
export * from './Camera';
export * from './GLTexture';
export * from './Input';
export * from './LoadingScreen';
export * from './Matrix4';
export * from './Mesh';
export * from './PolygonBatcher';
export * from './SceneRenderer';
export * from './Shader';
export * from './ShapeRenderer';
export * from './SkeletonDebugRenderer';
export * from './SkeletonRenderer';
export * from './Vector3';
export * from './WebGL';
export * from "spine-core";
// Before modularization, we would expose spine-core on the global
// `spine` object, and spine-webgl on the global `spine.webgl` object.
// This was used by clients when including spine-webgl via <script src="spine-webgl.js">
//
// Now with modularization and using esbuild for bundling, we need to emulate this old
// behaviour as to not break old clients.
//
// We pass `--global-name=spine` to esbuild. This will create an object containing
// all exports and assign it to the global variable called `spine`.
//
// That solves half the issue. We also need to assign the exports object to
// `spine.webgl`. esbuild creates a local variable called `scr_exports` pointing
// to the exports object. We get to it via eval, then assign it to itself, on a new
// property called `webgl`. The client can then access the APIs through `spine` and
// `spine.webgl` as before (with the caveat that both spine-core and spine-webgl are
// now in `spine` and `spine.webgl`).
//
// This will break if esbuild renames the variable `src_exports` pointing to
// the exports object.
declare global {
var spine: any;
}
let exports = eval("src_exports");
exports.webgl = exports;

24
spine-ts/spine-webgl/tsconfig.json Normal file
View File

@ -0,0 +1,24 @@
{
"extends": "../tsconfig.base.json",
"compilerOptions": {
"baseUrl": ".",
"rootDir": "./src",
"outDir": "./dist",
"paths": {
"spine-core": [
"../spine-core/src"
]
}
},
"include": [
"**/*.ts"
],
"exclude": [
"dist/**/*.d.ts"
],
"references": [
{
"path": "../spine-core"
}
]
}

8
spine-ts/tsconfig.base.json
View File

@ -1,12 +1,10 @@
{ {
"compilerOptions": { "compilerOptions": {
"target": "es5",
"module": "es2015", "module": "es2015",
"noImplicitAny": true, "noImplicitAny": true,
"preserveConstEnums": true, "preserveConstEnums": true,
"sourceMap": true, "sourceMap": true,
"esModuleInterop": true, "esModuleInterop": true,
"isolatedModules": true,
"lib": [ "lib": [
"DOM", "DOM",
"ES2015" "ES2015"
@ -14,8 +12,6 @@
"declaration": true, "declaration": true,
"declarationMap": true, "declarationMap": true,
"composite": true, "composite": true,
}, "moduleResolution": "node",
"exclude": [ }
"node_modules"
]
} }

5
spine-ts/tsconfig.json
View File

@ -7,8 +7,5 @@
{ {
"path": "./spine-canvas" "path": "./spine-canvas"
} }
], ]
"paths": {
"@esotericsoftware/spine-core": "./spine-core/src/index.ts"
}
} }