Piece Interaction Design

Piece interaction example

Cosmic Crush robot piece movement

Omakase chopsticks picking up sushi

In traditional video games, the controller is a foregone conclusion: pressing buttons on a gamepad, tapping keys on a keyboard, clicking a mouse, dragging on a touchscreen.

On Board, the Pieces are the controller. The design of any game must consider:

  • The Pieces used to play, and their design affordances
  • The physical actions taken with those Pieces
  • The digital, on-screen responses to those physical actions

For a game on Board to be fun and uniquely phygital, Piece interactions must play into the game’s core mechanics. Choose Pieces and interactions that enhance the experience rather than detract from it.

If a player ever thinks “this would be easier with a mouse, or more fun with a gamepad,” then the game’s mechanics are not native to Board.

Games on Board have to be physically fun to play.

Most controller experiences are neutral by design. They’re merely a conduit for digital play. The fun is on the screen, not in your hands.

But with Board, Pieces can’t be a neutral controller. It needs to be fun to play with Pieces. The Pieces have to be additive to the experience. If Pieces feel neutral, we lose what makes Board feel magical.

To design for this, think about how Pieces will be used in a given game, and which Piece designs are best suited for which kinds of interactions. Or alternately, think about the kinds of Pieces that would be interesting to play with, and the kinds of games you could build around those Pieces and actions.

Piece Interactions

The use of Pieces as controllers creates a new type of game interaction vocabulary.

When considering your game’s core mechanics, think about how they could be expressed through different types of phygital interactions.

Place & Lift

Place and lift interaction

As seen in: Cosmic Crush, Chop Chop, Bloogs, Omakase, Strata

  • The act of physically placing a Piece onto the screen, or lifting it off.
  • Board knows which Piece is being placed, where it’s being placed, and the direction the Piece is facing.
  • The screen state should change in some way to indicate the Piece was detected.
  • Board also knows when a Piece is no longer detected (the contactId is no longer present on screen).
  • Removal of a Piece from the screen could also trigger a visual state change.

Slide

Knife slicing in Chop Chop

Slide interaction

As seen in: Space Rocks, Starfire, Snek, Chop Chop, Mushka

  • The act of moving a Piece around the screen while maintaining contact with the screen.
  • Sliding can be either a sustained motion (like moving the ship Pieces in Space Rocks), or a short directional input (like slicing with the knife Piece in Chop Chop).

Trace

Spoon stirring in Chop Chop

Trace interaction

As seen in: Chop Chop, Mushka, Spycraft

  • A subset of slide, where Pieces can be slid in specific directions to follow a certain indicated shape or pattern to invoke different actions.
  • Like stirring with the spoon in Chop Chop, which is a circular trace motion.
  • Or tracing with the wand in Mushka to make Mushka perform different dance moves.

Shake

Shake interaction

As seen in: Mushka, Chop Chop

  • A subset of slide. A more vigorous motion of the Piece back and forth while on the screen.
  • Like the goodie bag in Mushka.
  • Or the sponge in Chop Chop.
  • This isn’t a detection of a specific sustained motion, but rather detection of rapid movement in a small area.

Rotate

Bloogs rotation selector

Rotate interaction

As seen in: Bloogs, SpyCraft, Omakase

  • Board knows the orientation of Pieces, and can therefore detect changes in rotation.
  • Pieces can be rotated to control gameplay elements:
    • Making a selection (Bloogs)
    • Setting a value (SpyCraft)
    • Aiming (Omakase)
  • Rotate as an action is best supported by Pieces with rotational symmetry to their design. This makes it easier to turn the Piece while maintaining its general position on the screen.

Twist

Twist interaction

As seen in: Chop Chop

  • A subset of rotation, where a more rapid change of rotation can be mapped to particular actions.
  • Less precision than normal rotation, more paying attention to a sudden change in orientation.
  • Like seasoning with the spice mill in Chop Chop.

Touch & Release

Touch and release interaction

As seen in: Cosmic Crush

  • With the exception of Strata, all of Board’s Pieces are made with a capacitive paint that allows Board to detect whether the Piece is being touched or not.
  • Thus, the act of touching a Piece can be treated as a detectable interaction.
  • This is the isTouched property in the SDK.
  • Quick taps of a Piece might be more challenging to rely on as a confident contact event, but the act of holding a Piece for a set length of time could be a way to either display a UI element or activate an ability.
  • isTouched is subtly used in Cosmic Crush, where if a player slides a Piece to a position rather than lifting and placing, the move isn’t confirmed until the player stops touching the Piece.

Piece Types

Board’s Pieces have so far fallen into several discrete categories:

  • Pawn Pieces (or Character Pieces)
  • Action Pieces (or Verb Pieces)
  • Reaction Pieces (or Platform Pieces)

The physical affordances of a Piece are influenced by its design and intended use, so for a given game, it’s worth considering the types of Pieces that would best serve your system and mechanics.

Note that these are rough categories, and not hard and fast rules. Some Pieces might fall into multiple categories, or not fit neatly into any of them (like the blocks in Strata).

Pawn Pieces (or Character Pieces)

Pawn Pieces

Chop Chop knife completing a slice

Pawn Piece in use

As seen in: Omakase, Snek, Cosmic Crush, Chop Chop

  • Like classic board game pieces, pawns are representative of either the players or other characters in a game.
    • Like the robots in Cosmic Crush and Snek
    • Chopsticks in Omakase
    • Little Chef in Chop Chop
  • Their primary actions are placing and lifting.
  • Though some games also involve rotation and sliding of pawns.
  • Pawns don’t have to be literally characters. A pawn can also be a representation of an object whose movement represents a player’s current position or status (like the thimble in Monopoly).

Action Pieces (or Verb Pieces)

Action Pieces

Knife slicing action in Chop Chop

Action Piece in use

As seen in: Chop Chop, Mushka, Space Rocks, Starfire, Spycraft

  • These are Pieces which represent clear and obvious actions the player can take with them.
  • A knife for slicing; a watering can for watering; a spaceship for shooting.
  • The physical design of an action Piece provides clear affordances for how the Piece is meant to be used.
  • When action Pieces are used on Board, the digital screen should visibly and audibly react to the actions being taken with those Pieces.
  • The physical use of the Piece alters the digital space.

Reaction Pieces (or Platform Pieces)

Reaction Pieces

Bloogs walking on placed stairs

Reaction Piece in use

As seen in: Save the Bloogs

  • These are Pieces that, when placed, are treated like physical parts of the game’s digital space, allowing digital characters and objects to react to and interact with the Pieces.
  • Generally these Pieces are placed and then left in positions on screen, allowing digital elements to engage with the Piece.
  • These Pieces might also create digital elements on-screen (like the blocks creating a bungee in Save the Bloogs).
  • Save the Bloogs is the current best example of Reaction Pieces. Players place objects that then become part of the game’s world, where the bloogs interact directly when they encounter those Pieces.

Interfaces & Signifiers

Part of the unique challenge of Board is that with new types of controllers, we need to teach players how and where those Pieces are used. This means designing new types of interfaces to communicate:

  • When to place a Piece
  • What Piece to place
  • How to use that Piece when placed
  • When a Piece is placed incorrectly

Piece Indicators

Telling a player what Piece to place on the Board, and where.

Tutorialization

Tutorial indicator

Bloogs Introducing Stairs tutorial

Tutorial placement

  • Chop Chop and Mushka use 3D renders of Pieces to indicate where to place those Pieces to take actions.
  • Bloogs and Strata tutorials show which Piece to place, and where to place it.

Icons

  • In Chop Chop, items on stations will show an icon for which Piece to take an action with.
  • Strata shows icons for the three Pieces you’re meant to use on your turn.
  • The current chopstick position in Omakase contains a chopstick icon.
  • Bloogs levels show icons for which Pieces are valid.

Action Indicators

Knife action indicator in Chop Chop

Telling a player how to use a Piece when it’s placed.

  • In Chop Chop, a knife icon appears on the cutting board showing where and how to slice.
  • Visual cues guide the specific motion required (direction, pattern, speed).

Placement Confirmation

Placement confirmation

Visualizing that the Piece placed was successfully detected, and that the Board knows which Piece it is.

  • Strata’s Piece confetti and outlines
  • Omakase’s petals
  • Chop Chop highlights on stations
  • Bloogs Piece down confirmation

Action Confirmation

Action confirmation

Visual state change when the action of a Piece has been done successfully.

  • Chop Chop’s station’s “popping”

Communicating Invalid Placement

Telling the player that the wrong Piece has been placed, or placed in the wrong position or at the wrong time.

  • In Chop Chop, a tile highlights red when the wrong Piece is placed on it.
  • In Cosmic Crush, an error state displays if a robot is placed in an invalid position.
  • In Space Rocks, there’s on-screen indication if your ship is off-sides.
  • In Bloogs, the game pauses and a message displays.

See Also