Repository navigation
Contributing more examples and basic drawable shapes #45
Description
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?
Activity
[-]Contributing more examples and a DrawableBody[/-][+]Contributing more examples and basic drawable shapes[/+]