How to drag 2D Object in Spark AR Studio
This is a patch tutorial to learn how to drag 2D object Spark AR Studio using the Screen Pan Interaction. Screen Pan can tell us the 2D position of our moving touch location. We could use another touch Interaction Patch, but since we want to drag, Screen Pan can help.
- Add a Canvas object to the Scene panel on the left. The Canvas object is a container for laying out 2D objects and making them responsive to the size of the screen.
- Add a Rectangle to the scene as a child (below) the Canvas. This is going to be our drag object. I named it DragObject.
- Hot Tip: adding a Rectangle before the Canvas will automatically create a Canvas.
- Add the DragObject Position property to the Patch Editor by selecting the little arrow next to it’s Position in the Properties panel on the right.
- Device: drag it from the Scene panel on the left side into the Patch Editor to access Device properties like screen size. This will give the Patch Editor access to device specific information.
The Drag 2D Object Patch
Here is what the completed drag 2D object patch looks like.
Plug it in! The essential inputs are:
- Screen Size
- Screen Scale
- Make sure all gestures are enabled (Drag, Scale, Rotate)
- Enter the drag Object Width, and Object Height. This will drag your object from center.
- Color Sample Texture: the texture to sample color from (often cameraTexture0–select Camera and + Texture Extraction from Properties Panel.
- Color Display Texture: the texture on which to display the color, in this case it is a star. The star texture will show the current sampled color.
- Color Sample Radius: increasing this value will result in smoother steps between color changes, but with less saturation. Smaller values will result in sharp changes in color with colors retaining their value closer to the pixel value sampled.
If this patch was helpful, please leave a comment or check out other useful patches. Thanks.