Matter-js: Add texture to body

[DepickereSven]

I wanted to add a different texture to my recantagle like this:

var block = Bodies.rectangle(npos, ypos, 80, 80, {
                isStatic: true,
                render: {
                    sprite: {
                        texture: 'images/stone.png',
                        xScale: 2,
                        yScale: 2
                    }
                }
            }
        );

But the texture isn't added?

If found this: https://github.com/liabru/matter-js/issues/120
But the link to the docs doesn't work anymore.

[liabru]

Make sure you disable wireframes on the renderer. Also check your console, there might be an error saying the image was not found?

[benjamingwynn]

(disable wireframes with <render>.options.wireframes = false)

[hiteshsahu]

Setting wireframes: false is half the answer, you also need to first load the image before setting it as texture

You must load the Image before setting it as Texture otherwise you will get error

HTMLImageElement is in "broken" state

For me this issue end up printing 900+ error messages which crashed my sandbox.

Solution: I created a simple Image loader:

const loadImage = (url, onSuccess, onError) => {
  const img = new Image();
  img.onload = () => {
    onSuccess(img.src);
  };
  img.onerror = onError();
  img.src = url;
};

And later I used that loader to load the texture. Once texture is loaded you can set it as texture for your Body objects.

 loadImage(
      "./assets/blue.jpg",
      url => {
        console.log("Success");
        World.add(world, [
          Bodies.circle(340, 340, 100, {
            density: 0.0005,
            frictionAir: 0.06,
            restitution: 0.3,
            friction: 0.01,
            render: {
              sprite: {
                texture: url // set texture here
              }
            }
          })
        ]);
      },
      () => {
        console.log("Error  Loading ");
      }
    );

Important: before calling Renderer.run() you must disable wireframes

// create renderer
var render = Render.create({
  element: document.body,
  engine: engine,
  options: {
    width: 800,
    height: 600,
    wireframes: false, // disable Wireframe
  }
});

Render.run(render);

[liabru]

@hiteshsahu that's odd, as the debug renderer should be able to load the images for you. I took a look at the sprites example and it still works for me in Chrome at least, can you try it?

I have seen this error before though in other projects, might it be on a slow network?

[catonmat]

I'm having trouble loading a sprite into a Matter JS enabled component inside of React within a Gatsby project.

The component loads fine when I set options: { wireframes: true }. Otherwise it just freezes.

The path to the PNG is working too.

The example code below is a hybrid taken from the Avalanche and Sprites example projects on the Matter.js demo set.

import React, { Component } from 'react';
import Matter from 'matter-js';

class Avalanche extends Component {
    constructor(props) {
        super(props);
        this.state = {};
    }

    componentDidMount() {
        // module aliases
        var Engine = Matter.Engine,
            Render = Matter.Render,
            Runner = Matter.Runner,
            Composite = Matter.Composite,
            Composites = Matter.Composites,
            Common = Matter.Common,
            MouseConstraint = Matter.MouseConstraint,
            Mouse = Matter.Mouse,
            World = Matter.World,
            Bodies = Matter.Bodies;

        // create an engine
        var engine = Engine.create(),
            world = engine.world;

        // create a renderer
        var render = Render.create({
            element: this.refs.avalanche,
            engine: engine,
            options: {
                width: 600,
                height: 600,
                showAngleIndicator: true,
                wireframes: false
            }
        });

        // run the renderer
        Render.run(render);

         // create runner
        var runner = Runner.create();
        Runner.run(runner, engine);

         // add bodies
         var stack = Composites.stack(20, 20, 20, 5, 0, 0, function(x, y) {
            return Bodies.circle(x, y, Common.random(10, 20), { 
                friction: 0.00001, 
                restitution: 0.5, 
                density: 0.001, 
                render: {
                    sprite: {  
                        texture: './btc-icon.png'
                    }
                }
            });
        });

        World.add(world, stack);

        World.add(world, [
            Bodies.rectangle(200, 150, 700, 20, { isStatic: true, angle: Math.PI * 0.06 }),
            Bodies.rectangle(500, 350, 700, 20, { isStatic: true, angle: -Math.PI * 0.06 }),
            Bodies.rectangle(340, 580, 700, 20, { isStatic: true, angle: Math.PI * 0.04 })
        ]);

        var mouse = Mouse.create(render.canvas),
            mouseConstraint = MouseConstraint.create(engine, {
            mouse: mouse,
            constraint: {
                stiffness: 0.2,
                render: {
                    visible: false
                }
            }
        });

        World.add(world, mouseConstraint);

        // keep the mouse in sync with rendering
        render.mouse = mouse;

        // fit the render viewport to the scene
        Render.lookAt(render, Composite.allBodies(world));

        // wrapping using matter-wrap plugin
        for (var i = 0; i < stack.bodies.length; i += 1) {
            stack.bodies[i].plugin.wrap = {
                min: { x: render.bounds.min.x, y: render.bounds.min.y },
                max: { x: render.bounds.max.x, y: render.bounds.max.y }
            };
        }

    }

    render() {
        return <div ref="avalanche" />;
    }
};

export default Avalanche;