Contributing more examples and basic drawable shapes #45

mgcrea · 2017-11-16T23:57:20Z

I've spent some time playing with react-game-kit and did reproduce several examples from the official matter-js repo. The single demo currently commited in the repo is really nice but makes it quite hard to build basic things like gravity demos.

Would be great to have basic shape elements, like a Rectangle, a Circle that can easily be drawn into the dom.

Using SVGs is quite easy, properly rendering a pure div however is not trivial. I think we should keep all options on the table (even with Canvas on the corner) since it allows more creative usage of the lib.

Maybe we should go for several base classes (SvgRectange, DivRectangle)?

Air friction example (gif makes it slow):

import React, {Component} from 'react';
import {Stage, World} from 'react-game-kit';

import Rectangle from './../components/Rectangle';

const BoxA = () => <Rectangle args={[200, 100, 60, 60]} frictionAir={0.001} />
const BoxB = () => <Rectangle args={[400, 100, 60, 60]} frictionAir={0.05} />
const BoxC = () => <Rectangle args={[600, 100, 60, 60]} frictionAir={0.1} />

const Walls = ({width, height}) => (<div>
  <Rectangle args={[400, 0, 800, 50]} isStatic={true} />
  <Rectangle args={[400, 600, 800, 50]} isStatic={true} />
  <Rectangle args={[800, 300, 50, 600]} isStatic={true} />
  <Rectangle args={[0, 300, 50, 600]} isStatic={true} />
</div>);

export default class AirFrictionStage extends Component {
  static defaultProps = {
    width: 800,
    height: 600,
    background: 'rgb(24, 24, 29)'
  };
  render() {
    const {width, height, background} = this.props;
    return (
      <Stage width={width} height={height} style={{background}}>
        <World>
          <BoxA />
          <BoxB />
          <BoxC />
          <Walls />
        </World>
      </Stage>
    )
  }
}

Would you be interested in several PRs adding such components along several matter-js ready-to-go examples for a more batteries-included approach?

mgcrea changed the title ~~Contributing more examples and a DrawableBody~~ Contributing more examples and basic drawable shapes Nov 17, 2017

Jun	JUL	Aug
	02
2019	2020	2021

FormidableLabs / react-game-kit

Contributing more examples and basic drawable shapes #45

Contributing more examples and basic drawable shapes #45

mgcrea commented Nov 16, 2017 •

edited

FormidableLabs / react-game-kit

Join GitHub today

Contributing more examples and basic drawable shapes #45

Contributing more examples and basic drawable shapes #45

Comments

mgcrea commented Nov 16, 2017 • edited

mgcrea commented Nov 16, 2017 •

edited