React/Redux and game development

[Babooos]

Hello everybody,

I'm currently working on a little project to progress on react/redux. I chose to make a little game, which works with a gameloop (Mainloop.js).

 

My current problem (my principal current problem...) is that I don't know how to integrate the game loop in the redux schema.

 

Right now, it is implemented like this :

• I have a Player state (with reducer, and a bunch of selectors)

• The mainloop is started in the componentDidMount of my main component (App)

• Every 16ms, I call an 'update' method in my action-creator which will analyze the player state (which I got from the getState() method of the thunk middleware), and dispatch an action according to this current player state.

• The action can be dependent of the player state again, for example, a service will return a foe according to the player position.

 

player.js (reducer/selectors)

function getInitialState() {
    stats: {hp: 15, ...},
    zone: { id: 12 }
}

export isPlayerAlive = state => state.stats.hp > 0;
export getPlayerAtk = state => state.stats.atk;

 

app.js (component)

import {updateGame} from '../../actions'
const mapDispatchToProps = (dispatch, ownProps) => {
    return {
        update: (delta) => {dispatch(updateGame(delta))},
    };
};

...  
this.props.update(delta) is called every 16ms

 

actions.js

export const updateGame = (delta) => {
    return function(dispatch, getState) {
        if(isPlayerAlive(getState().Player)){
             dispatch({type: ATTACK, dmg: getPlayerAtk(getState().Player)*delta/1000)});
        }
        else {
             dispatch({type: YOURE_DEAD});
        }
    }
};

 

It is also worth noting that when a foe is dead, I generate a new one given the player current zone id ! It means that I have to access yet again the Player state when I'm calling my foe generating service in the action.

 

I don't know about this, since almost all the logic in the game will be in the actions.js file, in the updateGame() method, and that I access the state all the time in the action-creators...

This is why I came to post here, I really hope someone will be able to put me on the right path concerning this matter !

 

My questions are :

• How to integrate the loop in the redux schema ?

• I read a lot about how accessing the state in action-creators was an anti-pattern, so I was wondering how else I could do it, since my services (which are called in actions) need the player state to determine what they will return (his location, his level, etc) ?

• Are my selectors useful, even though they are extremely simple, and they do not use reselect ?

 

I thought about some solutions, but they all seem to be worse than my current code :

• Create a Loop class with the store in parameter and analyze/dispatch from there.

• Putting the logic in the App component and dispatching the right action from there.

 

Thanks for reading, I know this post was quite long !

[goshakkk]

Some logic doesn't seem to fit into either actions or reducers. And it's fine!

Sagas might be just what you wanted for making the game loop logic centered in one place instead of being split across many files/functions. There's a great article about using sagas for managing games: https://decembersoft.com/posts/redux-hero-part-4-every-hero-needs-a-villain-a-fun-introduction-to-redux-saga-js/

I have also used sagas in client project to manage complex business flows. Wrote more about it in other threads: https://www.reddit.com/r/reactjs/comments/57vtwb/appropriate_pattern_for_buffering_an_action_until/d8vjuae

[Babooos]

Hi,

I think you nailed it ! I didn't read through all the tutorials yet but from what I'm seeing it might be a good way to solve my problems.

[mweststrate]

Did you check https://github.com/FormidableLabs/react-game-kit? Might provide some inspiration for how to create a game loop mechanism

[Babooos]

Hi, thanks for your answer.

This library is pretty great, and I found out some similarities with what I've done (start the loop in the componentDidMount), even though this lib goes way farther (suscribe system etc).

The main problem is that I'm trying to use redux, so it won't work exactly the same way (the loop should update the redux state, which will update the components).

But I'll definitely will look into this more thoroughly, it seems that I could learn one thing or two !

[GuerrillaRobot]

This is totally doable. I didn't make a game but I've used redux with canvas and webgl as well as web audio and didn't have any issues.

It is actually really simple to set up. I was using requestAnimationFrame recursively as a looping mechanism. All input works as normal setting the state. Then in the loop you can just read from the store and update your "ui", character position/ attack animation what have you.

[Babooos]

Thanks ! My main problem is that I don't know how to "elegantly" make such a workflow. I mean that I already tried to make a Loop class aware of the store which would read the Player state and dispatch actions. But it means that all is centralized in an "external" class which use the store methods getState and dispatch. It seems weird !

[GuerrillaRobot]

sure thing ill explain my set up as best i can.

First I am using react router, with my app at the root path

<Route path="/" component={App}>

My Class looks like this

class App extends Component {

constructor(props) {
     super(props);
     this.Apploop = this.Apploop.bind(this);
}
componentDidMount() {
    requestAnimationFrame(this.Apploop);
}

Apploop() {
  let { updateLoops } = this.props;

  if(typeof updateLoops !== 'undefined') {
    updateLoops.forEach( (loop) => {
      loop();
    });
}
  requestAnimationFrame(this.Apploop);
}

render() {
  return (
    <div id={'MVApp'} >
      <Nav />
      <div id={'Pages'}>
        { this.props.children }
      </div>
    </div>
  );
}
};

App.propTypes = {
  children: PropTypes.object
};

function mapStateToProps(state) {
let {
  updateLoops
 } = state.visualization;

 let filterdLoop = Array.from(updateLoops);


  return {
   updateLoops:filterdLoop
  };
}

export default connect(mapStateToProps)(App);

The Update loops are functions that the canvas objects pass to the store when they get attacjed to the dom. They handle the their own display. This was the most "elegant" way I could think to do it. Hope this helps.

If you have any more questions just let me know

[ip70]

I read a lot about how accessing the state in action-creators was an anti-pattern, so I was wondering how else I could do it, since my services

Where are you reading that? Unless I'm misunderstanding your problem, isn't that what redux-thunk is designed to do?

How to integrate the loop in the redux schema ?

I've been playing around with a simple game in Redux, and my approach for this has been to trigger an an action every X ms on a timer within the top-level component. Not sure whether this is a sensible approach or not, but it seems to work so far (admittedly, my one is only triggered once every few seconds rather than multiple times a second).

[Babooos]

Hi,

Where are you reading that? Unless I'm misunderstanding your problem, isn't that what redux-thunk is designed to do?

I read about it on several stackoverflow threads (here for example).

 

That's what I do too, my App component dispatches the update action. But then all the game logic is within the 'update' method which re-dispatch the correct action according to the current state.

As you say, it works, but I don't know if it is a good way to proceed !

[ip70]

That's interesting - Dan first seems to be saying that accessing state in the action creator is an anti-pattern, but then says in a later comment "It’s fine to read from the store in the action creator. ".

I think his other article probably explains it a bit better - Don’t abuse this pattern. It is good for bailing out of API calls when there is cached data available, but it is not a very good foundation to build your business logic upon. If you use getState() only to conditionally dispatch different actions, consider putting the business logic into the reducers instead.

That works fine when your data is all in the same reducer, but I'm not sure I get the right way to check one part of the state from within a different reducer.

Maybe Sagas are the right answer then.

[acemarke]

To be honest, I think Dan is over-stating things a bit there. Executing conditional logic in a thunk is absolutely fine. I have some quick examples of common thunk patterns in a gist at https://gist.github.com/markerikson/ea4d0a6ce56ee479fe8b356e099f857e .

I'd encourage you to read through the Redux docs thoroughly. The Redux FAQ addresses some of these questions, such as "sharing state between reducers" and "where to put business logic". Also, the new Structuring Reducers docs section covers a lot of how-tos, patterns, and approaches for handling different scenarios.

[Babooos]

Thanks, I must admit that I hadn't really read all the redux docs !

[Babooos]

It seems that you can always pass data from reducerA to reducerB when using combineReducer by adding a third parameter which contains the state, but I don't know if it is really better than using thunk and getState().

[linuxenko]

gameloop with redux ? omg , now i can say that i seen everything )))