Debug renderer for World component

Author: jesstelford

demo/game/index.js

@@ -15,6 +15,9 @@ import Fade from './fade';
 
 import GameStore from './stores/game-store';
 
+const KEY_D = 68;
+const KEY_A = 65;
+
 export default class Game extends Component {
 
   static propTypes = {
@@ -49,6 +52,12 @@ export default class Game extends Component {
     Matter.World.addBody(engine.world, ground);
     Matter.World.addBody(engine.world, leftWall);
     Matter.World.addBody(engine.world, rightWall);
+
+    Matter.Events.on(engine, 'afterUpdate', this.update);
+
+    const unsubscribeFromUpdate = () => {
+      Matter.Events.off(engine, 'afterUpdate', this.update);
+    }
   }
 
   handleEnterBuilding = (index) => {
@@ -60,12 +69,27 @@ export default class Game extends Component {
     }, 500);
   }
 
+  update = () => {
+
+    // On first press of "d", enable debug mode
+    if (this.keyListener.isDown(KEY_D)) {
+      if (!this.previousDown) {
+        this.previousDown = true;
+        this.setState({debug: !this.state.debug});
+      }
+    } else {
+      this.previousDown = false;
+    }
+  }
+
   constructor(props) {
     super(props);
 
     this.state = {
       fade: true,
+      debug: false,
     };
+
     this.keyListener = new KeyListener();
     window.AudioContext = window.AudioContext || window.webkitAudioContext;
     window.context = window.context || new AudioContext();
@@ -80,18 +104,25 @@ export default class Game extends Component {
       fade: false,
     });
 
+    this.stageXUIUnsubscribe = GameStore.onStageXChange((stageX) => {
+      this.forceUpdate();
+    });
+
     this.keyListener.subscribe([
       this.keyListener.LEFT,
       this.keyListener.RIGHT,
       this.keyListener.UP,
       this.keyListener.SPACE,
-      65,
+      KEY_A,
+      KEY_D,
     ]);
   }
 
   componentWillUnmount() {
     this.stopMusic();
+    this.unsubscribeFromUpdate();
     this.keyListener.unsubscribe();
+    this.stageXUIUnsubscribe();
   }
 
   render() {
@@ -100,6 +131,13 @@ export default class Game extends Component {
         <Stage style={{ background: '#3a9bdc' }}>
           <World
             onInit={this.physicsInit}
+            debug={this.state.debug && {
+              offset: {
+                x: -GameStore.stageX,
+                y: 0,
+              },
+              background: 'rgba(0, 0, 0, 0.5)',
+            }}
           >
             <Level
               store={GameStore}

demo/game/stores/game-store.js

@@ -1,4 +1,4 @@
-import { observable } from 'mobx';
+import { observable, autorun } from 'mobx';
 
 class GameStore {
   @observable characterPosition = { x: 0, y: 0 };
@@ -9,6 +9,10 @@ class GameStore {
     this.characterPosition = position;
   }
 
+  onStageXChange(callback) {
+    autorun(() => callback(this.stageX));
+  }
+
   setStageX(x) {
     if (x > 0) {
       this.stageX = 0;

src/components/world.js

@@ -1,6 +1,6 @@
 import React, { Component, PropTypes } from 'react';
 
-import Matter, { Engine, Events } from 'matter-js';
+import Matter, { Render, Engine, Events } from 'matter-js';
 
 export default class World extends Component {
 
@@ -11,6 +11,13 @@ export default class World extends Component {
       y: PropTypes.number,
       scale: PropTypes.number,
     }),
+    debug: PropTypes.shape({
+      offset: PropTypes.shape({
+        x: PropTypes.number,
+        y: PropTypes.number,
+      }),
+      background: PropTypes.string,
+    }),
     onCollision: PropTypes.func,
     onInit: PropTypes.func,
     onUpdate: PropTypes.func,
@@ -29,6 +36,8 @@ export default class World extends Component {
 
   static contextTypes = {
     scale: PropTypes.number,
+    renderWidth: PropTypes.number,
+    renderHeight: PropTypes.number,
     loop: PropTypes.object,
   };
 
@@ -42,6 +51,94 @@ export default class World extends Component {
     this.lastTime = currTime;
   };
 
+  onInit = (...args) => {
+    if (this.props.debug) {
+      this.setupDebugRenderer();
+    }
+
+    this.props.onInit(...args);
+  };
+
+  stopDebugRendering = () => {
+    if (this._render) {
+      Render.stop(this._render);
+      delete this._render;
+    }
+  };
+
+  getDebugProps = () => {
+    const debugProps = Object.assign(
+      {
+        offset: {},
+        // transparent background to see sprites, etc, in the world
+        background: 'rgba(0, 0, 0, 0)',
+      },
+      this.props.debug || {}
+    );
+
+    debugProps.offset = Object.assign(
+      {
+        x: 0,
+        y: 0,
+      },
+      debugProps.offset
+    );
+
+    return debugProps;
+  };
+
+  setupDebugRenderer = () => {
+
+    if (!this._debugRenderElement) {
+      return;
+    }
+
+    const { renderWidth, renderHeight, scale } = this.context;
+    const { offset, background } = this.getDebugProps();
+
+    const width = renderWidth / scale;
+    const height = renderHeight / scale;
+
+    this._render = Render.create({
+      canvas: this._debugRenderElement,
+      // Auto-zoom the canvas to the correct game area
+      bounds: {
+        min: {
+          x: offset.x,
+          y: offset.y,
+        },
+        max: {
+          x: offset.x + width,
+          y: offset.y + height,
+        },
+      },
+      options: {
+        wireframeBackground: background,
+        width: renderWidth,
+        height: renderHeight,
+      },
+    });
+
+    // Setting this as part of `.create` crashes Chrome during a deep clone. :/
+    // My guess: a circular reference
+    this._render.engine = this.engine;
+
+    Render.run(this._render);
+  };
+
+  getCanvasRef = (element) => {
+
+    this._debugRenderElement = element;
+
+    if (element) {
+      if (!this._render) {
+        this.setupDebugRenderer();
+      }
+    } else {
+      this.stopDebugRendering();
+    }
+  };
+
   constructor(props) {
     super(props);
 
@@ -61,11 +158,42 @@ export default class World extends Component {
     if (gravity !== this.props.gravity) {
       this.engine.world.gravity = gravity;
     }
+
+    if (!nextProps.debug) {
+      this.stopDebugRendering();
+    }
+  }
+
+  componentDidUpdate() {
+    if (this.props.debug && this._render) {
+
+      const { renderWidth, renderHeight, scale } = this.context;
+
+      const { offset } = this.getDebugProps();
+
+      // When context changes (eg; `scale` due to a window resize),
+      // re-calculate the world stage
+      this._render.options.width = renderWidth;
+      this._render.options.height = renderHeight;
+
+      this._render.bounds = {
+        min: {
+          x: offset.x,
+          y: offset.y,
+        },
+        max: {
+          x: offset.x + (renderWidth / scale),
+          y: offset.y + (renderHeight / scale),
+        },
+      };
+
+      Render.world(this._render);
+    }
   }
 
   componentDidMount() {
     this.loopID = this.context.loop.subscribe(this.loop);
-    this.props.onInit(this.engine);
+    this.onInit(this.engine);
     Events.on(this.engine, 'afterUpdate', this.props.onUpdate);
     Events.on(this.engine, 'collisionStart', this.props.onCollision);
   }
@@ -74,6 +202,7 @@ export default class World extends Component {
     this.context.loop.unsubscribe(this.loopID);
     Events.off(this.engine, 'afterUpdate', this.props.onUpdate);
     Events.off(this.engine, 'collisionStart', this.props.onCollision);
+    this.stopDebugRendering();
   }
 
   getChildContext() {
@@ -91,9 +220,26 @@ export default class World extends Component {
       width: '100%',
     };
 
+    const { renderWidth, renderHeight, scale } = this.context;
+
+    let debugRenderTarget = false;
+
+    if (this.props.debug) {
+      debugRenderTarget = (
+        <canvas
+          key="debug-render-target"
+          style={{position: 'relative'}}
+          width={renderWidth}
+          height={renderHeight}
+          ref={this.getCanvasRef}
+        />
+      );
+    }
+
     return (
       <div style={defaultStyles}>
         {this.props.children}
+        {debugRenderTarget}
       </div>
     );
   }