Prototyping Exercise: "Reigns" Card Interaction
Prototype URL: http://share.framerjs.com/zpz7bfeusghc/
One of my favorite games to arrive this year is REIGNS, an addictive choice-driven game from the folks at Devolver Digital.
The game places you in the throne of a kingdom's ruler. One by one, you hear a request from one of your subjects. You simply respond "YES" or "NO," to each ask and bear the consequences that follow. Go too far down the wrong path and your reign will come to a bitter end.
A video of my "Reigns" prototype in action.
As a player, the game's rich use of narrative and choice entice my frequent return to the kingdom. As a designer, I am enchanted by its interaction design, particularly the tactics used for the game's main mechanic: answering each request.
The designers chose to abstract the ceremony, depicting each subject as a card in a seemingly endless stack. You cast your decision by swiping the subject's card left (to say "no) or right (to say "yes). As you consider your options, the subject's eyes move toward your potential ruling, making you feel the genuine weight and pressure of a ruler.
Rebuilding the interaction helped me understand its moving parts and how they all work together so effectively. One fascinating thing is the harmonious use of character and motion design, which humanizes the interaction while also directing the player's eye up towards the display of consequences. Doing so causes the player to slow down and contemplate the gravity of his or her decision. All together, this interaction brings to life the player's role as king or queen, and the experience feels both empowering and chillingly addictive.
Try the prototype and see for yourself: http://share.framerjs.com/zpz7bfeusghc/
CODE NOTES:
Like many of my latest prototypes, this one was built using Framer JS.
As seen above, the cornerstone of this prototype is dragging. This exercise pushed me to understand how I may use drag position and direction to specific events. I will certainly be using these learnings more in the future.
If you're interested in learning more about using drag events in Framer, take a look at this article by Cemre Güngör.