• Runtimes
  • [js] Bounding Box collision with point

In my animation I use bounding box for test collision. But I have a problem to get boundingbox vertices for collision (this method I use in LibGDX)? How to check collision point->boundingbox ? I also try use "aabbContainsPoint" method but I also failed :/

I use spine.js and spine-canvas.js

Related Discussions
...

Use SkeletonBounds, update it with your skeleton, then use its methods. Please explain what you tried, what happened, and what you expected to happen instead.

I'm newbie in JavaScript


definition:
spine.SkeletonRenderer.prototype = {
skeletonData: null,
state: null,
scale: 1,
skeleton: null,
bbounds : null,
...


In "load" function (based on spine-canvas.js) I do it:
....
this.skeleton = new spine.Skeleton(this.skeletonData);
this.bbounds = new spine.SkeletonBounds();
....


When I want check collision a do it:
this.bbounds.update(this.skeleton,true);
log(this.bbounds.aabbContainsPoint(mouse_x,mouse_y)); //show result in console


But I get only "false" .
I based on example "SimpleTest2.java" and In my opinion I do it all properly but maybe I do it stupid mistake?

See what the value of the mouse position is. See what the value of some of the polygons in SkeletonBounds are. You may need to convert the mouse coordinates into the same coordinates that the skeleton is using.

Mouse coordinates are good - checked!

I log many parameters in spine.js and in function "aabbCompute"

aabbCompute: function () {
var polygons = this.polygons;
var minX = Number.MAX_VALUE, minY = Number.MAX_VALUE, maxX = -Number.MAX_VALUE, maxY = -Number.MAX_VALUE;

	for (var i = 0, n = polygons.length; i < n; i++) {
		var vertices = polygons[i];
                    [b]log (vertices.length); // value is 0[/b]
		for (var ii = 0, nn = vertices.length; ii < nn; ii += 2) {
			var x = vertices[ii];

....
....

vertices.length is always = 0 . In function SkeletonBounds.update is checked doog slot with my boundingbox but problem is probably in aabbCompute beacuse vertices.length is always 0.

For javascript I use Spine 3.1.08. Bounding box is created properly and have 4 vertices. Maybe for JavaScript is other requirement for boundingbox creation?
I dont know where is a bug but vertices.length is always = 0 looks strange
I do it same in LibGDX and working good but in JavaScript doesn't work :/

This was a bug in the spine-js runtime. I've committed a fix. Sorry it gave you so much trouble!

BTW, badlogic is working on a completely new spine-js, written in TypeScript. This has type safety and compiles to super nice JavaScript, so we will still provide a single JavaScript file. spine-ts is very nearly done and it's current state can be seen in the git branch here:
spine-runtimes/spine-ts at spine-ts · EsotericSoftware/spine-runtimes · GitHub

Nate wrote

This was a bug in the spine-js runtime. I've committed a fix. Sorry it gave you so much trouble!

No problem 🙂

I trying use new spine.js but I have still this same issue (vertices.length=0)
So a loop for (var ii = 0, nn = vertices.length; ii < nn; ii += 2) in aabbCompute function still is not used

Yes, I have these lines.

Commment are mine.

if (boundingBox.type != spine.AttachmentType.boundingbox) continue;
boundingBoxes[boundingBoxes.length] = boundingBox;

log(boundingBoxes.length); //boundingBoxes.length = 1
log(boundingBox.name); //show "bplay" this is a name of my bounding box

var poolCount = polygonPool.length, polygon;
log (poolCount); //equal 1
if (poolCount > 0) { //poolCount==1 so this if run
   polygon = polygonPool[poolCount - 1];
   polygonPool.splice(poolCount - 1, 1);
   polygon.length = boundingBox.vertices.length;
   log(polygon.length); //polygon.length = 0
} else
   polygon = new Array(boundingBox.vertices.length);
polygons[polygons.length] = polygon;

log(boundingBox.vertices.length); // boundingBox.vertices.length = 0

Ahh, boundingBox.vertices.length should not be zero, thanks. New fix in Git.

Now it works well! Thanks!