I am trying to programmatically set the width and heights of the chained bodies in matter.js. Unfortunately, I am only getting 0 as values and I am unsure why. My guess is that the images are not being loaded fast enough to provide those values. How can I load those dimensions before the images are loaded?
Pseudo-code
- Several bodies from Array
- Get the width and height of each image in the Array
- Use this value to set the Bodies dimensions
Code
var playA = Composites.stack(
percentX(25) - assetSize / 2,
percentY(25),
1,
6,
5,
5,
function (x, y) {
iA++;
var imgWidth;
var imgHeight;
var img = new Image();
img.src = String(design[iA]);
var imgWidth = 0;
var imgHeight = 0;
img.onload = function a() {
imgWidth = img.naturalWidth;
imgHeight = img.naturalHeight;
console.log(String(design[iA]), imgWidth, imgHeight);
};
console.log(String(design[iA]), imgHeight, imgWidth); // I can't access the values here.
return Bodies.rectangle(x, y, imgWidth, imgHeight, {
// collisionFilter: { group: group },
friction: 1,
render: {
sprite: {
texture: design[iA],
xScale: (assetSize / 100) * 0.46,
yScale: (assetSize / 100) * 0.46
}
}
});
}
);
Composites.chain(playA, 0.3, 0, -0.5, 0, {
stiffness: 1,
length: 10,
render: { type: "line", visible: false }
});
If you know the dimensions and can populate an array beforehand, the solution is potentially straightforward since Matter.js loads images given a URL string, with the caveat that the engine doesn't wait for the loads before running.
Here's a minimal example of iterating over width/height pairs in an array and passing these properties into the
rectangle
calls which I'll use as a stepping stone to the example that matches your use case.Now, if you need to load images using
onload
and use their dimensions, you'll need to use promises or put all code dependent on these images into the sequence ofonload
callback(s) as described in the canonical How do I return the response from an asynchronous call?.The failing pattern is:
The fix is:
Since you're juggling multiple
onload
s, you can promisify theonload
s to make them easier to work with. I have a couple examples of doing this here and here agnostic of matter.js.Here's an example of using promises to load images applied to your general problem. Again, I'll use my own code so that it's runnable and reproducible, but the pattern should be easy to extrapolate to your project.
The idea is to first load the images using a series of promises which are resolved when
onload
handlers fire, then usePromise.all
to chain athen
which runs the MJS initializer callback only when all images are loaded. The widths and heights are then accessible to your matter.js code within the callback.As a side benefit, this ensures images are loaded by the time MJS runs.