mirror of
https://github.com/EsotericSoftware/spine-runtimes.git
synced 2025-12-20 09:16:01 +08:00
Merge branch '4.1' into 4.2-beta
# Conflicts: # spine-flutter/CHANGELOG.md # spine-flutter/example/pubspec.lock # spine-flutter/pubspec.yaml
This commit is contained in:
Mario Zechner
commit
0d52101847
@ -389,8 +389,8 @@ cp -f ../mix-and-match/export/mix-and-match-pma.png "$ROOT/spine-ts/spine-phaser
|
||||
|
||||
rm "$ROOT/spine-ts/spine-pixi/example/assets/"*
|
||||
cp -f ../raptor/export/raptor-pro.json "$ROOT/spine-ts/spine-pixi/example/assets/"
|
||||
cp -f ../raptor/export/raptor-pma.atlas "$ROOT/spine-ts/spine-pixi/example/assets/"
|
||||
cp -f ../raptor/export/raptor-pma.png "$ROOT/spine-ts/spine-pixi/example/assets/"
|
||||
cp -f ../raptor/export/raptor.atlas "$ROOT/spine-ts/spine-pixi/example/assets/"
|
||||
cp -f ../raptor/export/raptor.png "$ROOT/spine-ts/spine-pixi/example/assets/"
|
||||
|
||||
cp -f ../spineboy/export/spineboy-pro.skel "$ROOT/spine-ts/spine-pixi/example/assets/"
|
||||
cp -f ../spineboy/export/spineboy-pma.atlas "$ROOT/spine-ts/spine-pixi/example/assets/"
|
||||
|
||||
@ -1,3 +1,6 @@
|
||||
# 4.1.4
|
||||
* Fixes for WASM/web builds.
|
||||
|
||||
# 4.2.13
|
||||
* Fixes for Impeller.
|
||||
|
||||
|
||||
@ -7,9 +7,10 @@ mkdir -p lib/assets/
|
||||
# The entries for exported functions in Module.asm will be scrambled so
|
||||
# EmscriptenModule._fromJs() is unable to parse them and link them with original
|
||||
# names set on the module, e.g. Module._spine_get_major_version.
|
||||
emcc \
|
||||
echo "const module = {};" > pre.js
|
||||
em++ \
|
||||
-Isrc/spine-cpp/include \
|
||||
-O2 --closure 1 -fno-rtti -fno-exceptions -lc++abi -lc++ \
|
||||
-O2 --closure 1 -fno-rtti -fno-exceptions \
|
||||
-s STRICT=1 \
|
||||
-s LLD_REPORT_UNDEFINED \
|
||||
-s MODULARIZE=1 \
|
||||
@ -19,8 +20,10 @@ emcc \
|
||||
-s EXPORT_ALL=1 \
|
||||
-s EXPORTED_FUNCTIONS='["_malloc", "_free"]' \
|
||||
--no-entry \
|
||||
--extern-pre-js pre.js \
|
||||
-s EXPORT_NAME=libspine_flutter \
|
||||
src/spine_flutter.cpp `find src/spine-cpp/src -type f` \
|
||||
-o lib/assets/libspine_flutter.js
|
||||
ls -lah lib/assets
|
||||
rm pre.js
|
||||
popd
|
||||
@ -1,3 +1,4 @@
|
||||
const module = {};
|
||||
|
||||
var libspine_flutter = (() => {
|
||||
var _scriptDir = typeof document !== 'undefined' && document.currentScript ? document.currentScript.src : undefined;
|
||||
@ -23,12 +24,12 @@ function pa(b){var c=H.length;b>>>=0;if(2147483648<b)return!1;for(var d=1;4>=d;d
|
||||
var Y={g:void 0,get:function(){Y.g+=4;return J[Y.g-4>>2]},h:function(b){return b?E(H,b):""}};a.SYSCALLS=Y;function qa(b,c,d,e){for(var f=0,g=0;g<d;g++){var C=K[c>>2],na=K[c+4>>2];c+=8;for(var Q=0;Q<na;Q++)X(b,H[C+Q]);f+=na}K[e>>2]=f;return 0}a._fd_write=qa;var ra={__assert_fail:ka,abort:la,emscripten_memcpy_big:ma,emscripten_resize_heap:pa,fd_write:qa};
|
||||
(function(){function b(f){a.asm=f.exports;A=a.asm.memory;N();ca.unshift(a.asm.__wasm_call_ctors);O--;a.monitorRunDependencies&&a.monitorRunDependencies(O);0==O&&(null!==P&&(clearInterval(P),P=null),R&&(f=R,R=null,f()))}function c(f){b(f.instance)}function d(f){return ja().then(function(g){return WebAssembly.instantiate(g,e)}).then(function(g){return g}).then(f,function(g){x("failed to asynchronously prepare wasm: "+g);z(g)})}var e={env:ra,wasi_snapshot_preview1:ra};O++;a.monitorRunDependencies&&a.monitorRunDependencies(O);
|
||||
if(a.instantiateWasm)try{return a.instantiateWasm(e,b)}catch(f){x("Module.instantiateWasm callback failed with error: "+f),k(f)}(function(){return y||"function"!=typeof WebAssembly.instantiateStreaming||fa()||S.startsWith("file://")||p||"function"!=typeof fetch?d(c):fetch(S,{credentials:"same-origin"}).then(function(f){return WebAssembly.instantiateStreaming(f,e).then(c,function(g){x("wasm streaming compile failed: "+g);x("falling back to ArrayBuffer instantiation");return d(c)})})})().catch(k);return{}})();
|
||||
a.___wasm_call_ctors=function(){return(a.___wasm_call_ctors=a.asm.__wasm_call_ctors).apply(null,arguments)};a._malloc=function(){return(a._malloc=a.asm.malloc).apply(null,arguments)};a._free=function(){return(a._free=a.asm.free).apply(null,arguments)};a._spine_enable_debug_extension=function(){return(a._spine_enable_debug_extension=a.asm.spine_enable_debug_extension).apply(null,arguments)};a._spine_major_version=function(){return(a._spine_major_version=a.asm.spine_major_version).apply(null,arguments)};
|
||||
a._spine_minor_version=function(){return(a._spine_minor_version=a.asm.spine_minor_version).apply(null,arguments)};a._spine_report_leaks=function(){return(a._spine_report_leaks=a.asm.spine_report_leaks).apply(null,arguments)};a._spine_color_get_r=function(){return(a._spine_color_get_r=a.asm.spine_color_get_r).apply(null,arguments)};a._spine_color_get_g=function(){return(a._spine_color_get_g=a.asm.spine_color_get_g).apply(null,arguments)};
|
||||
a._spine_color_get_b=function(){return(a._spine_color_get_b=a.asm.spine_color_get_b).apply(null,arguments)};a._spine_color_get_a=function(){return(a._spine_color_get_a=a.asm.spine_color_get_a).apply(null,arguments)};a._spine_bounds_get_x=function(){return(a._spine_bounds_get_x=a.asm.spine_bounds_get_x).apply(null,arguments)};a._spine_bounds_get_y=function(){return(a._spine_bounds_get_y=a.asm.spine_bounds_get_y).apply(null,arguments)};
|
||||
a._spine_bounds_get_width=function(){return(a._spine_bounds_get_width=a.asm.spine_bounds_get_width).apply(null,arguments)};a._spine_bounds_get_height=function(){return(a._spine_bounds_get_height=a.asm.spine_bounds_get_height).apply(null,arguments)};a._spine_vector_get_x=function(){return(a._spine_vector_get_x=a.asm.spine_vector_get_x).apply(null,arguments)};a._spine_vector_get_y=function(){return(a._spine_vector_get_y=a.asm.spine_vector_get_y).apply(null,arguments)};
|
||||
a._spine_atlas_load=function(){return(a._spine_atlas_load=a.asm.spine_atlas_load).apply(null,arguments)};a._spine_atlas_get_num_image_paths=function(){return(a._spine_atlas_get_num_image_paths=a.asm.spine_atlas_get_num_image_paths).apply(null,arguments)};a._spine_atlas_get_image_path=function(){return(a._spine_atlas_get_image_path=a.asm.spine_atlas_get_image_path).apply(null,arguments)};a._spine_atlas_get_error=function(){return(a._spine_atlas_get_error=a.asm.spine_atlas_get_error).apply(null,arguments)};
|
||||
a._spine_atlas_dispose=function(){return(a._spine_atlas_dispose=a.asm.spine_atlas_dispose).apply(null,arguments)};a._spine_skeleton_data_load_json=function(){return(a._spine_skeleton_data_load_json=a.asm.spine_skeleton_data_load_json).apply(null,arguments)};a._spine_skeleton_data_load_binary=function(){return(a._spine_skeleton_data_load_binary=a.asm.spine_skeleton_data_load_binary).apply(null,arguments)};
|
||||
a.___wasm_call_ctors=function(){return(a.___wasm_call_ctors=a.asm.__wasm_call_ctors).apply(null,arguments)};a._spine_enable_debug_extension=function(){return(a._spine_enable_debug_extension=a.asm.spine_enable_debug_extension).apply(null,arguments)};a._spine_major_version=function(){return(a._spine_major_version=a.asm.spine_major_version).apply(null,arguments)};a._spine_minor_version=function(){return(a._spine_minor_version=a.asm.spine_minor_version).apply(null,arguments)};
|
||||
a._spine_report_leaks=function(){return(a._spine_report_leaks=a.asm.spine_report_leaks).apply(null,arguments)};a._spine_color_get_r=function(){return(a._spine_color_get_r=a.asm.spine_color_get_r).apply(null,arguments)};a._spine_color_get_g=function(){return(a._spine_color_get_g=a.asm.spine_color_get_g).apply(null,arguments)};a._spine_color_get_b=function(){return(a._spine_color_get_b=a.asm.spine_color_get_b).apply(null,arguments)};
|
||||
a._spine_color_get_a=function(){return(a._spine_color_get_a=a.asm.spine_color_get_a).apply(null,arguments)};a._spine_bounds_get_x=function(){return(a._spine_bounds_get_x=a.asm.spine_bounds_get_x).apply(null,arguments)};a._spine_bounds_get_y=function(){return(a._spine_bounds_get_y=a.asm.spine_bounds_get_y).apply(null,arguments)};a._spine_bounds_get_width=function(){return(a._spine_bounds_get_width=a.asm.spine_bounds_get_width).apply(null,arguments)};
|
||||
a._spine_bounds_get_height=function(){return(a._spine_bounds_get_height=a.asm.spine_bounds_get_height).apply(null,arguments)};a._spine_vector_get_x=function(){return(a._spine_vector_get_x=a.asm.spine_vector_get_x).apply(null,arguments)};a._spine_vector_get_y=function(){return(a._spine_vector_get_y=a.asm.spine_vector_get_y).apply(null,arguments)};a._spine_atlas_load=function(){return(a._spine_atlas_load=a.asm.spine_atlas_load).apply(null,arguments)};
|
||||
a._spine_atlas_get_num_image_paths=function(){return(a._spine_atlas_get_num_image_paths=a.asm.spine_atlas_get_num_image_paths).apply(null,arguments)};a._spine_atlas_get_image_path=function(){return(a._spine_atlas_get_image_path=a.asm.spine_atlas_get_image_path).apply(null,arguments)};a._spine_atlas_get_error=function(){return(a._spine_atlas_get_error=a.asm.spine_atlas_get_error).apply(null,arguments)};
|
||||
a._spine_atlas_dispose=function(){return(a._spine_atlas_dispose=a.asm.spine_atlas_dispose).apply(null,arguments)};a._free=function(){return(a._free=a.asm.free).apply(null,arguments)};a._spine_skeleton_data_load_json=function(){return(a._spine_skeleton_data_load_json=a.asm.spine_skeleton_data_load_json).apply(null,arguments)};a._spine_skeleton_data_load_binary=function(){return(a._spine_skeleton_data_load_binary=a.asm.spine_skeleton_data_load_binary).apply(null,arguments)};
|
||||
a._spine_skeleton_data_result_get_error=function(){return(a._spine_skeleton_data_result_get_error=a.asm.spine_skeleton_data_result_get_error).apply(null,arguments)};a._spine_skeleton_data_result_get_data=function(){return(a._spine_skeleton_data_result_get_data=a.asm.spine_skeleton_data_result_get_data).apply(null,arguments)};a._spine_skeleton_data_result_dispose=function(){return(a._spine_skeleton_data_result_dispose=a.asm.spine_skeleton_data_result_dispose).apply(null,arguments)};
|
||||
a._spine_skeleton_data_find_bone=function(){return(a._spine_skeleton_data_find_bone=a.asm.spine_skeleton_data_find_bone).apply(null,arguments)};a._spine_skeleton_data_find_slot=function(){return(a._spine_skeleton_data_find_slot=a.asm.spine_skeleton_data_find_slot).apply(null,arguments)};a._spine_skeleton_data_find_skin=function(){return(a._spine_skeleton_data_find_skin=a.asm.spine_skeleton_data_find_skin).apply(null,arguments)};
|
||||
a._spine_skeleton_data_find_event=function(){return(a._spine_skeleton_data_find_event=a.asm.spine_skeleton_data_find_event).apply(null,arguments)};a._spine_skeleton_data_find_animation=function(){return(a._spine_skeleton_data_find_animation=a.asm.spine_skeleton_data_find_animation).apply(null,arguments)};a._spine_skeleton_data_find_ik_constraint=function(){return(a._spine_skeleton_data_find_ik_constraint=a.asm.spine_skeleton_data_find_ik_constraint).apply(null,arguments)};
|
||||
@ -84,7 +85,7 @@ a._spine_skeleton_set_slots_to_setup_pose=function(){return(a._spine_skeleton_se
|
||||
a._spine_skeleton_set_skin_by_name=function(){return(a._spine_skeleton_set_skin_by_name=a.asm.spine_skeleton_set_skin_by_name).apply(null,arguments)};a._spine_skeleton_set_skin=function(){return(a._spine_skeleton_set_skin=a.asm.spine_skeleton_set_skin).apply(null,arguments)};a._spine_skeleton_get_attachment_by_name=function(){return(a._spine_skeleton_get_attachment_by_name=a.asm.spine_skeleton_get_attachment_by_name).apply(null,arguments)};
|
||||
a._spine_skeleton_get_attachment=function(){return(a._spine_skeleton_get_attachment=a.asm.spine_skeleton_get_attachment).apply(null,arguments)};a._spine_skeleton_set_attachment=function(){return(a._spine_skeleton_set_attachment=a.asm.spine_skeleton_set_attachment).apply(null,arguments)};a._spine_skeleton_find_ik_constraint=function(){return(a._spine_skeleton_find_ik_constraint=a.asm.spine_skeleton_find_ik_constraint).apply(null,arguments)};
|
||||
a._spine_skeleton_find_transform_constraint=function(){return(a._spine_skeleton_find_transform_constraint=a.asm.spine_skeleton_find_transform_constraint).apply(null,arguments)};a._spine_skeleton_find_path_constraint=function(){return(a._spine_skeleton_find_path_constraint=a.asm.spine_skeleton_find_path_constraint).apply(null,arguments)};a._spine_skeleton_get_bounds=function(){return(a._spine_skeleton_get_bounds=a.asm.spine_skeleton_get_bounds).apply(null,arguments)};
|
||||
a._spine_skeleton_get_root_bone=function(){return(a._spine_skeleton_get_root_bone=a.asm.spine_skeleton_get_root_bone).apply(null,arguments)};a._spine_skeleton_get_data=function(){return(a._spine_skeleton_get_data=a.asm.spine_skeleton_get_data).apply(null,arguments)};a._spine_skeleton_get_num_bones=function(){return(a._spine_skeleton_get_num_bones=a.asm.spine_skeleton_get_num_bones).apply(null,arguments)};
|
||||
a._malloc=function(){return(a._malloc=a.asm.malloc).apply(null,arguments)};a._spine_skeleton_get_root_bone=function(){return(a._spine_skeleton_get_root_bone=a.asm.spine_skeleton_get_root_bone).apply(null,arguments)};a._spine_skeleton_get_data=function(){return(a._spine_skeleton_get_data=a.asm.spine_skeleton_get_data).apply(null,arguments)};a._spine_skeleton_get_num_bones=function(){return(a._spine_skeleton_get_num_bones=a.asm.spine_skeleton_get_num_bones).apply(null,arguments)};
|
||||
a._spine_skeleton_get_bones=function(){return(a._spine_skeleton_get_bones=a.asm.spine_skeleton_get_bones).apply(null,arguments)};a._spine_skeleton_get_num_slots=function(){return(a._spine_skeleton_get_num_slots=a.asm.spine_skeleton_get_num_slots).apply(null,arguments)};a._spine_skeleton_get_slots=function(){return(a._spine_skeleton_get_slots=a.asm.spine_skeleton_get_slots).apply(null,arguments)};
|
||||
a._spine_skeleton_get_num_draw_order=function(){return(a._spine_skeleton_get_num_draw_order=a.asm.spine_skeleton_get_num_draw_order).apply(null,arguments)};a._spine_skeleton_get_draw_order=function(){return(a._spine_skeleton_get_draw_order=a.asm.spine_skeleton_get_draw_order).apply(null,arguments)};a._spine_skeleton_get_num_ik_constraints=function(){return(a._spine_skeleton_get_num_ik_constraints=a.asm.spine_skeleton_get_num_ik_constraints).apply(null,arguments)};
|
||||
a._spine_skeleton_get_ik_constraints=function(){return(a._spine_skeleton_get_ik_constraints=a.asm.spine_skeleton_get_ik_constraints).apply(null,arguments)};a._spine_skeleton_get_num_transform_constraints=function(){return(a._spine_skeleton_get_num_transform_constraints=a.asm.spine_skeleton_get_num_transform_constraints).apply(null,arguments)};
|
||||
|
||||
Binary file not shown.
@ -19,6 +19,7 @@
|
||||
<li>Pixi</li>
|
||||
<ul>
|
||||
<li><a href="/spine-pixi/example/index.html">Basic example</a></li>
|
||||
<li><a href="/spine-pixi/example/events-example.html">Events example</a></li>
|
||||
</ul>
|
||||
<li>Phaser</li>
|
||||
<ul>
|
||||
|
||||
69
spine-ts/spine-pixi/example/events-example.html
Normal file
69
spine-ts/spine-pixi/example/events-example.html
Normal file
@ -0,0 +1,69 @@
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<title>spine-pixi</title>
|
||||
<script src="https://cdn.jsdelivr.net/npm/pixi.js@7.2.4/dist/pixi.min.js"></script>
|
||||
<script src="../dist/iife/spine-pixi.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/tweakpane@3.1.9/dist/tweakpane.min.js"></script>
|
||||
</head>
|
||||
<style>
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
body,
|
||||
html {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
canvas {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
|
||||
<body>
|
||||
<script>
|
||||
(async function () {
|
||||
var app = new PIXI.Application({
|
||||
width: window.innerWidth,
|
||||
height: window.innerHeight,
|
||||
resolution: window.devicePixelRatio || 1,
|
||||
autoDensity: true,
|
||||
resizeTo: window,
|
||||
backgroundColor: 0x2c3e50,
|
||||
hello: true,
|
||||
});
|
||||
document.body.appendChild(app.view);
|
||||
|
||||
// Pre-load the skeleton data and atlas. You can also load .json skeleton data.
|
||||
PIXI.Assets.add("spineboyData", "./assets/spineboy-pro.skel");
|
||||
PIXI.Assets.add("spineboyAtlas", "./assets/spineboy-pma.atlas");
|
||||
await PIXI.Assets.load(["spineboyData", "spineboyAtlas"]);
|
||||
|
||||
// Create the spine display object
|
||||
const spineboy = spine.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 "run" on track 0, looped.
|
||||
spineboy.state.setAnimation(0, "run", true);
|
||||
|
||||
// Set callbacks to receive animation state events
|
||||
|
||||
// Add the display object to the stage.
|
||||
app.stage.addChild(spineboy);
|
||||
})();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@ -1,7 +1,6 @@
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta charset="UTF-8" />
|
||||
<title>spine-pixi</title>
|
||||
<script src="https://cdn.jsdelivr.net/npm/pixi.js@7.2.4/dist/pixi.min.js"></script>
|
||||
<script src="../dist/iife/spine-pixi.js"></script>
|
||||
@ -15,7 +14,7 @@
|
||||
|
||||
body,
|
||||
html {
|
||||
height: 100%
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
canvas {
|
||||
@ -35,106 +34,34 @@
|
||||
autoDensity: true,
|
||||
resizeTo: window,
|
||||
backgroundColor: 0x2c3e50,
|
||||
hello:true
|
||||
hello: true,
|
||||
});
|
||||
document.body.appendChild(app.view);
|
||||
|
||||
// Feel free to mix and match the binary skeleton, the json skeleton, the rect atlas and the polypack atlas
|
||||
// You only need one skeleton and one atlas, the rest is just to show how to load different formats
|
||||
PIXI.Assets.add("spineboySkeletonJson", "./assets/spineboy-pro.json");
|
||||
PIXI.Assets.add("spineboySkeletonBinary", "./assets/spineboy-pro.skel");
|
||||
PIXI.Assets.add("spineboyAtlas", "./assets/spineboy.atlas");
|
||||
PIXI.Assets.add("spineboyAtlasPolypack", "./assets/spineboy-polypack.atlas");
|
||||
|
||||
await PIXI.Assets.load([
|
||||
"spineboySkeletonJson",
|
||||
"spineboySkeletonBinary",
|
||||
"spineboyAtlas",
|
||||
"spineboyAtlasPolypack"
|
||||
]);
|
||||
// Pre-load the skeleton data and atlas. You can also load .json skeleton data.
|
||||
PIXI.Assets.add("spineboyData", "./assets/spineboy-pro.skel");
|
||||
PIXI.Assets.add("spineboyAtlas", "./assets/spineboy-pma.atlas");
|
||||
await PIXI.Assets.load(["spineboyData", "spineboyAtlas"]);
|
||||
|
||||
// Create the spine display object
|
||||
const spineBoy = spine.Spine.from("spineboySkeletonJson", "spineboyAtlas", { scale: 0.5 });
|
||||
|
||||
// .from(...) is a shortcut + cache for creating the skeleton data at a certain scale
|
||||
// Here would be the "long way" of doing it (without cache):
|
||||
|
||||
// const skeletonAsset = Assets.get(skeletonAssetName);
|
||||
// const atlasAsset = Assets.get(atlasAssetName);
|
||||
// const attachmentLoader = new AtlasAttachmentLoader(atlasAsset);
|
||||
// let parser; // You can skip this guessing step if you know the type of the skeleton asset
|
||||
// if (skeletonAsset instanceof Uint8Array) {
|
||||
// parser = new SkeletonBinary(attachmentLoader);
|
||||
// } else {
|
||||
// parser = new SkeletonJson(attachmentLoader);
|
||||
// }
|
||||
// parser.scale = options?.scale ?? 1;
|
||||
// skeletonData = parser.readSkeletonData(skeletonAsset);
|
||||
// onst spineBoy = new spine.Spine(skeletonData, options);
|
||||
|
||||
|
||||
// Set the position
|
||||
spineBoy.x = window.innerWidth / 2;
|
||||
spineBoy.y = window.innerHeight * 0.9;
|
||||
|
||||
// start an animation. AutoUpdate is on by default, we don't need a manual rAF loop
|
||||
spineBoy.state.setAnimation(0, "run", true);
|
||||
|
||||
// add to stage
|
||||
app.stage.addChild(spineBoy);
|
||||
|
||||
// do we want debug? we can have debug!
|
||||
const spinedebugger = new spine.SpineDebugRenderer();
|
||||
spineBoy.debug = spinedebugger;
|
||||
|
||||
// End of spine setup. The rest is the tweakpane on the right to play with the spineboy
|
||||
|
||||
const pane = new Tweakpane.Pane({ title: 'spine pixi.js' });
|
||||
|
||||
// spineboy position on screen
|
||||
pane.addInput(spineBoy, 'position', {
|
||||
x: { min: 0, max: window.innerWidth },
|
||||
y: { min: 0, max: window.innerHeight },
|
||||
const spineboy = spine.Spine.from("spineboyData", "spineboyAtlas", {
|
||||
scale: 0.5,
|
||||
});
|
||||
|
||||
// Interesting example on how to get the pixi global position of a bone, and how to set a bone to a pixi global position
|
||||
// spine's "global" position is local to the spine display object. It's not the same as pixi's global position
|
||||
const aux = {aimPosition:spineBoy.toGlobal(spineBoy.getBonePosition("crosshair"))};
|
||||
const aimControl = pane.addInput(aux, 'aimPosition', {
|
||||
x: { min: 0, max: window.innerWidth },
|
||||
y: { min: 0, max: window.innerHeight },
|
||||
}).on("change", (e) => {
|
||||
spineBoy.setBonePosition("crosshair", spineBoy.toLocal(e.value));
|
||||
})
|
||||
aimControl.hidden = true;
|
||||
// Set the default mix time to use when transitioning
|
||||
// from one animation to the next.
|
||||
spineboy.state.data.defaultMix = 0.2;
|
||||
|
||||
// anim changer
|
||||
pane.addBlade({
|
||||
view: 'list',
|
||||
label: 'animation',
|
||||
options: spineBoy.skeleton.data.animations.map(a => ({ text: a.name, value: a.name })),
|
||||
value: 'run',
|
||||
}).on("change", (e) => {
|
||||
spineBoy.state.setAnimation(0, e.value, true);
|
||||
aimControl.hidden = !(e.value == "aim")
|
||||
})
|
||||
// Center the spine object on screen.
|
||||
spineboy.x = window.innerWidth / 2;
|
||||
spineboy.y = window.innerHeight / 2 + spineboy.getBounds().height / 2;
|
||||
|
||||
// turn on or off debug draws
|
||||
const debugFolder = pane.addFolder({
|
||||
title: 'Debug options',
|
||||
});
|
||||
|
||||
debugFolder.addInput(spinedebugger, 'drawMeshHull');
|
||||
debugFolder.addInput(spinedebugger, 'drawMeshTriangles');
|
||||
debugFolder.addInput(spinedebugger, 'drawBones');
|
||||
debugFolder.addInput(spinedebugger, 'drawPaths');
|
||||
debugFolder.addInput(spinedebugger, 'drawBoundingBoxes');
|
||||
debugFolder.addInput(spinedebugger, 'drawClipping');
|
||||
debugFolder.addInput(spinedebugger, 'drawRegionAttachments');
|
||||
debugFolder.addInput(spinedebugger, 'drawEvents');
|
||||
// Set animation "run" on track 0, looped.
|
||||
spineboy.state.setAnimation(0, "run", true);
|
||||
|
||||
// Add the display object to the stage.
|
||||
app.stage.addChild(spineboy);
|
||||
})();
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
74
spine-ts/spine-pixi/example/manual-loading.html
Normal file
74
spine-ts/spine-pixi/example/manual-loading.html
Normal file
@ -0,0 +1,74 @@
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<title>spine-pixi</title>
|
||||
<script src="https://cdn.jsdelivr.net/npm/pixi.js@7.2.4/dist/pixi.min.js"></script>
|
||||
<script src="../dist/iife/spine-pixi.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/tweakpane@3.1.9/dist/tweakpane.min.js"></script>
|
||||
</head>
|
||||
<style>
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
body,
|
||||
html {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
canvas {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
|
||||
<body>
|
||||
<script>
|
||||
(async function () {
|
||||
var app = new PIXI.Application({
|
||||
width: window.innerWidth,
|
||||
height: window.innerHeight,
|
||||
resolution: window.devicePixelRatio || 1,
|
||||
autoDensity: true,
|
||||
resizeTo: window,
|
||||
backgroundColor: 0x2c3e50,
|
||||
hello: true,
|
||||
});
|
||||
document.body.appendChild(app.view);
|
||||
|
||||
// Pre-load the skeleton data and atlas. You can also load .json skeleton data.
|
||||
PIXI.Assets.add("spineboyData", "./assets/spineboy-pro.skel");
|
||||
PIXI.Assets.add("spineboyAtlas", "./assets/spineboy-pma.atlas");
|
||||
await PIXI.Assets.load(["spineboyData", "spineboyAtlas"]);
|
||||
|
||||
// Manually load the data and create a Spine display object from it using
|
||||
// the Spine core API. This will not use the interal cache like Spine.from(),
|
||||
// so you have to cache data yourself.
|
||||
const atlas = PIXI.Assets.get("spineboyAtlas");
|
||||
const attachmentLoader = new spine.AtlasAttachmentLoader(atlas);
|
||||
const binaryLoader = new spine.SkeletonBinary(attachmentLoader);
|
||||
binaryLoader.scale = 0.5;
|
||||
const skeletonData = binaryLoader.readSkeletonData(
|
||||
PIXI.Assets.get("spineboyData")
|
||||
);
|
||||
const spineboy = new spine.Spine(skeletonData);
|
||||
|
||||
// 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 "run" on track 0, looped.
|
||||
spineboy.state.setAnimation(0, "run", true);
|
||||
|
||||
// Add the display object to the stage.
|
||||
app.stage.addChild(spineboy);
|
||||
})();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@ -122,23 +122,8 @@ export class Spine extends Container {
|
||||
this.state = new AnimationState(animData);
|
||||
this.autoUpdate = options?.autoUpdate ?? true;
|
||||
this.slotMeshFactory = options?.slotMeshFactory ?? ((): ISlotMesh => new SlotMesh());
|
||||
|
||||
|
||||
/**
|
||||
* This is locked behind https://github.com/pixijs/pixijs/issues/8957
|
||||
* I don't want to make a custom event emitter and do `this.spineEvents.on` because that's just as "far" as `this.state.addListener`
|
||||
* So, until pixi fixes the custom event system, I'll stick to spine native events. - @miltoncandelero
|
||||
|
||||
this.spineListeners = {
|
||||
complete: (trackEntry) => this.emit("complete", trackEntry),
|
||||
dispose: (trackEntry) => this.emit("dispose", trackEntry),
|
||||
end: (trackEntry) => this.emit("end", trackEntry),
|
||||
event: (trackEntry, event) => this.emit("event", trackEntry, event),
|
||||
interrupt: (trackEntry) => this.emit("interrupt", trackEntry),
|
||||
start: (trackEntry) => this.emit("start", trackEntry),
|
||||
};
|
||||
this.state.addListener(this.spineListeners);
|
||||
*/
|
||||
this.skeleton.setToSetupPose();
|
||||
this.skeleton.updateWorldTransform();
|
||||
}
|
||||
|
||||
public update (deltaSeconds: number): void {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user