Tutorial: Third Person Camera (1.0.4) (06/08/2018)


#1

To preface this, I have just started using PlayCanvas (coming from Unreal Engine 4 and pure C++/OpenGL) and couldn’t for the life of me find a good tutorial that clearly implemented a third person camera and movement system, the closest one I found was written in the legacy scripting structure. So I did a rewrite and started cleaning things up and am planning on implementing more features in the future. But for those who are in the same boat as I was, this should give you a great basis to start of with. Please forgive me if there is something wrong in the code, it is unoptimised.

Tutorial: Third Person Camera (1.0.4) (06/08/2018)

RELEASE (1.0.4) (06/08/2018): For this update, I’ve implemented a slightly altered third person camera system. This new system introduces a camera target entity. What this means is the camera lookAt code is no longer focused on the player entity anymore but on a seperate camera target entity.

What does this mean? By doing this, we can effectivly control the point of origin and positioning of the third person camera. This will allow for view setups such as “over the shoulder” or “left/right banked”.

On top of that, I’ve now made the camera movement code less reliant on hardcoded values and the use of “getParent()” by exposing a new script attribute “viewEntity”. This attribute will allow you to provide the top level entity that is parent of the camera, camera raycast clip entity, and the new camera target entity. This should give you slightly more freedom in creating subparent child relationships (e.g. grouping Camera and RaycastCameraClip together under one Camera Entity).

Other small changes include some new default speeds and modifiers for the script attributes.

RELEASE (1.0.3) (06/08/2018): Another small update for tonight. Implemented shift-to-run. No animation included, will do that on the next update. The shift-to-run feature is multiplier based and I have made sure to expose the variable through the script attributes.

Once again, feel free to fork/base this project!

Note: I am currently updating this between breaks at work (compiling takes time :cry:)

RELEASE (1.0.2) (06/08/2018): Small update to the project to fix the double jump bug. Turns out the collision raycast gets called immedietly after the jump as there will always be a collsion at the start of the jump thus allowing a double jump. By putting an else if instead of an if will ensure that the raycast won’t be checked until the next frame in which the raycast won’t find a collision.

Once again, enjoy and feel free to fork/base!

RELEASE (1.0.1) (05/08/2018): Updated this project to now include basic jumping. It is a very simple jump system with no animations attached as of yet. The jump system works on any height and will automatically detect the ground as long as you have set up the raycast end point object for the players base.

I have not included any animations for the jumping on this particular release, I will do so when I have more time.

The jumping is a little bit buggy in my opinion, you can still double jump even though the logic specifically dictates that you should not be able to. This might be caused by the way PlayCanvas parses the JavaScript at runtime. I will investigate further.

Enjoy this release, once again, feel free to fork/base it.

RELEASE (1.0.0) (04/08/2018): This is the first release of a full rewrite of Ben Carr’s “Third Person Controller” project.

The rewrite takes the core logic and implements it using current scripting structure. I have provided commenting throughout the code so it should be relatively easy to follow if you know basic JavaScript. I have also made use of script attributes so to ensure there are minimal hardcoded entity references and variables.

This implementation provides a simple third person movement and camera system.

In future releases I will be implementing walking, running, and jumping. If time permits, I will revamp this and build a full locomotion system. The camera could also do with some work, currently it feels very snappy and could do with some smoothing/tweening of the positional changes.

Feel free to fork this and/or use this as a base. The model is mine (use as you please), the animations however are from Mixamo.


#2

Great job! Thanks for sharing.


#3

Thanks! I hope to continue to share more tutorials and projects as I finish them.