Spark AR Drag 2D: Dragging Objects with Pan Gesture - Free Download

How to drag 2D objects in Spark AR Studio. With a simple formula, we can drag objects using the pan gesture. This project has been updated since publishing this video. This is because the 2D coordinate system has changed since then. The updated template and Drag 2D patch can be found at the following address.

Download Spark AR Studio Example Project: https://newcolor.studio/product/drag-...

Updated 2D Drag Video:    • WHY 2D BROKE!? Drag 2D Update! The ne...  

Full Patch Tutorial Available Here: https://newcolor.studio/spark-ar-tuto...

How to drag 2D objects on a canvas in Spark AR Studio.

Translating screen coordinates to Cartesian coordinates.

Hello everyone. Today, we're going to go over a problem that I ran into when I was trying to drag something on the screen and I made a patch that helps with dragging objects. I can't wait to show you. So, let me show you the problem first. We have this poo right here.

And it's on a plane. Now this plane exists and world coordinates. So if you look over. In the transforms box, you'll see a value negative 0.15 and that's fine. That's okay, that's just the world. But when we look at the pan object, which we're supposed to use removing 2D objects or objects panning things.

I ran into this issue now house controlling a flat slider basically a flat image and one of the problems. I ran into is when you do the pan gesture here the values that you're getting out of the pan are screen coordinates. So basically there's there's Cartesian coordinates and screen coordinates screen coordinates start in the upper left hand corner up here.

Cartesian coordinates are basically aligned down the middle straight through the center there where the center is middle is zero zero. That's Cartesian and then we have world coordinates so it's a giant mess. Now for making 2D objects and transforming them and want to drag them around we're gonna want to use a rectangle.

Download Spark AR Studio Example Project: https://newcolor.studio/product/drag-...

In a canvas. So, let's do that. We'll get rid of this plane we'll believe and be right here. Right on top of my head and let's add a canvas. I'll add a rectangle that I'll add a canvas for us. So we have a rectangle same thing as here, we can add our materials to it, let our pre material and there we go.

Let's check and make sure that we don't. It's nice and clear. There we go. All right. So, here's our rectangle. Now when we look at the position here. And we're dragging in the XY you'll see the deaf and values. Now, we're doing things.

In Cartesian space. But we still have a problem. These drag gestures are happening in. Screen coordinates. So we need to run a little math to convert the screen coordinates to Cartesian and I made a handy dandy patch called 2D canvas drag. To solve that problem. So if we take the position here.

We have 2d canvas drag. You add the asset. Plug it in. All right. So it took we'll get rid of this other pile of poop. Goodbye. You can set the default position and oh, there we go. We're dragging. So we successfully translated. The screen coordinates to. Cartesian. I hope it's useful.

It's $2 otherwise you can look up the formula on stack exchange for converting converting screen to Cartesian vice versa. Thanks for watching.

Download Spark AR Studio Example Project: https://newcolor.studio/product/drag-...