User Interface

Choice selection

The game needs:

• a method for the player to select a choice and
• a method to declare that choice is the final choice and exchange it with other player(s).

A three button interface could combine those two actions. The CLUE has two buttons and three touch-capable pads. The Circuit Playground Bluefruit (CPB) has two buttons, a switch and seven touch-capable pads.

A player needs to keep their choice secret from the other player(s) until they are exchanged. While it is easy to prevent others from spying on the choice directly there is the possibility of exposing this value if the opponent(s) can see an indirect indication of the choice. This could be from observing which touch pad a finger presses or by counting the number of presses on a button from finger movements or hearing button clicks. This is a form of side-channel attack.

Avoiding the use of the touch pads for a one pad-per-choice selection helps to reduce the risk of overlooking. This also allows the boards to be used with a case that covers the touch pads, keeps the button actions identical between the CLUE and the CPB and maintains a consistent button layout.

Using a single button to cycle through the selections still needs some caution to avoid revealing the choice. It must

• not reset the player's choice to a fixed value per round
• and must not leave the player's choice on their last selected value.

The Simple and Advanced versions of the game both use the left button to select the choice and the right button to send it to the other players. The Advanced version deals with the issue of "button press counting" by randomising the player's choice each round.

Display on NeoPixels

The Advanced game can be played on a display-less Circuit Playground Bluefruit. The NeoPixels are used to show output to the player. These can be very bright and reflected light might be visible to others indicating the player's choice. The risk of this is reduced by using very low brightness values for the selected value indicated by the NeoPixels.

The NeoPixel position in addition to the colour is also used to represent the player's choice. It's tempting to use the default order of the NeoPixels but this would result in the third NeoPixel being underneath/near the player's left finger/thumb. The NeoPixels at the top of the Circuit Playground Bluefruit are used as they are clear of any fingers using buttons. The clockwise representation is:

• rock, red on NeoPixel 0;
• paper, purple on NeoPixel 9;
• scissors, sapphire blue on NeoPixel 8.

These can be seen in the animated image at the top of screen which cycles through the three.

The game number and round number are shown at the start of each round using the NeoPixels. They briefly light up in green with the number of NeoPixels illuminated indicating the game number. One NeoPixel then flashes white, the position indicates the round number.

The scores for the game are shown for each player in turn by illuminating the NeoPixels gradually in a circle. For 1-10 orange is used. For values larger than 10 a new colour is used after orange has been lit: yellow for 11-20, green for 21-30, blue for 31-40, indigo for 41-50 and violet for 51-60.

Screens

A game may have different phases. The Advanced game warrants:

1. A title screen.
2. A brief user guide.
3. A player list for the assembling players.
4. The local player's selection for the current round including information about the round number and a summary of the results so far.
5. The score at the end of each game for all players.

Screen Transitions

The transition between screens could just be implemented with an immediate change like a cut in a film but there are other options to transition to a subsequent screen and provide a visual cue that something significant has changed or occurred.

The CLUE and TFT Gizmo's screens use liquid-crystal display (LCD) technology. These displays use a backlight for illumination. Fortunately, this backlight has a brightness control and this provides a very efficient way to implement a smooth fade to black and back.

Sprites

The displayio library includes a TileGrid object which can be used together with the adafruit_imageload library to load a sprite sheet into memory. A sprite sheet is an ordered set of sprites contained in a single image file.

The Advanced game makes intentional use of low resolution 16x16 pixel images with a very limited palette for a retro feel. The three sprites representing the rock, paper and scissors yield a 48x16 sprite sheet. These were:

1. Drawn in the basic sprite editor in MakeCode Arcade.
2. Displayed on screen to allow them to be saved from the editor. MakeCode Arcade is unusual in embedding its source code inside a png file which is its native file format.
3. Cropped and converted to an indexed bmp in GIMP.

The rock is inspired by classic Arcade games and the paper by the Xerox Star Document Icon. The pictorial form of an icon is a conventional feature of a graphical user interface (GUI). It also provides a language-neutral representation for the choice reducing the work for internationalization (i18n) of a program or product.

The enlarged sprite sheet is shown below with a blue border.