UNITY 3D REPLICANICS: Replicating Steam’s Collectible Card Display Mechanic— Part I

Claudio Grassi
5 min readNov 10, 2021
Part 1 — First Blood

Replicanic /ˈrɛplɪkanɪk/: A blend of replicate and mechanic. The term aims to define the act of duplicating mechanics from any commercial application in your game engine of choice. The main idea of this exercise is to learn through observation and analysis. Although the term Replicanic may be made up (copyright pending), the idea it represents is a widely used technique for improving one’s skills. Let’s give it a shot!

Recently I became somewhat interested in learning to use Unity’s Shader-Graph. Shaders seem to be one of those rites of passage that every game developer has to tackle at some point or another. Like many of you, I have watched and followed many online tutorials in the hopes of deciphering Shader Graph’s most arcane mysteries. However, I wanted to take a more proactive approach by diving into the deep end.

Not long ago, Steam’s gaming platform updated the way it displays its collectible cards. I‘m not sure how long ago this happened, but to be honest, it could be I just noticed it. At any rate, I like the way you can inspect the cards, and I figured I could recreate the effect in Unity. This challenge seemed simple enough for me to manage without the benefit of a spoon-fed tutorial.

Objective:

The objective is to replicate Steam’s collectible card display mechanics.

Darkest Dungeon — Copyright Red Hook Studios 2016

Gathering intelligence:

Before getting started with the exercise, I took some time to examine the source material closely. I spent a while navigating through the cards in my Steam library, doing my best to note all of the nuances of the display’s behavior. Ultimately, I recorded the cards behave in the following manner:

  • They are activated when the cursor hovers over them, and they deactivate after the cursor moves away.
  • They rotate based on the cursor’s position over them.
  • They scale up when active and scale back down when inactive.
  • They are affected by subtle top-down lighting.
Claudio Grassi

Experienced digital artist, Unity game developer & coder with a knack for problem solving and a passion for video games.