Drag Object on Canvas Spark AR Studio

Drag 2D Object: Spark AR Tutorial

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.


Scene Setup

Drag 2D Object Spark AR Studio
Add a rectangle as child (below) the Canvas object.
  1. 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.
  2. 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.
  3. 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.
  4. 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.

Drag 2D Spark AR Template Patch Asset
Drag 2D Spark AR Template Patch Asset

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.

Advanced Features

  • 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.

Happy dragging!

If this patch was helpful, please leave a comment or check out other useful patches. Thanks.


You may also like...

Popular Posts

10 Comments

  1. I enjoy this website – its so usefull and helpfull.

    1. Newcolor Studio says:

      Thanks! If there’s a particular topic you’d like covered, just send me a message.

  2. I truly appreciate this blog article.Much thanks again. Really Cool.

    1. Newcolor Studio says:

      Thanks! I’m glad it was helpful.

  3. What’s up it’s me Fiona, I am also visiting this web site regularly, this web page is truly nice and the users are genuinely sharing good thoughts.

    1. Newcolor Studio says:

      Thanks, Fiona. Glad it’s helping.

  4. Merely had to state I’m ecstatic that i happened in your page!

  5. https://waterfallmagazine.com
    I love what you guys are up too. This type of clever
    work and exposure! Keep up the good works guys I’ve
    you guys to blogroll.

  6. Hello.This article was really motivating, especially since I was browsing for thoughts on this issue last Sunday.

  7. Its like you read my mind! You appear to know so much about this, like you wrote the book in it or something. I think that you can do with a few pics to drive the message home a little bit, but instead of that, this is magnificent blog. A fantastic read. I will certainly be back.

Leave a Reply

Your email address will not be published. Required fields are marked *