My experiment continues to crash and I get the following error:
TypeError: Cannot read properties of null (reading ‘width’)
at Sprite2.calculateVertices (Sprite.ts:313)
at Sprite2._calculateBounds (Sprite.ts:432)
at Sprite2.Container2.calculateBounds (Container.ts:479)
at Sprite2.DisplayObject2.getBounds (DisplayObject.ts:545)
at MaskSystem3.pushSpriteMask (MaskSystem.ts:248)
at MaskSystem3.push (MaskSystem.ts:136)
at Sprite2.Container2.renderAdvanced (Container.ts:641)
at Sprite2.Container2.render (Container.ts:588)
at Container2.render (Container.ts:597)
at Renderer3.render (Renderer.ts:472)
Since I’m new to Javascript, I need help finding the source of the problem or even starting a solution because I’m a bit lost.
There don’t seem to be any references to your experiment JS (Xp1_.js) in the error messages.
However, I’ve never come across Sprite.ts, TreeSearch.ts and InteractionManager.ts before.
Sprite.ts
/**
* Tests if a point is inside this sprite
*
* @param {PIXI.IPointData} point - the point to test
* @return {boolean} the result of the test
*/
public containsPoint(point: IPointData): boolean
{
this.worldTransform.applyInverse(point, tempPoint);
**const width = this._texture.orig.width;**
const height = this._texture.orig.height;
const x1 = -width * this.anchor.x;
let y1 = 0;
if (tempPoint.x >= x1 && tempPoint.x < x1 + width)
{
y1 = -height * this.anchor.y;
if (tempPoint.y >= y1 && tempPoint.y < y1 + height)
{
return true;
}
}
return false;
}
TreeSearch.ts
// If there is a mask, no need to hitTest against anything else if the pointer is not within the mask.
// We still want to hitTestChildren, however, to ensure a mouseout can still be generated.
// https://github.com/pixijs/pixi.js/issues/5135
else if (displayObject._mask)
{
if (hitTest)
{
**if (!((displayObject._mask as any).containsPoint && (displayObject._mask as any).containsPoint(point)))**
{
hitTest = false;
}
}
}
// ** FREE TIP **! If an object is not interactive or has no buttons in it
// (such as a game scene!) set interactiveChildren to false for that displayObject.
// This will allow PixiJS to completely ignore and bypass checking the displayObjects children.
if (hitTestChildren && displayObject.interactiveChildren && (displayObject as Container).children)
{
const children = (displayObject as Container).children;
for (let i = children.length - 1; i >= 0; i--)
{
const child = children[i];
// time to get recursive.. if this function will return if something is hit..
**const childHit = this.recursiveFindHit(interactionEvent, child, func, hitTest, interactiveParent);**
if (childHit)
{
// its a good idea to check if a child has lost its parent.
// this means it has been removed whilst looping so its best
if (!child.parent)
{
continue;
}
// we no longer need to hit test any more objects in this container as we we
// now know the parent has been hit
interactiveParent = false;
// If the child is interactive , that means that the object hit was actually
// interactive and not just the child of an interactive object.
// This means we no longer need to hit test anything else. We still need to run
// through all objects, but we don't need to perform any hit tests.
if (childHit)
{
if (interactionEvent.target)
{
hitTest = false;
}
hit = true;
}
}
}
}
InteractionManager.ts
const hit = this.search.findHit(interactionEvent, displayObject, func, hitTest);
The positions and sizes of the small circles inside the large circles were created in the first place on the basis of the “overlap” method of Python / psychopy.
But now, the information is listed and at the beginning of the experiment imported so that there is no trace of the original code.
Maybe the code that shows an error is related to the width of the line (Line Width in the polygon component)?
After over 3000 runs of the experiment I think I have reached the source of the problem.
Both stimuli (large circles with small dots) have a mask that hides their background, and of course is the same mask and the same file, when I remove from one of them the mask (which is not actually necessary for the experiment) has no crash.
Maybe the source of the problem was the overlap between the masks? Maybe an overlap between two masks that are the same file? I do not know. But a solution, at the moment, I have found.
