Hi! I'm Mayte CG, Rive Ambassador and designer. In this new Data Binding series entry, we’ll build another bite-sized project to keep learning by doing.
Each project focuses on a specific technique you can build, remix, or expand, with files to follow along and compare.
New to Data Binding? Start with the core concepts.
Missed the last one? Catch up.
Let’s bind some data together!
What you’ll build
We’ll explore a classic game mechanic: distance-based collision detection. In this demo, you’ll set up two circles: one draggable, one moving. If they collide, the user circle snaps back to its original position.
Use cases
A handy starting point that’s easy to reuse in mini-games, arcade-style interactions, or any project that needs basic collision logic.
Key Data Binding features
Number properties | Boolean | Property groups | Formula converter | Calculate converter
Set up the Artboard
Create a single artboard with these settings:
Size: W: 1000 H: 1000
Background: #000000
You’ll work with two elements:
Circle A: the moving “enemy”.
Circle B: draggable and user-controlled.
We’ll bind sizes later, so exact dimensions aren’t critical.
For dragging, Circle B needs two listeners: one for pointer down, one for pointer up.
Optionally, add a full-artboard listener to detect when the cursor exits the game area. To keep things simple, we’re skipping Data Binding for that in this demo.
Here’s the asset hierarchy:
Grab the base file
Use this file to follow along. It includes the basic design (no data or logic yet).
Create View Models & Converters
Let’s wire up the Data Binding logic.
Start by creating a View Model called VMCirclesCollision and connect it to the artboard.
In the Data panel, add these properties and converters:
As shown above, we’ll also set up a few converters and formulas to drive the logic:
The core math is simple: measure the distance between the circles and compare it to the sum of their radii.
Distance ≥ radii sum → no collision
Distance ≤ radii sum → circles collide
Property Group
We’ll also need a Property Group with two properties:
Add functionality with State Machines
Data structure finished. Let’s jump to the interaction logic:
Timelines
We’ll define five timelines to control the circles:
Listeners
Let’s add four listeners and set them like this:
State Machines
The setup uses three layers in the State Machine. The video below shows how to wire them up:
Work done! Hit Play and watch Rive track the distance in real time. On collision, Circle B snaps back; otherwise, you keep dragging.
Inspect & remix
Download the final file to compare, explore, or remix.
Ready to take it further?
These mini-projects are launchpads — build on them, make them yours, and keep learning by doing. Try:
Add a goal zone the player must reach
Count collisions as lives or score
Let users pick a difficulty level before starting
Got questions? Check the documentation, explore the 101 Data Binding tutorials, or reach out to the Community.
Hi! I'm Mayte CG, Rive Ambassador and designer. In this new Data Binding series entry, we’ll build another bite-sized project to keep learning by doing.
Each project focuses on a specific technique you can build, remix, or expand, with files to follow along and compare.
New to Data Binding? Start with the core concepts.
Missed the last one? Catch up.
Let’s bind some data together!
What you’ll build
We’ll explore a classic game mechanic: distance-based collision detection. In this demo, you’ll set up two circles: one draggable, one moving. If they collide, the user circle snaps back to its original position.
Use cases
A handy starting point that’s easy to reuse in mini-games, arcade-style interactions, or any project that needs basic collision logic.
Key Data Binding features
Number properties | Boolean | Property groups | Formula converter | Calculate converter
Set up the Artboard
Create a single artboard with these settings:
Size: W: 1000 H: 1000
Background: #000000
You’ll work with two elements:
Circle A: the moving “enemy”.
Circle B: draggable and user-controlled.
We’ll bind sizes later, so exact dimensions aren’t critical.
For dragging, Circle B needs two listeners: one for pointer down, one for pointer up.
Optionally, add a full-artboard listener to detect when the cursor exits the game area. To keep things simple, we’re skipping Data Binding for that in this demo.
Here’s the asset hierarchy:
Grab the base file
Use this file to follow along. It includes the basic design (no data or logic yet).
Create View Models & Converters
Let’s wire up the Data Binding logic.
Start by creating a View Model called VMCirclesCollision and connect it to the artboard.
In the Data panel, add these properties and converters:
As shown above, we’ll also set up a few converters and formulas to drive the logic:
The core math is simple: measure the distance between the circles and compare it to the sum of their radii.
Distance ≥ radii sum → no collision
Distance ≤ radii sum → circles collide
Property Group
We’ll also need a Property Group with two properties:
Add functionality with State Machines
Data structure finished. Let’s jump to the interaction logic:
Timelines
We’ll define five timelines to control the circles:
Listeners
Let’s add four listeners and set them like this:
State Machines
The setup uses three layers in the State Machine. The video below shows how to wire them up:
Work done! Hit Play and watch Rive track the distance in real time. On collision, Circle B snaps back; otherwise, you keep dragging.
Inspect & remix
Download the final file to compare, explore, or remix.
Ready to take it further?
These mini-projects are launchpads — build on them, make them yours, and keep learning by doing. Try:
Add a goal zone the player must reach
Count collisions as lives or score
Let users pick a difficulty level before starting
Got questions? Check the documentation, explore the 101 Data Binding tutorials, or reach out to the Community.
Hi! I'm Mayte CG, Rive Ambassador and designer. In this new Data Binding series entry, we’ll build another bite-sized project to keep learning by doing.
Each project focuses on a specific technique you can build, remix, or expand, with files to follow along and compare.
New to Data Binding? Start with the core concepts.
Missed the last one? Catch up.
Let’s bind some data together!
What you’ll build
We’ll explore a classic game mechanic: distance-based collision detection. In this demo, you’ll set up two circles: one draggable, one moving. If they collide, the user circle snaps back to its original position.
Use cases
A handy starting point that’s easy to reuse in mini-games, arcade-style interactions, or any project that needs basic collision logic.
Key Data Binding features
Number properties | Boolean | Property groups | Formula converter | Calculate converter
Set up the Artboard
Create a single artboard with these settings:
Size: W: 1000 H: 1000
Background: #000000
You’ll work with two elements:
Circle A: the moving “enemy”.
Circle B: draggable and user-controlled.
We’ll bind sizes later, so exact dimensions aren’t critical.
For dragging, Circle B needs two listeners: one for pointer down, one for pointer up.
Optionally, add a full-artboard listener to detect when the cursor exits the game area. To keep things simple, we’re skipping Data Binding for that in this demo.
Here’s the asset hierarchy:
Grab the base file
Use this file to follow along. It includes the basic design (no data or logic yet).
Create View Models & Converters
Let’s wire up the Data Binding logic.
Start by creating a View Model called VMCirclesCollision and connect it to the artboard.
In the Data panel, add these properties and converters:
As shown above, we’ll also set up a few converters and formulas to drive the logic:
The core math is simple: measure the distance between the circles and compare it to the sum of their radii.
Distance ≥ radii sum → no collision
Distance ≤ radii sum → circles collide
Property Group
We’ll also need a Property Group with two properties:
Add functionality with State Machines
Data structure finished. Let’s jump to the interaction logic:
Timelines
We’ll define five timelines to control the circles:
Listeners
Let’s add four listeners and set them like this:
State Machines
The setup uses three layers in the State Machine. The video below shows how to wire them up:
Work done! Hit Play and watch Rive track the distance in real time. On collision, Circle B snaps back; otherwise, you keep dragging.
Inspect & remix
Download the final file to compare, explore, or remix.
Ready to take it further?
These mini-projects are launchpads — build on them, make them yours, and keep learning by doing. Try:
Add a goal zone the player must reach
Count collisions as lives or score
Let users pick a difficulty level before starting
Got questions? Check the documentation, explore the 101 Data Binding tutorials, or reach out to the Community.
Join our newsletter
Get all the latest Rive news delivered to your inbox.