Merge branch '4.1' into 4.2-beta

# Conflicts:
#	spine-ts/package-lock.json
#	spine-ts/package.json
#	spine-ts/spine-canvas/package.json
#	spine-ts/spine-core/package.json
#	spine-ts/spine-phaser/package.json
#	spine-ts/spine-player/package.json
#	spine-ts/spine-threejs/package.json
#	spine-ts/spine-webgl/package.json
This commit is contained in:
Mario Zechner 2023-04-21 14:11:58 +02:00
commit 4566f75922
21 changed files with 3361 additions and 38 deletions

View File

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

View File

@ -30,6 +30,6 @@
},
"homepage": "https://github.com/esotericsoftware/spine-runtimes#readme",
"dependencies": {
"@esotericsoftware/spine-core": "^4.2.13"
"@esotericsoftware/spine-core": "4.2.13"
}
}

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>

View File

@ -32,7 +32,7 @@
let game = new Phaser.Game(config);
function preload() {
this.load.image('logo', 'assets/phaser.png');
this.load.image('logo', 'phaser.png');
this.load.spineBinary("spineboy-data", "assets/spineboy-pro.skel");
this.load.spineAtlas("spineboy-atlas", "assets/spineboy-pma.atlas");
}

View File

@ -63,7 +63,7 @@
}
preload() {
this.load.image('logo', 'assets/phaser.png');
this.load.image('logo', 'phaser.png');
this.load.spineBinary("spineboy-data", "assets/spineboy-pro.skel");
this.load.spineAtlas("spineboy-atlas", "assets/spineboy-pma.atlas");
}

View File

@ -0,0 +1,6 @@
# spine-phaser TypeScript
Minimal example project using Phaser, spine-phaser, 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`

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

Binary file not shown.

After

Width:  |  Height:  |  Size: 239 KiB

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>

View File

@ -0,0 +1,30 @@
import {Scene} from "phaser"
import {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);

File diff suppressed because it is too large Load Diff

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.31",
"phaser": "3.60.0"
},
"devDependencies": {
"esbuild": "0.17.17",
"concurrently": "^7.6.0",
"live-server": "^1.2.2"
}
}

View File

@ -30,8 +30,8 @@
},
"homepage": "https://github.com/esotericsoftware/spine-runtimes#readme",
"dependencies": {
"@esotericsoftware/spine-core": "^4.1.27",
"@esotericsoftware/spine-webgl": "^4.1.27",
"@esotericsoftware/spine-canvas": "^4.1.27"
"@esotericsoftware/spine-core": "4.2.13",
"@esotericsoftware/spine-webgl": "4.2.13",
"@esotericsoftware/spine-canvas": "4.2.13"
}
}

View File

@ -77,9 +77,9 @@ export class SkinsAndAnimationBoundsProvider implements SpineGameObjectBoundsPro
export class SpineGameObject extends ComputedSizeMixin(DepthMixin(FlipMixin(ScrollFactorMixin(TransformMixin(VisibleMixin(AlphaMixin(BaseSpineGameObject))))))) {
blendMode = -1;
skeleton: Skeleton | null = null;
animationStateData: AnimationStateData | null = null;
animationState: AnimationState | null = null;
skeleton: Skeleton;
animationStateData: AnimationStateData;
animationState: AnimationState;
private premultipliedAlpha = false;
private _displayOriginX = 0;
private _displayOriginY = 0;
@ -89,21 +89,12 @@ export class SpineGameObject extends ComputedSizeMixin(DepthMixin(FlipMixin(Scro
constructor (scene: Phaser.Scene, private plugin: SpinePlugin, x: number, y: number, dataKey: string, atlasKey: string, public boundsProvider: SpineGameObjectBoundsProvider = new SetupPoseBoundsProvider()) {
super(scene, SPINE_GAME_OBJECT_TYPE);
this.setPosition(x, y);
this.setSkeleton(dataKey, atlasKey);
}
setSkeleton (dataKey: string, atlasKey: string) {
if (dataKey && atlasKey) {
this.premultipliedAlpha = this.plugin.isAtlasPremultiplied(atlasKey);
this.skeleton = this.plugin.createSkeleton(dataKey, atlasKey);
this.animationStateData = new AnimationStateData(this.skeleton.data);
this.animationState = new AnimationState(this.animationStateData);
this.updateSize();
} else {
this.skeleton = null;
this.animationStateData = null;
this.animationState = null;
}
this.premultipliedAlpha = this.plugin.isAtlasPremultiplied(atlasKey);
this.skeleton = this.plugin.createSkeleton(dataKey, atlasKey);
this.animationStateData = new AnimationStateData(this.skeleton.data);
this.animationState = new AnimationState(this.animationStateData);
this.updateSize();
}
public get displayOriginX () {
@ -187,9 +178,7 @@ export class SpineGameObject extends ComputedSizeMixin(DepthMixin(FlipMixin(Scro
this.skeleton.updateWorldTransform();
}
preDestroy () {
this.skeleton = null;
this.animationState = null;
preDestroy () {
// FIXME tear down any event emitters
}

View File

@ -27,12 +27,20 @@
* THE SPINE RUNTIMES, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
*****************************************************************************/
import Phaser from "phaser";
import phaser from "phaser";
import { SPINE_ATLAS_CACHE_KEY, SPINE_CONTAINER_TYPE, SPINE_GAME_OBJECT_TYPE, SPINE_ATLAS_TEXTURE_CACHE_KEY, SPINE_SKELETON_DATA_FILE_TYPE, SPINE_ATLAS_FILE_TYPE, SPINE_SKELETON_FILE_CACHE_KEY as SPINE_SKELETON_DATA_CACHE_KEY } from "./keys";
import { AtlasAttachmentLoader, Bone, GLTexture, SceneRenderer, Skeleton, SkeletonBinary, SkeletonData, SkeletonJson, TextureAtlas } from "@esotericsoftware/spine-webgl"
import { SpineGameObject, SpineGameObjectBoundsProvider } from "./SpineGameObject";
import { CanvasTexture, SkeletonRenderer } from "@esotericsoftware/spine-canvas";
export interface SpineGameObjectConfig extends Phaser.Types.GameObjects.GameObjectConfig {
x?: number,
y?: number,
dataKey: string,
atlasKey: string
boundsProvider?: SpineGameObjectBoundsProvider
}
export class SpinePlugin extends Phaser.Plugins.ScenePlugin {
game: Phaser.Game;
isWebGL: boolean;
@ -105,13 +113,11 @@ export class SpinePlugin extends Phaser.Plugins.ScenePlugin {
return gameObject;
};
let makeSpineGameObject = function (this: Phaser.GameObjects.GameObjectFactory, config: any, addToScene: boolean) {
let makeSpineGameObject = function (this: Phaser.GameObjects.GameObjectFactory, config: SpineGameObjectConfig, addToScene: boolean) {
let x = config.x ? config.x : 0;
let y = config.y ? config.y : 0;
let dataKey = config.dataKey ? config.dataKey : null;
let atlasKey = config.atlasKey ? config.atlasKey : null;
let y = config.y ? config.y : 0;
let boundsProvider = config.boundsProvider ? config.boundsProvider : undefined;
let gameObject = new SpineGameObject(this.scene, self, x, y, dataKey, atlasKey, boundsProvider);
let gameObject = new SpineGameObject(this.scene, self, x, y, config.dataKey, config.atlasKey, boundsProvider);
if (addToScene !== undefined) {
config.add = addToScene;
}

View File

@ -4,6 +4,28 @@ export * from "./SpineGameObject"
export * from "./mixins"
export * from "@esotericsoftware/spine-core";
export * from "@esotericsoftware/spine-webgl";
import { SpinePlugin } from "./SpinePlugin";
import { SpineGameObjectConfig, 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: SpineGameObjectConfig, addToScene?: boolean): SpineGameObject;
}
}
}

View File

@ -20,7 +20,8 @@
"**/*.ts",
],
"exclude": [
"dist/**/*.d.ts"
"dist/**/*.d.ts",
"example/**/*.ts"
],
"references": [
{

View File

@ -30,6 +30,6 @@
},
"homepage": "https://github.com/esotericsoftware/spine-runtimes#readme",
"dependencies": {
"@esotericsoftware/spine-webgl": "^4.2.13"
"@esotericsoftware/spine-webgl": "4.2.13"
}
}

View File

@ -30,6 +30,6 @@
},
"homepage": "https://github.com/esotericsoftware/spine-runtimes#readme",
"dependencies": {
"@esotericsoftware/spine-core": "^4.1.27"
"@esotericsoftware/spine-core": "4.2.13"
}
}

View File

@ -30,6 +30,6 @@
},
"homepage": "https://github.com/esotericsoftware/spine-runtimes#readme",
"dependencies": {
"@esotericsoftware/spine-core": "^4.2.13"
"@esotericsoftware/spine-core": "4.2.13"
}
}