# formidablelabs/react-game-kit

**Attribution required: if you use, quote, or summarise this content, you must credit and link back to [awesome-repositories.com](https://awesome-repositories.com/repository/formidablelabs-react-game-kit).**

4,605 stars · 312 forks · JavaScript · MIT · archived

## Links

- GitHub: https://github.com/FormidableLabs/react-game-kit
- Homepage: http://reactnext.surge.sh
- awesome-repositories: https://awesome-repositories.com/repository/formidablelabs-react-game-kit.md

## Topics

`component-tree` `game` `matter` `physics-bodies` `physics-engine` `react` `reactjs` `sprite-animation` `spritesheet` `tilemap`

## Description

This is a game engine library for building interactive games using React and React Native components. It provides a centralized game loop and state management system to coordinate logic and updates on every game tick.

The framework includes a coordinate system for cross-platform scaling that distributes factors across a component tree to maintain consistent positioning across different screen sizes. It also features a sprite animation system for rendering sequential frames from sprite sheets and a tile map renderer that constructs multi-layered terrain using a tile atlas and grid-based indexes.

The library further integrates physics engine capabilities to manage gravity, collision detection, and the simulation of physical bodies within the game world.

## Tags

### Game Development

- [React Native Game Frameworks](https://awesome-repositories.com/f/game-development/react-native-game-frameworks.md) — Implements a declarative component hierarchy for game elements using the React Native framework.
- [2D Physics Simulations](https://awesome-repositories.com/f/game-development/2d-physics-simulations.md) — Adds gravity, collision detection, and physical body simulations to a React-based game world.
- [Game Loops](https://awesome-repositories.com/f/game-development/engine-architecture/game-loops.md) — Synchronizes a central timing mechanism that notifies subscribed components to execute logic on every game tick.
- [Game Loop Managers](https://awesome-repositories.com/f/game-development/game-loop-managers.md) — Coordinates a central timing mechanism for executing logic on every single game tick. ([source](https://cdn.jsdelivr.net/gh/formidablelabs/react-game-kit@main/README.md))
- [Physics Simulation Engines](https://awesome-repositories.com/f/game-development/physics-simulation-engines.md) — Integrates a dedicated physics simulator to manage gravity and collision detection for objects within the game world.
- [Physics Simulations](https://awesome-repositories.com/f/game-development/physics-simulations.md) — Integrates a physics engine to manage gravity, collisions, and the creation of physical bodies within the game world. ([source](https://cdn.jsdelivr.net/gh/formidablelabs/react-game-kit@main/README.md))
- [Adaptive Resolution Scaling](https://awesome-repositories.com/f/game-development/adaptive-resolution-scaling.md) — Calculates and distributes a scaling factor across a component tree to maintain consistent positioning across different screen sizes. ([source](https://cdn.jsdelivr.net/gh/formidablelabs/react-game-kit@main/README.md))
- [Cross-Platform Layout Scaling](https://awesome-repositories.com/f/game-development/cross-platform-layout-scaling.md) — Ensures game elements and layouts maintain correct proportions and positions across different screen sizes and devices.

### Part of an Awesome List

- [Game Physics Integration](https://awesome-repositories.com/f/awesome-lists/ai/physics-simulation/game-physics-integration.md) — Provides a bridge for managing gravity, collisions, and physical bodies within a React component tree.
- [Tile-Based Level Mapping](https://awesome-repositories.com/f/awesome-lists/devtools/level-and-tile-editors/tile-based-level-mapping.md) — Constructs game environments by mapping numeric indexes to specific tiles from a predefined atlas.

### Graphics & Multimedia

- [2D Sprite Animations](https://awesome-repositories.com/f/graphics-multimedia/2d-sprite-animations.md) — Provides a system for rendering sequential frames from sprite sheets to create real-time 2D animations.
- [Tile Map Renderers](https://awesome-repositories.com/f/graphics-multimedia/graphics-engines-rendering/tile-map-renderers.md) — Implements a renderer that constructs multi-layered game terrain using a tile atlas and grid-based indexing. ([source](https://cdn.jsdelivr.net/gh/formidablelabs/react-game-kit@main/README.md))
- [Sprite Animations from Texture Atlases](https://awesome-repositories.com/f/graphics-multimedia/2d-sprite-animations/sprite-animations-from-texture-atlases.md) — Renders sequential image crops from a single atlas based on state-driven timing to create animations.
- [Sprite Sheet Animation Playback](https://awesome-repositories.com/f/graphics-multimedia/character-animation-authoring/sprite-sheet-mapping/sprite-sheet-animation-playback.md) — Renders sequential frames from a sprite sheet image to create animations based on defined states and frame rates. ([source](https://cdn.jsdelivr.net/gh/formidablelabs/react-game-kit@main/README.md))
- [Resolution Scaling](https://awesome-repositories.com/f/graphics-multimedia/resolution-scaling.md) — Provides a coordinate system that distributes scaling factors to maintain consistent positioning across different screen sizes.

### User Interface & Experience

- [Coordinate System Scaling](https://awesome-repositories.com/f/user-interface-experience/data-display-components/content-cards/image-resizing/client-side/viewport-scaling/coordinate-system-scaling.md) — Provides a coordinate system that distributes scaling factors to maintain consistent game element positioning.