I edited a video to demonstrate the HTML/CSS design, but in addition to explaining how to do that: what element or entity would I use surrounding the dronecar, so that when the player’s rigidbody or collision entity (not sure which) interacts with it, the message is triggered to appear?
By the way I’m talking about the Press x to enter. Lol that part isn’t real, it’s edited.
Hi @Lorenzmotors! You can create a trigger entity. This is an entity with a collision component and a script to activate the text. Enable the text on trigger enter and disable the text on collision leave.
https://developer.playcanvas.com/en/user-manual/physics/trigger-volumes/
Hey @Albertos thank you for the response, as always :)!
It worked, as you can see by the console down there at the bottom it says Player triggerVolume.js… has entered/left trigger volume.
So, now I’m guessing I call a function to display (true) the HTML/CSS ui on entered and hide (false) on left.
How would you go about doing this and what would the code look like? I understand there’s probably a few ways to do it; I’m just wondering if I’m thinking about it in a way that makes the most sense.
I think I would create a global boolean in your trigger script. Then you can check this boolean in your other script.
I kinda get what you’re saying, like add an if statement? But, how would I write that, like in terms of the syntax?
if (triggerenter=1){
display.ui("press x to enter.")
I want the function to call the HTML/CSS script on true.
After the first line of your trigger script you create a boolean.
var triggerEntered = false;
With trigger enter and leave you control this boolean and in your other script you can check this boolean.
if (triggerEntered === true) {
// enable text
}
else {
// disable text
}
Okay, so like this?
How is var triggerEntered associated with the function? What mechanism is triggering/changing the false to true?
I’m trying to understand the “mechanism” behind everything, lol not just get it to work. So, while I appreciate the vague idea, and while I do get it, unfortunately if it’s not explained in detail, I can’t: 1. learn or understand what’s going on, but also 2. plug it into the computer and make it work.
As you know, computers only work one way, so I’m sitting here scrambling around ideas on where to plug these codes in, but I really learn best by example! LOL so please be specific and detailed. Sorry for the tall ask, I just won’t be able to understand it or implement it without learning the language/mechanism/syntax/etc. which like I said I learn through copy/pasting. (And, yes, I do sit here and read line by line what you’re writing and trying to develop the linguistics behind the machine language).
I’m on my mobile so I can’t write down all the code you need.
Where you set the console.log() if an entity entered the trigger, you can also set the boolean to true.
triggerEntered = true;
Where you set the console.log() if an entity leaved the trigger, you can also set the boolean to false.
triggerEntered = false;
Oooh! Okay, got it! I’m glad you did it that way because that’s essentially exactly what I was thinking; in terms of adding the boolean under the console. I just wasn’t sure how to code it.
Thank you.
And, now I’m guessing I create a separate JavaScript file with a function that calls the HTML/CSS ui?
No idea, not used HTML/CSS myself that much. I suggest to try the logic above in combination with the HTML/CSS text that is already in the tutorial project.
Instead of HTML/CSS you can use an entity with a text element. (For this you need to import a font asset to your project).
https://developer.playcanvas.com/en/user-manual/user-interface/text-elements/
Dang, I really wanna do it the CSS way; trying to stick to code as much as possible so I can learn more under-the-hood stuff 
So what is the problem with do it with HTML/CSS? Did you try to apply the logic above?
Hey, so basically I transfer the variable from the triggerVolume.js file into the enterDronecar-ui-call.js, right?
And, then when the computer turns the triggerEntered variable to true it pops up the Press X to enter. message.
I started as you can see, lol but there’s no way for me to know the vocabulary because I never have been taught this stuff, so I wouldn’t even know which words to Google to find the answer. Haha, all I’m looking for is some linguistics training in machine code so I can talk like a programmer 
I don’t think you can do this in the initialize function, because this is only executed at start of the game. You need to create something in the update function, where you can change the text based on the conditions.
Where is the text applied in the original project?
On initialize you would need to generate the HTML element with its CSS. Then, on collision event, just like you change triggerEntered , you would instead show/hide the HTML element - you can either remove/add the element from DOM, or apply CSS property to hide/show it.
Okay! These sound like really good ideas in terms of the computing power requirements and stuff. Sounds really efficient.
How do you code it though 
I get the theory and everything; there’s multiple ways of doing it I guess. Just whatever works is fine. And I hate to keep reiterating this point if whoever responds can just please walk me through the thought process, including where you go to look for this information and solutions.
I looked at the API and everything just the words I’m looking for don’t seem to match what I need? Is PlayCanvas the only source for this stuff or can you look on external websites/sources for coding assistance?
Here I modified a little the first person tutorial project to demonstrate:
https://playcanvas.com/project/902048/overview/forum-ui-on-trigger
Lmfao. This is perfect. Thank you <3
Hey, I’m getting a few errors. I tried to change the names of the classes/methods whatever those things are called to more match how I think about what’s happening, lol so I may have made a few mistakes transferring your code over.
But, it looks like some sort of declaration error?
I had a quick look at your project. Here are a few things I changed:
this.app.assets.find(...)).