Dựng leaderboard trong Rive tự sắp xếp lại theo điểm: công thức Data Binding + Lists

TL;DR

Từ tweet của @rive_app: bạn có thể dựng một leaderboard tự sắp xếp lại player theo score hoàn toàn trong editor Rive. Công thức chuẩn: Profile view model (name/color/score) + Leaderboard view model chứa một List<Profile>, dựng row bằng nested artboard, bind thứ tự qua interpolation converter để mỗi lần score đổi, các hàng tween mượt lên xuống. Cùng một file .riv chạy trên Web, iOS, Android, Flutter, Unity — không viết lại logic reorder ở mỗi runtime.

Có gì mới

Tháng 10/2024 Rive đưa Data Binding GA. 2025 họ supercharge thêm: Lists, Images và Artboards trở thành kiểu bindable first-class. Đầu 2026, Lists đã ra khỏi Early Access và sẵn sàng cho production — nghĩa là bạn có thể generate UI động từ một sequence bất kỳ (contact list, dropdown, carousel, và đúng rồi, leaderboard) mà không cần đụng tay vào template engine hay viết code replicate.

Quan trọng hơn: lists trong Rive không bị giới hạn chỉ vertical hay horizontal, virtualization có sẵn (scroll hàng ngàn item không drop frame), và bạn có thể target list index để style từng vị trí (ví dụ cho top-1 một viền vàng).

Vì sao điều này đáng quan tâm

Leaderboard tưởng đơn giản nhưng cách làm truyền thống cực ức chế: hardcode data connections ở 20+ chỗ trong app, viết tween thủ công cho mỗi hàng, và mỗi khi designer đổi layout là dev phải sửa lại đường bind. Rive lật ngược flow đó — designer và engineer chia sẻ một contract duy nhất (view model). Dev push số lên, designer bind UI xuống, đổi thiết kế không làm vỡ dây dẫn dữ liệu.

Với leaderboard, phần animation reorder là cái từ trước giờ tốn công nhất — giờ chỉ còn là một converter interpolation vài trăm mili-giây gắn vào property score.

Kỹ thuật cốt lõi

• View Model: blueprint cho dữ liệu, giống class trong OOP. Mỗi instance là một dữ liệu sống, đổi theo thời gian.
• Property types hỗ trợ: number, string, boolean, color, enum, trigger, image, artboard, và list (nested view models) — cái để dựng leaderboard.
• Converters: formula (math), text formatter, Convert-to-String, Group, và time-based interpolation — đây là cái tween hàng player khi rank đổi.
• Binding direction: source→target mặc định, target→source, bidirectional, hoặc Bind Once cho init-only.
• Runtime list operations: append, insert at index, remove, set property trên bất kỳ item nào. Đủ để drive reorder.
• Multi-runtime: cùng một .riv chạy trên Web (JS/React/React Native), iOS, Android, Flutter, Unity, Unreal, C++.

Công thức 6 bước

1. Tạo Profile view model: name: String, color: Color, score: Number.
2. Tạo Leaderboard view model: property players: List<Profile>.
3. Thiết kế một row artboard — bind text name vào name, nền vào color, label điểm vào score.
4. Trên Leaderboard artboard, add một List bind vào players, nest row artboard vừa tạo.
5. Bind thứ tự row theo score (hoặc một converter rank derive từ score), bọc qua một interpolation converter kiểu ease-out 250–350 ms. Đây là phần làm hàng tween mượt khi đổi vị trí.
6. Runtime — đẩy dữ liệu vào view model instance là xong:
   

   const rive = new Rive({
     src: 'leaderboard.riv',
     stateMachines: 'Main',
     autoplay: true,
   });
   
   const vm = rive.viewModelInstance;         // Leaderboard instance
   const players = vm.list('players');
   
   // mỗi lần backend gửi score mới:
   players.item(0).number('score').value = 1280;
   // list tự reorder, mỗi row tween tới slot mới

   Pattern y hệt tồn tại trong Swift / Kotlin / Dart / Unity SDK.

So với cách cũ

Khi nào nên dùng

• Game: post-match scoreboard, bảng xếp hạng mùa, top-10 tuần — đúng use case của file Game Stats & Insights trên marketplace Rive.
• Fitness / habit apps: đua step, streak, challenge nhóm.
• SaaS gamification: leaderboard sales, support-ticket, sprint points.
• Giáo dục: quiz thời gian thực, trivia lớp học.
• Fintech dashboard: top movers tự shuffle theo giá.
• Community: chính community.rive.app/leaderboard đang chạy pattern này.

Giới hạn & pricing

• Rive chỉ lo phần presentation. Source of truth cho score vẫn là backend của bạn — Rive không thay Redis, Firestore hay WebSocket server.
• Virtualization phải bật thủ công trong editor nếu list dài.
• Data Binding có sẵn trên mọi tier (Free / Pro / Team / Org) — pricing Rive không thay đổi vì feature này.

Bước tiếp theo

Roadmap Rive đang đi theo hướng làm runtime layer giàu hơn: batch updates, typed bindings trong TS/Swift/Kotlin SDK, và thêm loại converter mới. Nếu bạn đang build app có bất kỳ thứ gì cần ranked list tự reorder — scoreboard, lịch sử giao dịch, bảng chart top movers — đây là lúc tráng đổi từ reorder thủ công sang một .riv duy nhất.

Nguồn: Rive Blog — Lists, Images & Artboards, Rive Blog — Data Binding overview, Rive Docs, @rive_app tweet.