Question

I’m trying to re-implement an old Reversi board game I wrote with a bit more of a snazzy UI. I’ve looked at Jens Alfke’s GeekGameBoard code for inspiration, and CALayers looks like the way to go for implementing the UI.

However, there is no clean separation of model and view in the GeekGameBoard code; the model is the view, which makes it hard to, for example, make a copy of the game state in order to perform game-tree search for the AI player. However, I don’t seem to be able to come up with an alternative way to structure that allows a separation of model and view that doesn’t involve a constant battle to keep two parallel grids (on for the model, one for the view) in synch. This, of course, has its own problems.

How do I best best implement the relationship between an AI search-friendly model structure and a display-friendly view? Any suggestions / experiences would be appreciated. I’m dreading / half expecting an answer along the lines of “there is no good answer: deal with it as best you can” but I’m prepared to be surprised!

---

Thanks for the answer Peter. I’m not entirely sure I understand it fully, however. I can see how this works if you just have an initial set of pieces that are moved around, and even removed, but what happens when a person puts a new piece down? Would it work like this:

1. User clicks in the view.
2. View click is translated to a board location and controller is notified.
3. Controller creates a new Board with the successor state (if appropriate, i.e. it was a legal move).
4. The view picks up the new board via its bindings, tears down the existing view/layer hierarchy and replaces it with the current state.

Does that sound right?

PS: Sorry for failing to specify whether it was for the iPhone or Mac. I’m most interested in something that works for the iPhone, but if I can get it to work nicely on the Mac first I’m sure I can adapt the solution to work on the iPhone myself. (Or post a new question!)

Answer 1

In theory, it should be the same as for an NSView-based UI: Add a model property (or properties), expose it (or them) as bindings, then bind the view (layer) to the model through a controller.

For example, you might have a Board class with Pieces on it (each Piece having a reference to the Player who owns it), with all of those being model classes. Your controller would own a Board, and your view/layer would be able to display a Board, possibly with a subview/sublayer for each Piece.

You’d bind your board view/layer to the controller’s board property, and in your view/layer’s setter for that property, create a subview/sublayer for each piece, and bind it to any properties of the Piece that it will need. (Don’t forget to unbind and remove all the subviews/sublayers when replacing the main view/layer’s Board.)

When you want to move or modify a Piece, you’d do so using its own properties; these will translate to property accesses on the view/layer. Ostensibly, you’ll have your layer’s properties set up to animate changes (so that, for example, changing a Piece’s position will cause the layer for it to move accordingly).

The same goes for the Board. You might let the user change one or both tile colors; you’ll bind your color well(s) through your game controller to its Board object, and with the view/layer bound to the same property of the same Board, it’ll pick up the change automatically.

Disclaimers: I’ve never used Core Animation for anything, and if you’re asking about Cocoa Touch instead of Cocoa, the above solution won’t work, since it depends on Cocoa Bindings.