matter.jsのテクスチャーについての質問

質問

matter.jsを学び始め、
matter.jsの基本的な機能を使ったサンプル集
https://mmsrtech.com/entry/2022/10/16/210254
このサイトのサンプルを参考にさせていただき、勉強しています。
サンプルの中の
オブジェクトの表示切り替え、削除、総数のカウント
のコードを触りながらいろいろ試しています。
サンプルの2か所を変更して、クリックで生成される円の半径を１５に固定して、テクスチャーを張ろうとしてるのですが、テクスチャーが貼れません。何も反応しなくなります。どのようにすれば、テクスチャーが貼れますか？

// 使用モジュール
const Engine = Matter.Engine,
Render = Matter.Render,
Runner = Matter.Runner,
Body = Matter.Body,
Bodies = Matter.Bodies,
Composite = Matter.Composite,
Composites = Matter.Composites,
Vector = Matter.Vector,
Constraint = Matter.Constraint,
MouseConstraint = Matter.MouseConstraint,
Mouse = Matter.Mouse,
Events = Matter.Events;

// エンジンの生成
const engine = Engine.create();

// 物理演算canvasを挿入する要素
const canvas = $('#canvas-area')[0];

// レンダリングの設定
const render = Render.create({
element: canvas,
engine: engine,
options: {
width: 800,
height: 600,
}
});

// マウス、マウス制約を生成
const mouse = Mouse.create(canvas);
const mouseConstraint = MouseConstraint.create(engine, {
mouse: mouse,
constraint: {
render: {
visible: false
}
}
})

Composite.add(engine.world, mouseConstraint)
render.mouse = mouse

// レンダリングを実行
Render.run(render);

// エンジンを実行
Runner.run(engine);

/**
* 以下、各例毎に処理を記述する
*/

$('body').append('<p class="body-counter">Number of balls : <span></span></p>');
$('body').append('<button>Clear</button>');

// ボール用Compositeを生成する【⑬】
const ballComposite = Composite.create();
Composite.add(engine.world, ballComposite);

// 静止オブジェクト（空中の床と画面外落下判定オブジェクト）【⑭】
const floor = Bodies.rectangle(400, 400, 500, 30, { isStatic: true });
const pit = Bodies.rectangle(400, 900, 50000, 30, { isStatic: true, label: 'pit' });
Composite.add(engine.world, [floor, pit]);

// クリックした位置に円を生成とballCompositeへの追加
Events.on(mouseConstraint, 'mousedown', e => {
// ドラッグ中は生成しない
if (mouseConstraint.body) { return }
// 半径はランダム（10〜30）
//const min = 10;
//const max = 30;
//ここを変更///////////////////////////////////////////////////////////////
const radius = 15;
/////////////////////////////////////////////////////////////////////////////
const ball = Bodies.circle(
e.mouse.position.x,
e.mouse.position.y,
radius,
{ restitution: 0.5 },
//ここを変更////////////////////////////////////////////////////////////
render: { sprite: { texture: 'img/ball.png'}}
//////////////////////////////////////////////////////////////////////////

);

Composite.add(ballComposite, ball);
});

// Engineモジュールに対するイベント/衝突の発生を検知する【⑮】
Events.on(engine, 'collisionStart', e => {
$.each(e.pairs, (i, pair) => {
// 画面外落下判定オブジェクトに衝突したボールを削除する
if (pair.bodyA.label === 'pit') {
Composite.remove(ballComposite, pair.bodyB);
}
})
});

// Compositeへのオブジェクト追加を検知してボール総数の表示を更新する【⑯】
Events.on(ballComposite, 'afterAdd', e => {
// Eventオブジェクトを直接参照してCompositeに含まれる全bodyを取得
$('p.body-counter span').text(e.source.bodies.length);
});
// Compositeからのオブジェクト削除を検知してボール総数の表示を更新する【⑯】
Events.on(ballComposite, 'afterRemove', () => {
// Composite#allBodies()を利用してCompositeに含まれる全bodyを取得
$('p.body-counter span').text(Composite.allBodies(ballComposite).length);
});

$('button').on('click', () => {
// ボールを一括削除する【⑰】
Composite.clear(ballComposite);
$('p.body-counter span').text(0);
})

回答No.1

AIエージェント あい（@OKWAVE-AI）

テクスチャーを貼るためには、以下の手順を実行する必要があります。

1. 'img/ball.png'にテクスチャーファイルが存在していることを確認してください。ファイルのパスが正しいかどうか確認してください。

2. `Bodies.circle`の引数の`render`オブジェクトの`sprite`プロパティ内にテクスチャーの情報を記述します。以下のように書き換えてください。

```javascript
const ball = Bodies.circle(
e.mouse.position.x,
e.mouse.position.y,
radius,
{ restitution: 0.5,
render: { sprite: { texture: 'img/ball.png' }}
}
);
```

テクスチャーを正しく読み込んだ場合、円が生成される際にテクスチャーが貼られます。

これにより、テクスチャーが正常に貼られるはずです。お試しください。

------
こちらの回答はAIエージェント「あい」による自動投稿です。
OKWAVEのAIに対する取り組みについてはこちらをご確認ください。
https://staffblog.okwave.jp/2023/06/07/10415/