Skip to content

Latest commit

 

History

History
105 lines (83 loc) · 2.51 KB

02-draw-the-falling-box.md

File metadata and controls

105 lines (83 loc) · 2.51 KB
Raw

Draw the falling box

Please ensure you have completed the previous step, Make a falling box.

Add a canvas to your index.html:

- <body></body>
+ <body>
+   <canvas id="demo-canvas" width="800" height="700"></canvas>
+ </body>

Copy the file debugDraw.js into your project, alongside demo.js.

demo.js needs to import debugDraw.js:

+ import { makeDebugDraw } from './debugDraw.js';
  import Box2DFactory from './Box2D.js';

demo.js needs to locate the canvas that we added to index.html, and pass it to debugDraw:

/** @type {HTMLCanvasElement} */
const canvas = document.getElementById("demo-canvas");
const ctx = canvas.getContext('2d');

const pixelsPerMeter = 32;
const cameraOffsetMetres = {
  x: 0,
  y: 0
};

const debugDraw = makeDebugDraw(ctx, pixelsPerMeter, box2D);
world.SetDebugDraw(debugDraw);

Delete whereIsOurSquare():

- /**
- * Prints out the vertical position of our falling square
- * (this is easier than writing a full renderer)
- */
- const whereIsOurSquare = () => {
-   {
-     const {x, y} = body.GetLinearVelocity();
-     console.log("Square's velocity is:", x, y);
-   }
-   {
-     const {x, y} = body.GetPosition();
-     console.log("Square's position is:", x, y);
-   }
- };
  
  /** @type {number} you can use this handle to cancel the callback via cancelAnimationFrame */
  let handle;
  (function loop(prevMs) {
    const nowMs = window.performance.now();
    handle = requestAnimationFrame(loop.bind(null, nowMs));
    const deltaMs = nowMs-prevMs;
    step(deltaMs);
-   whereIsOurSquare();
  }(window.performance.now()));

Declare a new function, drawCanvas():

const drawCanvas = () => {
  ctx.fillStyle = 'rgb(0,0,0)';
  ctx.fillRect(0, 0, canvas.width, canvas.height);

  ctx.save();
  ctx.scale(pixelsPerMeter, pixelsPerMeter);
  const { x, y } = cameraOffsetMetres;
  ctx.translate(x, y);
  ctx.lineWidth /= pixelsPerMeter;
  
  ctx.fillStyle = 'rgb(255,255,0)';
  world.DebugDraw();

  ctx.restore();
};

Modify our game loop such that it invokes drawCanvas():

  /** @type {number} you can use this handle to cancel the callback via cancelAnimationFrame */
  let handle;
  (function loop(prevMs) {
    const nowMs = window.performance.now();
    handle = requestAnimationFrame(loop.bind(null, nowMs));
    const deltaMs = nowMs-prevMs;
    step(deltaMs);
-   whereIsOurSquare();
+   drawCanvas();
  }(window.performance.now()));

You should see a falling box now.