07 / 11

Achievements

Badges you can turn in the light

Progression3D badgeFree

Overview

The Achievements screen (the passport, in the app's code) shows “7 of 18 badges earned”, a hero card for the badge you are closest to with a “Next:” line and a progress bar, and two grids: games and hours. Games badges run from First Game (1) through Getting Started, Game Explorer, Finding Your Groove, Century Player, Seasoned Gamer, Game Veteran and Thousand Strong to Gaming Legend (2,500). Hours badges run from First Lap (5 hours) to Gaming Veteran (2,500 hours). Tap a badge and it fills the screen. Drag it and it tilts in 3D, with a highlight that moves across it: “Drag to turn it in the light”. Locked badges say so. When you cross a threshold, a Badge unlocked sheet slides up.

How it works

  1. 1

    Progress is computed on the phone from your library: the games count is the number of entries, and hours are the sum of hours played, rounded to one decimal so floating-point error can never hold a badge back.

  2. 2

    The detail view uses a PanResponder that tilts the badge up to 26 degrees, and a highlight that follows the tilt.

  3. 3

    The app remembers which badges you have already seen. When an update pushes you past a threshold, the unlock sheet shows the new badge.

  4. 4

    Seasonal challenges on the Events screen are the other kind of progression, and they also read your library. See Events.

Key decisions

Silent seeding

Someone opening the screen for the first time with 200 games should not get eighteen unlock sheets. An account with no “seen” list is seeded quietly, and only badges earned after that celebrate.

One sheet per import

An import can cross several thresholds at once. It shows only the highest new badge in each category, so a Steam import gives you one moment, not a queue of popups.

Never behind Pro

Badges and challenges are free. They read what your library already says, so the only way to earn one is to play and log games. Progression you can't farm is also progression you shouldn't have to pay for.

The research behind it

Decisions on this page that rest on RevenueCat's published data and guides.

1

Mechanics that match what the user wants

RevenueCat's gamification guide argues that game mechanics work when they line up with what the user already wants to do. Badges and challenges count games you play and finish; there is no separate streak to keep alive.

Gamification in apps: the complete guide

Quick reference

ScreenPassportScreen, AchievementDetailScreen
StateuseUnlockStore, useLibraryStore
Servicesnone (computed on the device)
Components
Trophy3DBadgeUnlockSheetBadgeUnlockHostbadges.ts
Updated