9 ms·

React Game Kit

124 points by clessg 10y ago

CoryG89 10y ago
Anyone know if there is a live demo anywhere already? I guess I'll have to clone/host it myself?
- thekenwheeler 10y ago
  http://reactnext.surge.sh http://reactnext.surge.sh
  - SomeCallMeTim 10y ago
    Does anything happen other than a black screen when you walk into a building? I get some music if I wait long enough, but otherwise nothing.
    - prophesi 10y ago
      I had a black screen when I first walked into a building. After refreshing, they all started working after I entered the Physics building. They just show a slideshow, then send you back out into the street.
  - SamBam 10y ago
    Is that playable on mobile? I don't seem to be able to "Press Start."
    - cormacrelf 10y ago
      It's waiting for space or enter to be onkeydown-ed.
andreasklinger 10y ago
This is mind-twisting in it's own way. The core idea of react is (simplified) that "time is eliminated"* as mental concept to keep track of. So in a way this is game programming without the concept of time. ( * Essentially you focus on state and could thus create/display any component in any state )
- SomeCallMeTim 10y ago
  > So in a way this is game programming without the concept of time. A. You can't have a real time game without the concept of time. If you're making a turn based game, time is ignored equally in a traditional game engine. B. Most game engines that have a built-in physics engine abstract away time to the exact same degree that React Game Kit does. Everything is about responding to collision events, applying forces, spawning animations, etc.
  - andreasklinger 10y ago
    I am not saying it's not possible. I meant it's interesting to think about it as concept.
    - SomeCallMeTim 10y ago
      OK, but my point is that it's also a concept in most game engines.
adriancooney 10y ago
I've often thought React would be perfect for creating games with. Even attempted my own framework similar to this using the canvas but it fell down when it came to rendering. I felt like React really didn't suit the update/render loop approach. It doesn't seem to talk about it on the project page so I wonder how this works. Using the DOM?
- talldan 10y ago
  I had a quick look into the code base, and it is indeed targeting the DOM, rather than canvas or webgl. It has a sprite component which is just an absolutely position img element wrapped in a div.
bcherny 10y ago
React is the really the ideal rendering engine (though much less optimized than something like Unity). An immediate mode API abstracting over a retained mode renderer lets you think about a program as a state machine, while not sacrificing performance. It's also a powerful metaphor for charting - https://github.com/recharts/recharts https://github.com/recharts/recharts.
- deleted 10y ago
  [deleted]
- seanwilson 10y ago
  > React is the really the ideal rendering engine Compared to what?
  - ravenstine 10y ago
    He's comparing it to Unity, which makes no sense to me at all. If there was a statement more like comparing apples to oranges, I haven't heard of it yet.
  - bcherny 10y ago
    Compared to retained mode renderers..
- endergen 10y ago
  No, Pixi.js is a better one for 2D games. Redux is sweet though.
SomeCallMeTim 10y ago
I've been making games for ~30 years, and I'm always curious about how people like to apply functional concepts to game development...and yet, when I look at this, I think "Why?" As far as I can tell, it just starts out with a React tree and then says "put the game in the middle part." Meaning that how you write the game is almost orthogonal to any of React's key concepts like one directional data flow. Except that things like collisions seem to be handled at the global level, meaning that you have to filter them back down to the individual objects involved -- which is strictly worse than letting objects respond to their own collisions, and encourages the creation of "god objects" at the top level that are completely opaque. There are far more capable game engines out there, ones that give you sprites, canvas or WebGL rendering, and far more sophisticated control of game objects. Basically all game engines work in a "display the current state" manner (except for old school "put your draw function here" engines like Love2d), and many have built in physics abstractions as well. Can't see any reason to use React for something it's clearly not well matched to.
- keithwhor 10y ago
  You're spot on. This doesn't seem like something built to actually build games. The reasoning here seems almost backwards. This seems like shoehorning technology where it needn't be. Instead of approaching the problem from the perspective of, "I'd like to build games," it was approached from, "I'd like to use React," followed by, "... and build a game." Canvas / WebGL are far, far better suited. As somebody who started with game development in Visual Basic, it reminds me of the first game I made on a VB form, moving pictures around over the default grey background. My eyes were opened to the DirectX APIs shortly thereafter, realizing I should scrap pretty much everything I'd built. That said --- all innovation and experimentation is great. I'm sure the author worked very hard and I'd be interested to see what games they've built with it (that would certainly be more convincing than a README)! Edit: Found a demo in the other comments. Neat-o. :)
- djs070 10y ago
  I would think that maintaining a "world state" data structure and then dynamically generating the render tree based on the contents of the world state would be a much better logical fit for using React.
tleunen 10y ago
For more 2d/3d stuff using JSX, you can also take a look at react-pixi and react-three. Not up to date with their parent lib tho :/ - https://github.com/Izzimach/react-pixi https://github.com/Izzimach/react-pixi - https://github.com/Izzimach/react-three https://github.com/Izzimach/react-three
- doublerebel 10y ago
  Pixi is a very efficient, effective framework. I've used other controller patterns with it so I imagine React is not a bad fit.
iammyIP 10y ago
The games made with this library will mostly suck or be very basic. That's said i dont't know anything about react otherwise it being some js that will run like ass and wastes most of the cycles where it's important. To make games, learn C. Otherwise we will just have more and more crap to wade through. Another option is to use this is to quietly learn general game concepts while never publishing anything made with this, then to move on to learning C to properly apply the knowledge.
blaisio 10y ago
This is cool. I feel like it's more interesting and practical to apply Redux to game development instead of React though. Redux's "Time Travel" idea is really neat - I want to see something like React that acts as a view layer and uses Redux to model game state.
- talldan 10y ago
  I've been playing around with some ideas like this. It's hard, as most graphics APIs usually have their own concept of bindings and state to maintain. As an example you create a binding to a vertex buffer, and then you need to maintain that over multiple draw calls. It's maybe similar to React maintaining DOM nodes, but the data involved is a lot more complex. I feel like a lot of the work is building abstractions (or the right models) to be able to handle those aspects of graphics programming in a functional and reactive way.
deleted 10y ago
[deleted]
Fifer82 10y ago
This would be OK for "Powerpoint" games. If it is real time, forget about it. Even real time WebGL kind of sucks on most devices, triggering DOM manipations and repaints isn't going to help.
- vonmoltke 10y ago
  What are you calling a "'Powerpoint' game"? To me that implies some level of simplicity, but I play plenty of complex games that could be implemented with this. Not that they should be, mind you...
endergen 10y ago
I have a game development background. Did 8 years of C/C++ games for PCs/Consoles. I then switched to web/server development. I've thought of doing something similar as I'm super into React/Redux, but.... Redux can be used without react, just rendering your game graphics all the time is fine, a moving game basically causes that to happen anyway. I think taking something like Pixi.js and using redux for your app state container would give you all the hot code reloading you need. I'd maybe vote for using React for your settings/menus and such, but then again Pixi.js is going to give you much richer, and faster rendering APIs.

React Game Kit

124 points by clessg 10y ago

CoryG89 10y ago

Anyone know if there is a live demo anywhere already? I guess I'll have to clone/host it myself?

thekenwheeler 10y ago
http://reactnext.surge.sh http://reactnext.surge.sh
- SomeCallMeTim 10y ago
  Does anything happen other than a black screen when you walk into a building? I get some music if I wait long enough, but otherwise nothing.
  - prophesi 10y ago
    I had a black screen when I first walked into a building. After refreshing, they all started working after I entered the Physics building. They just show a slideshow, then send you back out into the street.
- SamBam 10y ago
  Is that playable on mobile? I don't seem to be able to "Press Start."
  - cormacrelf 10y ago
    It's waiting for space or enter to be onkeydown-ed.

andreasklinger 10y ago

This is mind-twisting in it's own way. The core idea of react is (simplified) that "time is eliminated"* as mental concept to keep track of. So in a way this is game programming without the concept of time. ( * Essentially you focus on state and could thus create/display any component in any state )

SomeCallMeTim 10y ago
> So in a way this is game programming without the concept of time. A. You can't have a real time game without the concept of time. If you're making a turn based game, time is ignored equally in a traditional game engine. B. Most game engines that have a built-in physics engine abstract away time to the exact same degree that React Game Kit does. Everything is about responding to collision events, applying forces, spawning animations, etc.
- andreasklinger 10y ago
  I am not saying it's not possible. I meant it's interesting to think about it as concept.
  - SomeCallMeTim 10y ago
    OK, but my point is that it's also a concept in most game engines.

adriancooney 10y ago

I've often thought React would be perfect for creating games with. Even attempted my own framework similar to this using the canvas but it fell down when it came to rendering. I felt like React really didn't suit the update/render loop approach. It doesn't seem to talk about it on the project page so I wonder how this works. Using the DOM?

talldan 10y ago
I had a quick look into the code base, and it is indeed targeting the DOM, rather than canvas or webgl. It has a sprite component which is just an absolutely position img element wrapped in a div.

bcherny 10y ago

React is the really the ideal rendering engine (though much less optimized than something like Unity). An immediate mode API abstracting over a retained mode renderer lets you think about a program as a state machine, while not sacrificing performance. It's also a powerful metaphor for charting - https://github.com/recharts/recharts https://github.com/recharts/recharts.

deleted 10y ago
[deleted]
seanwilson 10y ago
> React is the really the ideal rendering engine Compared to what?
- ravenstine 10y ago
  He's comparing it to Unity, which makes no sense to me at all. If there was a statement more like comparing apples to oranges, I haven't heard of it yet.
- bcherny 10y ago
  Compared to retained mode renderers..
endergen 10y ago
No, Pixi.js is a better one for 2D games. Redux is sweet though.

SomeCallMeTim 10y ago

I've been making games for ~30 years, and I'm always curious about how people like to apply functional concepts to game development...and yet, when I look at this, I think "Why?" As far as I can tell, it just starts out with a React tree and then says "put the game in the middle part." Meaning that how you write the game is almost orthogonal to any of React's key concepts like one directional data flow. Except that things like collisions seem to be handled at the global level, meaning that you have to filter them back down to the individual objects involved -- which is strictly worse than letting objects respond to their own collisions, and encourages the creation of "god objects" at the top level that are completely opaque. There are far more capable game engines out there, ones that give you sprites, canvas or WebGL rendering, and far more sophisticated control of game objects. Basically all game engines work in a "display the current state" manner (except for old school "put your draw function here" engines like Love2d), and many have built in physics abstractions as well. Can't see any reason to use React for something it's clearly not well matched to.

keithwhor 10y ago
You're spot on. This doesn't seem like something built to actually build games. The reasoning here seems almost backwards. This seems like shoehorning technology where it needn't be. Instead of approaching the problem from the perspective of, "I'd like to build games," it was approached from, "I'd like to use React," followed by, "... and build a game." Canvas / WebGL are far, far better suited. As somebody who started with game development in Visual Basic, it reminds me of the first game I made on a VB form, moving pictures around over the default grey background. My eyes were opened to the DirectX APIs shortly thereafter, realizing I should scrap pretty much everything I'd built. That said --- all innovation and experimentation is great. I'm sure the author worked very hard and I'd be interested to see what games they've built with it (that would certainly be more convincing than a README)! Edit: Found a demo in the other comments. Neat-o. :)
djs070 10y ago
I would think that maintaining a "world state" data structure and then dynamically generating the render tree based on the contents of the world state would be a much better logical fit for using React.

tleunen 10y ago

For more 2d/3d stuff using JSX, you can also take a look at react-pixi and react-three. Not up to date with their parent lib tho :/ - https://github.com/Izzimach/react-pixi https://github.com/Izzimach/react-pixi - https://github.com/Izzimach/react-three https://github.com/Izzimach/react-three

doublerebel 10y ago
Pixi is a very efficient, effective framework. I've used other controller patterns with it so I imagine React is not a bad fit.

iammyIP 10y ago

The games made with this library will mostly suck or be very basic. That's said i dont't know anything about react otherwise it being some js that will run like ass and wastes most of the cycles where it's important. To make games, learn C. Otherwise we will just have more and more crap to wade through. Another option is to use this is to quietly learn general game concepts while never publishing anything made with this, then to move on to learning C to properly apply the knowledge.

blaisio 10y ago

This is cool. I feel like it's more interesting and practical to apply Redux to game development instead of React though. Redux's "Time Travel" idea is really neat - I want to see something like React that acts as a view layer and uses Redux to model game state.

talldan 10y ago
I've been playing around with some ideas like this. It's hard, as most graphics APIs usually have their own concept of bindings and state to maintain. As an example you create a binding to a vertex buffer, and then you need to maintain that over multiple draw calls. It's maybe similar to React maintaining DOM nodes, but the data involved is a lot more complex. I feel like a lot of the work is building abstractions (or the right models) to be able to handle those aspects of graphics programming in a functional and reactive way.

deleted 10y ago

[deleted]

Fifer82 10y ago

This would be OK for "Powerpoint" games. If it is real time, forget about it. Even real time WebGL kind of sucks on most devices, triggering DOM manipations and repaints isn't going to help.

vonmoltke 10y ago
What are you calling a "'Powerpoint' game"? To me that implies some level of simplicity, but I play plenty of complex games that could be implemented with this. Not that they should be, mind you...

endergen 10y ago

I have a game development background. Did 8 years of C/C++ games for PCs/Consoles. I then switched to web/server development. I've thought of doing something similar as I'm super into React/Redux, but.... Redux can be used without react, just rendering your game graphics all the time is fine, a moving game basically causes that to happen anyway. I think taking something like Pixi.js and using redux for your app state container would give you all the hot code reloading you need. I'd maybe vote for using React for your settings/menus and such, but then again Pixi.js is going to give you much richer, and faster rendering APIs.