Skip to main content

pixi.js + matter.js

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <script src="https://cdn.jsdelivr.net/npm/matter-js@0.20.0"></script>
  <script type="importmap">
    {
      "imports": {
        "@mulsense/xnew": "https://unpkg.com/@mulsense/xnew@2.5.x/dist/xnew.module.js",
        "@mulsense/xnew/addons/xpixi": "https://unpkg.com/@mulsense/xnew@2.5.x/dist/addons/xpixi.module.js",
        "@mulsense/xnew/addons/xmatter": "https://unpkg.com/@mulsense/xnew@2.5.x/dist/addons/xmatter.module.js",
        "pixi.js": "https://cdnjs.cloudflare.com/ajax/libs/pixi.js/8.6.6/pixi.min.mjs",
        "matter-js": "https://cdn.jsdelivr.net/npm/matter-js@0.20.0/+esm"
      }
    }
  </script>
  <script type="module" src="./script.js"></script>
</head>

<body style="margin: 0; height: 100vh;">
  <div id="main" style="width: 100%; height: 100%;"></div>
</body>

</html>
script.js
import xnew from '@mulsense/xnew';
import xpixi from '@mulsense/xnew/addons/xpixi';
import xmatter from '@mulsense/xnew/addons/xmatter';
import * as PIXI from 'pixi.js';
import Matter from 'matter-js';

const width = 800, height = 400;
xnew('#main', Main);

function Main(self) {
  xnew(xnew.Screen, { width, height });
  xpixi.initialize();

  xnew(Contents);

  const button = xnew({ tagName: 'button', style: 'position: absolute; top: 0;' }, 'reset');
  button.on('click', () => xnew.emit('+reset'));
}

function Contents(self) {
  self.on('+reset', () => self.reboot());
  xmatter.initialize();

  xnew(Circle, { x: 350, y: 50, r: 40, color: 0xFF0000 });
  xnew(Rectangle, { x: 400, y: 200, w: 80, h: 80, color: 0x00FF00 });
  xnew(Polygon, { x: 450, y: 50, s: 6, r: 40, color: 0x0000FF });
  xnew(Rectangle, { x: 400, y: 400, w: 800, h: 20, color: 0x888888 }, { isStatic: true });
}

function Circle(self, { x, y, r, color = 0xFFFFFF }, options = {}) {
  const object = xpixi.nest(new PIXI.Container());
  const pyshics = xmatter.nest(Matter.Bodies.circle(x, y, r, options));
  object.position.set(x, y);
  object.addChild(new PIXI.Graphics().circle(0, 0, r).fill(color));
  return {
    object,
    update() {
      object.rotation = pyshics.angle;
      object.position.set(pyshics.position.x, pyshics.position.y);
    },
  };
}

function Rectangle(self, { x, y, w, h, color = 0xFFFFFF }, options = {}) {
  const object = xpixi.nest(new PIXI.Container());
  const pyshics = xmatter.nest(Matter.Bodies.rectangle(x, y, w, h, options));
  object.position.set(x, y);
  object.addChild(new PIXI.Graphics().rect(-w / 2, -h / 2, w, h).fill(color));
  return {
    object,
    update() {
      object.rotation = pyshics.angle;
      object.position.set(pyshics.position.x, pyshics.position.y);
    },
  };
}

function Polygon(self, { x, y, s, r, color = 0xFFFFFF }, options = {}) {
  const object = xpixi.nest(new PIXI.Container());
  const pyshics = xmatter.nest(Matter.Bodies.polygon(x, y, s, r, options));
  object.position.set(x, y);
  const points = [];
  for (let i = 0; i < 360; i += 60) {
    points.push(Math.cos(i * Math.PI / 180) * r, Math.sin(i * Math.PI / 180) * r);
  }
  object.addChild(new PIXI.Graphics().regularPoly(0, 0, r, s).fill(color));
  return {
    update() {
      object.rotation = pyshics.angle;
      object.position.set(pyshics.position.x, pyshics.position.y);
    },
  };
}