Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/FormidableLabs/react-game-kit
Component library for making games with React & React Native
https://github.com/FormidableLabs/react-game-kit
component-tree game matter physics-bodies physics-engine react reactjs sprite-animation spritesheet tilemap
Last synced: about 2 months ago
JSON representation
Component library for making games with React & React Native
- Host: GitHub
- URL: https://github.com/FormidableLabs/react-game-kit
- Owner: FormidableLabs
- License: mit
- Archived: true
- Created: 2016-09-15T07:46:01.000Z (about 8 years ago)
- Default Branch: main
- Last Pushed: 2023-01-04T16:18:43.000Z (almost 2 years ago)
- Last Synced: 2024-09-28T14:42:47.881Z (3 months ago)
- Topics: component-tree, game, matter, physics-bodies, physics-engine, react, reactjs, sprite-animation, spritesheet, tilemap
- Language: JavaScript
- Homepage: http://reactnext.surge.sh
- Size: 1.99 MB
- Stars: 4,617
- Watchers: 146
- Forks: 307
- Open Issues: 29
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE.md
Awesome Lists containing this project
- awesome-list - react-game-kit
README
Make games with React & React Native!
***
[![Maintenance Status][maintenance-image]](#maintenance-status)
## Install
`npm install react-game-kit --save`
## Get Started
`react-game-kit` provides a set of helper components to make it easier to create games with React and React Native.
You'll want to begin by importing the components you need:
```js
import { Loop, Stage } from 'react-game-kit';
```
### Loop & Stage
Next, in your render method of your top level component, you'll want to put the `Loop` component at the top level, optionally followed by the `Stage` component:
```js
render() {
return (
// Game specific components go here
);
}
```
The `Loop` component uses `context` to pass a subscribable game tick down your component tree. The `Stage` component does the same with game scale.
### World
If you intend on using physics in your game, a good next component would be the `World` component, which creates and provides a physics engine & world:
```js
render() {
return (
// Game specific components go here
);
}
```
### Physics Bodies
Once you have a physics engine/world established, you can use the `Body` component to define physics bodies inline:
```js
render() {
return (
this.body = b.body }>
// Sprites go here
);
}
```
Using a ref you can obtain a reference to the physics body and modify its properties via the [Matter-js API](https://github.com/liabru/matter-js).
### Next Steps
Once this general structure is established, what follows usually depends on what kind of game you intend to make. Check out the API documentation below for further clarity regarding use of these components.
## React Native
Using this library with React Native is a simple as importing from the native directory:
```js
import { Loop, Stage, ...etc } from 'react-game-kit/native';
```
> Note: AudioPlayer and KeyListener are not implemented on the React Native version.
## API
#### \
The `Loop` component acts much like a Redux provider, in that it passes a GameLoop instance down the component tree via `this.context.loop`.
This allows you to subscribe and unsubscribe to the main game loop anywhere in your component tree. Here is an example of how this would generally look:
```js
class ChildComponent extends React.Component {
static contextTypes = {
loop: PropTypes.object,
};
componentDidMount() {
this.context.loop.subscribe(this.update);
}
componentWillUnmount() {
this.context.loop.unsubscribe(this.update);
}
update() {
// tick logic
};
}
```
--
#### \
**height** (_number_) : Base game height. Defaults to `576`.
**width** (_number_) : Base game width. Defaults to `1024`.
The `Stage` component also leverages `context` much like `Loop`, except it passes game scale as `this.context.scale`. You can use this value to appropriately scale positioning and dimension values within your game. Again, you would have to specify `scale: PropTypes.number` in your component's `contextTypes` to receive this value.
--
#### \
**gravity** (_object_) : World gravity object.
Defaults:
```js
gravity={{
x: 0,
y: 1,
scale: 0.001,
}}
```
**onCollision** (_func_) : World collision callback.
**onInit** (_func_) : World init callback.
**onUpdate** (_func_) : World update callback.
The `World` component is used as the first step in setting up game physics. It passes a `matter-js` Engine instance down via context as `this.context.engine`. Generally speaking, when getting or settings physics properties you'll want to do this after the physics world is updated in the main tick cycle. You can hook into this using the `onUpdate` prop, or in child components use `Matter.Events.on(this.context.engine, 'afterUpdate', this.update);` to subscribe to the engine updates.
The `onInit` callback is a great place to do your initial world setup, things like creating static bodies for walls and the floor.
--
#### \