Matter-js: fromVertices: texture repetition issue

[arindammojumder]

I am facing the texture repetition issue while using fromVertices. Any solution? Check the attached screenshot.

var customTrey = Vertices.fromPath('0 0 0 20 152 20 152 0 150 0 150 18 2 18 2 0 0 0');
 var trey = Bodies.fromVertices(1080, 385, customTrey, getOptions('images/trey.png', true, false), true, 0.01, 30);

function getOptions(sprite = '', static = false, sensor = false) {
    var options = {
        isSensor: sensor,
        isStatic: static,
        density: 0.1,
        frictionAir: 0.001,
        restitution: 0,
        friction: 0,
        // id: 420,
        render: {
            fillStyle: 'none',
            sprite: {
                texture: sprite,
                xScale: 1,
                yScale: 1
            }
        }
    }
    return options;
};

Here is the sprite image:

[croxium]

This is because you have a concave shape from the vertices, and it was decomposed into parts. Check out the source code of Render.bodies method and you'll figure out how to customize your own easily.

The default render doesn't do this the way you expect.

In case you don't want to modify the source code, there's another workaround: render a different shape with your texture, and make constraints on it so it always sticks to the concave shape. Now you can use the concave shape for collision detection and it appears having the texture.

If your concave shape will never rotate, simply make a compoundBody will also do the job. But if it rotates, again don't use the default render

[xiyuan-fengyu]

you can modify the source code of matter.js
old code:

            Render.bodies = function(render, bodies, context) {
                var c = context,
                    engine = render.engine,
                    options = render.options,
                    showInternalEdges = options.showInternalEdges || !options.wireframes,
                    body,
                    part,
                    i,
                    k;

                for (i = 0; i < bodies.length; i++) {
                    body = bodies[i];

                    if (!body.render.visible)
                        continue;

                    // handle compound parts
                    for (k = body.parts.length > 1 ? 1 : body.parts.length; k < parts; k++) {
                        part = body.parts[k];

new code:

            Render.bodies = function(render, bodies, context) {
                var c = context,
                    engine = render.engine,
                    options = render.options,
                    showInternalEdges = options.showInternalEdges || !options.wireframes,
                    body,
                    part,
                    i,
                    k;

                for (i = 0; i < bodies.length; i++) {
                    body = bodies[i];

                    if (!body.render.visible)
                        continue;

                    // handle compound parts
                    const parts = body.render.sprite.single ? 1 : body.parts.length;
                    for (k = !body.render.sprite.single && body.parts.length > 1 ? 1 : 0; k < parts; k++) {
                        part = body.parts[k];

usage:

                    const newBody = Matter.Bodies.fromVertices(100, 100, [...], {
                        friction: 1,
                        render: {
                            sprite: {
                                texture: "image/some.png",
                                single: true,
                                xScale: 0.3,
                                yScale: 0.3
                             }
                        }
                    });
                    Matter.World.add(this.engine.world, newBody);