UnityMirror/spine-runtimes
1
0
Fork 0
mirror of https://github.com/EsotericSoftware/spine-runtimes.git synced 2026-02-06 15:24:55 +08:00
Code Issues Packages Projects Releases Wiki Activity

[phaser] Add vanilla JS and NPM/TS examples, fix typings.

Browse Source
This commit is contained in:
Mario Zechner 2023-04-21 11:33:35 +02:00
parent ac424c9164
commit 2cc7667a18
9 changed files with 3318 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

47
spine-ts/spine-phaser/example/basic-vanilla-js-example.html Normal file
View File

@ -0,0 +1,47 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="//cdn.jsdelivr.net/npm/phaser@3.55.2/dist/phaser.js"></script>
<script src="https://unpkg.com/@esotericsoftware/spine-phaser@4.1.*/dist/iife/spine-phaser.min.js"></script>
<title>Spine Phaser Example</title>
</head>
<body>
<h1>Basic example</h1>
</body>
<script>
var config = {
type: Phaser.AUTO,
width: 800,
height: 600,
type: Phaser.WEBGL,
scene: {
preload: preload,
create: create,
},
plugins: {
scene: [
{ key: "spine.SpinePlugin", plugin: spine.SpinePlugin, mapping: "spine" }
]
}
};
let game = new Phaser.Game(config);
function preload() {
this.load.spineBinary("spineboy-data", "assets/spineboy-pro.skel");
this.load.spineAtlas("spineboy-atlas", "assets/spineboy-pma.atlas");
}
function create() {
let spineboy = this.add.spine(400, 500, 'spineboy-data', "spineboy-atlas");
spineboy.scale = 0.5;
spineboy.animationState.setAnimation(0, "walk", true);
}
</script>
</html>

102
spine-ts/spine-phaser/example/npm/assets/spineboy-pma.atlas Normal file
View File

@ -0,0 +1,102 @@
spineboy-pma.png
size: 1024, 256
filter: Linear, Linear
pma: true
scale: 0.5
crosshair
bounds: 813, 160, 45, 45
eye-indifferent
bounds: 569, 2, 47, 45
eye-surprised
bounds: 643, 7, 47, 45
rotate: 90
front-bracer
bounds: 811, 51, 29, 40
front-fist-closed
bounds: 807, 93, 38, 41
front-fist-open
bounds: 815, 210, 43, 44
front-foot
bounds: 706, 64, 63, 35
rotate: 90
front-shin
bounds: 80, 11, 41, 92
front-thigh
bounds: 754, 12, 23, 56
front-upper-arm
bounds: 618, 5, 23, 49
goggles
bounds: 214, 20, 131, 83
gun
bounds: 347, 14, 105, 102
rotate: 90
head
bounds: 80, 105, 136, 149
hoverboard-board
bounds: 2, 8, 246, 76
rotate: 90
hoverboard-thruster
bounds: 478, 2, 30, 32
hoverglow-small
bounds: 218, 117, 137, 38
rotate: 90
mouth-grind
bounds: 775, 80, 47, 30
rotate: 90
mouth-oooo
bounds: 779, 31, 47, 30
rotate: 90
mouth-smile
bounds: 783, 207, 47, 30
rotate: 90
muzzle-glow
bounds: 779, 4, 25, 25
muzzle-ring
bounds: 451, 14, 25, 105
muzzle01
bounds: 664, 60, 67, 40
rotate: 90
muzzle02
bounds: 580, 56, 68, 42
rotate: 90
muzzle03
bounds: 478, 36, 83, 53
rotate: 90
muzzle04
bounds: 533, 49, 75, 45
rotate: 90
muzzle05
bounds: 624, 56, 68, 38
rotate: 90
neck
bounds: 806, 8, 18, 21
portal-bg
bounds: 258, 121, 133, 133
portal-flare1
bounds: 690, 2, 56, 30
rotate: 90
portal-flare2
bounds: 510, 3, 57, 31
portal-flare3
bounds: 722, 4, 58, 30
rotate: 90
portal-shade
bounds: 393, 121, 133, 133
portal-streaks1
bounds: 528, 126, 126, 128
portal-streaks2
bounds: 656, 129, 125, 125
rear-bracer
bounds: 826, 13, 28, 36
rear-foot
bounds: 743, 70, 57, 30
rotate: 90
rear-shin
bounds: 174, 14, 38, 89
rear-thigh
bounds: 783, 158, 28, 47
rear-upper-arm
bounds: 783, 136, 20, 44
rotate: 90
torso
bounds: 123, 13, 49, 90

BIN
spine-ts/spine-phaser/example/npm/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-phaser/example/npm/assets/spineboy-pro.skel Normal file
View File

Binary file not shown.

13
spine-ts/spine-phaser/example/npm/index.html Normal file
View File

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

30
spine-ts/spine-phaser/example/npm/index.ts Normal file
View File

@ -0,0 +1,30 @@
import {Scene} from "phaser"
import {SpineGameObject, SpineGameObjectBoundsProvider, SpinePlugin} from "@esotericsoftware/spine-phaser"
class SpineDemo extends Scene {
preload() {
this.load.spineBinary("spineboy-data", "assets/spineboy-pro.skel");
this.load.spineAtlas("spineboy-atlas", "assets/spineboy-pma.atlas");
}
create() {
let spineboy = this.add.spine(400, 500, 'spineboy-data', "spineboy-atlas");
this.make
spineboy.scale = 0.5;
spineboy.animationState.setAnimation(0, "walk", true);
}
}
var config = {
width: 800,
height: 600,
type: Phaser.WEBGL,
scene: [SpineDemo],
plugins: {
scene: [
{ key: "spine.SpinePlugin", plugin: SpinePlugin, mapping: "spine" }
]
}
};
let game = new Phaser.Game(config);

3085
spine-ts/spine-phaser/example/npm/package-lock.json generated Normal file
View File

File diff suppressed because it is too large Load Diff

19
spine-ts/spine-phaser/example/npm/package.json Normal file
View File

@ -0,0 +1,19 @@
{
"name": "name",
"description": "description",
"authors": "author",
"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-phaser": "^4.1.*",
"phaser": "3.60.0"
},
"devDependencies": {
"esbuild": "0.17.17",
"concurrently": "^7.6.0",
"live-server": "^1.2.2"
}
}

22
spine-ts/spine-phaser/src/index.ts
View File

@ -7,3 +7,25 @@ export * from "@esotericsoftware/spine-webgl";
import { SpinePlugin } from "./SpinePlugin";
(window as any).spine = { SpinePlugin: SpinePlugin };
(window as any)["spine.SpinePlugin"] = SpinePlugin;
import { SpineGameObject, SpineGameObjectBoundsProvider } from "./SpineGameObject";
declare global {
namespace Phaser.Loader {
export interface LoaderPlugin {
spineJson(key: string, url: string, xhrSettings?: Phaser.Types.Loader.XHRSettingsObject): LoaderPlugin;
spineBinary(key: string, url: string, xhrSettings?: Phaser.Types.Loader.XHRSettingsObject): LoaderPlugin;
spineAtlas(key: string, url: string, premultipliedAlpha?: boolean, xhrSettings?: Phaser.Types.Loader.XHRSettingsObject): LoaderPlugin;
}
}
namespace Phaser.GameObjects {
export interface GameObjectFactory {
spine(x: number, y: number, dataKey: string, atlasKey: string, boundsProvider?: SpineGameObjectBoundsProvider): SpineGameObject;
}
export interface GameObjectCreator {
spine(config: any, addToScene: boolean): SpineGameObject;
}
}
}