0
1
00:00:00,980 --> 00:00:08,290
Now, in order to add a video into our scene, we actually need the help of SpriteKit.
1

2
00:00:08,300 --> 00:00:14,720
This is the 2D gaming technology that Apple has developed. Because if you think about it, videos are not
2

3
00:00:14,720 --> 00:00:17,150
exactly 3D content, right?
3

4
00:00:17,300 --> 00:00:24,350
So there's actually no native implementation of creating and placing videos into 3D using
4

5
00:00:24,350 --> 00:00:25,030
SceneKit.
5

6
00:00:25,130 --> 00:00:32,330
But no matter, SceneKit and SpriteKit actually play really nicely together. And it's time that we
6

7
00:00:32,330 --> 00:00:39,050
show you how you can combine the powers of SpriteKit and SceneKit and a ARKit altogether to create
7

8
00:00:39,050 --> 00:00:42,670
something pretty magical. Before we get started,
8

9
00:00:42,680 --> 00:00:49,070
I recommend just having a quick read of the documentation for the SceneKit Video Nerd Class that we're
9

10
00:00:49,070 --> 00:00:51,700
going to be using to render our video.
10

11
00:00:51,770 --> 00:00:57,590
I'll include a link to it in the course of resources list and you can just check it out before you head
11

12
00:00:57,590 --> 00:00:59,740
over to start coding.
12

13
00:00:59,750 --> 00:00:59,950
All right.
13

14
00:00:59,960 --> 00:01:07,230
So, now that we've read a little bit about SKVideoNode, it's time to put it into action.
14

15
00:01:07,240 --> 00:01:11,030
Now, I'm gonna create it right at the top of our "if let" statement
15

16
00:01:11,230 --> 00:01:18,370
once we're sure that we found an imageAnchor in the 3D scene. And first of all, I'm going to create a
16

17
00:01:18,370 --> 00:01:20,480
constant called videoNode.
17

18
00:01:20,920 --> 00:01:29,570
And this is going to be of type SKVideoNode and we're going to initialize it with the initializer
18

19
00:01:29,590 --> 00:01:34,450
that allows me to load up a video with a name.
19

20
00:01:34,450 --> 00:01:38,490
So the one that's a fileNamed with a data type of String.
20

21
00:01:38,620 --> 00:01:44,450
And this initializes a video node using a video file stored in the app bundle.
21

22
00:01:44,560 --> 00:01:49,720
And that's exactly what we have when we incorporated that video into our project.
22

23
00:01:50,200 --> 00:01:56,830
So let's hit enter and the string that I have to provide is the full name of
23

24
00:01:56,830 --> 00:01:58,210
harrypotter.mp4.
24

25
00:02:01,680 --> 00:02:02,570
And there we go.
25

26
00:02:02,880 --> 00:02:09,390
Now, I know that when we incorporate images, we tend to ignore the extension. When we're using
26

27
00:02:09,390 --> 00:02:09,840
SKVNode,
27

28
00:02:09,840 --> 00:02:15,480
It's really important that you include the full name of the file including the extension, and make sure
28

29
00:02:15,480 --> 00:02:20,390
you don't have any typos between how it's spelled over here and how it's spelled over here.
29

30
00:02:21,600 --> 00:02:27,990
So now that we've created this brand-new videoNode, we're going to let it start playing immediately.
30

31
00:02:27,990 --> 00:02:34,350
So all we need to say is videoNode.play and that runs the play method.
31

32
00:02:34,360 --> 00:02:44,650
Now, this videoNode is a SpriteKit videoNode, and we need to add that into a SceneKit element, so that
32

33
00:02:44,650 --> 00:02:49,570
we can place the SceneKit element into our sceneView session.
33

34
00:02:49,570 --> 00:02:52,490
To do that, we need to create a new scene.
34

35
00:02:52,540 --> 00:02:56,310
So we'll call this a videoScene.
35

36
00:02:56,740 --> 00:03:02,190
And this is going to be initialized using the SpriteKit scene.
36

37
00:03:02,380 --> 00:03:12,010
And this is a node that allows us to display SpriteKit objects. And we can initialize it with a size,
37

38
00:03:12,910 --> 00:03:17,440
and the size that it accepts is of type CGSize.
38

39
00:03:17,440 --> 00:03:22,870
So let's create a new CGSize using a width and a height.
39

40
00:03:22,870 --> 00:03:25,950
Now, this width and height doesn't have to be precise.
40

41
00:03:26,020 --> 00:03:31,600
It's just a guess of the width and height in pixels of your video.
41

42
00:03:31,600 --> 00:03:41,680
So, say, if you have a 720p video, then it would be 720 in height by 1080 by width.
42

43
00:03:41,680 --> 00:03:48,760
So in our case, our video is actually a lot smaller than that. Now, because we're using a 360p video in
43

44
00:03:48,760 --> 00:03:49,960
resolution,
44

45
00:03:49,960 --> 00:03:56,730
that means that it has a width of 480 by 360.
45

46
00:03:56,790 --> 00:04:00,920
So that's what we'll put as the size for our SKScene.
46

47
00:04:00,990 --> 00:04:07,380
Now, once we've created this videoScene, then it's just as what we did with SceneKit.
47

48
00:04:07,410 --> 00:04:16,710
We can add our videoNode to our videoScene. So we can say videoScene.addChildNode, and that is
48

49
00:04:16,710 --> 00:04:18,660
going to be the videoNode.
49

50
00:04:18,810 --> 00:04:22,680
And this is ready for display in 2D.
50

51
00:04:23,010 --> 00:04:30,030
Now, at the moment, we're not really displaying anything in 2D because we're working with a 3D environment.
51

52
00:04:30,600 --> 00:04:39,290
But in our 3D environment, all of our 3D objects have materials that can be used to cover our 3D objects.
52

53
00:04:39,300 --> 00:04:46,290
So for example, if we had a sphere that we could add a material of the textures of the moon to make that
53

54
00:04:46,290 --> 00:04:49,570
sphere look like a 3D moon object.
54

55
00:04:49,590 --> 00:04:56,400
Now, in this case, we're going to change the material of our plane. Instead of having a UIColor or
55

56
00:04:56,400 --> 00:04:56,900
UIImage,
56

57
00:04:56,910 --> 00:05:03,420
these are all 2D objects, we're going to add our videoScene as the 2D object that we're going
57

58
00:05:03,420 --> 00:05:10,650
to cover our plane. And this will make it display when we render our newspaper in AR.
58

59
00:05:10,680 --> 00:05:12,270
So let's go ahead and test it out.
59

60
00:05:16,490 --> 00:05:24,560
So our image is being recognized and our video is playing, but you'll notice that it's only playing one
60

61
00:05:24,560 --> 00:05:31,010
portion of the video and it's not correctly positioned in the middle of our image.
61

62
00:05:31,010 --> 00:05:39,280
So we need to fix that and move it so that it's centered on the image that was recognized.
62

63
00:05:39,280 --> 00:05:43,630
And to do that, we have to change the videoNode's position.
63

64
00:05:43,750 --> 00:05:47,640
So just before we add our videoNode to our videoScene,
64

65
00:05:47,740 --> 00:05:57,100
let's tap into the videoNodes position property, and change its position in its parent. So we can change
65

66
00:05:57,100 --> 00:06:00,650
the position by using a CGPoint,
66

67
00:06:00,670 --> 00:06:07,070
and the point is going to be consisting of an x and a y value in CGFloat.
67

68
00:06:07,150 --> 00:06:14,920
Now, the position of our videoNode that we want to set is banged in the middle of the videoScene, so that
68

69
00:06:14,980 --> 00:06:21,400
our video is scaled and positioned precisely in the center of the scene.
69

70
00:06:21,430 --> 00:06:32,690
So that means that the x position will be our videoScene.size.width / 2,
70

71
00:06:32,830 --> 00:06:34,990
so half way in the middle.
71

72
00:06:34,990 --> 00:06:37,660
And, again, the same with the height.
72

73
00:06:37,660 --> 00:06:42,900
So videoScene.size.height / 2.
73

74
00:06:42,940 --> 00:06:46,370
So that's also banged in the middle on the y axis.
74

75
00:06:46,370 --> 00:06:50,320
And now, if we run app, we'll see the size update.
75

76
00:06:54,050 --> 00:06:54,760
And there you go.
76

77
00:06:54,770 --> 00:07:00,950
So our video is now taking up the entire space of the scene and it's centered on the scene.
77

78
00:07:00,950 --> 00:07:02,990
But there's one more problem,
78

79
00:07:02,990 --> 00:07:05,970
it's flipped vertically.
79

80
00:07:06,230 --> 00:07:12,800
And that means that we need to rotate it along the y axis, so that we can see it the right way round.
80

81
00:07:14,380 --> 00:07:19,240
And to do that, we need to tap into another one of videoNodes properties,
81

82
00:07:19,240 --> 00:07:22,260
and this one is called the y scale.
82

83
00:07:22,510 --> 00:07:27,530
So we can use this property to scale up the video on the y axis,
83

84
00:07:27,670 --> 00:07:31,240
and there's a property for xScale as well as zScale.
84

85
00:07:31,360 --> 00:07:35,770
But in our case, our video is flipped along the y axis.
85

86
00:07:36,250 --> 00:07:40,120
So what we can do here is we don't want to scale our video,
86

87
00:07:40,120 --> 00:07:46,600
we don't want to make it bigger or smaller, so we're going to keep it as one. But we're going to make
87

88
00:07:46,600 --> 00:07:48,260
it minus one.
88

89
00:07:48,370 --> 00:07:56,770
And if we change the scale of our video along the y axis negatively, so reverse it, then it will also
89

90
00:07:56,770 --> 00:08:03,080
reverse the image to make it flip in the vertical axis or in the y axis.
90

91
00:08:03,100 --> 00:08:04,570
So let's try this again
91

92
00:08:07,810 --> 00:08:11,460
And now, you can see that our video is the right way round,
92

93
00:08:11,750 --> 00:08:18,110
and it's like as if it is on the newspaper because of the tracking abilities of ARKit.
93

94
00:08:18,920 --> 00:08:21,010
So that's pretty awesome, right?
94

95
00:08:21,110 --> 00:08:26,930
Given how few lines of code we need to write in order to do this. That's all for me.
95

96
00:08:26,960 --> 00:08:33,400
I hope you enjoyed making this magical newspaper app with me. And I'll see you on the next lesson.