Saga of options

So that I again arranged Sampo,
Made a multi-string box,
The month has again set in heaven
The sun gave freedom again ...

"Kalevala"

Board games look very attractive for novice developers. There is no need to build photo-realistic images and use complex shaders (although no one forbids doing this ). Even the use of 3D, in the vast majority of games, is not at all necessary. The complexity of board games is focused on non-visual components. The user interface looks simple and primitive to the limit.
')
That's just ... he is not! Today I want to talk about my experience in the development of the user interface design of board games, gained more than a year of work.

My serious passion for board games began from the moment I got acquainted with Zillions of Games . I have already written a lot about this unique product, which allows making computer board games, literally “on the knee”. I will only remind you that it was this program that served as the prototype for Dagaz , a free and free product that I am developing at the moment.

I learned a lot from ZoG and this experience served as a solid foundation for my own development. I didn’t like a lot in ZoG and that’s what prompted me to work. Something that was redone, but at the heart of the concept continue to lie Zillions of Games. For example, such as:



As I wrote above, the ZoG user interface looks very simple. We indicate with the mouse which shape we are going to drag (in this case, those fields that can be moved to are highlighted), then drag the shape to a new field. There are two things that I don’t like. The first is connected to mobile devices, on which, at the very least, Dagaz works, but Zillions of Games does not.

On touchscreens, the mouse pointer is successfully replaced with a finger. But this means that while we are pressing something, this very finger is blocking a good half of the screen. As a result, it becomes difficult to see the field highlighting. When the finger comes off the screen, the backlight disappears. This seems obvious, but since I mainly debugged Dagaz on the desktop, I didn’t immediately realize what a devilish inconvenience users of mobile devices had.


The second point is related to the "dragging" of the figures on the screen. The fact is that far from all games the figure consists of one “piece”. In such a situation, “Drag & Drop” spoils everything. At Zillions of Games, these games look just awful. This is the main reason I refused to drag and drop. In Dagaz, clicking on a figure turns on the “highlighting” of the target fields, and then clicking on the target field starts the movement. For mobile devices, this is doubly good, since the second pressing is a kind of "confirmation" - until it is completed, you can abandon the move by selecting another figure.



Concluding the conversation about the legacy of Zillions of Games, I want to talk about another important mechanism. Pay attention to the yellow rectangles in the picture. It is they who determine which shape will be selected when clicked. This is the problem. If the figures are located in two (or more) layers, the region located above will always intercept mouse clicks, regardless of whether there is a figure in it or not. It’s impossible to count how many times it hurt me! Of course, this is fixed in Dagaz.


In some games (" Farm Chess ", for example), it is very important that the animation of the movement of figures be performed along a certain trajectory. Moving figures "in a straight line" can significantly complicate the understanding of the rules of the game. Different approaches are possible here, but I proceeded from the fact that the model should “know” only the initial and final positions of the movement. Everything else is run by the presentation of the game. In the configuration of the representation, “vectors” are defined, connecting the individual positions, and its task, having received a couple of positions from the model, is to automatically build a sequence of “vectors” connecting them, to animate the movement.



It is often useful to be able to give the player a visual clue about the goals of the game. Sometimes (as in the picture above), the board itself is a hint, but if this is not enough (as in puzzles with moving pieces, for example), another “decorative” option inherited from Zillions will help. If " highlight-goals " is activated, when you hover over the figure of the mouse pointer, those positions will be highlighted.

Continuing the theme of visual "tips" to the player, it is worth telling about another new option Dagaz. In games with complex compound moves, it is very easy to “get lost”, forgetting (or not understanding) that the figure has not completed its turn completely. Implementing the “show-blink” setting, I decided not to overload the design with new color marks, but to use animation to highlight the figure performing the move.


This solution may seem redundant, but here it is important to understand that in implementing this option, I was guided, basically, not at all by checkers. There are many much more complex games with compound moves, such as " Ko Shogi " or " Tenjiku Shogi ", for example. Even knowing the rules well, it is very easy to “get lost” on such boards. And there are also such games , the design of the composite course of which is completely unusual:


Closely related to this topic is the question of the indication of taking figures. If a chess player takes a game or a game is familiar to everyone (like checkers, for example), there are no special problems, but even in Chess, the pickup figure is not always located on the field where the turn ends. And if the game is less familiar , the indication of potential takes becomes vital. Moreover, in some games it should be possible to select a group of captured pieces:


In Madagascar Fanorone , there are two types of a move with a capture: in the first case, a figure (or a group of figures) is taken by approaching it, in the second - a retreat. In the game, situations are possible in which the player must choose how to capture. Still more complicated by the fact that this grip can be embedded in the chain of the composite stroke. Also, the possibility of choosing the captured pieces is in demand in games with “bonus” take, such as “ Mill ”, “ Yotai ” or “ Swamp ”.

As in the case of show-blink, I decided not to overload the interface with color marks, but to display potential captures with translucent figures. Similarly, drop moves are shown. The figure added to the board by a drop-stroke is displayed in a translucent form when the mouse pointer passes over the corresponding position (unfortunately, this indication does not work on mobile devices).


In some cases, the rules of the game drop-moves are not allowed in all positions. If there are few allowed positions for a move, in order not to mislead the player, it makes sense to display all permissible moves on the board. It works well in games such as Reversi and Renju , with its debut time limit :


Very often, the forbidden moves are much less than the allowed ones (this applies to fouls in Rendzu , for example). Prohibited positions must be flagged in order not to mislead the player. I did not invent anything new and used the notation “ Ko ”, which is well-known to many players.


In Renju , Fangqi and similar games such squares on the board can be more than one. There is also some difficulty associated with moving figures. In games of the Mill family, the rule prohibiting the construction of the same series two times in a row may apply. At the same time, it is not entirely correct to mark only an empty field completing the series, since a move to this position can be acceptable if it leads to the construction of another series. In this case, it makes sense to mark all the shapes that make up the form:


This is how I got " Mill ". In stock . And a couple of similar games from the Chinese comrades and, of course, " Bolotud ". Of course, this is not the end of the story. For example, I really want to make this game. True, it will no longer be limited to options alone.