Hello guys,
I just got started with playcanvas andI am interested in making a FPS with a title screen, some basic AI, adding a gun that can shoot bullets and adding many scenes.
I am not completely new to programming a game ( I have used Unity and Phaser.js) so I have some knowledge about Javascript.
Anyway, my fist step is to make a player (a capsule) that can look around with the mouse and move with WASD. I tried to look at the tutorials, but I didn’t really understand them. If anyone could help, I would be very grateful.
Hi @Aeneas_Ferguson and welcome,
Have you seen the following tutorial? It showcases exactly how to implement first person movement. If you have any further question feel free to ask.
https://developer.playcanvas.com/en/tutorials/first-person-movement/
Hey @Leonidas!
First off, thanks for responding so fast! I been on forums that takes many days to get an answer. Also thanks for that link, it really helps!
1 Like
Hey @Leonidas, I add the script under the update function and I put a rigidbody on my capsule and a collision, but all my player does is fall though my plane. I can’t move or look around.Is there something that I am missing?
@Aeneas_Ferguson Yes, you need to add a collision and a rigidbody to the plane. make sure the rigidbody type is set to static.
@Fus_ion the collider worked, but I still can’t look around or move.I copied and pasted it into the update function. It looks like this:
var PlayerMove = pc.createScript(‘playerMove’);
// initialize code called once per entity
PlayerMove.prototype.initialize = function() {
};
// update code called every frame
PlayerMove.prototype.update = function(dt) {
var FirstPersonMovement = pc.createScript(‘firstPersonMovement’);
FirstPersonMovement.attributes.add(‘camera’, {
type: ‘entity’,
description: ‘Optional, assign a camera entity, otherwise one is created’
});
FirstPersonMovement.attributes.add(‘power’, {
type: ‘number’,
default: 2500,
description: ‘Adjusts the speed of player movement’
});
FirstPersonMovement.attributes.add(‘lookSpeed’, {
type: ‘number’,
default: 0.25,
description: ‘Adjusts the sensitivity of looking’
});
// initialize code called once per entity
FirstPersonMovement.prototype.initialize = function() {
this.force = new pc.Vec3();
this.eulers = new pc.Vec3();
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);
// Check for required components
if (!this.entity.collision) {
console.error("First Person Movement script needs to have a 'collision' component");
}
if (!this.entity.rigidbody || this.entity.rigidbody.type !== pc.BODYTYPE_DYNAMIC) {
console.error("First Person Movement script needs to have a DYNAMIC 'rigidbody' component");
}
};
// update code called every frame
FirstPersonMovement.prototype.update = function(dt) {
// If a camera isn’t assigned from the Editor, create one
if (!this.camera) {
this._createCamera();
}
var force = this.force;
var app = this.app;
// Get camera directions to determine movement directions
var forward = this.camera.forward;
var right = this.camera.right;
// movement
var x = 0;
var z = 0;
// Use W-A-S-D keys to move player
// Check for key presses
if (app.keyboard.isPressed(pc.KEY_A) || app.keyboard.isPressed(pc.KEY_Q)) {
x -= right.x;
z -= right.z;
}
if (app.keyboard.isPressed(pc.KEY_D)) {
x += right.x;
z += right.z;
}
if (app.keyboard.isPressed(pc.KEY_W)) {
x += forward.x;
z += forward.z;
}
if (app.keyboard.isPressed(pc.KEY_S)) {
x -= forward.x;
z -= forward.z;
}
// use direction from keypresses to apply a force to the character
if (x !== 0 && z !== 0) {
force.set(x, 0, z).normalize().scale(this.power);
this.entity.rigidbody.applyForce(force);
}
// update camera angle from mouse events
this.camera.setLocalEulerAngles(this.eulers.y, this.eulers.x, 0);
};
FirstPersonMovement.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;
}
};
FirstPersonMovement.prototype._createCamera = function () {
// If user hasn’t assigned a camera, create a new one
this.camera = new pc.Entity();
this.camera.setName(“First Person Camera”);
this.camera.addComponent(“camera”);
this.entity.addChild(this.camera);
this.camera.translateLocal(0, 0.5, 0);
};
};
@Aeneas_Ferguson don’t copy and paste it into the update function if you want the whole script you just erase the all code inside the script you created then paste the fps script into the blank space.
also if you want to insert your scripts to a thread just click the code highlight button. located beside the upload button
1 Like
@Fus_ion Thanks for trying to help, but I did all the steps and I still can’t move my capsule. I’ll try to find more tutorials.
@Aeneas_Ferguson Oops, i forgot to say you have to parse the script.
After you click parse it should create a new script called firstpersonmovement
Example:
ive done all of this though and it still doesent work