Hello,
I am quite new to all of this and also java scripting. However I am finding this a very useful program for helping me in my studies.
I am currently stuck trying to make a button in the ui change to a camera.
Using examples that already exist (thankyou! those who made these) I have been able to combine texture selection and camera selection on keys.
However the next step is to select the camera with some buttons rather than the keys
https://playcanvas.com/editor/project/683234
If there is anyone who can have a look at the code I have so far or point me in the direction of some further examples that would be great
Kind Regards
Steve
Hi @InFocusAV and welcome!
Good job working your way through the tutorials to move your project forward.
There are some errors in your orbit-camera-button.js script, the code isn’t properly structured. Here is my attempt to fix that:
var UiStats = pc.createScript('uiStats');
UiStats.prototype.initialize = function() {
// find our widgets
this.OrbitButton = this.entity.findByName('OrbitButton');
this.activeCamera = this.entity.findByName('Center');
this.OrbitButton.element.on('click', function (dt) {
this.setCamera('Center');
}
};
// set camera from button click
UiStats.prototype.update = function (dt){
};
Having the syntax errors fixed you now need to implement the setCamera() method. You can try doing this by finding the camera entities, much like you did with the activeCamera. And then enabling/disabling respectively the right camera.
Hi Leonidas
Thnakyou for your reply,
I will continue to work on this. My java skills are very limited so it involves lots of reading some text books and then seeing how the text can relate to the examples on here is the best way I have found so far for me to gradually start to learn.
I think I am beginning to understand what you mean, I will need to use the lines from the camera_manager.js to setCamera, and then on the button press update this with the relevant ‘Camera’?
Hi I have come back to this project after working on another few things
I am still very much learning but I am going in completely the wrong direction with trying to make it work this way ?
Link to project https://playcanvas.com/project/683234/overview/change-texture
I did try and work on the code you gave me Leonidas however I kept going round in circles.
var SetCam = pc.createScript('SetCam');
SetCam.attributes.add('buttonEntity', {type: 'entity'});
// initialize code called once per entity
SetCam.prototype.initialize = function() {
this.button = this.buttonEntity.button;
this.buttonPressed = false;
this.button.on('pressedstart', this.onPresseStart, this);
this.button.on('pressedend', this.onPressedEnd, this);
this.entity.on('destroy', function() {
this.button.off('pressedstart', this.onPresseStart, this);
this.button.off('pressedend', this.onPressedEnd, this);
}.bind(this));
//set camera function
CameraManager.prototype.setCamera = function (cameraName) {
// Disable the currently active camera
this.activeCamera.enabled = false;
// Enable the newly specified camera
this.activeCamera = this.entity.findByName(cameraName);
this.activeCamera.enabled = true;
};
};
SetCam.prototype.onPresseStart = function(event) {
this.setCamera('Center');
};
SetCam.prototype.onPressedEnd = function(event) {
this.setCamera('Left');
};
Hi @InFocusAV,
What is your exact issue? Can you provide steps to reproduce?
Your code seems to be working fine when using the left/right/space key buttons to cycle between cameras.
Hi Leonidas
Apologies I was not very clear with the post.
The code to switch cameras with the keys works great. I am now trying to get the cameras to switch with a button in the UI, the ‘O’ button on the UI should if I got the code correct switch between the centre and left camera on push/release
This is not the final out come I am working towards however,
Ultimately my goal is to produce a menu so that a camera can be selected from a list of buttons on the UI, however I am falling at first step in simply getting abutton to recall a camera. You did post some guidance in first reply however I have not been successful in implementing this yet
I have made the script btnClick work to alter parameters of one camera which now make sense to my limted coding ability, however the next step would be to have 3 buttons one for each camera so you can select on a touch screen for example
Below is the code I am running to change the FOV of the centre cam
Hope this make sense
var BtnClick = pc.createScript('btnClick');
BtnClick.attributes.add('buttonEntity', {type: 'entity'});
// initialize code called once per entity
BtnClick.prototype.initialize = function() {
this.button = this.buttonEntity.button;
this.buttonPressed = false;
this.button.on('pressedstart', this.onPresseStart, this);
this.button.on('pressedend', this.onPressedEnd, this);
this.entity.on('destroy', function() {
this.button.off('pressedstart', this.onPresseStart, this);
this.button.off('pressedend', this.onPressedEnd, this);
}.bind(this));
};
BtnClick.prototype.onPresseStart = function(event) {
this.entity.camera.fov = 30;
};
BtnClick.prototype.onPressedEnd = function(event) {
this.entity.camera.fov = 45;
};
Got it! Since you have a script (camera_manager.js) successfully changing the active camera, I’d say you just need to communicate that event from your BtnClick script to there.
So let’s prepare your camera manager script to receive communications:
// initialize code called once per entity
CameraManager.prototype.initialize = function() {
this.activeCamera = this.entity.findByName('Center');
this.app.keyboard.on(pc.input.EVENT_KEYDOWN, this.onKeyDown, this);
// --- events
this.app.on('camera:set', this.setCamera, this);
};
Now from any other script you can easily call this app-wide event to change the active camera.
Here is a script that can be attached to a button element, and use a script attribute to fire that event:
var BtnStates = pc.createScript('btnStates');
BtnStates.attributes.add('cameraName', {
type:'string'
});
// initialize code called once per entity
BtnStates.prototype.initialize = function() {
// mouse events;
this.entity.element.on('mouseup', this.onRelease, this);
// touch events
this.entity.element.on('touchend', this.onRelease, this);
};
BtnStates.prototype.onRelease = function (event) {
this.app.fire('camera:set', this.cameraName);
};
You can attach this script to your button element entities and set the script cameraName attribute in editor to the camera name (Center, Left, Right etc.). That will fire the event listening in your camera manager script.
Thanks Leonidas!
That is some coding wizardry I have spent many an hour going round in circles trying to figure that one out, I didn’t even think to link scripts in this way. I clearly have a lot to learn!
Thanks again.
1 Like