Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Well done!
You have completed Create AR Effects for TikTok with Effect House!
You have completed Create AR Effects for TikTok with Effect House!
Preview
Objects are the core of Effect House. In this video, we’ll place all of our Objects onto our filter. We’ll start with a basic static border, and then we’ll place objects that map to the position of the face!
Changes to EffectHouse
The "Look At" component is no longer included in the default Face Sticker object. To use it:
- Make sure the Image is selected
- Head over to the inspector panel, and then all the way down to "Add Component"
- Select 3D > Look At
- Enjoy!
Resources
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
Now, we'll start with
the most basic element,
0:00
that border of badges around the corners.
0:03
To do this,
we'll head on over here to hierarchy.
0:06
We'll click on this plus button
that says Add Object, and
0:09
then we'll scroll down here to 2D and
then select Screen Image.
0:14
Now objects are elements in effect
house that we add to our effect,
0:20
be it a still image,
a 3D model or makeup effects.
0:25
Anything that we add on to
our real time environment,
0:29
like our faces, is considered an object.
0:33
Now, this image placeholder here
is the default texture that effect
0:36
house applies to new images.
0:41
So let's change the texture
to our web dev border.
0:43
Make sure the image is selected,
which it is right now.
0:48
If it's not selected,
you can do this by clicking the new screen
0:51
image over here that appeared
in the hierarchy panel,
0:56
then head on over to
the inspector panel on the right.
1:00
Now, the first thing we'll do
is to rename this for clarity.
1:04
We're gonna call it border,
because that's what it is,
1:07
then we'll come down to the Image
section and change the texture.
1:11
So here on a texture,
we'll click the default texture.
1:16
When you click this,
1:20
a dialog box of our assets will pop
up in the middle of the screen.
1:22
Find and select border-web and click OK.
1:26
Once the effect reloads,
you'll see our new border,
1:32
and what a fantastic start to our effect.
1:36
Very simple, but
you've added your first object.
1:38
Got these guys up here,
and this guy down here.
1:41
Next, let's add Mike the frog.
1:46
Now Mike the frog was something
that had to track our head,
1:48
we wanted to put it right here.
1:51
So wouldn't be a 2D screen image because
obviously these guys don't move with
1:53
my head.
1:57
This calls for a different object.
1:58
Let's head on over to hierarchy.
2:00
Click the plus icon,
go to face effects, and
2:03
then come here to face sticker.
2:08
Now, as you can see,
we've got a new default texture and
2:11
it's following my face.
2:15
It's pretty cool.
2:17
Now let's change this to Mike.
2:18
Come over here and select the image
over here in the hierarchy panel,
2:22
and you can see that it's selected
because you've got these white
2:27
squares around the default texture.
2:31
So head on over to the inspector panel.
2:34
The first thing we'll do
is to rename this to Mike.
2:36
And then just like before, I'm going
to come down here to texture, click on
2:42
default texture, and that dialog box
will appear in the middle of the screen.
2:46
And then, we'll set it to Mike neutral,
and now we've got Mike.
2:51
My face.
2:57
Now, I'm gonna make this bit
a little bit bigger, so we can see.
2:59
Now, if we come over here to the scene
panel, we can see that Mike is selected.
3:04
And when we start moving him around,
even when we just start clicking on him,
3:08
you can see four blue dots on this face.
3:13
Now, these are parts of the face
that our face sticker object tracks,
3:16
our eyes, the nose and the mouth.
3:21
Now, we want Mike on the user's forehead,
so let's drag it up there.
3:23
What Effect House is doing now
is placing our image relative
3:29
to the other blue dots on the face.
3:34
So now,
we've got Mike on our forehead, but
3:37
you'll notice that the image is quite 2D.
3:39
When I turn to the side, the image sort of
stays and it gets a little smaller, but
3:42
it doesn't turn with me.
3:46
So to give it a little bit of dynamicness,
we're gonna make Mike face,
3:47
the 2D object, face kind of
direction that my face is facing.
3:53
So with Mike still selected,
we'll come over here to the inspector, and
3:58
we'll come all the way down to look at.
4:03
Under target, we're gonna change this.
4:05
And again, the dialog box will pop
up in the middle of the screen.
4:08
We're gonna change this to face
sticker and then press OK.
4:11
So now you can see, the Mike image skews a
little bit depending on where I'm looking.
4:17
So now Mike will face the same
direction that our face faces.
4:23
Now that we've got Mike,
4:29
let's add the badge that was
sort of behind Mike over here.
4:31
Now, this is the same sort of
face sticker object as Mike was.
4:35
So we can create a new face sticker, or
we can simply duplicate the Mike object.
4:39
So let's come over here
to this hierarchy panel.
4:45
Hover over mic, we'll right-click and
press Duplicate.
4:48
So with this mic brackets one selected,
4:53
we'll come on over here
to the Inspector panel.
4:56
We'll change this to batch.
5:00
And then coming down here,
we'll change the texture.
5:03
Of course,
we're not after mic neutral anymore.
5:06
We'll click on mike-neutral, and
5:08
again the dialog box will pop
up in the middle of the screen.
5:10
And we'll select, where are we?
5:13
badge-web.
5:15
Great!
5:19
We've got a web-dev badge over Mike's eye.
5:20
So of course,
this isn't quite the right size.
5:23
So, let's start resizing
it on our scene panel so
5:26
that it appears correctly
in our previous panel.
5:29
So let's go out just a little bit.
5:33
Now, what I want here is I want to
drag this bottom white square out,
5:36
and you can see it maintains
the aspect ratio, drag it out here, and
5:41
it will do the same with
the opposite corner.
5:46
And it should just about hit the top and
not quite move it up to the top.
5:49
So the way these assets were designed,
the middle of each, badge image, this
5:54
white sort of diamond there should sit
just on top of Mike's nose or nostrils.
6:01
But if yours looks
a little bit different and
6:07
that's okay because all our
camera angles will be different.
6:09
If yours looks a little bit different,
feel free to play around with it, but
6:12
just keep that center dot on something
else that is center, such as Mike's face.
6:16
Now as you can also see, this badge
should be sitting behind the bike.
6:21
But it's kinda sitting in
front of Mike right now.
6:25
So all we have to do there is we'll come
over here to the hierarchy panel again,
6:27
we'll have to drag the badge above Mike,
so the badges beneath Mike.
6:32
[LAUGH] Now, if you have a look at the 3D,
the scene panel,
6:36
you'll see that nothing's changed.
6:40
The badge is still on top of Mike.
6:43
But if we have a look
over here at the preview,
6:44
you see that the badges now are sitting
behind Mike, which is what we want.
6:47
Now, just like that, we've placed all of
the objects that we need on to our effect.
6:52
We've got the badges border here,
we got Mike,
6:57
we've also got Mike's badge.
7:02
Looking pretty fun already,
but we can certainly do more.
7:05
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up