Using Proximity Testing for Custom Actions

Create a 3D RPG Game with THREE.js Interacting with the Environment
7 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

When playing the game, you'll notice that as you move around this the scene, if you we get over to the left hand edge of the console, a button emerges. This is an action button. So it's detected the proximity of a particular position and creates an action button. There's a similar situation occurs if you get over this little object that's on the ground, yeah. And, again, an action button emerges, pressing it and we go into a custom action. So how do we handle that sort of situation in code.

You'll see that now we've collected a USB stick and we can close that panel. Previously, that would have been an empty cell. So if we reinitialize the game, you'll see that you've got an empty cell there we go and pick up a USB stick. And at the end of that animation, we call the opener for this panel. And we've populated it with USB stick. The idea being we can use that elsewhere in the game.

So let's have a look at the code for how we handle these situations. We're looking at version four of the game again And we're handling this in two different ways. Notice that the action button that we've added to the screen has got a method, which is context action. So let's have a look at context action. in context action, we're checking whether or not we've got an on action property, which is an object of the game. If we have we check what is modus ponens doors is what happens when you're over by the console and you press the action button to presses a button on the console and two doors on.

We call it some sound effects, which we'll look at in the next section. And we're repositioning our camera, which again we'll look at when we look at cutscenes We're adding some tweens to move the doors. And again, we're looking at that in another video. For this for this particular one, let's look at the collect. First thing we do is set the active camera to the collect one. So that's the closer looking forwards.

We then make collector objects invisible, so we don't multiple collected. And we push the collected objects in well the index of the collected objects into the collected array. The rate of the array doesn't exist, then we create it. And then we add the source of this in our own action object to the panel, for that particular cell based on that index. Children's zero children's zero children, this on action index finds the appropriate place to put it in the in the dump. So how do we create that own action?

Well, that's going to be on basis of proximity. So if we look at the if we look at the animate method, you'll see that we check in for collect objects. So for each collect object, we check its distance. If it's less than 100, which is about a meter, just under a meter, and then return the the action button number by setting it style property display to block and we create a non action object. In this instance, the action is going to be gather objects. So that's going to be The action that's displayed the animation that's displayed.

The mode, we're going to call it collect, the index is going to be zero, the source of the image that we add to the panel is USB dot jpg. And we set the fact that we've now got a trigger to true. So there's a trigger for the context action. If there isn't a trigger, if we don't find a trigger at all, then we delete this on action property. And that allows us to based on proximity display, a action button and that custom action as well happen when the action button is pressed, either by touch of IRA mouse press. So that's just one just fine.

How these Collect array was initialized in the first place. In the constructor method, we set collect to an empty array. We now have a load USB method that is called immediately have at the end of loading the environment. It loads the USB FB x file, adds it to the scene, scales it down goes rather to big gives it a name and gives you a position. Finding the position to place things is quite easy. You just run around with your character and use the console to find the position of the character a particular point.

If we if we open the console now can we do game player Object position that gives you the current position. And then you can see she's a minus 411 minus naught point four, five minus three 394. That's a current position in the scene. So it's an easy way of choosing these positions. But you'll sometimes have to play about with this value because you don't want it to be underneath of law. So this is missing from your scene.

Just keep adding to the y value and it will probably appear through the floor. So that allows you to do custom actions

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.