Adding Cut Scenes

Create a 3D RPG Game with THREE.js Interacting with the Environment
6 minutes
Share the link to this page
Copied
  Completed
You need to have access to the item to view this lesson.
One-time Fee
$69.99
List Price:  $99.99
You save:  $30
€67.18
List Price:  €95.97
You save:  €28.79
£55.86
List Price:  £79.80
You save:  £23.94
CA$97.87
List Price:  CA$139.82
You save:  CA$41.95
A$107.62
List Price:  A$153.75
You save:  A$46.13
S$94.24
List Price:  S$134.64
You save:  S$40.39
HK$544.83
List Price:  HK$778.36
You save:  HK$233.53
CHF 62.54
List Price:  CHF 89.34
You save:  CHF 26.80
NOK kr774.97
List Price:  NOK kr1,107.14
You save:  NOK kr332.17
DKK kr501
List Price:  DKK kr715.75
You save:  DKK kr214.74
NZ$119.95
List Price:  NZ$171.37
You save:  NZ$51.41
د.إ257.07
List Price:  د.إ367.26
You save:  د.إ110.19
৳8,361.58
List Price:  ৳11,945.63
You save:  ৳3,584.04
₹5,909.84
List Price:  ₹8,442.99
You save:  ₹2,533.15
RM312.71
List Price:  RM446.75
You save:  RM134.04
₦118,484.88
List Price:  ₦169,271.38
You save:  ₦50,786.49
₨19,443.22
List Price:  ₨27,777.22
You save:  ₨8,334
฿2,412.28
List Price:  ฿3,446.26
You save:  ฿1,033.98
₺2,418.32
List Price:  ₺3,454.90
You save:  ₺1,036.57
B$406.01
List Price:  B$580.04
You save:  B$174.03
R1,267.89
List Price:  R1,811.35
You save:  R543.45
Лв131.37
List Price:  Лв187.69
You save:  Лв56.31
₩98,301.65
List Price:  ₩140,436.95
You save:  ₩42,135.30
₪259.10
List Price:  ₪370.16
You save:  ₪111.06
₱4,125.14
List Price:  ₱5,893.31
You save:  ₱1,768.17
¥10,832.35
List Price:  ¥15,475.45
You save:  ¥4,643.10
MX$1,429.79
List Price:  MX$2,042.64
You save:  MX$612.85
QR255.18
List Price:  QR364.56
You save:  QR109.38
P956.90
List Price:  P1,367.06
You save:  P410.16
KSh9,061.51
List Price:  KSh12,945.58
You save:  KSh3,884.06
E£3,475.01
List Price:  E£4,964.52
You save:  E£1,489.50
ብር8,566
List Price:  ብር12,237.67
You save:  ብር3,671.66
Kz63,900.87
List Price:  Kz91,290.87
You save:  Kz27,390
CLP$69,057.73
List Price:  CLP$98,658.13
You save:  CLP$29,600.40
CN¥506.93
List Price:  CN¥724.22
You save:  CN¥217.29
RD$4,217.06
List Price:  RD$6,024.63
You save:  RD$1,807.57
DA9,397.90
List Price:  DA13,426.15
You save:  DA4,028.25
FJ$159.29
List Price:  FJ$227.57
You save:  FJ$68.27
Q540.13
List Price:  Q771.64
You save:  Q231.51
GY$14,638.82
List Price:  GY$20,913.50
You save:  GY$6,274.67
ISK kr9,776.20
List Price:  ISK kr13,966.60
You save:  ISK kr4,190.40
DH703.91
List Price:  DH1,005.63
You save:  DH301.72
L1,275.33
List Price:  L1,821.98
You save:  L546.64
ден4,132.76
List Price:  ден5,904.20
You save:  ден1,771.43
MOP$561.01
List Price:  MOP$801.48
You save:  MOP$240.46
N$1,268.91
List Price:  N$1,812.81
You save:  N$543.90
C$2,574.70
List Price:  C$3,678.31
You save:  C$1,103.60
रु9,449.77
List Price:  रु13,500.25
You save:  रु4,050.48
S/265.32
List Price:  S/379.05
You save:  S/113.72
K281.71
List Price:  K402.47
You save:  K120.75
SAR262.77
List Price:  SAR375.40
You save:  SAR112.63
ZK1,934.92
List Price:  ZK2,764.29
You save:  ZK829.37
L334.42
List Price:  L477.77
You save:  L143.34
Kč1,702.59
List Price:  Kč2,432.37
You save:  Kč729.78
Ft27,646.05
List Price:  Ft39,496.05
You save:  Ft11,850
SEK kr772.42
List Price:  SEK kr1,103.50
You save:  SEK kr331.08
ARS$70,259.44
List Price:  ARS$100,374.93
You save:  ARS$30,115.49
Bs483.50
List Price:  Bs690.75
You save:  Bs207.24
COP$307,238.59
List Price:  COP$438,931.09
You save:  COP$131,692.49
₡35,641.51
List Price:  ₡50,918.63
You save:  ₡15,277.11
L1,768.23
List Price:  L2,526.16
You save:  L757.92
₲546,248.87
List Price:  ₲780,388.98
You save:  ₲234,140.10
$U2,983.14
List Price:  $U4,261.82
You save:  $U1,278.67
zł291.40
List Price:  zł416.31
You save:  zł124.90
Already have an account? Log In

Transcript

In the game, we want the user to be able to select various buttons that will open doors. To facilitate this, we split the doors off from the objects are they separate objects of their own. And by sliding them in the Zed direction, this particular one, we can slide it into the wall. We could actually add the animation to the scene itself. But we're going to look at adding some custom animation that you can dynamically in the game using tweens. So there we have the two objects that we're going to find.

Now we look at our Loader for our environments SPX. Notice how we've got a door objects, it's going to trigger set to null and proxy array and a doors array. That's because one trigger is going on two doors, because the door is acting as a pairs. If we find the child name includes door proxy, then we add it to our proxy array. And we check our door using this function here, which we'll look at in a moment. If the name includes door, very mind we've already checked the door proxy so so it can't be door proxy, it has to be door on its own.

And we push that into our doors array, and we check the door again. It's not a mash that is a simple No objects, I didn't include the name door No. And that's going to be our trigger. Once we've got a trigger and the proxies of length, the door proxies of length two, and the doors are of length two, we reassigned door and we start looking for some more sets of doors. In the game we've developed for this course, there is only one trigger and two doors. So there are only ever be one of these, but this is how you would do multiple ones of them.

So a game contains a doors array, which contains any number of objects of this form. With a trigger, proxy of length two, and doors of length two. The doors are what we see, the proxy is what we're going to use for blocking things from blocking our Ray caster. So let's have a look again at our automate function. And notice how it's looking through the doors array. Bear in mind, in this particular version of the game, there's only going to be one instance in this doors array.

And it's checking for the distance from the trigger. So the trigger is that Null Object we've created. And that's going to be what we use as the proximity test. If that's less than 100, from where we from where our player is, then we're going to show our action button and we're going to create an action that is going to push button so that's the action that our player character is going to show as an animation. The modes going to be open doors, and this instance, we're hard setting the index to zero but you would actually create a creating an index that is incremented and use the appropriate one. If you had more versions of this.

And we set trigger to true because there's only ever one trigger. So the context action can only be one thing. We use that in order to negate looking for collects because if triggers already set and we won't bother looking at it through this section, but if no triggers are set, then we're going to delete our own action property. Which brings us to context action. Now we can look more carefully at the open doors method that we saw in the previous video. Notice how we use the index value that we've got in our on action object.

We use that to find the appropriate doors object and set that to a constant called door. Left is going to be the first one of our chill children of the Doors, and right is going to be the second. And then we set a camera target and the camera target is going to be based on the position of the left door. And we do some careful repositioning. So we've got a camera in a suitable place. And then we're going to use tweens.

We'll look at the tweens again in the next video. So we will gloss over that we're adding a tween that's what's going to animate the doors to the left and to the right, depending on what which door they are. So let's have a look at how we're using camera target that's in the animate method is defined that our position is going to be whatever our camera target position is. And our target is going to be whatever our camera target is. So that's what we're going to be looking at. We're going to be looking at this particular target from this particular position, which gives us the ability to add a cutscene And then by using camera lookout, he's going to move the camera to the position defined and then look at the position we've described as the target.

Those simple changes allow us to press the button here and the doors open once the doors are finished being and we come back to the default camera

Sign Up

Share

Share with friends, get 20% off
Invite your friends to LearnDesk learning marketplace. For each purchase they make, you get 20% off (upto $10) on your next purchase.