Game UI

It is time to start writing the small but important UI for the tower defense game. The only thing i need to display at the time is amount of resources the player currently has. Whenever I get to this point normally I want to gouge my eyes out.

UI is hard, and in games, it is even harder. The data changes fast, and it needs to be able to get out of the way fast. Game engines like Unity have made great strides in making it better, but even there it is really hard to work with.

Since I’m doing this game in Cordova, I should have an advantage, after all if the DOM isn’t good for UI what good is it for?

I think were I’ve been doing it wrong before is tying the game data directly to UI elemnents. This time, I’m going to write the UI as a component and it will get a dataset as it’s rendering context.

The ui will be reactive, so when the state changes, the ui will change. Nice!

So like this:

game.state = new Model();
game.ui.render(game.state)
...
game.state.set({resources:game.state.get("resources") - 100)
...
// ui
ui.listenTo(game.state, "change", function() {...});

 

Advertisements