Merge pull request #40 from FormidableLabs/revert-23-debug-render

Revert "Debug render"

Author: kenwheeler

demo/game/index.js

@@ -15,9 +15,6 @@ 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 = {
@@ -52,12 +49,6 @@ 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) => {
@@ -69,27 +60,12 @@ 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();
@@ -104,25 +80,18 @@ 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,
-      KEY_A,
-      KEY_D,
+      65,
     ]);
   }
 
   componentWillUnmount() {
     this.stopMusic();
-    this.unsubscribeFromUpdate();
     this.keyListener.unsubscribe();
-    this.stageXUIUnsubscribe();
   }
 
   render() {
@@ -131,13 +100,6 @@ 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, autorun } from 'mobx';
+import { observable } from 'mobx';
 
 class GameStore {
   @observable characterPosition = { x: 0, y: 0 };
@@ -9,10 +9,6 @@ class GameStore {
     this.characterPosition = position;
   }
 
-  onStageXChange(callback) {
-    autorun(() => callback(this.stageX));
-  }
-
   setStageX(x) {
     if (x > 0) {
       this.stageX = 0;

src/components/stage.js

@@ -22,8 +22,6 @@ export default class Stage extends Component {
   static childContextTypes = {
     loop: PropTypes.object,
     scale: PropTypes.number,
-    renderWidth: PropTypes.number,
-    renderHeight: PropTypes.number,
   };
 
   setDimensions = () => {
@@ -55,11 +53,8 @@ export default class Stage extends Component {
   }
 
   getChildContext() {
-    const { scale, width, height } = this.getScale();
     return {
-      scale: scale,
-      renderWidth: width,
-      renderHeight: height,
+      scale: this.getScale().scale,
       loop: this.context.loop,
     };
   }

src/components/world.js

@@ -1,7 +1,7 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 
-import Matter, { Render, Engine, Events } from 'matter-js';
+import Matter, {Engine, Events} from 'matter-js';
 
 export default class World extends Component {
   static propTypes = {
@@ -11,13 +11,6 @@ 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,
@@ -36,8 +29,6 @@ export default class World extends Component {
 
   static contextTypes = {
     scale: PropTypes.number,
-    renderWidth: PropTypes.number,
-    renderHeight: PropTypes.number,
     loop: PropTypes.object,
   };
 
@@ -55,94 +46,6 @@ 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);
 
@@ -162,42 +65,11 @@ 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.onInit(this.engine);
+    this.props.onInit(this.engine);
     Events.on(this.engine, 'afterUpdate', this.props.onUpdate);
     Events.on(this.engine, 'collisionStart', this.props.onCollision);
   }
@@ -206,7 +78,6 @@ 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() {
@@ -224,26 +95,9 @@ 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>
     );
   }