Learn Spark AR Studio

Everything you need to know to create an interactive augmented reality experience.

Clear
Back

Sample Effect: Holiday Photo

Learn to create the Holiday Photo effect!

This effect is one of our featured templates. You can find it by opening Spark AR Studio and selecting Samples, or by downloading the sample content. You can adapt any of the assets in this effect in your own projects.



You'll learn about:

  1. Adding 2D objects, textures and materials - to create the photograph frame.
  2. Using dynamic text, to customize the effect.
  3. Adding simple interactivity and logic in the Patch Editor, to change the color of the photograph.

You can also find out what's in the finished effect.

If you want to build this effect yourself, open the unfinished effect in the sample content folder. We've already imported the assets you need, to help you get started quickly. We've also removed the directional and ambient lighting from the scene. This is a good idea when you're creating effects with 2D objects, as they don't need lighting to add depth to objects.

Creating the Photo Frame

This project uses two rectangles and a 2D Text object to create the frame. One rectangle contains the custom texture and the other contains the colored overlay.

Adding the 2D objects

To get started, add the objects to the scene. We're going to add them all at the same time and then assign them to layers so you can clearly see what you're building.

Insert:

  1. A canvas. You'll use this to group the other objects, so you can transform them all at the same time.
  2. 2 rectangles, both as children of the canvas.
  3. A 2D text object, again as a child of the canvas.

Your project should look like this:



It's worth renaming the objects to help you keep track. Rename:

  • The first rectangle rect_frame
  • The second rectangle rect_overlay.
  • The text object dynamic_text.

Layers

You'll need 3 layers in this effect, to control the order objects render in.

There will already be 1 layer in the project, named layer0. In the layers tab, create 2 more.

To keep track of layers, it's a good idea to rename them. We've called:

  1. The first layer text_layer.
  2. The second layer frame_layer.
  3. The third layer color_overlay_layer.

In the Inspector, change the Render Mode for 2 of the layers. Change:

  1. text_layer to Overlaid.
  2. color_overlay_layer to Transparent.

Back in the Scene tab, assign:

  1. The text to text_layer.
  2. The canvas and rect_frame to frame_layer.

Editing the canvas

First edit the canvas. Because the rectangles are children of the canvas, they will take on any changes made to it.

In the Inspector panel, change the Mode from Screen Space to World Space.

Because the canvas is in World Space it will no longer scale with the screen of the device. This means we can change its Transformations in the Inspector panel. Change:

  1. The Position to -1.3 on the X axis - the canvas will move to the side slightly.
  2. The Scale to 0.05 for the X, Y and Z values - the canvas will get slightly smaller.
  3. The Rotation to 5 for the X, Y and Z values - the canvas will tilt slightly.

We chose these values by adjusting them until we found the best effect. Using the manipulators is a good way to experiment with transforming objects.

Editing the rectangles

Next edit the rectangles:

  1. Select the rectangles.
  2. In the Inspector panel, set Flexibility for both height and width, so they scale proportionately with screen of the device.

The rectangles are too small. To adjust this:

  1. Go to Size in the Inspector panel.
  2. Set Width to 375 and Height to 617.

You'll now see a large rectangle in the scene:

At the moment, one rectangle is completely covering the other. To adjust this change the Position of:

  1. rect_frame to -3.2 on the X axis and 50 on the Y axis.
  2. rect_overlay to 36 on the X axis and 136 on the Y axis.

Change the Scale of:

  1. rect_frame to 1.2 on the X axis and 0.9 on the Y axis.
  2. rect_overlay to 1 on the X axis and 0.7 on the Y axis.

Creating materials

Create a material for each rectangle, by clicking the + next to Material in the Inspector panel.

Rename:

  1. The material you've made for rect_frame, frame_mat.
  2. The material you've made for rect_overlay, overlay_mat.

Editing the materials

The Shader Type should be Flat for both materials, because we don't need them to omit or respond to light. It's more performant than a standard shader, so it helps keep the size of the effect down.

For frame_mat:

  1. Go to Diffuse. Next to Texture, apply the texture frame_tex.
  2. Check the box for Alpha Test and adjust the Cutoff slider to make some semi-transparent parts of the texture transparent. We set it to 50%.


For overlay_mat:

  1. Under Render Options, Set Opacity to 30%, to create the semi-transparent effect.

Overlay_mat changes color when the screen is tapped. You'll use the Patch Editor to do this. Start by creating clicking the small circle next to Texture. This will make a patch representing the Diffuse Texture property of the material. We'll add the rest of the patches later.

At this point, your project should look like this:

Adding the Dynamic Text

The text in this effect is a dynamic text object. Dynamic text takes data from a user's device, like their location or the time, and represents it as text.

To add the dynamic text:

  1. Select dynamic_text in the Scene tab.
  2. In the Inspector panel, delete the text in the Text Box.
  3. Next to Dynamic Text, click Insert.
  4. Insert 2 dynamic text tokens from the menu - Current City and Date (Medium).

There are lots of others to choose from when creating your own effects.

Next change:

  1. Font to Facebook Script Light.
  2. Font Size to 40.
  3. Line Spacing to 3000.
  4. Position to 38 on the X axis and -172 on the Y axis.

You'll see the text is in the middle of the frame. Click Fill Parent to make the text object the same width as the canvas.

Next to Pinning, pin the text to the top, bottom and both sides of the canvas. Pinning the text will mean it always maintains the same distance from the canvas's border.

Adding Interactivity and Logic with the Patch Editor

We used the Patch Editor to build a really simple graph, with 4 patches:



Creating the patches

You've already created the frame_color_mat patch. Create the other 3 patches by right-clicking anywhere in the Patch Editor, and choosing them from the menu. Select:

  1. A Screen Tap patch, to detect when the screen is tapped - you could use another interaction patch on the menu.
  2. A Counter.
  3. An Option Picker.

Adding the colors

You'll add the colors to the Option Picker To do this, you'll need to change the Type to Color:

  1. Right-click on the Option Picker.
  2. Select Type, then select Color.

To add the colors, click the input circles in the Option Picker. Choose a color for each one.

In the Counter patch, set the Maximum Count to 5, because we want to count through 5 different colors. The counter will then reset to zero.

Connecting the patches

Connect the Tap output in the Screen Tap patch to the Increase input in the Counter patch.

You can test the effect in the Simulator, by clicking the gear and selecting Simulate Touch:



You've now completed the holiday photo effect!

In the Finished Effect

Find out what's happening in the finished effect.

The Scene tab



There are 3 objects under a canvas in the Scene tab - 2 rectangles and a text object. Each rectangle has a material applied to it.

Materials



frame_mat - this material has a custom texture, frame_tex applied to it to create the appearance of the outside of the photograph. We applied it to the first rectangle in the scene, rect_frame.

frame_color_mat - this material creates the appearance of the colored overlay that covers the inside of the frame. We used options in Spark AR Studio to define its color. It's applied to the second rectangle, rect_overlay.

Textures



frame_tex is the custom texture we've applied to the frame material.

Join the Spark AR Creator's community

Find inspiration, see examples, get support, and share your work with a network of creators.

Join Community

Frequently asked questions

Have a specific question? Maybe it's been answered.


Read FAQs