[SOLVED] This line of code gives me an error, Help!

this.camera.setLocalEulerAngles(this.eulers.y, this.eulers.x, 0);

the errror

[PlayerMovement.js?id=43816387&branchId=abf7dc27-cf14-4fa2-907d-bd028a23c7ed:110]: Cannot read property ‘setLocalEulerAngles’ of undefined

when i initialize i have this

PlayerMovement.prototype.initialize = function() {
    this.eulers = new pc.Vec3();
    this.force = new pc.Vec3();
    this.jumping = {
        state: false
    };
    
    var app = this.app;
    
    // Listen for mouse move events
    app.mouse.on("mousemove", this._onMouseMove, this);

    // when the mouse is clicked hide the cursor
    app.mouse.on("mousedown", function () {
        app.mouse.enablePointerLock();
    }, this);  
    
};

So i think I am setting the eulers?

Hi @Aaron_B! The problem is that the script doesn’t know what the camera is.

I am new to this and java script but I’m picking it up. Would the correct line to add then be something like.

camera = this.camera;
?

because at i have an attribute for the camera entity and have a camera loaded in as an entity.

I don’t see the attribute in this script. So when you add an attribute with the name “camera” in this script you can use this.camera like you already do. (As an alternative you can add a line this.camera = this.app.root.findByName("Camera"); to your initialize function).

@Albertos Thank you for the help! It’s almost working! I stopped getting the error because i realized i had it called cameraEntity in the attribute so i changed the other line to reflect this now. But!

I started the game and could see fine until i clicked, and then it went all gray and i cant see anything or tell if it;s moving or really tell anything at all. I so wish this could be able to have an editor view and ingame view. It’s like did my camera teleport somewhere xD?

I can’t see what you’re doing in your script when you click the mouse, but it’s probably related to the line that first gave you the error. Try do disable lines in your script to see without which line the problem is solved. You can disable a line by placing // before the line.

1 Like

@Albertos thank you man, sorry here is the full script.


// Create PlayerMovement script.
var PlayerMovement = pc.createScript('playerMovement');

// Add attributes to the script.
PlayerMovement.attributes.add('movementSpeed', {
    type: 'number',
    default: 0.025
});

PlayerMovement.attributes.add('jumpPower', {
    type: 'number',
    default: 200.0
});

PlayerMovement.attributes.add('raycastPlayerBase', {
    type: 'entity'
});

PlayerMovement.attributes.add('cameraEntity', {
    type: 'entity'
});

// initialize code called once per entity
PlayerMovement.prototype.initialize = function() {
    this.eulers = new pc.Vec3();
    this.force = new pc.Vec3();
    this.jumping = {
        state: false
    };
    
    var app = this.app;
    
    // Listen for mouse move events
    app.mouse.on("mousemove", this._onMouseMove, this);

    // when the mouse is clicked hide the cursor
    app.mouse.on("mousedown", function () {
        app.mouse.enablePointerLock();
    }, this);  
    
};


PlayerMovement.prototype.update = function(dt) {
    // Get application reference.
    var app = this.app;
   
    // Get players force vector.
    var force = this.force;
    
    var pos = this.entity.getPosition();
    
    // Get camera direction vectors.
    var forward = this.cameraEntity.forward;
    var right = this.cameraEntity.right;
    
    // Movement logic. Listen for key presses and apply changes to directional vector components.
    var x = 0;
    var z = 0;
    
    if (app.keyboard.isPressed(pc.KEY_W)) {
        x += forward.x;
        z += forward.z;
    }
    
    if (app.keyboard.isPressed(pc.KEY_A)) {
        x -= right.x;
        z -= right.z;
    }
    
    if (app.keyboard.isPressed(pc.KEY_S)) {
        x -= forward.x;
        z -= forward.z;
    }

    if (app.keyboard.isPressed(pc.KEY_D)) {
        x += right.x;
        z += right.z;
    }
    
    // Jump code, checking if the space key was pressed instead of is pressed. This is important as we don't want to call the jump code multiple times.
    // We set a jump state to ensure that we can't jump whilst already jumping.
    // The jump power is passed in from the script attributes. This should be a high number.
    if (app.keyboard.wasPressed(pc.KEY_SPACE)) {
        if (this.jumping.state === false) {
            this.entity.rigidbody.applyImpulse(0, this.jumpPower, 0);
            this.jumping.state = true;
        }
    } else if (this.jumping.state === true) {
        // If the raycast finds a collision, we assume it is an obect we can land on, we therefor reset our jump state so we can jump again.
        if (this._checkBelow() !== null) {
            this.jumping.state = false;
        }
    }
    
    // Convert x and z directional vector components to a force vector, normalise and then scale to the movement speed.
    if (x !== 0 || z !== 0) {
        x *= dt;
        z *= dt;
        
        force.set(x, 0, z).normalize().scale(this.movementSpeed);
        this.entity.rigidbody.applyForce(force);
    }
    
    
    if (app.keyboard.wasPressed(pc.KEY_R)) {
        this.reset();
    }
    
    this.cameraEntity.setLocalEulerAngles(this.eulers.y, this.eulers.x, 0);
    
    this.eulers.y = pc.math.clamp(this.eulers.y, -80, 80);
    this.eulers.x = pc.math.clamp(this.eulers.x, -80, 80);
    
};

PlayerMovement.prototype._onMouseMove = function (e) {
    // If pointer is disabled
    // If the left mouse button is down update the camera from mouse movement
    if (pc.Mouse.isPointerLocked() || e.buttons[0]) {
        this.eulers.x -= this.lookSpeed * e.dx;
        this.eulers.y -= this.lookSpeed * e.dy;
    }            
};


// Rotate the player to face the same direction as the camera angle
/*PlayerMovement.prototype.postUpdate = function(dt) {
    
    var targetY = this.cameraEntity.script.playerCameraMovement.eulers.x;
    var targetAngle = new pc.Vec3(0, targetY, 0);
    this.entity.setEulerAngles(targetAngle);
};*/

// Raycast for checking if there is an entity below with collision and rigid body components. Returns null if no collision.
// Make sure the scene has a entity to use as a raycast point at the base of your character.
PlayerMovement.prototype._checkBelow = function() {
    return this.app.systems.rigidbody.raycastFirst(this.entity.getPosition(), this.raycastPlayerBase.getPosition());
};

PlayerMovement.prototype.reset = function () {
    this.entity.rigidbody.teleport(0, 0.5, 0);
    this.entity.rigidbody.linearVelocity = pc.Vec3.ZERO;
    this.entity.rigidbody.angularVelocity = pc.Vec3.ZERO;
};

It’s cobbled together. If you are able to spot anything let me know!Code Highlight

@Albertos

So commenting out the line that was fixed keeps it from going gray. But the camera won’t move, is it possible it’s locked in place somehow? or is the script not detecting mouse movement?

Would you add your code using the code highlight function please? Otherwise it’s very hard to read. Also do each script in a new code highlight block. (You can change your post using the pencil icon).

1 Like

Ok i fixed it, i did try to put it in the 3 periods before, thanks for pointing out the highlight block

Edit: That’s the only script so far

It are no periods. :see_no_evil:

The only line that is doing something with the camera is this.cameraEntity.setLocalEulerAngles(this.eulers.y, this.eulers.x, 0);? Did you try to disable that line? What’s happening when you disable the whole script?

You can check things like that by placing console.log("check"); in your script. If that line is executed you can see that in the console of your browser. (You can open the console in your browser with the F12 key).

Thanks for the tip, Isn’t this the function that detects the mouse movement?

PlayerMovement.prototype._onMouseMove = function (e) {
    // If pointer is disabled
    // If the left mouse button is down update the camera from mouse movement
    if (pc.Mouse.isPointerLocked() || e.buttons[0]) {
        this.eulers.x -= this.lookSpeed * e.dx;
        this.eulers.y -= this.lookSpeed * e.dy;
    }            
};

Yes @Aaron_B that part of the script looks to be detecting the mouse movement. Did your debugging lead you to this function?

@DevilZ thanks for asking,

I am working on trying that console log check. My code is almost exactly like https://developer.playcanvas.com/en/tutorials/first-person-movement/

and when i enable that script and disable mine. It works fine the camera moves. However with mine the camera won’t move. Perhaps having a set camera (camera entity childed, and put into the camera entity attribute slot) instead of creating on is what causes this?

This seems likely. Could you please share the project?

@DevilZ I think i shared it correctly? or at least published it as public?

https://playcanvas.com/project/771850/overview/seal

PlayerHitbox is the capsule with the player model and camera childed to it. The script I’m trying to get to work is called playermovement.

Yes, I can reproduce the bug… Could you please elaborate on what you changed between the two scripts? That should help considerably with debugging…

SOLVED. I just rebuilt the script and added piece by piece. So it works now, thank you to everyone who helped!

2 Likes