Цей сайт найкраще переглядати в сучасному браузері з включеним JavaScript.

[ts-js] Problem with SkeletonBounds.prototype.update

zielok

I use typescript runtime compiled to JS Canvas 2d.

I will try check collision with bounding box. All works correctly but when I try first use "SkeletonBounds.prototype.update()" function I get sixteen (16) times this error:
17:07:33.483 TypeError: polygon is undefined SkeletonBounds.prototype.update()spine-core.js

I check collision one time per frame, so after 16 frames I got info about collision. I have a little delay after clicks mouse button to action.

When

if (polygon.length != boundingBox.worldVerticesLength) {
         polygon = spine.Utils.newFloatArray(boundingBox.worldVerticesLength);
}

I change to

 //if (polygon.length != boundingBox.worldVerticesLength) {
         polygon = spine.Utils.newFloatArray(boundingBox.worldVerticesLength);
//}

All works correctly and I dont have a delay between my click and collision checking (delay time is 16 frames).

Maybe I make something wrong and some more initializations are required? Now I do it "skeletonBounds = new spine.SkeletonBounds();" after load skeleton.
Any example how to use properly collision detection with JS runtime?

zielok

Mario

No, there shouldn't be any additional setup required. This is likely a bug in spine-ts. I've created an issue here [ts] Bug in SkeletonBounds · Issue #705 · EsotericSoftware/spine-runtimes · GitHub

Mario

Looked into this, bounds work as intended. Overlooked that you are calling SkeletonBounds.prototype.update, that won't work 🙂 Here's how to use the bounds.

bounds = new spine.SkeletonBounds();
bounds.update(skeleton)

This is a pattern used by all spine-ts classes. Create an instance with new spine.XXX, then just call the methods on the instance.

zielok

Ok, but I use:

After load skeleton

skeletonBounds = new spine.SkeletonBounds();

and when I want ceck collision

skeletonBounds.update(skeleton, true); 
if (skeletonBounds.aabbContainsPoint(xPoint, yPoint)) { 
   var hit = skeletonBounds.containsPoint(xPoint, yPoint); 
   if (hit != null) {
      return hit.name;
   }
}

When I call a function "skeletonBounds.update(skeleton, true); " I get error "TypeError: polygon is undefined SkeletonBounds.prototype.update()spine-core.js" - 16 times.
After that all works correctly (with this skeleton, other have this same issue)

Mario

Hm, there might be an issue in the loading order of the various classes. Do you have a self-contained example that reproduces the issue?

zielok

Source: http://www.twohandslab.com/number7.zip

In folder "engine" is "skeleton.js" - have a functions "load" (to load spine animation)
Problem function in this file is "checkInName" (to demonstrate error try click a game screen) ofcourse when you run index.html

Main source is "game.js"
In this source is many unnecessary files and code. If you want I make simpler version to reproduce this error.
My knowledge of javascript is very basic (I try to learn but it is slowly 😉 ) so the code is very poor.

Mario

Tried this locally, didn't get any error messages. Loading Image. What browser do you see the issue in?

zielok

Strange...

I use Firefox 49.0.1
Error
Loading Image

And Google Chrome 53.0.2785.143 (64-bit)
error
Loading Image

I work on OS X El Captain 10.11.6

This error showing when you click on play button on the main screen (2 arrows below logo "number 7")

Mario

Ah sorry, my bad. I didn't click anywhere on the game screen. Can reproduce it here in Chrome and Firefox. Checking what's up.

Mario

The problem is here:

Loading Image

The array is instantiated with 16 elements. In obtain(), the length is checked, and then either an item is poped, or the instantiator is called. No items are in the pool, but the array length is 16, so poping is performed, returning null. This was a bug in the initial runtime. It's been fixed quite a while ago, e.g. spine-runtimes/spine-core.js at master · EsotericSoftware/spine-runtimes · GitHub

Please fetch the latest build for spine-ts from the GitHub repository here spine-runtimes/spine-ts/build at master · EsotericSoftware/spine-runtimes · GitHub

zielok

Working!

But I must include "spine-all.js". (in log I have "ReferenceError: THREE is not defined spine-all.js:4949:1" but all is working for me)

When I include "spine-core.js" I have an error "spine.canvas is undefined" when

skeletonRenderer = new spine.canvas.SkeletonRenderer(context);

I also try to check canvas example but file "spine-canvas.js" is missed in build folder.

Thanks for support

Mario

Hrm, it appears one of out .gitignores ignored the build/spine-canvas.* files. I've added them back in!