Điểm qua FormidableLabs/react-game-kit: 4.6k sao trên GitHub, viết chủ yếu bằng JavaScript, thuộc nhóm Frontend. Component library for making games with React & React Native
Tóm tắt dựng từ metadata GitHub của chính dự án — chưa có bài review TopGit. Trang sẽ tự động cập nhật khi bài review đầy đủ được xuất bản.
VÌ SAO CHƯA CÓ REVIEW
TopGit viết bài đầy đủ cho repo có nhiều sao nhất và được yêu cầu nhiều nhất. Trang này là snapshot trong thời gian chờ — xem README gốc ở tab READ ME.
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:
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:
render() {
return (
<Loop>
<Stage>
// Game specific components go here
</Stage>
</Loop>
);
}
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:
render() {
return (
<Loop>
<Stage>
<World>
// Game specific components go here
</World>
</Stage>
</Loop>
);
}
Physics Bodies
Once you have a physics engine/world established, you can use the Body component to define physics bodies inline:
Using a ref you can obtain a reference to the physics body and modify its properties via the Matter-js API.
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:
import { Loop, Stage, ...etc } from 'react-game-kit/native';
Note: AudioPlayer and KeyListener are not implemented on the React Native version.
API
<Loop />
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:
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.
--
<World />
gravity (object) : World gravity object.
Defaults:
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.
--
<Body />
args (array) : Initial body creation arguments. Depends on the shape prop, which maps to Matter.Bodies body creation methods detailed here: Matter.Bodies Documentation
All other props on the body component map directly to Matter-js Body properties.
The Body component is used to define physics bodies. You will generally want to use ref to obtain a reference to the body, at which point you can call Matter-js methods on it, as well as listen to and react to its physic properties in the world update callback.
--
<Sprite />
offset (array) : Sprite sheet x,y offset.
onPlayStateChanged (func) : Sprite play state changed callback.
repeat (bool) : Determines whether sprite animation should loop.
scale (number) : Scale value for sprite image.
src (string) : src path for sprite sheet.
state (number) : Vertical position in sprite sheet.
steps (array) : Number of animation steps for current row (state).
ticksPerFrame (number) : Number of loop ticks per animation frame.
tileHeight (number) : Height of spritesheet tile.
tileWidth (number) : Width of spritesheet tile.
The Sprite component lets you define sprite animations using sprite sheets. When creating a sprite sheet, define sprite tile dimensions that will be provided via the tileHeight & tileWidth props. Next, each animation state is represented by a row, with steps of the animation represented as columns.
--
<TileMap />
columns (number) : number of columns in tile map.
layers (array) : Array of arrays that contain tile indexes.
The TileMap component lets you define tile maps from a tile atlas. Your tilemap is made of up rows and columns. Each layer is then drawn using those numbers as reference. So for example, if you had 4 rows and 4 columns, with 1 layer, your layers prop would look like:
Archived: This project is no longer maintained by Formidable. We are no longer responding to issues or pull requests unless they relate to security concerns. We encourage interested developers to fork this project and make it their own!
Trang TopGit này là một snapshot — tab "Readme" hiển thị nguyên văn README của repo (đã bỏ link, giữ ảnh). Repo GitHub ở github.com/FormidableLabs/react-game-kit là nguồn chính thức.
FormidableLabs/react-game-kit có bao nhiêu sao?
FormidableLabs/react-game-kit có 4.6k sao GitHub — tải lại trang để xem số mới nhất, hoặc xem trực tiếp github.com/FormidableLabs/react-game-kit. TopGit phản chiếu số sao của GitHub nhưng không cam kết đến từng phút.
FormidableLabs/react-game-kit có những chủ đề gì?
GitHub topics của FormidableLabs/react-game-kit: "component-tree", "game", "matter", "physics-bodies", "physics-engine", "react", "reactjs", "sprite-animation", "spritesheet", "tilemap". TopGit xếp repo vào nhóm Frontend.
FormidableLabs/react-game-kit có trang demo không?
Dự án có trang chủ ở http://reactnext.surge.sh. Tab "Readme" ở trang này thường có ảnh chụp và hướng dẫn bắt đầu nhanh.
FormidableLabs/react-game-kit còn đang phát triển không?
Commit gần nhất trên FormidableLabs/react-game-kit là 3.7 năm trước (theo timestamp GitHub). Repo có 311 fork — một chỉ báo về mức độ quan tâm của cộng đồng.
FormidableLabs/react-game-kit dùng license gì?
FormidableLabs/react-game-kit phát hành theo license MIT. Nên mở file LICENSE trên GitHub để xác nhận — license metadata đôi khi lệch với thực tế dự án.
FormidableLabs/react-game-kit viết bằng ngôn ngữ gì?
FormidableLabs/react-game-kit chủ yếu viết bằng JavaScript. Trường "language" của GitHub dựa trên phần lớn byte ở nhánh mặc định.
Đọc đầy đủ README ở tab phía trên.
Vẫn đang phân vân về react-game-kit?
Một cú bấm sẽ gửi câu hỏi kèm trang này cho AI — xem AI nói gì về react-game-kit.
/react-game-kit
