Dice & pass turn

[johnsillings]

As a player, I want to have a clear prompt to roll the dice when it's my turn, and a clear action to end my turn when I'm finished with my actions.

As a player, I also want to be aware of my opponents' dice rolls, so that I can be aware of the impact on the game (new resources, discarding hands, etc).

Steps:

• [x] Look at other turn-based multiplayer strategy games with dice and collect examples in both video & screenshot forms
• [x] Brainstorm and list multiple designs that meet the acceptance criteria of the task to a satisfactory level. At this stage more exotic designs can be considered as it’s important to widen our view of the solution landscape before focusing too much on details.
• [x] For each design rate values below from 0 to 5
  • Clarity: How clear is it: https://www.liamcharlton.com/post/signs-feedback-and-the-ux
  • Ease of use: Number of needed interactions with the UI, complexity of interactions, number of hands needed to complete the actions, thumb zone etc.
  • Acceptance criteria met:
• [x] Implement changes to update the rating values of the above designs
• [x] Identify any new player issues that may arise from each of your rough designs and the potential for them to be mitigated.
• [x] Decide on 1-2 designs that have the greatest potential to work by analyzing the results from previous steps.
• [x] Share all your results from the previous steps with the team in a table containing concise information; It’s important to also show your thought process for the design decisions you have made.
• [x] Get the greenlight from project owners to start work on a detailed Figma prototype for one of the high potential rough designs.

Acceptance criteria:

• [x] Players should be aware when it is their turn to roll the dice and be presented with a clear, unambiguous action to roll the dice.
• [x] Players should be presented with a clear option to end their turn when it is their turn (and they've already rolled the dice).
• [x] Dice rolls should be fun and exciting! (There should probably be an animation, sound, etc.)
• [x] Players should be aware when other players roll the dice, as well as what number was rolled.
• [x] Players should be aware when other players end their turns.
• [x] Players should be able to roll the dice and pass their turn with one hand (be mindful of "the thumb zone").
• [x] The game UI should not be overcrowded with these elements (e.g. dice) when they're not actively needed. Related: https://github.com/colonistio/design/issues/17
• [x] Players should be able to play their development cards before rolling the dice
• [x] Design should accomodate the event dice in Cities & Knights https://youtu.be/P400zhIlyG8?t=786

Figma Layout:

In the link below, you'll find the layout that shows the functioning flow of the Dice & pass turn for the vertical version of the game on mobile.

https://www.figma.com/file/KjHdwcS3tBLtE3DXFKyJQK/Mobile-Game-Master-File?node-id=225%3A88722&t=X40cFBpfPCrruNDV-1

[Ioseffagundes]

I really like this way of rolling the dice and showing the result. I believe it could be a useful animation reference

https://user-images.githubusercontent.com/8269105/218619071-bed2527d-3a94-4e7a-9b03-11f2b5d6aaf4.mp4

I am thinking of something like this

[johnsillings]

Monopoly (iOS) has a really nice dice roll, and a great visualization for where the players will move on the board: https://imgur.com/Twl7Cwl

[demiculus]

Got some feedback from someone. Has broken down the problem to 3 problems. Ofc the actual problem can be broken down more. Also the solution is not completely correct but will give an extra idea.

Problems

1. Dice rolls are not obvious. These manifest in a few different ways. The first is for players who had not played board games online before. Although it's a minor barrier, clicking on the dice to roll them confused players who were expecting to see a large “roll” button.

2. Dice rolls are instant. This results in players who were hoping for a “click and hold” type of rolling system to get slightly flustered and confused if they rolled the same number as the previous number that was rolled.

3. Dice are relegated to the bottom corner of the screen. In colonist, one of the most important elements of the game is the rolling of dice and its results. It needs to be much much more obvious when and what is being rolled.

Solution

To address all 3 issues observed while rolling dice, I would recommend the following: At the beginning of the players turn, have the dice moved very obviously to the centre of the screen inside a modal. The modal should contain the dice and a button labelled “roll”. When either the dice or the button is pressed, the dice should cycle rapidly through different results for a few seconds to simulate “rolling”. If a player holds down either the button or the dice, then the “rolling” should continue until the player lets go. Once the result is rolled, animate the dice very clearly from the centre of the screen to where it currently is (bottom right).

Why this solution? Players cannot act before the dice is rolled, this results in players thinking they can build or trade before their roll and becoming frustrated when they can’t. Remove that frustration and make it completely obvious that the first and only thing they can do is roll dice.

[demiculus]

@johnsillings fyi

@Ioseffagundes make sure to go through all of these, see which ones you should tackle in this issue and which ones postpone since we don't want to increase scope more than needed.

https://github.com/colonistio/design/issues/26 https://github.com/colonistio/design/issues/3

[Ioseffagundes]

I have included some development steps inside the file. Figma Project, Prototype