Bullet trail effect

Hello. I’m trying to add a bullet trail/tracing effect to my FPS game project. After asking around in the Play Canvas official discord channel, i learned that there’s an easy way to do this. I was told to add a cone entity in the scene then instantiate that cone and move&scale it along the raycasting line(start point-end point). This process will run inside the function below:

Gun.prototype.shoot = function (screenPosition) {
    this.isReloading = false;
    if (this.currentAmmo == 0) {
        console.log("out of ammo");
        return false;

    var centerScreenX = this.app.graphicsDevice.width / 2;
    var centerScreenY = this.app.graphicsDevice.height / 2;

    var from = this.cameraEntity.getPosition();
    var to = this.cameraEntity.camera.screenToWorld(centerScreenX, centerScreenY, this.cameraEntity.camera.farClip);
    var result = this.app.systems.rigidbody.raycastFirst(from, to);

I know how to move and change scale of an entity with code but i’m not sure how to move and scale the cone within this function. Another thing is, in what way should i scale the cone? Do i need to scale it on z axis until turns into a line shape? But i don’t want it to be like a laser beam.Not an infinite line. I just want it to make the bullets visible in a way. I think it’ll be fine if it look like something like this:

Adding the trail behind the bullet would look much cooler imo but that’s not a priority right now. Just wanna make this work first.

Any help/advice would be much appreciated. Thanks very much in advance

I’ve got some really old code here that does something very similar that you could adopt. The code I have ‘draws’ a line between two vec3 positions: https://playcanvas.com/project/1004177/overview/debug-line-renderer

1 Like