How do I make a security camera system like in the image above, that is based on a true/false variable? Also, it’s kinda getting annoying that nobody’s answering my questions.
In that image, there’s a few things going on. You would need:
- A full screen post effect to do the film grain effect. PlayCanvas already offers some built in post effect scripts that you can use as a starting point. Note that this is an advanced topic that requires knowledge of GLSL shader coding.
- A UI implemented in HTML/CSS (and potentially canvas 2D). PlayCanvas supports HTML and CSS assets. We don’t currently have a specific tutorial covering HTML/CSS UI creation, but in the meantime, various demos do show this (e.g. the first person movement project).
Will the HTML/CSS assets work once I convert it to exe?
It depends on the technology you use to build an EXE, but if you use NW.js, then yes, HTML and CSS work just fine.
Ok. I planned on using NW.js anyway. Can you make a security camera system tutorial?
Sorry, it’s a bit too specific I’m afraid and other things are taking priority at the moment. For example, a good HTML/CSS tutorial is definitely needed right now.
Also, how do you make a camera black & white instead of color? I know in Five Nights at Freddy’s it was color, but I want it BW.
There are two ways for rendering UI: HTML+CSS or WebGL. I recommend HTML+CSS.
How do I make a HTML/CSS ui change the camera? I was satisfied when I realized that I still didn’t know how.
Might be worth reading this thread that talks about how to set up HTML elements and attach functionality to buttons.
But I don’t need to switch the scene, I just need to switch to an already existing camera that is in the same scene.
Basically what you need is to understand how to add click handlers to HTML buttons and then how to change cameras.
To add a click handler on a button you first need to get a reference to that button. You could set an id to that button in your HTML like so:
<button id="someId"></button>
Then in your script you can do
var button = document.getElementById('someId');
button.addEventListener('click', function () {
// do what you want here..
})
To change cameras in your scene you could have different Entities each with a camera component attached, and then enable / disable the Entity that you want depending on which camera you want activated. I assume you understand how to find Entities in the scene and enable / disable them.
Also various times we will point you to similar questions that contain information about part of the problem you are trying to solve. It is hard to find answers to such specific questions as yours - but when you face a difficulty try to break it apart in smaller problems and then fix each one . For example in this case you want to click on a button and change cameras. Do you know how to do something when a button is clicked? Solve that first. Do you know how to change cameras? If not you can ask about that. Just basically try to break problems apart in smaller problems and find info on each problem separately. Just some general advice…
1 Like
Is disable this.entity.disable and enable, this.entity.enable?
It’s this.entity.enabled = false / true
Ok. Thanks! I will start asap. What do you put in between button tags?
You can put the text that you want to have inside the button. I recommend reading up on HTML and CSS as it will definitely prove useful to you in the long run anyway:
Can I make the button an image by putting an image tag in between button tags?