UnityMirror/spine-runtimes
1
0
Fork 0
mirror of https://github.com/EsotericSoftware/spine-runtimes.git synced 2026-02-25 19:21:26 +08:00
Code Issues Packages Projects Releases Wiki Activity

[ts][pixi] Add typescript example

Browse Source
This commit is contained in:
Davide Tantillo 2024-05-23 12:23:21 +02:00
parent 3311550b26
commit fd65b561b8
12 changed files with 3877 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
examples/export/runtimes.sh
View File

@ -497,6 +497,10 @@ cp -f ../spineboy/export/spineboy-pma.png "$ROOT/spine-ts/spine-pixi/example/ass
cp -f ../spineboy/export/spineboy.atlas "$ROOT/spine-ts/spine-pixi/example/assets/" cp -f ../spineboy/export/spineboy.atlas "$ROOT/spine-ts/spine-pixi/example/assets/"
cp -f ../spineboy/export/spineboy.png "$ROOT/spine-ts/spine-pixi/example/assets/" cp -f ../spineboy/export/spineboy.png "$ROOT/spine-ts/spine-pixi/example/assets/"
cp -f ../spineboy/export/spineboy-pro.skel "$ROOT/spine-ts/spine-pixi/example/typescript/assets/"
cp -f ../spineboy/export/spineboy-pma.atlas "$ROOT/spine-ts/spine-pixi/example/typescript/assets/"
cp -f ../spineboy/export/spineboy-pma.png "$ROOT/spine-ts/spine-pixi/example/typescript/assets/"
cp -f ../coin/export/coin-pro.skel "$ROOT/spine-ts/spine-pixi/example/assets/" cp -f ../coin/export/coin-pro.skel "$ROOT/spine-ts/spine-pixi/example/assets/"
cp -f ../coin/export/coin-pma.atlas "$ROOT/spine-ts/spine-pixi/example/assets/" cp -f ../coin/export/coin-pma.atlas "$ROOT/spine-ts/spine-pixi/example/assets/"
cp -f ../coin/export/coin-pma.png "$ROOT/spine-ts/spine-pixi/example/assets/" cp -f ../coin/export/coin-pma.png "$ROOT/spine-ts/spine-pixi/example/assets/"

2
spine-ts/spine-phaser/example/typescript/index.html
View File

@ -3,7 +3,7 @@
<head> <head>
<meta charset='utf-8'> <meta charset='utf-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'> <meta http-equiv='X-UA-Compatible' content='IE=edge'>
<title>Page Title</title> <title>Phaser Typescript Example</title>
<meta name='viewport' content='width=device-width, initial-scale=1'> <meta name='viewport' content='width=device-width, initial-scale=1'>
<script src='build/index.js'></script> <script src='build/index.js'></script>
</head> </head>

36
spine-ts/spine-phaser/example/typescript/package-lock.json generated
View File

@ -8,7 +8,7 @@
"name": "name", "name": "name",
"version": "1.0.0", "version": "1.0.0",
"dependencies": { "dependencies": {
"@esotericsoftware/spine-phaser": "~4.1.31", "@esotericsoftware/spine-phaser": "~4.2.43",
"phaser": "3.60.0" "phaser": "3.60.0"
}, },
"devDependencies": { "devDependencies": {
@ -370,34 +370,34 @@
} }
}, },
"node_modules/@esotericsoftware/spine-canvas": { "node_modules/@esotericsoftware/spine-canvas": {
"version": "4.1.31", "version": "4.2.43",
"resolved": "https://registry.npmjs.org/@esotericsoftware/spine-canvas/-/spine-canvas-4.1.31.tgz", "resolved": "https://registry.npmjs.org/@esotericsoftware/spine-canvas/-/spine-canvas-4.2.43.tgz",
"integrity": "sha512-ll9XWNtLCDjzF3fu2Qh0XhzH8wEUQDKy43i2Hq6v5gI5ThpsI3b5UlabfNGQnI7hfrBvW5Iuf1zo6T4poxw9LQ==", "integrity": "sha512-B1ivuAcNdWwbwwuThbvl5xcCmbXPRfQl9mv1XzXkpez1dUEAC/L1dnODu/94p3JZM+bsSFbeCFT4h3yoZyoErA==",
"dependencies": { "dependencies": {
"@esotericsoftware/spine-core": "4.1.31" "@esotericsoftware/spine-core": "4.2.43"
} }
}, },
"node_modules/@esotericsoftware/spine-core": { "node_modules/@esotericsoftware/spine-core": {
"version": "4.1.31", "version": "4.2.43",
"resolved": "https://registry.npmjs.org/@esotericsoftware/spine-core/-/spine-core-4.1.31.tgz", "resolved": "https://registry.npmjs.org/@esotericsoftware/spine-core/-/spine-core-4.2.43.tgz",
"integrity": "sha512-Sqd3ID6JpVX1fEa++kcP2ieqXVIMBeEzSabyJKscawyh6+lxz/dbGBQoo6aU//l/vnwnP4ctsOEY0r6OuguLPA==" "integrity": "sha512-FzpNkJllTwu7l1bHO6186r8D4/0UR3bkPWqMlLUZf57sh2ErV8iQFyPXiz3suZTXpfAjw4k5dVhAebPVUZMtXw=="
}, },
"node_modules/@esotericsoftware/spine-phaser": { "node_modules/@esotericsoftware/spine-phaser": {
"version": "4.1.31", "version": "4.2.43",
"resolved": "https://registry.npmjs.org/@esotericsoftware/spine-phaser/-/spine-phaser-4.1.31.tgz", "resolved": "https://registry.npmjs.org/@esotericsoftware/spine-phaser/-/spine-phaser-4.2.43.tgz",
"integrity": "sha512-o0AZkalGd5ehmaOfHcmhLhYpK9u4yzGpgj7/77nvjdkwKX+oiwTjahrYLLFuL0LxdMsiIvTZ846/hNmv8k+8zQ==", "integrity": "sha512-67MQz2jziDUwngKA9e6b39w5541d1yevTvmHaFDI48UfERyA6chxfhvn9WmXrzLwTZiwFDc/VtfH5LATqBLu5A==",
"dependencies": { "dependencies": {
"@esotericsoftware/spine-canvas": "4.1.31", "@esotericsoftware/spine-canvas": "4.2.43",
"@esotericsoftware/spine-core": "4.1.31", "@esotericsoftware/spine-core": "4.2.43",
"@esotericsoftware/spine-webgl": "4.1.31" "@esotericsoftware/spine-webgl": "4.2.43"
} }
}, },
"node_modules/@esotericsoftware/spine-webgl": { "node_modules/@esotericsoftware/spine-webgl": {
"version": "4.1.31", "version": "4.2.43",
"resolved": "https://registry.npmjs.org/@esotericsoftware/spine-webgl/-/spine-webgl-4.1.31.tgz", "resolved": "https://registry.npmjs.org/@esotericsoftware/spine-webgl/-/spine-webgl-4.2.43.tgz",
"integrity": "sha512-EVfMScesrlB7qdZSIELIQ+yscTj/FCZPQnZG9pbp8lejuYLnAdsd1WXj6bLdJnpPVOxbPDNXggovprFDCkFHEg==", "integrity": "sha512-ydffbWTd0b7Iw5BDHdnEgxEmf2xmQurx1ZVll9u50OfKPgk6QKvlo7vuY7UJIwtDRPALAhSql2sBJPVniYHixQ==",
"dependencies": { "dependencies": {
"@esotericsoftware/spine-core": "4.1.31" "@esotericsoftware/spine-core": "4.2.43"
} }
}, },
"node_modules/accepts": { "node_modules/accepts": {

4
spine-ts/spine-phaser/example/typescript/package.json
View File

@ -8,7 +8,7 @@
"dev": "npx concurrently \"npx live-server --no-browser\" \"npm run build -- --watch\"" "dev": "npx concurrently \"npx live-server --no-browser\" \"npm run build -- --watch\""
}, },
"dependencies": { "dependencies": {
"@esotericsoftware/spine-phaser": "~4.1.31", "@esotericsoftware/spine-phaser": "~4.2.43",
"phaser": "3.60.0" "phaser": "3.60.0"
}, },
"devDependencies": { "devDependencies": {
@ -16,4 +16,4 @@
"concurrently": "^7.6.0", "concurrently": "^7.6.0",
"live-server": "^1.2.2" "live-server": "^1.2.2"
} }
} }

6
spine-ts/spine-pixi/example/typescript/README.md Normal file
View File

@ -0,0 +1,6 @@
# spine-pixi TypeScript
Minimal example project using Pixi, spine-pixi, and TypeScript via NPM and [esbuild](https://esbuild.github.io/).
1. Install dependencies: `npm install`
2. Build bundle: `npm run build`
3. Development (run server and recompile in watch mode): `npm run dev`

95
spine-ts/spine-pixi/example/typescript/assets/spineboy-pma.atlas Normal file
View File

@ -0,0 +1,95 @@
spineboy-pma.png
size: 1024, 256
filter: Linear, Linear
pma: true
scale: 0.5
crosshair
bounds: 352, 7, 45, 45
eye-indifferent
bounds: 862, 105, 47, 45
eye-surprised
bounds: 505, 79, 47, 45
front-bracer
bounds: 826, 66, 29, 40
front-fist-closed
bounds: 786, 65, 38, 41
front-fist-open
bounds: 710, 51, 43, 44
rotate: 90
front-foot
bounds: 210, 6, 63, 35
front-shin
bounds: 665, 128, 41, 92
rotate: 90
front-thigh
bounds: 2, 2, 23, 56
rotate: 90
front-upper-arm
bounds: 250, 205, 23, 49
goggles
bounds: 665, 171, 131, 83
gun
bounds: 798, 152, 105, 102
head
bounds: 2, 27, 136, 149
hoverboard-board
bounds: 2, 178, 246, 76
hoverboard-thruster
bounds: 722, 96, 30, 32
rotate: 90
hoverglow-small
bounds: 275, 81, 137, 38
mouth-grind
bounds: 614, 97, 47, 30
mouth-oooo
bounds: 612, 65, 47, 30
mouth-smile
bounds: 661, 64, 47, 30
muzzle-glow
bounds: 382, 54, 25, 25
muzzle-ring
bounds: 275, 54, 25, 105
rotate: 90
muzzle01
bounds: 911, 95, 67, 40
rotate: 90
muzzle02
bounds: 792, 108, 68, 42
muzzle03
bounds: 956, 171, 83, 53
rotate: 90
muzzle04
bounds: 275, 7, 75, 45
muzzle05
bounds: 140, 3, 68, 38
neck
bounds: 250, 182, 18, 21
portal-bg
bounds: 140, 43, 133, 133
portal-flare1
bounds: 554, 65, 56, 30
portal-flare2
bounds: 759, 112, 57, 31
rotate: 90
portal-flare3
bounds: 554, 97, 58, 30
portal-shade
bounds: 275, 121, 133, 133
portal-streaks1
bounds: 410, 126, 126, 128
portal-streaks2
bounds: 538, 129, 125, 125
rear-bracer
bounds: 857, 67, 28, 36
rear-foot
bounds: 663, 96, 57, 30
rear-shin
bounds: 414, 86, 38, 89
rotate: 90
rear-thigh
bounds: 756, 63, 28, 47
rear-upper-arm
bounds: 60, 5, 20, 44
rotate: 90
torso
bounds: 905, 164, 49, 90

BIN
spine-ts/spine-pixi/example/typescript/assets/spineboy-pma.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 239 KiB

BIN
spine-ts/spine-pixi/example/typescript/assets/spineboy-pro.skel Normal file
View File

Binary file not shown.

12
spine-ts/spine-pixi/example/typescript/index.html Normal file
View File

@ -0,0 +1,12 @@
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<title>Pixi Typescript Example</title>
<meta name='viewport' content='width=device-width, initial-scale=1'>
</head>
<body>
<script src='build/index.js'></script>
</body>
</html>

46
spine-ts/spine-pixi/example/typescript/index.ts Normal file
View File

@ -0,0 +1,46 @@
import { Application, Assets } from 'pixi.js';
import { Spine } from '@esotericsoftware/spine-pixi';
/** The PixiJS app Application instance, shared across the project */
export const app = new Application<HTMLCanvasElement>({
width: window.innerWidth,
height: window.innerHeight,
resolution: window.devicePixelRatio || 1,
autoDensity: true,
resizeTo: window,
backgroundColor: 0x2c3e50,
hello: true,
});
/** Setup app and initialise assets */
async function init() {
// Add pixi canvas element (app.view) to the document's body
document.body.appendChild(app.view);
// Pre-load the skeleton data and atlas. You can also load .json skeleton data.
Assets.add({ alias: "spineboyData", src: "assets/spineboy-pro.skel" });
Assets.add({ alias: "spineboyAtlas", src: "assets/spineboy-pma.atlas" });
await Assets.load(["spineboyData", "spineboyAtlas"]);
// Create the spine display object
const spineboy = Spine.from("spineboyData", "spineboyAtlas", {
scale: 0.5,
});
// Set the default mix time to use when transitioning
// from one animation to the next.
spineboy.state.data.defaultMix = 0.2;
// Center the spine object on screen.
spineboy.x = window.innerWidth / 2;
spineboy.y = window.innerHeight / 2 + spineboy.getBounds().height / 2;
// Set animation "cape-follow-example" on track 0, looped.
spineboy.state.setAnimation(0, "run", true);
// Add the display object to the stage.
app.stage.addChild(spineboy);
}
// Init everything
init();

3673
spine-ts/spine-pixi/example/typescript/package-lock.json generated Normal file
View File

File diff suppressed because it is too large Load Diff

20
spine-ts/spine-pixi/example/typescript/package.json Normal file
View File

@ -0,0 +1,20 @@
{
"name": "spine-pixi-ts-example",
"description": "Spine pixi ts example",
"author": "Esoteric Software LLC",
"license": "LicenseRef-LICENSE",
"version": "1.0.0",
"scripts": {
"build":"npx esbuild index.ts --bundle --sourcemap --outfile=build/index.js",
"dev": "npx concurrently \"npx live-server --no-browser\" \"npm run build -- --watch\""
},
"dependencies": {
"@esotericsoftware/spine-pixi": "~4.2.43",
"pixi.js": "^7.2.4"
},
"devDependencies": {
"esbuild": "0.17.17",
"concurrently": "^7.6.0",
"live-server": "^1.2.2"
}
}