WEBVTT

1
00:00:27.275 --> 00:00:29.325
AR Candidate Image is

2
00:00:29.325 --> 00:00:32.275
An image database dedicated for AR

3
00:00:32.275 --> 00:00:35.525
We will try adding AR Candidate Image as well as

4
00:00:35.525 --> 00:00:38.515
Implementing real-life image detection through phone camera

5
00:00:38.515 --> 00:00:42.215
Also we will make 3D object on top of the image

6
00:00:42.215 --> 00:00:45.334
That corresponds to the detected image

7
00:00:45.334 --> 00:00:47.684
Also, adding onto single images

8
00:00:47.684 --> 00:00:50.884
When various images in the image database

9
00:00:50.884 --> 00:00:52.720
Are all shown on one screen

10
00:00:52.720 --> 00:00:56.320
We will also make objects spawn which work for

11
00:00:56.320 --> 00:00:57.920
Each individual image

12
00:00:58.440 --> 00:01:01.590
AR Candidate Image and Real-Life Image Detection

13
00:01:02.580 --> 00:01:04.000
Hello

14
00:01:04.000 --> 00:01:07.250
Today, continuing from the last class

15
00:01:07.250 --> 00:01:10.040
We will work on marker detection

16
00:01:10.040 --> 00:01:12.120
Here, what is a marker?

17
00:01:12.120 --> 00:01:16.480
When we add images for detection

18
00:01:16.480 --> 00:01:20.239
And add these candidate images to the image database

19
00:01:20.239 --> 00:01:23.439
When these images on that image database

20
00:01:23.439 --> 00:01:25.320
Are filmed with a camera

21
00:01:25.320 --> 00:01:29.360
The 3D objects that correspond to that detected image

22
00:01:29.360 --> 00:01:32.410
Will be displayed on top of the image

23
00:01:32.410 --> 00:01:34.440
This is what we call Marker Recognition/Detection Method

24
00:01:34.440 --> 00:01:36.320
So, before we practice on how it works

25
00:01:36.320 --> 00:01:38.120
All the works we did last class

26
00:01:38.120 --> 00:01:41.080
Since there are many nodes for that

27
00:01:41.080 --> 00:01:44.959
Let's re-organize them into functions

28
00:01:44.959 --> 00:01:47.800
First, go to Content Drawer

29
00:01:47.800 --> 00:01:51.400
Double click on Player Pawn Blueprint

30
00:01:51.400 --> 00:01:54.480
Open its settings window

31
00:01:54.480 --> 00:01:56.800
On its Event Graph Node

32
00:01:56.800 --> 00:02:01.519
When Face Detection is selected out of Switch Detection Type

33
00:02:01.519 --> 00:02:03.069
The part after that

34
00:02:03.069 --> 00:02:07.639
Select all the nodes after that

35
00:02:07.639 --> 00:02:11.800
If you missed anything, you can press Ctrl and click

36
00:02:11.800 --> 00:02:14.960
To add to or remove from the group

37
00:02:14.960 --> 00:02:17.479
If you selected everything

38
00:02:17.479 --> 00:02:23.080
Ctrl+X to cut

39
00:02:23.080 --> 00:02:26.679
And to the left, at Functions tab

40
00:02:26.679 --> 00:02:30.240
Click on the plus button to make a function

41
00:02:30.240 --> 00:02:37.039
Let's call this function Spawn Face Actor

42
00:02:37.039 --> 00:02:41.520
This new function is called Spawn Face Actor

43
00:02:41.520 --> 00:02:45.960
At the beginning of Spawn Face Actor, Ctrl+V

44
00:02:45.960 --> 00:02:48.310
To paste all the nodes

45
00:02:48.310 --> 00:02:50.759
That we cut before

46
00:02:50.759 --> 00:02:55.639
And its Exec Pin, connect it to

47
00:02:55.639 --> 00:02:57.839
Get All AR Geometries By Class node

48
00:02:57.839 --> 00:03:00.080
Then this function will run at once

49
00:03:00.080 --> 00:03:02.600
Which will add the mask image on top of the face

50
00:03:02.600 --> 00:03:06.000
Last time, we worked on putting the image

51
00:03:06.000 --> 00:03:08.759
On Nose Tip or the tip of the nose

52
00:03:08.759 --> 00:03:13.320
That's how you create the function

53
00:03:13.320 --> 00:03:16.000
If you are done, compile first

54
00:03:16.000 --> 00:03:19.800
Back to the Event Graph

55
00:03:21.080 --> 00:03:25.559
Get Spawn Face Actor Function Node

56
00:03:25.559 --> 00:03:30.240
And connect Face Detection Type

57
00:03:31.479 --> 00:03:33.759
That's how we can make things more succinct

58
00:03:33.759 --> 00:03:37.919
And categorize everything

59
00:03:37.919 --> 00:03:40.440
We worked on this part as well last class

60
00:03:40.440 --> 00:03:42.720
Let's keep it as it is for now

61
00:03:42.720 --> 00:03:45.670
For Begin Play part, we don't have

62
00:03:45.670 --> 00:03:49.039
Much to change as of now

63
00:03:50.360 --> 00:03:54.000
So, let's create an AR Session

64
00:03:54.000 --> 00:03:57.559
To create an AR Session

65
00:03:58.320 --> 00:04:02.520
Go to Data Assets folder

66
00:04:02.520 --> 00:04:08.000
And we will create another AR Session Config like last time

67
00:04:08.000 --> 00:04:10.080
Right click

68
00:04:10.080 --> 00:04:13.180
Go to Miscellaneous

69
00:04:13.180 --> 00:04:16.559
And select Data Asset

70
00:04:16.559 --> 00:04:19.799
And same thing as before, AR Session Config

71
00:04:19.799 --> 00:04:23.319
Select AR Session Config

72
00:04:26.159 --> 00:04:36.159
Name is, Hunet AR Session Config_Image

73
00:04:36.159 --> 00:04:39.359
Let's call it that

74
00:04:39.359 --> 00:04:45.359
So this the Session Config for image detection

75
00:04:45.359 --> 00:04:48.079
Double click to open its Details

76
00:04:48.079 --> 00:04:52.119
This time, we need the back camera

77
00:04:52.119 --> 00:04:56.519
So Session Type, World

78
00:04:56.519 --> 00:04:58.359
It will be filming the World

79
00:04:58.359 --> 00:05:01.839
I mentioned that the back camera is what films the World

80
00:05:01.839 --> 00:05:04.160
So that's the back camera

81
00:05:04.160 --> 00:05:07.480
On top, at AR Settings, at Image Tracking

82
00:05:07.480 --> 00:05:10.720
At Image Tracking tab

83
00:05:10.720 --> 00:05:13.279
It says Candidate Images

84
00:05:13.279 --> 00:05:15.640
And we are to add some array here

85
00:05:15.640 --> 00:05:17.279
So this is the candidate image

86
00:05:17.279 --> 00:05:19.600
We need to add the candidate images here

87
00:05:19.600 --> 00:05:22.079
But since we don't have any image now

88
00:05:22.079 --> 00:05:24.858
Let's start with creating the image

89
00:05:31.079 --> 00:05:34.640
We have the images Cat and SCar

90
00:05:34.640 --> 00:05:36.320
Of course, you can use

91
00:05:36.320 --> 00:05:38.480
Any image you'd like

92
00:05:38.480 --> 00:05:40.880
But for now, let me demonstrate

93
00:05:40.880 --> 00:05:42.640
Using the images I have

94
00:05:42.640 --> 00:05:45.359
Using Cat and SCar images

95
00:05:45.359 --> 00:05:48.519
Let's Ctrl+X to cut

96
00:05:48.519 --> 00:05:54.880
When we worked on Project Hunet AR Project

97
00:05:54.880 --> 00:06:00.679
We made a folder at Content called Textures

98
00:06:00.679 --> 00:06:02.760
At this Textures folder

99
00:06:02.760 --> 00:06:06.260
Let's Ctrl+V to paste

100
00:06:08.720 --> 00:06:10.239
It says 'import' here

101
00:06:10.239 --> 00:06:12.160
So click on 'Import'

102
00:06:12.160 --> 00:06:14.440
And that will import the images

103
00:06:14.519 --> 00:06:18.959
Let's close this section for now

104
00:06:18.959 --> 00:06:21.480
And if you go to Textures folder

105
00:06:21.480 --> 00:06:23.679
We see the images we had

106
00:06:23.679 --> 00:06:26.640
Cat and SCar

107
00:06:26.640 --> 00:06:29.160
The background is filled in as white

108
00:06:29.160 --> 00:06:32.279
Block white for now

109
00:06:32.279 --> 00:06:36.760
And the image we want is in there

110
00:06:36.760 --> 00:06:41.959
This image size is 1024x1024

111
00:06:41.959 --> 00:06:43.640
Same for this as well

112
00:06:43.640 --> 00:06:47.440
1024x1024, so this is a square

113
00:06:47.440 --> 00:06:51.000
These images are simple image files

114
00:06:51.000 --> 00:06:54.519
Let's add these simple images files as

115
00:06:54.519 --> 00:06:57.640
Candidate images for AR detection

116
00:06:57.640 --> 00:07:00.320
Go to Data Assets folder

117
00:07:00.320 --> 00:07:02.119
Right click

118
00:07:02.119 --> 00:07:08.160
At Miscellaneous, click on Data Assets once more

119
00:07:08.160 --> 00:07:12.079
We will create the candidate image files now

120
00:07:12.079 --> 00:07:15.880
Here, 'AR Candidate Image'

121
00:07:15.880 --> 00:07:20.920
Click on 'AR Candidate Image'

122
00:07:20.920 --> 00:07:23.600
And click on Select

123
00:07:23.600 --> 00:07:25.200
For this first image

124
00:07:25.200 --> 00:07:32.040
Let's name it AR Image_Cat

125
00:07:32.040 --> 00:07:35.600
AR Image Cat

126
00:07:35.600 --> 00:07:37.640
Double click to open

127
00:07:37.640 --> 00:07:39.440
Candidate Texture

128
00:07:39.440 --> 00:07:41.519
It says Candidate Texture

129
00:07:41.519 --> 00:07:44.760
So it says add candidate texture

130
00:07:44.760 --> 00:07:47.959
Here, we will be adding

131
00:07:47.959 --> 00:07:53.480
The image we imported, Cat, as the candidate image

132
00:07:53.480 --> 00:07:55.760
And then, Friendly Name

133
00:07:55.760 --> 00:07:58.519
Meaning, we can add some sort of a nickname

134
00:07:58.519 --> 00:08:00.160
To this image

135
00:08:00.160 --> 00:08:02.760
I will call it Hunet Cat

136
00:08:02.760 --> 00:08:06.279
That will be its nickname

137
00:08:06.279 --> 00:08:09.559
And it says Width and Height

138
00:08:09.559 --> 00:08:11.559
They literally mean width

139
00:08:11.559 --> 00:08:14.279
And height of the image

140
00:08:14.279 --> 00:08:18.200
When this image is seen in real life

141
00:08:18.200 --> 00:08:20.959
It could be a printed image

142
00:08:20.959 --> 00:08:23.959
Or an image on a monitor screen

143
00:08:23.959 --> 00:08:26.839
Whatever the means, when this is displayed on an actual screen

144
00:08:26.839 --> 00:08:28.880
This will be its actual size

145
00:08:28.880 --> 00:08:32.179
If we are to make it into a poster, for example

146
00:08:32.179 --> 00:08:34.840
Or into a sticker

147
00:08:34.840 --> 00:08:39.159
Sticker, poster, or on a monitor screen

148
00:08:39.159 --> 00:08:41.640
Then, the actual image size

149
00:08:41.640 --> 00:08:44.679
Is to be put in here in centimeter

150
00:08:44.679 --> 00:08:48.440
So that's how it detects this image

151
00:08:48.440 --> 00:08:50.919
In regards to that size

152
00:08:50.919 --> 00:08:52.719
It doesn't have to be a perfect measurement

153
00:08:52.719 --> 00:08:55.799
It just needs to be around the right size

154
00:08:55.799 --> 00:08:57.880
For me, let's say 20cm

155
00:08:57.880 --> 00:09:00.479
So 20cm width, 20cm height

156
00:09:00.479 --> 00:09:01.799
In fact, once you add the width value

157
00:09:01.799 --> 00:09:04.320
Its height will be automatically scaled

158
00:09:04.320 --> 00:09:09.280
Based on the resolution

159
00:09:09.280 --> 00:09:12.000
So now that we have the image

160
00:09:12.000 --> 00:09:15.719
Let's save

161
00:09:15.719 --> 00:09:18.479
And close the window

162
00:09:18.479 --> 00:09:20.400
Let's come back

163
00:09:20.400 --> 00:09:21.840
Go to Data Assets

164
00:09:21.840 --> 00:09:23.919
And something we stopped making

165
00:09:23.919 --> 00:09:30.679
Hunet AR Session Config, let's open its image file

166
00:09:30.679 --> 00:09:33.039
And on top, Candidate Image

167
00:09:33.039 --> 00:09:37.000
Let's add an array of the candidate image

168
00:09:37.000 --> 00:09:39.239
So there, that image

169
00:09:39.239 --> 00:09:40.960
AR Image of Cat

170
00:09:40.960 --> 00:09:43.039
Our candidate image file

171
00:09:43.039 --> 00:09:46.640
Let's add it here

172
00:09:46.640 --> 00:09:52.119
Below says Max Num Simultaneous Images Tracked

173
00:09:52.119 --> 00:09:55.039
Which is the maximum number of

174
00:09:55.039 --> 00:09:57.320
Images to be detected simultaneoulsy

175
00:09:57.320 --> 00:09:59.880
I guess five is a good number

176
00:09:59.880 --> 00:10:04.000
To start with here

177
00:10:04.000 --> 00:10:07.039
Let's save here

178
00:10:07.039 --> 00:10:10.919
And close the window

179
00:10:10.919 --> 00:10:14.840
So, at Hunet Player Pawn's Event Graph

180
00:10:14.840 --> 00:10:16.919
When it first begins

181
00:10:16.919 --> 00:10:19.000
At BeginPlay

182
00:10:19.000 --> 00:10:22.880
If Detection Type is Image Detecton

183
00:10:22.880 --> 00:10:26.640
It starts AR Session

184
00:10:26.640 --> 00:10:28.479
And of Start AR Session

185
00:10:28.479 --> 00:10:29.679
Our session here is

186
00:10:29.679 --> 00:10:32.840
The Image Session that we just made

187
00:10:32.840 --> 00:10:36.000
Hunet AR Session Config, its image session

188
00:10:36.000 --> 00:10:38.440
That's what it runs here

189
00:10:38.440 --> 00:10:42.799
And then now at Tick

190
00:10:42.799 --> 00:10:45.599
It's now set as Image Detection Type

191
00:10:45.599 --> 00:10:47.599
So the value of the variable ECurrent Detection

192
00:10:47.599 --> 00:10:50.080
If that is set as Image Detection

193
00:10:50.080 --> 00:10:52.239
Here, first of all

194
00:10:52.239 --> 00:10:54.359
Let's try detecting as image

195
00:10:54.359 --> 00:10:56.960
So as what we've been working on

196
00:10:56.960 --> 00:11:03.039
Get All AR Geometrics By Class Node

197
00:11:03.039 --> 00:11:06.960
Let's create that

198
00:11:06.960 --> 00:11:09.359
At Get All AR Geometrics By Class

199
00:11:09.359 --> 00:11:12.280
It will detect in the class type of

200
00:11:12.280 --> 00:11:15.039
For us, ARTracked Image

201
00:11:15.039 --> 00:11:17.080
ARTracked Image

202
00:11:17.080 --> 00:11:23.000
This will detect this image like so

203
00:11:25.280 --> 00:11:27.599
Here, the returning value is

204
00:11:27.599 --> 00:11:29.479
The detected images

205
00:11:29.479 --> 00:11:32.039
The array of these detected images

206
00:11:32.039 --> 00:11:33.719
So here, for our candidate

207
00:11:33.719 --> 00:11:35.760
Since we only have one candidate image

208
00:11:35.760 --> 00:11:38.440
It will end up detecting one image

209
00:11:38.440 --> 00:11:41.359
So here, at this array

210
00:11:41.359 --> 00:11:44.039
Get, its 0th one

211
00:11:44.080 --> 00:11:48.119
It will get the first image it has

212
00:11:48.119 --> 00:11:49.919
And there, in order to check

213
00:11:49.919 --> 00:11:52.280
If the image detection was successful

214
00:11:52.280 --> 00:11:55.440
Let's have it color in the outline

215
00:11:55.440 --> 00:11:56.840
Of the detected image

216
00:11:56.840 --> 00:11:59.760
Search for 'Debug'

217
00:11:59.760 --> 00:12:02.239
Debug Draw Tracked Geometry

218
00:12:02.239 --> 00:12:07.239
Meaning, it will draw an outline of that detected image

219
00:12:07.239 --> 00:12:08.719
It will draw the outline

220
00:12:29.800 --> 00:12:32.119
To check if the detection is working

221
00:12:34.099 --> 00:12:36.640
Let's compile and save

222
00:12:36.640 --> 00:12:38.600
Let's try packaging now

223
00:12:38.600 --> 00:12:40.880
Package Project, and package it

224
00:12:42.978 --> 00:12:43.978
At Packages Folder

225
00:12:44.008 --> 00:12:47.108
Let's make a package file there

226
00:12:47.978 --> 00:12:49.979
While it is packaging

227
00:12:49.979 --> 00:12:53.239
We can open that image

228
00:12:53.239 --> 00:12:58.799
That cat image in advance

229
00:13:01.743 --> 00:13:03.299
So, open this image

230
00:13:03.299 --> 00:13:05.440
And since the packaging is now done

231
00:13:05.440 --> 00:13:07.799
Go to Packages folder

232
00:13:07.799 --> 00:13:09.679
And to that packaged file

233
00:13:09.679 --> 00:13:12.119
Ctrl+C to copy

234
00:13:12.119 --> 00:13:17.479
And then on my phone

235
00:13:17.479 --> 00:13:23.039
At Unreal App folder, let's delete

236
00:13:23.039 --> 00:13:25.520
The existing file by pressing Del

237
00:13:25.520 --> 00:13:27.039
Ctrl+V

238
00:13:27.039 --> 00:13:28.960
And let's copy and paste in

239
00:13:28.960 --> 00:13:32.479
The newly packaged file here

240
00:13:32.479 --> 00:13:36.320
Once it is complete

241
00:13:36.320 --> 00:13:44.760
Let's install the apk file

242
00:13:44.760 --> 00:13:47.280
When it's done, open it

243
00:13:47.300 --> 00:13:51.380
Let's press 'Open'

244
00:13:54.260 --> 00:13:58.100
For Detection Type, let's go with Image Type

245
00:14:01.200 --> 00:14:07.559
Then, on the camera, this cat image

246
00:14:07.559 --> 00:14:09.280
It is detecting the image well

247
00:14:09.280 --> 00:14:11.559
And with that image, we see

248
00:14:11.559 --> 00:14:15.280
The red outline around the cat image

249
00:14:15.280 --> 00:14:18.599
When we move the image here

250
00:14:18.599 --> 00:14:21.659
We can see how the outline is moving as well

251
00:14:22.137 --> 00:14:25.557
Spawn 3D Object That Corresponds to Detected Image

252
00:14:26.219 --> 00:14:28.840
So now

253
00:14:32.760 --> 00:14:34.640
Let's add to that detected image

254
00:14:34.640 --> 00:14:36.679
So that on top of that image

255
00:14:36.679 --> 00:14:40.180
We spawn a 3D object

256
00:14:42.320 --> 00:14:46.239
So we need to create a 3D object for that

257
00:14:46.239 --> 00:14:52.960
Contents folder, Add New Folder

258
00:14:52.960 --> 00:14:54.320
Click on New Folder

259
00:14:54.320 --> 00:14:56.000
To create a new folder

260
00:14:56.000 --> 00:14:59.799
Let's name it Mesh

261
00:14:59.799 --> 00:15:02.119
That's our new folder

262
00:15:02.119 --> 00:15:06.760
At Mesh folder, let's add

263
00:15:06.760 --> 00:15:10.400
Cat_Idlf.fbx

264
00:15:10.400 --> 00:15:13.599
And Texture.png

265
00:15:13.599 --> 00:15:16.880
Let's Ctrl+X to cut the files

266
00:15:16.880 --> 00:15:23.640
And at Project, Content, Mesh

267
00:15:23.640 --> 00:15:24.960
At Mesh folder

268
00:15:24.960 --> 00:15:28.960
Ctrl+V to move it there

269
00:15:28.960 --> 00:15:30.880
It now says import

270
00:15:30.880 --> 00:15:33.960
So click on Import

271
00:15:33.960 --> 00:15:36.359
This is what we got as Cat_Idle

272
00:15:36.359 --> 00:15:38.840
This fbx file is a file that has

273
00:15:38.840 --> 00:15:41.400
Both its modeling and animation

274
00:15:41.400 --> 00:15:44.440
So it says select is skeleton

275
00:15:44.440 --> 00:15:45.799
Since we do not have

276
00:15:45.799 --> 00:15:47.239
A separate skeleton for it

277
00:15:47.239 --> 00:15:49.239
Let's just set it like so

278
00:15:49.239 --> 00:15:51.840
And import

279
00:15:51.840 --> 00:15:56.760
The warning message pops up, which you can ignore

280
00:15:56.760 --> 00:15:59.919
Close the window

281
00:15:59.919 --> 00:16:02.440
Back to Mesh folder

282
00:16:02.440 --> 00:16:04.320
Skeletal Mesh file

283
00:16:04.320 --> 00:16:06.599
And Physics Asset file

284
00:16:06.599 --> 00:16:10.559
We can see that we have the Skeleton file here

285
00:16:10.559 --> 00:16:13.640
But this Material file

286
00:16:13.640 --> 00:16:16.960
This material added to the modeling

287
00:16:16.960 --> 00:16:19.400
For now, it's just white

288
00:16:19.400 --> 00:16:21.880
So something we moved along with this

289
00:16:21.880 --> 00:16:26.080
Let's add Texture, which is

290
00:16:26.080 --> 00:16:28.119
The image to map on this modeling

291
00:16:28.119 --> 00:16:30.039
It says Material or Ult

292
00:16:30.039 --> 00:16:34.159
Double click on the material file to open

293
00:16:34.159 --> 00:16:37.320
It says Param here

294
00:16:37.320 --> 00:16:39.200
Delete this node

295
00:16:39.200 --> 00:16:41.919
And bring in our Texture file

296
00:16:41.919 --> 00:16:44.320
Drag it in

297
00:16:44.320 --> 00:16:49.159
And connect its RGB values to Base Color

298
00:16:49.159 --> 00:16:52.239
So select Skeletal Mesh

299
00:16:52.239 --> 00:16:54.359
And click on this brick icon

300
00:16:54.359 --> 00:16:57.159
And we can see a preview of

301
00:16:57.159 --> 00:17:01.320
How it looks like on the modeling

302
00:17:01.320 --> 00:17:02.679
Once it is saved

303
00:17:02.679 --> 00:17:05.319
Close the Material Settings window

304
00:17:05.319 --> 00:17:08.640
And using this Skeletal Mesh

305
00:17:08.640 --> 00:17:11.479
Let's create a Blueprint actor

306
00:17:11.479 --> 00:17:14.000
Go to Blueprints folder

307
00:17:14.000 --> 00:17:15.479
Right click

308
00:17:15.479 --> 00:17:18.959
Select Blueprint Class

309
00:17:18.960 --> 00:17:22.040
Since we are to place it at World

310
00:17:22.040 --> 00:17:25.119
Let's call it Actor

311
00:17:25.119 --> 00:17:30.319
BP_CatActor

312
00:17:30.319 --> 00:17:33.880
Double click on our cat actor

313
00:17:33.880 --> 00:17:37.839
Open its Blueprint settings window

314
00:17:37.839 --> 00:17:42.160
Simply click on Add

315
00:17:42.160 --> 00:17:46.040
And add Skeletal Mesh Component

316
00:17:46.040 --> 00:17:49.560
That's all it takes

317
00:17:49.560 --> 00:17:51.680
At Skeletal Mesh

318
00:17:51.680 --> 00:17:54.920
At what we just added, Skeletal Mesh Component

319
00:17:54.920 --> 00:17:57.680
Look to the right, at Details panel

320
00:17:57.680 --> 00:18:00.280
We are to add its Skeletal Mesh Asset

321
00:18:00.280 --> 00:18:03.560
Here, let's choose Cat_Idle

322
00:18:03.560 --> 00:18:06.640
Let's add that Skeletal Mesh here

323
00:18:06.640 --> 00:18:08.880
Since it is large now

324
00:18:08.880 --> 00:18:10.280
Let's resize it

325
00:18:10.280 --> 00:18:12.839
The image is only 20x20cm

326
00:18:12.839 --> 00:18:15.680
And if the cat is this big

327
00:18:15.680 --> 00:18:18.160
The screen won't capture this much

328
00:18:18.160 --> 00:18:20.520
Let's make it as big as the image

329
00:18:20.520 --> 00:18:28.630
So let's reduce it to 0.2, 0.2, 0.2

330
00:18:29.880 --> 00:18:35.319
Compile and save

331
00:18:35.319 --> 00:18:40.160
See how I set it as World

332
00:18:40.160 --> 00:18:43.680
It's not Local but World, looking like a globe

333
00:18:43.680 --> 00:18:46.359
In that case, where is the front here?

334
00:18:46.359 --> 00:18:49.400
This red direction is the front

335
00:18:49.400 --> 00:18:51.959
And then, notice how this cat modeling

336
00:18:51.959 --> 00:18:54.119
Isn't facing the front

337
00:18:54.119 --> 00:18:58.439
So let's rotate it so that it is facing front

338
00:18:58.439 --> 00:19:01.699
Select Rotation tool

339
00:19:07.000 --> 00:19:10.400
And rotate it by around 90 degrees this side

340
00:19:10.400 --> 00:19:13.359
This value could be around -90

341
00:19:13.359 --> 00:19:16.520
The Z axis

342
00:19:16.520 --> 00:19:19.719
Compile and save

343
00:19:19.719 --> 00:19:23.400
For now, let's make the front direction

344
00:19:23.400 --> 00:19:25.319
What the modeling is facing towards

345
00:19:25.319 --> 00:19:29.520
Let's save and close the window

346
00:19:29.520 --> 00:19:34.920
Now, back to Hunet Player Pawn

347
00:19:34.920 --> 00:19:38.319
Remember that outlining node?

348
00:19:38.319 --> 00:19:44.239
Let's move this outlining node aside for now

349
00:19:44.239 --> 00:19:46.479
We will be only using it

350
00:19:46.479 --> 00:19:48.319
When we need it for debugging

351
00:19:48.319 --> 00:19:51.119
So this can move aside for now

352
00:19:51.119 --> 00:19:57.520
For now, let's check first on the detected image

353
00:19:57.520 --> 00:20:01.880
Whether that image really is the image we added

354
00:20:01.880 --> 00:20:03.800
As the candidate image

355
00:20:03.800 --> 00:20:10.400
So, Get Detected Image

356
00:20:10.400 --> 00:20:11.839
Search for that

357
00:20:11.839 --> 00:20:15.239
And we see Get Detected Image Node

358
00:20:15.239 --> 00:20:17.439
Get Detected Image

359
00:20:17.439 --> 00:20:22.280
Let's get that AR Tracked Image Type

360
00:20:22.280 --> 00:20:29.239
This image, Get Friendly Name

361
00:20:29.239 --> 00:20:33.040
So what is Friendly Name here?

362
00:20:33.040 --> 00:20:34.319
We have that image

363
00:20:34.319 --> 00:20:36.839
So for that candidate image, that cat image we had

364
00:20:36.839 --> 00:20:39.040
I called it Hunet Cat, remember?

365
00:20:39.040 --> 00:20:40.440
Hunet Cat

366
00:20:40.440 --> 00:20:44.560
Hunet Cat, so with that Hunet Cat image

367
00:20:44.560 --> 00:20:47.000
On top of that, we can add that modeling

368
00:20:47.000 --> 00:20:50.000
That corresponds to that image

369
00:20:50.000 --> 00:20:54.719
So for that, let's create a variable in advance

370
00:20:54.719 --> 00:20:58.560
To the left, at VARIABLES tab

371
00:20:58.560 --> 00:21:02.119
Click on the plus button to add a variable

372
00:21:02.119 --> 00:21:09.280
So let's pair the image and the modeling

373
00:21:09.280 --> 00:21:12.560
Meaning, what modeling will this image create?

374
00:21:12.560 --> 00:21:15.640
That will be paired in this

375
00:21:15.640 --> 00:21:17.959
Data type that we will create now

376
00:21:17.959 --> 00:21:22.359
So for the first image, its data type

377
00:21:22.359 --> 00:21:26.479
Its basic data type is string

378
00:21:26.479 --> 00:21:29.040
And to the right, at Details panel

379
00:21:29.040 --> 00:21:32.719
It's not just a single image, string

380
00:21:32.719 --> 00:21:37.959
It's Map, which is a special data type that

381
00:21:37.959 --> 00:21:40.280
Saves data in key and value

382
00:21:40.280 --> 00:21:42.719
It's also called dictional

383
00:21:42.719 --> 00:21:44.280
So for data type

384
00:21:44.280 --> 00:21:47.040
Let's change it as Map

385
00:21:47.040 --> 00:21:49.920
The data for Key is String

386
00:21:49.920 --> 00:21:53.280
And data for Value is

387
00:21:53.319 --> 00:21:56.359
Let's say Actor

388
00:21:56.359 --> 00:22:00.000
Actor's Class Reference

389
00:22:00.000 --> 00:22:03.119
Since we are assigning a Blueprint file

390
00:22:03.119 --> 00:22:06.920
It is assigned as Class Reference, or the reference type

391
00:22:06.920 --> 00:22:09.920
Of the actor class

392
00:22:09.920 --> 00:22:14.560
So this particular actor modeling for that name

393
00:22:14.560 --> 00:22:18.520
That's one pairing that we are making

394
00:22:18.520 --> 00:22:20.280
So compile now

395
00:22:20.280 --> 00:22:21.319
After compiling

396
00:22:21.319 --> 00:22:25.119
Now we see all the numbers of maps

397
00:22:25.119 --> 00:22:27.439
That can be used for modeling pair

398
00:22:27.439 --> 00:22:28.880
Click on plus

399
00:22:28.880 --> 00:22:31.479
Every time you click it, it will be added

400
00:22:31.479 --> 00:22:35.880
First one is, we had Hunet Cat

401
00:22:35.880 --> 00:22:38.719
So once it gets that Hunet Cat name

402
00:22:38.719 --> 00:22:44.920
For that name, let's assign

403
00:22:44.920 --> 00:22:51.000
The BP_CatActor file

404
00:22:51.000 --> 00:22:54.040
So here, since we added a data here

405
00:22:54.040 --> 00:22:58.900
Let's use Get for Image Modeling Pair

406
00:22:58.900 --> 00:23:00.300
Bring it here

407
00:23:00.300 --> 00:23:06.280
And let's Find in that data

408
00:23:06.280 --> 00:23:08.479
So the image we found

409
00:23:08.479 --> 00:23:12.920
That Friendly Name added to that found image

410
00:23:12.920 --> 00:23:16.239
Add it to this map

411
00:23:16.239 --> 00:23:20.560
And then it will return some corresponding

412
00:23:20.560 --> 00:23:23.000
Modeling Blueprint file like so

413
00:23:23.000 --> 00:23:24.520
If there exists that name

414
00:23:24.520 --> 00:23:27.400
In that Modeling Pair variable

415
00:23:27.400 --> 00:23:33.520
So this modeling, let's go to Spawn Actor

416
00:23:33.520 --> 00:23:36.119
To actually create it

417
00:23:36.119 --> 00:23:40.079
First of all, connect the Exec Pin

418
00:23:40.079 --> 00:23:43.040
Let's put it a little closer

419
00:23:43.040 --> 00:23:45.880
And of the array of data images that we found

420
00:23:45.880 --> 00:23:50.800
The first data

421
00:23:50.800 --> 00:23:52.719
From there, the Friendly Name

422
00:23:52.719 --> 00:23:55.319
Look for that added Friendly Name

423
00:23:55.319 --> 00:24:00.280
And of the map that we made

424
00:24:00.280 --> 00:24:02.760
When we search for it

425
00:24:02.760 --> 00:24:07.239
First, with the names we created for this variable

426
00:24:07.239 --> 00:24:09.800
It will return that modeling

427
00:24:09.800 --> 00:24:13.599
And returning that modeling file or Blueprint file

428
00:24:13.599 --> 00:24:16.800
Now it will create according to that file

429
00:24:16.800 --> 00:24:19.079
When it does so

430
00:24:19.079 --> 00:24:23.000
For Collision, let's go with Always Spawn

431
00:24:23.000 --> 00:24:28.479
And then, for face detection and mask creation

432
00:24:28.479 --> 00:24:30.520
It will also detect ground

433
00:24:30.520 --> 00:24:35.439
As it always does for indicator spawning

434
00:24:35.439 --> 00:24:38.560
But here, since it creates Tick in real time

435
00:24:38.560 --> 00:24:41.239
And continue with every frame

436
00:24:41.239 --> 00:24:43.920
If it keeps spawning

437
00:24:43.920 --> 00:24:47.959
We know that it will overlap and keep spawning

438
00:24:47.959 --> 00:24:51.760
So this time, to avoid that from the beginning

439
00:24:51.760 --> 00:24:54.119
Let's save that spawned actor

440
00:24:54.119 --> 00:24:57.839
As a variable at Promote Variables

441
00:24:57.879 --> 00:25:02.640
So this new variable is called

442
00:25:02.640 --> 00:25:05.839
spawnedActor

443
00:25:05.880 --> 00:25:10.820
Let's name this variable that

444
00:25:12.160 --> 00:25:15.359
This ensures that it doesn't spawn endlessly

445
00:25:15.359 --> 00:25:18.199
It should check before it tries to spawn

446
00:25:18.199 --> 00:25:21.359
So it brings in that value of the Spawned Actor

447
00:25:21.359 --> 00:25:23.640
In numbers to see if there already exists one

448
00:25:23.640 --> 00:25:26.680
So here, using Valid Node

449
00:25:26.680 --> 00:25:31.119
It checks first if it has already been spawned

450
00:25:31.119 --> 00:25:35.520
And it will continue to spawn based on that result

451
00:25:35.560 --> 00:25:38.439
Now, connect this Valid node

452
00:25:38.439 --> 00:25:42.760
And check if there already is an actor

453
00:25:42.760 --> 00:25:46.040
In the variable Spawned Actor

454
00:25:46.040 --> 00:25:47.560
If it doesn't have any

455
00:25:47.560 --> 00:25:49.560
Or, if it is 'Is Not Valid'

456
00:25:49.560 --> 00:25:50.680
It needs to spawn

457
00:25:50.680 --> 00:25:53.760
Spawn and add to the varaible

458
00:25:53.760 --> 00:25:55.640
Or, if it is already added

459
00:25:55.640 --> 00:25:57.239
If there already is a value to the variable

460
00:25:57.239 --> 00:25:59.199
If it already has spawned

461
00:25:59.199 --> 00:26:01.160
Then, to that actor

462
00:26:01.160 --> 00:26:03.199
Meaning, to Spawned Actor

463
00:26:03.199 --> 00:26:09.280
Using Set Actor Transform

464
00:26:09.280 --> 00:26:13.199
Its rotation and scale information is

465
00:26:13.199 --> 00:26:15.319
All that needs to be updated

466
00:26:15.319 --> 00:26:17.119
The image may move in between

467
00:26:17.119 --> 00:26:20.079
And the camera may move as well

468
00:26:20.079 --> 00:26:22.719
So the location may change all the time

469
00:26:22.719 --> 00:26:26.040
So here, where do we spawn it

470
00:26:26.040 --> 00:26:28.599
And where do we move it?

471
00:26:28.599 --> 00:26:30.839
For that, we can bring it from

472
00:26:30.839 --> 00:26:32.760
This Detected Image

473
00:26:32.760 --> 00:26:36.239
Drag it here

474
00:26:36.239 --> 00:26:40.560
Get Local to World Transform

475
00:26:40.560 --> 00:26:43.560
So from the detected image

476
00:26:43.560 --> 00:26:46.079
Convert Local to World coordinate

477
00:26:46.079 --> 00:26:49.800
To get that Transform coordinate

478
00:26:49.800 --> 00:26:53.359
So pass this location info on whenever we move it

479
00:26:53.359 --> 00:26:56.079
Or whenever we spawn one

480
00:26:56.079 --> 00:27:00.040
Then, it spawns and moves in place

481
00:27:00.040 --> 00:27:02.199
Once it is already spawned

482
00:27:02.199 --> 00:27:07.520
Let's also connect this Valid Exec Pin

483
00:27:07.520 --> 00:27:09.439
This may look a little complicated

484
00:27:09.439 --> 00:27:11.040
With the nodes intertwined like so

485
00:27:11.040 --> 00:27:15.400
But you will have no trouble understanding it

486
00:27:15.400 --> 00:27:17.880
Or, in case it gets confusing

487
00:27:17.880 --> 00:27:19.920
Hover over a pin

488
00:27:19.920 --> 00:27:22.319
Then it shows in a bold line

489
00:27:22.319 --> 00:27:24.680
Where this pin is connected to

490
00:27:24.680 --> 00:27:28.280
So it will be easier for you to check

491
00:27:28.280 --> 00:27:31.920
Now, let's compile and save

492
00:27:31.959 --> 00:27:38.039
Now, let's try packaging again

493
00:27:39.599 --> 00:27:42.640
While it is being packaged

494
00:27:42.640 --> 00:27:46.020
Let's open our image file in advance

495
00:27:49.760 --> 00:27:51.460
Packages folder again

496
00:27:51.460 --> 00:27:55.079
Go to Project, Packages folder

497
00:27:55.079 --> 00:27:56.929
And this apk file

498
00:27:56.929 --> 00:28:00.359
Ctrl+C to copy again

499
00:28:00.359 --> 00:28:05.280
And on the phone, under Unreal App

500
00:28:05.280 --> 00:28:09.079
Delete this file

501
00:28:09.079 --> 00:28:10.800
And move it here again

502
00:28:10.800 --> 00:28:12.879
Ctrl+V to paste

503
00:28:18.520 --> 00:28:20.719
Close everything

504
00:28:20.719 --> 00:28:25.499
And then at Installed Files

505
00:28:25.499 --> 00:28:29.160
Let's install that apk file

506
00:28:31.680 --> 00:28:35.239
Open to open the app

507
00:28:35.239 --> 00:28:39.119
And select Image Type

508
00:28:39.119 --> 00:28:41.319
So whenever we point to the imaeg

509
00:28:41.319 --> 00:28:43.520
We see that modeling well

510
00:28:43.520 --> 00:28:46.319
On top of the image like so

511
00:28:46.319 --> 00:28:48.880
And you can try moving the image

512
00:28:48.880 --> 00:28:51.439
Or moving the camera

513
00:28:51.439 --> 00:28:55.479
We see how the modeling is moving along well

514
00:28:55.479 --> 00:29:00.280
In fact, if we resize the image

515
00:29:00.280 --> 00:29:04.800
We also see the scale of the modeling changing as well

516
00:29:04.800 --> 00:29:05.920
Same with the rotation value2

517
00:29:05.920 --> 00:29:09.479
Even if you rotate the screen like so

518
00:29:09.479 --> 00:29:12.339
We see how the modeling is rotating

519
00:29:12.339 --> 00:29:14.996
Along with the movement

520
00:29:14.996 --> 00:29:18.516
Spawn Object That Corresponds to Each Image

521
00:29:19.540 --> 00:29:22.040
But for now, we only have

522
00:29:22.040 --> 00:29:24.920
One image added here

523
00:29:24.920 --> 00:29:27.199
In order for use to actually use this

524
00:29:27.199 --> 00:29:29.319
As in, to make it into a content

525
00:29:29.319 --> 00:29:32.839
We may be required to add more than one images

526
00:29:32.839 --> 00:29:35.319
Let's see how it works

527
00:29:35.319 --> 00:29:38.560
When we are to add many images

528
00:29:38.560 --> 00:29:42.839
First, we had another image that we imported

529
00:29:42.839 --> 00:29:47.000
We had that sports car image

530
00:29:47.000 --> 00:29:50.920
This requires a modeling for this car image

531
00:29:50.959 --> 00:29:53.640
And let's use what Unreal provides

532
00:29:53.640 --> 00:29:56.319
As a default Startup Content

533
00:29:56.319 --> 00:30:02.319
Click on Add at Content Drawer

534
00:30:02.319 --> 00:30:06.199
And on top, it says Add Feature or Content Pack

535
00:30:06.199 --> 00:30:09.880
In order to use what Unreal provides as default

536
00:30:09.880 --> 00:30:15.199
Let's select Add Feature or Content Pack

537
00:30:15.199 --> 00:30:17.319
What we need here is

538
00:30:17.319 --> 00:30:19.719
It's not a human modeling

539
00:30:19.719 --> 00:30:21.640
We need some car modeling

540
00:30:21.640 --> 00:30:28.079
So let's add Vehicle Project

541
00:30:31.239 --> 00:30:34.000
Click on Dismiss

542
00:30:34.000 --> 00:30:37.319
So this means that all the plugins related to cars

543
00:30:37.319 --> 00:30:40.280
Could not be imported altogether

544
00:30:40.280 --> 00:30:42.239
But we are not trying to use a plugin here

545
00:30:42.239 --> 00:30:44.640
Nor are we trying to use its functions

546
00:30:44.640 --> 00:30:47.160
We only need one thing

547
00:30:47.160 --> 00:30:51.000
The modeling for this car

548
00:30:51.000 --> 00:30:53.479
Since we don't need anything else

549
00:30:53.479 --> 00:30:59.640
It doesn't matter if it says there is some error

550
00:30:59.640 --> 00:31:02.319
It's because we simply don't use it

551
00:31:02.319 --> 00:31:04.680
So, where is this modeling?

552
00:31:04.680 --> 00:31:07.560
We have a folder called Vehicles here

553
00:31:07.560 --> 00:31:11.880
At Vehicles, there's a folder called SportsCar

554
00:31:11.880 --> 00:31:13.520
In there, as Skeletal Mesh

555
00:31:13.520 --> 00:31:16.170
We have SKM SportsCar

556
00:31:16.170 --> 00:31:19.040
That's the Skeletal Mesh we can use

557
00:31:19.040 --> 00:31:21.359
Its Material looks nice enough

558
00:31:21.359 --> 00:31:25.000
So we can just use this as it is here

559
00:31:25.000 --> 00:31:27.439
So, at Blueprints folder

560
00:31:27.439 --> 00:31:31.680
Just as we made our Cat actor

561
00:31:31.680 --> 00:31:33.959
We will be creating a Blueprint class

562
00:31:33.959 --> 00:31:38.839
For its parent class, let's select Actor

563
00:31:38.839 --> 00:31:45.740
Let's say BP_CarActor

564
00:31:49.479 --> 00:31:52.959
Same thing, for Component

565
00:31:52.959 --> 00:31:58.400
Let's add a Skeletal Mesh Component

566
00:31:58.400 --> 00:32:00.959
Add a Skeletal Mesh Component

567
00:32:00.959 --> 00:32:02.659
Skeletal Mesh Asset

568
00:32:02.659 --> 00:32:06.239
At Details, Skeletal Mesh Asset

569
00:32:06.239 --> 00:32:09.289
The one we saw, the sports car

570
00:32:09.289 --> 00:32:14.479
Let's add our SportsCar Mesh there

571
00:32:14.479 --> 00:32:19.119
Of course, since it is a car, it is very big

572
00:32:19.119 --> 00:32:20.920
Even bigger than 2 meters

573
00:32:20.920 --> 00:32:24.599
So we need to resize it quite a bit

574
00:32:24.599 --> 00:32:26.880
Since we need to add it to an image as well

575
00:32:26.880 --> 00:32:35.560
So let's say 0.05, to really reduce its size

576
00:32:35.560 --> 00:32:38.560
Compile and Save

577
00:32:38.560 --> 00:32:41.199
For this, even as World

578
00:32:41.199 --> 00:32:45.439
It is facing front as its modeling does

579
00:32:45.439 --> 00:32:48.599
So we can use it as it is now

580
00:32:48.599 --> 00:32:53.760
Save and close the settings window

581
00:32:53.760 --> 00:32:58.359
Now, at Data Assets folder

582
00:32:58.359 --> 00:33:01.079
We need to create a Hunet AR Session image

583
00:33:01.079 --> 00:33:05.160
As well as a candidate image, of course

584
00:33:05.160 --> 00:33:08.910
Right click, at Miscellaneous

585
00:33:08.910 --> 00:33:12.839
Select Data Assets

586
00:33:12.839 --> 00:33:15.239
First, candidate image

587
00:33:15.239 --> 00:33:19.839
Let's start by creating AR Candidate IMage

588
00:33:19.839 --> 00:33:22.639
Here, similar to the name before

589
00:33:22.639 --> 00:33:32.170
Let's name this new file

590
00:33:32.170 --> 00:33:34.300
ARImage_SportCar

591
00:33:34.300 --> 00:33:37.280
Double click to open the settings

592
00:33:37.280 --> 00:33:39.530
For Candidate TExture

593
00:33:39.530 --> 00:33:43.640
What we called SCar, that image texture

594
00:33:43.640 --> 00:33:45.319
Let's add that

595
00:33:45.319 --> 00:33:47.439
Add in the sports car image

596
00:33:47.439 --> 00:33:53.880
And its Friendly Name will be Hunet Car

597
00:33:53.880 --> 00:33:56.500
Image size, width and height

598
00:33:56.500 --> 00:34:00.900
Same as that cat, around 20cm

599
00:34:00.900 --> 00:34:02.280
Let's add that

600
00:34:02.280 --> 00:34:06.119
Orientation below has landscape and Portrait

601
00:34:06.119 --> 00:34:09.959
But for this, since it is a square, it doesn't mean much

602
00:34:09.959 --> 00:34:14.439
When the image is a rectangle, either longer to its width or length

603
00:34:14.439 --> 00:34:17.280
If it is longer to the width, it is a landscape

604
00:34:17.280 --> 00:34:21.860
And longer to the length is a portrait

605
00:34:24.040 --> 00:34:30.120
Let's save and close the window

606
00:34:30.120 --> 00:34:34.360
Next, Hunet AR Session Config Image

607
00:34:34.360 --> 00:34:38.360
Open the image session file

608
00:34:38.360 --> 00:34:42.120
Here, at Image Tracking, Candidate Image

609
00:34:42.120 --> 00:34:45.239
As candidate image, we only added AR Image Cat

610
00:34:45.239 --> 00:34:47.339
In order to add another

611
00:34:47.339 --> 00:34:50.120
Let's click on the plus button above

612
00:34:50.120 --> 00:34:52.520
And then, for candidate image

613
00:34:52.520 --> 00:34:56.399
Let's add that sports car

614
00:34:59.800 --> 00:35:04.840
Let's save and close the settings window

615
00:35:05.959 --> 00:35:11.479
Now, back to the Blueprints

616
00:35:11.479 --> 00:35:16.600
Go to Hunet Player Pawn again

617
00:35:16.600 --> 00:35:19.959
And we need to change this detection part a little

618
00:35:19.959 --> 00:35:22.609
Since we have more than one image

619
00:35:22.609 --> 00:35:25.080
We cannot just get the 0th one

620
00:35:25.080 --> 00:35:27.460
We need to repeat this array

621
00:35:27.460 --> 00:35:30.360
And we need all the works to that image repeated

622
00:35:30.360 --> 00:35:32.760
So this back part should be repeated per image

623
00:35:32.760 --> 00:35:36.360
So let's push this away a little

624
00:35:36.760 --> 00:35:41.479
Let's delete this Get part

625
00:35:41.479 --> 00:35:45.239
We have to repeat the array now

626
00:35:45.239 --> 00:35:52.360
So let's use a For Each Loop Node to

627
00:35:52.439 --> 00:35:54.679
Repeat everything here

628
00:35:54.679 --> 00:35:58.840
For the Exec Pin, connect it to this For Each Loop

629
00:35:58.840 --> 00:36:03.959
And assign the detected image array here

630
00:36:03.959 --> 00:36:08.600
Then this will repeat the array, from the 0th to the last

631
00:36:08.600 --> 00:36:12.840
And every time it repeats

632
00:36:12.840 --> 00:36:17.719
It will get that Detected Image

633
00:36:17.719 --> 00:36:21.080
And read its Friendly Name there

634
00:36:21.080 --> 00:36:25.130
If there is a value added

635
00:36:25.130 --> 00:36:28.040
To that image modeling

636
00:36:28.040 --> 00:36:33.159
For now, we only saved one thing, Hunet Cat

637
00:36:33.159 --> 00:36:36.040
At our Image Modeling Pair variable

638
00:36:36.040 --> 00:36:39.879
So here, let's click on the plus button

639
00:36:39.879 --> 00:36:41.339
To add another pair

640
00:36:41.339 --> 00:36:43.560
So for our Friendly Name

641
00:36:43.560 --> 00:36:47.719
We added one called Hunet Car

642
00:36:47.719 --> 00:36:52.520
And the modeling to be created is

643
00:36:53.320 --> 00:36:59.000
Let's say this creates this BP_CarActor

644
00:36:59.000 --> 00:37:01.080
Hunet Cat with Cat Actor

645
00:37:01.080 --> 00:37:04.840
And Hunet Car with Car Actor

646
00:37:04.840 --> 00:37:08.360
That's the pairs we have

647
00:37:08.360 --> 00:37:12.679
So, whether this be the car or the cat

648
00:37:12.679 --> 00:37:17.479
This will check each and get

649
00:37:17.479 --> 00:37:20.199
The candidate name added to that image

650
00:37:20.199 --> 00:37:23.959
And first see if it exists in the variable

651
00:37:23.959 --> 00:37:29.879
If so, it will spawn the paired actor to return

652
00:37:29.879 --> 00:37:34.960
Which is Actor Blueprint File

653
00:37:37.920 --> 00:37:43.080
And now, adding on to the spawning

654
00:37:43.080 --> 00:37:47.879
Let's also connect that target location

655
00:37:47.879 --> 00:37:51.159
The spawning, the location moving, these are the same

656
00:37:51.159 --> 00:37:56.740
But the problem is Spawned Actor

657
00:37:56.740 --> 00:37:59.560
This will spawn something already spawned

658
00:37:59.560 --> 00:38:01.399
Let's add to Spawned Actor

659
00:38:01.399 --> 00:38:03.639
So that it does not duplicate

660
00:38:03.639 --> 00:38:07.399
But this time, this actor may not be one

661
00:38:07.399 --> 00:38:09.359
There can be more than one

662
00:38:09.379 --> 00:38:12.520
Based on the number of images we added

663
00:38:12.520 --> 00:38:16.840
So this single actor cannot contain all

664
00:38:16.840 --> 00:38:20.360
For that, select Spawned Actor

665
00:38:20.360 --> 00:38:24.000
And we need to change the data type of Spawned Actor

666
00:38:25.639 --> 00:38:29.479
Spawned Actor, data type should not be a single Actor

667
00:38:29.479 --> 00:38:32.840
Change it to Map

668
00:38:32.840 --> 00:38:37.140
And it asks if your really want to change the data type

669
00:38:37.140 --> 00:38:38.199
For that

670
00:38:38.199 --> 00:38:43.159
Yes, we'd like to, so 'Change Variable Type'

671
00:38:43.159 --> 00:38:46.679
Change it and close the window

672
00:38:46.679 --> 00:38:47.939
Then this is now changed

673
00:38:47.939 --> 00:38:53.320
So for Key, choose String

674
00:38:57.960 --> 00:39:00.799
For Key, it is String

675
00:39:00.799 --> 00:39:05.020
For Value, Actor

676
00:39:05.020 --> 00:39:08.740
Since we are saving actual objects into the actor

677
00:39:08.740 --> 00:39:10.739
Object Reference

678
00:39:11.622 --> 00:39:14.499
It keeps asking if we are sure

679
00:39:14.499 --> 00:39:15.649
For changing data type to Map

680
00:39:15.649 --> 00:39:18.799
This is the inconvenient part of it

681
00:39:20.129 --> 00:39:23.969
So Key is String

682
00:39:23.969 --> 00:39:28.360
And the Value to be saved is Actor type

683
00:39:28.360 --> 00:39:31.719
And for the actually created Actor Instance Type

684
00:39:31.719 --> 00:39:36.460
Let's set Object Instance Type

685
00:39:38.919 --> 00:39:41.000
Now, let's compile

686
00:39:41.000 --> 00:39:43.560
For now, we get some error

687
00:39:43.560 --> 00:39:44.860
Since all these parts such as Set

688
00:39:44.860 --> 00:39:46.679
Have changed

689
00:39:47.159 --> 00:39:49.000
Let's delete the node

690
00:39:49.000 --> 00:39:52.199
So, whenever an actor is spawned

691
00:39:52.199 --> 00:39:54.040
For that

692
00:39:54.040 --> 00:39:57.239
We need to add it to Spawned Actor

693
00:39:57.239 --> 00:40:02.120
So use Get at Spawned Actor

694
00:40:02.120 --> 00:40:06.439
And using Add function

695
00:40:06.439 --> 00:40:11.160
Let's save it using Add function

696
00:40:12.919 --> 00:40:16.439
Let's save the spawned object

697
00:40:16.439 --> 00:40:17.939
And for key value

698
00:40:17.939 --> 00:40:22.360
For key name, we had it before

699
00:40:22.360 --> 00:40:24.600
The name of the candidate image

700
00:40:24.600 --> 00:40:29.959
So its nickname or Friendly Name goes here

701
00:40:29.959 --> 00:40:35.800
Let's bring it down so that it is visually better

702
00:40:42.150 --> 00:40:45.500
Now, let's double click and

703
00:40:45.500 --> 00:40:47.899
Create the connecting node here

704
00:40:47.899 --> 00:40:50.939
And make it go down and be seen like so

705
00:40:50.939 --> 00:40:52.549
This is not mandatory but

706
00:40:52.549 --> 00:40:54.949
Whenever all the lines get complicated

707
00:40:54.949 --> 00:40:56.439
It may get very confusing

708
00:40:56.439 --> 00:41:01.120
So let's deliver Friendly Name here

709
00:41:01.120 --> 00:41:04.220
And that's the implementation

710
00:41:04.220 --> 00:41:06.139
So whenever it is spawned

711
00:41:06.963 --> 00:41:13.513
This spawned actor class with this name

712
00:41:13.513 --> 00:41:15.544
It will get saved

713
00:41:16.384 --> 00:41:19.720
And the next time, it found the existing one

714
00:41:19.741 --> 00:41:24.020
And it will have that detected image with it

715
00:41:24.060 --> 00:41:30.599
For that, let's delete this Valid node we had from before

716
00:41:30.639 --> 00:41:34.519
This time, when checking if anything has already been spawned

717
00:41:34.519 --> 00:41:40.339
Since the variable data type has changed to Map

718
00:41:40.339 --> 00:41:44.019
Le's use Get at Spawned Actor

719
00:41:44.020 --> 00:41:50.840
To see if there is anything like this included there

720
00:41:50.840 --> 00:41:54.120
So let's use Contains

721
00:41:54.120 --> 00:41:58.520
And add that key value name

722
00:41:59.620 --> 00:42:04.760
So this will check first at Spawned Actor if it has any

723
00:42:04.760 --> 00:42:07.700
And if it has already spawned it

724
00:42:07.700 --> 00:42:10.980
Then Spawned Actor must have the key value there

725
00:42:10.980 --> 00:42:13.840
So by checking for this key value here

726
00:42:13.840 --> 00:42:16.280
If there isn't any

727
00:42:16.280 --> 00:42:20.240
We will use a branch

728
00:42:20.540 --> 00:42:23.380
And if not, this will be False

729
00:42:23.380 --> 00:42:25.530
And if the key value is in there

730
00:42:25.530 --> 00:42:27.660
This will be True

731
00:42:27.680 --> 00:42:31.780
So if there is one already

732
00:42:31.780 --> 00:42:33.780
Or if it is True

733
00:42:33.780 --> 00:42:36.400
Then use Set Actor Transform to just change the location

734
00:42:36.400 --> 00:42:40.040
Location and rotation values

735
00:42:40.040 --> 00:42:43.300
And if this key isn't included in Spawned Actor

736
00:42:43.300 --> 00:42:45.640
Then we need to add it anew

737
00:42:45.640 --> 00:42:48.880
So for False, we use Spawn Actor

738
00:42:48.880 --> 00:42:54.740
In order to spawn an actor

739
00:42:54.740 --> 00:42:59.640
For the Branch node, let's connect it from this For Each Loop

740
00:42:59.640 --> 00:43:03.160
Let's connect the Execution Pin like so

741
00:43:05.860 --> 00:43:09.060
The nodes may look very complicated now

742
00:43:09.060 --> 00:43:11.380
But it is very simple in essence

743
00:43:11.380 --> 00:43:15.640
It just looks for an image from each part

744
00:43:15.640 --> 00:43:21.540
It tries searching that image name at Spawned Actor

745
00:43:21.540 --> 00:43:23.800
And if it finds one

746
00:43:23.800 --> 00:43:28.340
Or, if there is no record of spawning

747
00:43:28.340 --> 00:43:30.960
It spawns one

748
00:43:30.960 --> 00:43:34.280
And after spawning, it uses that

749
00:43:34.280 --> 00:43:37.160
Key name and the spawned actor instance

750
00:43:37.160 --> 00:43:40.780
To save at Spawned Actor

751
00:43:40.780 --> 00:43:45.560
And if there is record, when checked, of it having been spawned

752
00:43:45.560 --> 00:43:49.960
Then it uses Actor Transform

753
00:43:49.980 --> 00:43:53.500
To only move around its object value

754
00:43:53.500 --> 00:43:56.520
And it can just manipulate that value

755
00:43:56.520 --> 00:43:58.520
Here, we missed a step here

756
00:43:58.520 --> 00:44:02.520
So, which actor's location value are we moving?

757
00:44:02.520 --> 00:44:06.760
It must be something that has already been spawned

758
00:44:06.760 --> 00:44:12.820
So at Spawned Actor, move up, Find

759
00:44:12.820 --> 00:44:16.480
And the key from before

760
00:44:16.480 --> 00:44:18.200
Friendly Name Key

761
00:44:18.200 --> 00:44:21.420
We need to move that

762
00:44:21.420 --> 00:44:27.080
Actual instance with that key

763
00:44:27.080 --> 00:44:30.560
So let's reshape these lines

764
00:44:42.980 --> 00:44:48.340
And then let's compile and save

765
00:44:48.340 --> 00:44:50.690
And finally, let's try here

766
00:44:50.690 --> 00:44:52.200
Let's build it again

767
00:44:52.200 --> 00:44:54.520
And check for the last time

768
00:44:55.520 --> 00:44:58.720
So let's try packaging once more

769
00:45:00.880 --> 00:45:05.520
While it is doing the work, let's open the two images

770
00:45:07.708 --> 00:45:10.920
Let's open these two images we used

771
00:45:10.940 --> 00:45:14.460
So we have that cat image already open

772
00:45:14.460 --> 00:45:18.460
And let's open that car image at the bottom

773
00:45:19.800 --> 00:45:22.520
It's at Content, and I think at Textures

774
00:45:22.520 --> 00:45:29.440
At Textures, open SCar image

775
00:45:30.540 --> 00:45:32.140
The cat on the top

776
00:45:32.140 --> 00:45:35.540
And let's put the car at the bottom

777
00:45:37.300 --> 00:45:40.520
The packaging is now complete

778
00:45:42.420 --> 00:45:49.359
Go to Packages, Ctrl+C the apk file

779
00:45:49.399 --> 00:45:57.520
And delete the apk file in the phone

780
00:45:57.520 --> 00:45:59.620
And paste here

781
00:45:59.620 --> 00:46:03.160
Ctrl+V to copy and paste

782
00:46:12.321 --> 00:46:15.621
Once it is installed, open

783
00:46:15.621 --> 00:46:18.880
And open the app

784
00:46:18.880 --> 00:46:22.520
Detection Type, Image Type

785
00:46:23.420 --> 00:46:28.520
And as you see, we have two image detection

786
00:46:28.520 --> 00:46:33.220
For the cat image, we have the cat modeling

787
00:46:33.220 --> 00:46:38.670
And for the car, we have the car image

788
00:46:38.670 --> 00:46:41.520
Along with the modeling

789
00:46:41.520 --> 00:46:46.520
For both cat and car, the detection works well

790
00:46:47.200 --> 00:46:51.300
And finally, there are some cautionary points

791
00:46:51.300 --> 00:46:54.520
Regarding the images for detection

792
00:46:55.520 --> 00:47:00.520
These images I have here

793
00:47:00.520 --> 00:47:03.570
Have high recognition rates

794
00:47:03.570 --> 00:47:06.520
High recognition rate means

795
00:47:06.520 --> 00:47:09.720
If there is no transparency, it is easier to detect

796
00:47:09.720 --> 00:47:13.520
With any transparent value, the recognition rate drops by a lot

797
00:47:13.520 --> 00:47:16.620
So that's why I used block color for the background

798
00:47:16.620 --> 00:47:20.520
In white so that there is no transparent value

799
00:47:20.520 --> 00:47:26.720
And I also added an outline as you see here

800
00:47:26.720 --> 00:47:32.000
Since the outline has a very bold color against the background

801
00:47:32.000 --> 00:47:36.050
This outline distinguishes clearly between

802
00:47:36.050 --> 00:47:38.720
The background and the content

803
00:47:38.720 --> 00:47:42.520
And this will increase the recognition rate

804
00:47:42.520 --> 00:47:47.520
And if the pattern inside is very intricate

805
00:47:47.520 --> 00:47:51.520
If there are too many patterns inside

806
00:47:51.520 --> 00:47:53.170
Then it is less likely to be recognized

807
00:47:53.170 --> 00:47:58.220
In contrast, if the pattern and texture are rather simple

808
00:47:58.220 --> 00:48:01.160
Then it is much easier to detect

809
00:48:01.160 --> 00:48:04.660
Of course, for this, you will have to

810
00:48:04.660 --> 00:48:06.960
Work with trial and error yourself

811
00:48:06.960 --> 00:48:10.410
If possible, go with block image

812
00:48:10.410 --> 00:48:13.110
As opposed to transparent image

813
00:48:13.110 --> 00:48:15.520
And with simple background

814
00:48:15.520 --> 00:48:19.520
With an outline around the content

815
00:48:19.520 --> 00:48:23.370
This will make the image easier to detect

816
00:48:24.670 --> 00:48:27.020
And it doesn't have to be an image file on the screen

817
00:48:27.020 --> 00:48:30.000
Even when you print it out, make it into stickers

818
00:48:30.000 --> 00:48:34.520
The same strategies work for the high recognition rate

819
00:48:34.520 --> 00:48:37.520
Let's summarize what we learned today

820
00:48:37.520 --> 00:48:40.970
First, we made our image textures to detect

821
00:48:40.970 --> 00:48:43.520
Into AR Candidate files

822
00:48:43.520 --> 00:48:47.120
And saved them as arrays at AR Session Config file

823
00:48:47.120 --> 00:48:50.070
Next, we used a new data type called Map

824
00:48:50.070 --> 00:48:54.020
Where we save data into Key and Value

825
00:48:54.020 --> 00:48:56.040
And we also tried reading that data type

826
00:48:56.040 --> 00:49:00.090
Finally, third, we put each image name as key

827
00:49:00.090 --> 00:49:02.290
And found the corresponding actor

828
00:49:02.290 --> 00:49:04.720
From the pre-made image database

829
00:49:04.720 --> 00:49:07.330
And we also spawned that actor

830
00:49:07.330 --> 00:49:10.600
On top of the detected image

831
00:49:10.954 --> 00:49:12.707
AR Candidate Image and Real-World Image Recognition
Implementing image recognition
In the DataAssets folder, select [+Add]-[Miscellaneous]-[Data Assets]

832
00:49:12.707 --> 00:49:14.226
After selecting ARSession Config, create HunetARSessionConfig_Image
Specify Session Type World to use the rear camera

833
00:49:14.226 --> 00:49:15.860
After selecting AR Candidate Image, create ARImage_cat
Add cat.png file to Candidate Texture item

834
00:49:15.860 --> 00:49:16.862
After adding array to Candidate Images, add ARImage_cat. Add cat.png file

835
00:49:16.862 --> 00:49:17.782
When Switch on EDetection Type is Image Detection. Run HunetARSessionConfig_Image

836
00:49:17.782 --> 00:49:18.882
If the ECurrent Detection value is selected as Image Detection, run ARTracked Image

837
00:49:18.882 --> 00:49:19.614
Create 3D objects corresponding to recognized images
Implementation of actor spawning function corresponding to image

838
00:49:19.614 --> 00:49:21.054
Add cat_Idle.fbx and Texture.png files to the Mesh folder
Connect Base Color to ult’s [Texture Sample] node

839
00:49:21.054 --> 00:49:21.854
Select [Blueprints]-[Blueprint Class]-[Actor] and create BP_CatActor

840
00:49:21.854 --> 00:49:23.144
Set the Scale value to (0.2, 0.2, 0.2) to match the recognized image size
Set the Rotation value to (0, 0, -90) so that the modeling can face the front

841
00:49:23.144 --> 00:49:23.930
Connect the [Get Frendly Name] node to the Get Detected image

842
00:49:23.930 --> 00:49:24.710
After creating a variable called ImageModelingPair, change it to Map so that Key and Value data can be stored together

843
00:49:24.710 --> 00:49:25.483
When you insert Get Friendly Name into Map, the corresponding blueprint file is returned

844
00:49:25.483 --> 00:49:26.253
To prevent actors from being created overlapping, create the variable spawnedActor and connect the Spawned Actor and the [Is Valid] node

845
00:49:26.273 --> 00:49:26.940
After creating Get Local to World Transform, connect [Set Actor Transform] and [SpawnActor] respectively

846
00:49:26.940 --> 00:49:27.517
Create objects corresponding to each image
Recognizing multiple images
Delete the existing [Get] node and connect the [For Each Loop] node

847
00:49:27.517 --> 00:49:28.257
Enter HunetCar as the second modeling pair value and assign the BP_CarActor file as the value

848
00:49:28.257 --> 00:49:28.917
Convert the Variable Type of Spawned Actor to Map
Change Key in Description to String

849
00:49:28.917 --> 00:49:29.637
Change value in Description to [Actor]-[Object Reference]

850
00:49:29.637 --> 00:49:30.421
Save the actual created object using the [Get spawnedActor]-[Add] function

851
00:49:30.421 --> 00:49:31.968
The key value of [Add] is connected to [Get Friendly Name]
[Get spawnedActor] - Connect [Contains] and [Get Friendly Name]

852
00:49:31.971 --> 00:49:33.448
Add [Get spawnedActor]-[Contains]-[Branch]
Connect [Branch] node to [For Each Loop]

853
00:49:33.448 --> 00:49:34.068
If there is no created record, save the name and actual created instance after creating the Spawned Actor

854
00:49:34.068 --> 00:49:34.988
If there is a created record, move the actual object value using Set Actor Transform

855
00:49:34.988 --> 00:49:35.988
The End