So I am moving my camera from one point to another using tweens. I make it go from one point to another and then back.
But when I do this
lets say I go from point A to B, during this everything runs smooth , just that in the beginning for maybe a single frame it kind of blacks out and same problem occurs when the camera is coming back from B to A.
I have attached a drive link below where you can see video demonstration of my problem.
Hi @Harsh_Zota,
Try sharing some code and if possible a sample project that reproduces the issue.
It seems here that the positional values at the beginning of the tween are wrong for some reason. A good strategy to solve this is to debug (e.g. print to console) the position and rotation of that is applied to the camera during the tween. Check there if the values make sense.
I am sharing the code with you below
Stage1 Movement from point A to B
var TweenPosition = pc.createScript('cameraAnimation');
TweenPosition.attributes.add('duration',{type:'number',default:1.0});
TweenPosition.attributes.add('easing', {type: 'string', default: 'SineInOut'});
TweenPosition.attributes.add('delay', {type: 'number', default: 0});
TweenPosition.attributes.add('loop', {type: 'boolean', default: true});
TweenPosition.attributes.add('yoyo', {type: 'boolean', default: false});
TweenPosition.attributes.add('repeat', {type: 'number', default: 2});
TweenPosition.prototype.initialize = function() {
// create our tween
// this.app.on("game:start-camera",()=>{
this.reset();
// },this);
// this.reset();
// handle attribute changes
this.on('attr:duration', function (value) {
this.tween.duration = value;
}, this);
this.on('attr:easing', this.reset, this);
this.on('attr:delay', this.reset, this);
this.on('attr:loop', this.reset, this);
this.on('attr:yoyo', this.reset, this);
this.on('attr:repeat', this.reset, this);
};
TweenPosition.prototype.reset = function (value) {
// if we are already tweening then stop first
if (this.tween) {
this.tween.stop();
}
// reset our position
this.entity.setLocalPosition(0, 0.824,2);
// create a new tween using our script attributes
this.tween = this.entity.tween(this.entity.getLocalPosition())
.to(new pc.Vec3(0, 1.2,1.2), 2.0, pc.SineInOut);
// only set repeats if loop is false
if (! this.loop)
this.tween.repeat(this.repeat);
// start the tween
this.tween.start();
};
STage 2 , rotate camera to that angle
var TweenRotation = pc.createScript('cameraRotation');
TweenRotation.attributes.add('duration', {type: 'number', default: 1.0});
TweenRotation.attributes.add('easing', {type: 'string', default: 'SineInOut'});
TweenRotation.attributes.add('delay', {type: 'number', default: 0});
TweenRotation.attributes.add('loop', {type: 'boolean', default: true});
TweenRotation.attributes.add('yoyo', {type: 'boolean', default: false});
TweenRotation.attributes.add('repeat', {type: 'number', default: 2});
TweenRotation.prototype.initialize = function() {
// create our tween
// this.app.on("game:start-camera",()=>{
this.reset();
// },this);
// handle attribute changes
};
TweenRotation.prototype.reset = function () {
// if we are already tweening then stop first
if (this.tween) {
this.tween.stop();
}
// reset our rotation
// this.entity.setLocalEulerAngles(-90, 0, 65);
this.entity.setLocalRotation(-12,0,0);
// create a new tween using our script attributes
this.tween = this.entity.tween(this.entity.getLocalRotation())
.rotate(new pc.Vec3(-50, 0, 0), 2.0,pc.SineInOut);
// this.tween2 = this.entity.tween(this.entity.getLocalRotation())
// .rotate(new pc.Vec3(-90, 0, -180), 0.4, pc[this.easing])
// .delay(4.0);
// this.tween3 = this.entity.tween(this.entity.getLocalRotation())
// .rotate(new pc.Vec3(-90, 0, 0), 0.5, pc[this.easing])
// .delay(13.0);
// only set repeats if loop is false
if (! this.loop)
this.tween.repeat(this.repeat);
// start the tween
// this.tween.chain(this.tween2)
// .start();
this.tween.start();
};
Stage 3 , retuern to original position
var TweenPosition = pc.createScript('cameraExitAnimation');
TweenPosition.attributes.add('duration',{type:'number',default:1.0});
TweenPosition.attributes.add('easing', {type: 'string', default: 'SineInOut'});
TweenPosition.attributes.add('delay', {type: 'number', default: 0});
TweenPosition.attributes.add('loop', {type: 'boolean', default: true});
TweenPosition.attributes.add('yoyo', {type: 'boolean', default: false});
TweenPosition.attributes.add('repeat', {type: 'number', default: 2});
TweenPosition.prototype.initialize = function() {
// create our tween
// this.app.on("game:camera-exit",()=>{
this.reset();
// },this);
// this.reset();
// handle attribute changes
this.on('attr:duration', function (value) {
this.tween.duration = value;
}, this);
console.log("ijn camra exit");
this.on('attr:easing', this.reset, this);
this.on('attr:delay', this.reset, this);
this.on('attr:loop', this.reset, this);
this.on('attr:yoyo', this.reset, this);
this.on('attr:repeat', this.reset, this);
};
TweenPosition.prototype.reset = function (value) {
// if we are already tweening then stop first
if (this.tween) {
this.tween.stop();
}
// reset our position
this.entity.setLocalPosition(0, 1.2,1.2);
// create a new tween using our script attributes
this.tween = this.entity.tween(this.entity.getLocalPosition())
.to(new pc.Vec3(0, 0.824, 2), 2.0, pc.SineInOut);
// .delay(6.0);
// only set repeats if loop is false
if (! this.loop)
this.tween.repeat(this.repeat);
// start the tween
this.tween.start();
};
Stgae 4 , reuturn to original angle
var TweenRotation = pc.createScript('cameraRotation2');
TweenRotation.attributes.add('duration', {type: 'number', default: 1.0});
TweenRotation.attributes.add('easing', {type: 'string', default: 'SineInOut'});
TweenRotation.attributes.add('delay', {type: 'number', default: 0});
TweenRotation.attributes.add('loop', {type: 'boolean', default: true});
TweenRotation.attributes.add('yoyo', {type: 'boolean', default: false});
TweenRotation.attributes.add('repeat', {type: 'number', default: 2});
TweenRotation.prototype.initialize = function() {
// create our tween
// this.app.on("game:camera-exit",()=>{
this.reset();
// },this);
// handle attribute changes
};
TweenRotation.prototype.reset = function () {
// if we are already tweening then stop first
if (this.tween) {
this.tween.stop();
}
// reset our rotation
// this.entity.setLocalEulerAngles(-90, 0, 65);
this.entity.setLocalRotation(-50,-0,0);
// create a new tween using our script attributes
this.tween = this.entity.tween(this.entity.getLocalRotation())
.rotate(new pc.Vec3(-12, 0, 0), 2.0, pc.SineInOut);
// .delay(1.0);
// this.tween2 = this.entity.tween(this.entity.getLocalRotation())
// .rotate(new pc.Vec3(-90, 0, -180), 0.4, pc[this.easing])
// .delay(4.0);
// this.tween3 = this.entity.tween(this.entity.getLocalRotation())
// .rotate(new pc.Vec3(-90, 0, 0), 0.5, pc[this.easing])
// .delay(13.0);
// only set repeats if loop is false
if (! this.loop)
this.tween.repeat(this.repeat);
// start the tween
// this.tween.chain(this.tween2)
// .start();
this.tween.start();
};Hi @Harsh_Zota,
The issue is in the rotation of your camera on reset, specifically this line:
this.entity.setLocalRotation(x, x, x);
You are givng it 3 values. I assume you are giving it Euler angles. However, .setLocalRotation() accepts only quaternions or scalars for quaternion components. For Euler angles, you want .setLocalEulerAngles()
What is happening is that on reset you set camera to an undefined rotation, giving that dark frame. On the next frame, the tween sets the rotation of the camera using Euler angles, so the camera fixes itself and you can see stuff again.
3 Likes
It seems to have worked , thanks a lot
1 Like