matter.js renderer for spritejs
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
dist
example
lib
script
src
.babelrc
.eslintignore
.eslintrc.js
.gitignore
README.md
package.json
webpack.config.js

README.md

sprite-extend-matter

This is a spritejs extension based on matter-js.

<script src="https://s5.ssl.qhres.com/!a75e6d57/sprite-extend-matter.js"></script>

Quick Start

<div id="container"></div>
<script src="https://s4.ssl.qhres.com/!ee69cc07/spritejs.min.js"></script>
<script src="https://s5.ssl.qhres.com/!a75e6d57/sprite-extend-matter.js"></script>
<script>
  const Matter = spritejs.Matter;
  const {Scene, Path} = spritejs;

  const scene = new Scene('#container', {resolution: [800, 600]})
  const fglayer = scene.layer('fglayer')

  var Engine = Matter.Engine,
      Render = Matter.Render,
      Runner = Matter.Runner,
      Composites = Matter.Composites,
      Common = Matter.Common,
      MouseConstraint = Matter.MouseConstraint,
      Mouse = Matter.Mouse,
      World = Matter.World,
      Bodies = Matter.Bodies;

  // create engine
  var engine = Engine.create({enableSleeping: true}),
      world = engine.world;

  // create renderer
  var render = Render.create({
      layer: fglayer,
      engine: engine,
      options: {
          showAngleIndicator: true,
          background: '#fff',
          wireframes: false,
          showBroadphase: false,
          showBounds: true,
          showVelocity: true, 
          showSeparations: true,
      }
  });

  Render.run(render);

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

  // add bodies
  var stack = Composites.stack(20, 20, 10, 5, 0, 0, function(x, y) {
      var sides = Math.round(Common.random(1, 8));

      // triangles can be a little unstable, so avoid until fixed
      sides = (sides === 3) ? 4 : sides;

      // round the edges of some bodies
      var chamfer = null;
      if (sides > 2 && Common.random() > 0.7) {
          chamfer = {
              radius: 10
          };
      }
      
      switch (Math.round(Common.random(0, 1))) {
      case 0:
          if (Common.random() < 0.6) {
              return Bodies.rectangle(x, y, Common.random(25, 50), Common.random(25, 50), { chamfer: chamfer });
          } else if(Common.random() < 0.8) {
              return Bodies.rectangle(x, y, Common.random(80, 120), Common.random(25, 30), { chamfer: chamfer });
          } else {
              const width = 64
              return Bodies.rectangle(x, y, width, width, { chamfer: chamfer, 
                  render: {
                      sprite: {
                          // texture: 'https://p5.ssl.qhimg.com/t01bd0523f7bc9241c2.png',
                          attrs: {
                              textures: {
                                  // src: 'http://brm.io/matter-js/demo/img/box.png',
                                  src: 'https://p5.ssl.qhimg.com/t01bd0523f7bc9241c2.png',
                                  srcRect: [32, 32, 64, 64],
                              },
                              size: [width, width],
                          }
                      }
                  } 
              });
          }
      case 1:
          return Bodies.polygon(x, y, sides, Common.random(25, 50), { chamfer: chamfer });
      }
  });

  World.add(world, stack);

  World.add(world, [
      // walls
      Bodies.rectangle(400, 0, 800, 50, { isStatic: true }),
      Bodies.rectangle(400, 600, 800, 50, { isStatic: true }),
      Bodies.rectangle(800, 300, 50, 600, { isStatic: true }),
      Bodies.rectangle(0, 300, 50, 600, { isStatic: true })
  ]);

  // add mouse control
  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, {
  //     min: { x: 0, y: 0 },
  //     max: { x: 800, y: 600 }
  // });
</script>