{"id":1822,"date":"2013-08-18T12:09:06","date_gmt":"2013-08-18T12:09:06","guid":{"rendered":"http:\/\/www.s2powered.com\/?p=1822"},"modified":"2019-05-31T18:47:13","modified_gmt":"2019-05-31T18:47:13","slug":"third-person-control","status":"publish","type":"post","link":"https:\/\/www.s2powered.com\/copiasito\/1822\/third-person-control\/tutorials\/oldtut\/08\/2013\/","title":{"rendered":"Third Person Control"},"content":{"rendered":"

Hi guys,
\nIn this tutorial I’ll explain the basis for implementing a Third Person Camera<\/strong> control system.
\n<\/p>\n

At the end of this tutorial you will be able to create a new camera object from scratch and write a script that control camera movements around the player character and a script that make player character walking, runing and correctly facing camera just like in games such as Batman, Hitman or SplinterCell.<\/p>\n

First we have to create a new scene in which make our experiments. We will create it inside the project provided with the engine installation package.<\/p>\n

So open the SampleProject03<\/strong> project without loading any scene. Click on New icon to create a completely new scene inside the project. We will call it simply myScene.<\/p>\n

Now Click on newTerrain icon to create a new terrain in the created scene, give it a name and click on create.<\/p>\n

Now we will use the enemy marine character of the FPS demo for our experiments. In the project objects browser goto the characters folder and drag the marine into the scene.<\/p>\n

NOTE that due to a know terrain BUG when inserting the character into the scene the terrain will disappear: save the scene, close the editor and reload all.<\/em><\/p>\n

Now we create a new camera object. Click on create button into class tab, it will remain pressed until you click on it again. When the create button is pressed This mean that editor is in “Create mode<\/em><\/strong>“.<\/p>\n

\"tp01\"<\/a><\/p>\n

Click on the camera class in the class list of the BasePack.dll plugin, the camera class parameters will appear,<\/p>\n

\"tp02\"<\/a><\/p>\n

click on activable parameter value in order to make parameter value true.<\/strong><\/p>\n

\"tp03\"<\/a><\/p>\n

Now click on the terrain inside the scene viewport, you will see the camera icon appearing. \u00a0Click on Create again to exit from “Create Mode<\/em><\/strong>“.<\/p>\n

\"tp04\"<\/a><\/p>\n

NOTE: If you haven’t associated a Text editor for scripting open Preferences anc click on the Script editor combobox to choose the executable file the engine must use as script editor. I use NotePad++.<\/em><\/strong><\/p>\n

\"tp10\"<\/a>\"tp11\"<\/a><\/p>\n

Now we will create a new script file.Select the script browser inside the project browser and choose the characters<\/strong> folder.<\/p>\n

\"tp05\"<\/a><\/p>\n

Press Right mouse button on an empty space inside the browser and click on new in the popup menu that will appear.<\/p>\n

\"tp06\"<\/a><\/p>\n

Name the new script as TPCamera<\/em><\/strong> and press ok: a new script file will be created.<\/p>\n

\"tp07\"<\/a><\/p>\n

Now we have to associate that script to the camera. Select the camera and click on class<\/strong> tab. Click on the Script parameter and choose the TPCamera.sc2<\/strong><\/em> script.<\/p>\n

\"tp12\"<\/a><\/p>\n

Now return to the Script browser and again press right mouse button on the script icon and click on Inspect<\/strong>, the script inspector will appear with the new script start code inside.<\/p>\n

\"tp08\"<\/a><\/p>\n

Click on edit…<\/strong> to edit the script: at this point if you have configured well the script editor path, the editor window will appear with script loaded.<\/p>\n

\"tp09\"<\/a><\/p>\n

Lets start with scripting!<\/p>\n

first we want camera rotate around Y axis when moving the mouse from left to right and viceversa, in the Update()<\/em><\/strong> entry function we write:<\/p>\n

\/* first rotate camera around (0,1,0) axis basing on MOUSEX value *\/
\nRotate(vec3(0.0,1.0,0.0),\"MOUSEX\",0.1);<\/code><\/p>\n

(see WIKI<\/a> for more info about this function)<\/p>\n

MOUSEX<\/strong> is a string that will be parsed by the scripting engine and means “get Mouse movement on X axis”.<\/p>\n

Now we want camera rotating around Its right axis basing on the Up-Down mouse movement:<\/p>\n

\/* then rotate camera around its right axis basing on MOUSEY value *\/
\nRotate(\"rgt\",\"MOUSEY\",0.1);<\/code><\/p>\n

Rgt\u00a0<\/strong>is a string that is parsed by scripting engine and it means “get this object right axis”<\/p>\n

Now that we have camera rotating basing on the mouse movements we can place it at a certain distance from the target character.<\/p>\n

Since we want our script can be used indipendently from the target character we can add a parameter to the script that contains the name of the target character. At the beginning of the script code write:<\/p>\n

#param string target<\/code><\/p>\n

This will tell the script engine that the script has a parameter called target<\/em><\/strong>. If you click on the script params object parameter (class tab) you will see a dialog containing the list of the script parameters<\/p>\n

Now we can place the camera respect the target character by first placing it at character coords and then traslate it away from character along its forward axis. Again in the Update()<\/em><\/strong> entry function:<\/p>\n

\/* Now Set camera position from target object position *\/
\nSetPositionFromObject(target);<\/code><\/p>\n

\/* place camera 150 points far from target *\/
\nTraslate2(\"fwd\",-150.0);<\/code>
\n(see SetPositionFromObject()<\/a> spec on the WIKI, see Traslate2()<\/a> spec on the WIKI)<\/p>\n

Now we set the target parameter with the name of the marine character. Click on scriptParams<\/strong> camera object parameter.<\/p>\n

\"tp13\"<\/a><\/p>\n

Now set the target parameter as marine010<\/strong><\/em> (the name of the marine character in the scene).<\/p>\n

\"tp15\"<\/a><\/p>\n

Now if you click on Play you will see the camera pointing the center of the character and, moving the mouse, the camera will move around it.<\/p>\n

Now we can adjust the camera position basing on our needs. In this case we place the camera on the top-right corner respect to the player character (just like seen in Batman: Arkham Asylum):<\/p>\n

\/* Traslate camera 80 units on its right *\/
\nTraslate2(\"rgt\",80.0);<\/code><\/p>\n

\/* traslate camera 50 units on Y axis*\/
\nTraslate(0.0,50.0,0.0);<\/code><\/p>\n

(see Traslate()<\/a> spec on the WIKI)<\/p>\n

Now we put it all together. The complete script will look like this:
\n
\n#param string target<\/code><\/p>\n

function void Init()
\n{
\n}<\/code>
\n
\nfunction void Update()
\n{<\/code>
\n\/* first rotate camera around (0,1,0) axis basing on MOUSEX value *\/
\nRotate(vec3(0.0,1.0,0.0),\"MOUSEX\",0.1);<\/code>
\n
\n\/* then rotate camera around its right axis basing on MOUSEY value *\/
\nRotate(\"rgt\",\"MOUSEY\",0.1);<\/code>
\n
\n\/* Now Set camera position from target object position *\/
\nSetPositionFromObject(target);
\n<\/code>
\n\/* place camera 150 points far from target *\/
\nTraslate2(\"fwd\",-150.0);
\n<\/code>
\n\/* and then adjust its position as needed *\/
\nTraslate2(\"rgt\",80.0);
\nTraslate(0.0,50.0,0.0);<\/code>
\n}<\/code>
\n
\nfunction void Message()
\n{
\n}<\/code><\/p>\n

A last touch to our code: Lets make camera do not penetrating obstacles. In this case we use a function called ClipCamera()<\/a>.<\/p>\n

The final code will be just like this:<\/p>\n

#param string target<\/code><\/p>\n

function void Init()
\n{
\n}<\/code>
\n
\nfunction void Update()
\n{<\/code>
\n\/* first rotate camera around (0,1,0) axis basing on MOUSEX value *\/
\nRotate(vec3(0.0,1.0,0.0),\"MOUSEX\",0.1);<\/code>
\n
\n\/* then rotate camera around its right axis basing on MOUSEY value *\/
\nRotate(\"rgt\",\"MOUSEY\",0.1);<\/code>
\n
\n\/* Now Set camera position from target object position *\/
\nSetPositionFromObject(target);
\n<\/code>
\n\/* place camera 150 points far from target *\/
\nTraslate2(\"fwd\",-150.0);
\n<\/code>
\n\/* and then adjust its position as needed *\/
\nTraslate2(\"rgt\",80.0);
\nTraslate(0.0,50.0,0.0);<\/code>
\n
\n\/* clip camera movements against obstacles *\/
\nClipCamera(target, 50.0, 50.0);
\n}<\/code>
\n
\nfunction void Message()
\n{
\n}<\/code><\/p>\n

Lets start with character now.<\/p>\n

First we have to create a new script. We do it in the same folder as Camera script. We name it TPPlayer.
\n<\/strong>As made with Camera we now assign the new script to the marine character and repeating the same procedure done with TPCamera<\/strong> script we inspect the TPPlayer<\/strong> script and edit it.<\/p>\n

What we have mainly to do with player character is making it to always be controlled respect to the camera orientation. In other words if, for example, player character is facing the camera and you press “forward” button the character turns itself in the direction of the camera “forward” and moves, the same thing with right, left and backward directions.<\/p>\n

To do this we will use a powerful script function called setDirection<\/strong>\u00a0<\/em>(see setDirection()<\/a> on the WIKI).<\/p>\n

This function lets you to set the facing direction of an object in many ways. One way to do this is set the direction of the object basing on the current active camera direction, this is what we need to make our character control system.<\/p>\n

Lets see the code:
\n
\nfunction void Update()
\n{<\/code>
\n\/* set direction forward respect the current camera*\/
\nif( IsKeyPressed(\"w\",0) )
\n{
\nSetDirection(\"camfwd\",1.0,0.25);
\n}<\/code>
\n\/* set direction backward respect the current camera*\/
\nif( IsKeyPressed(\"s\",0) )
\n{
\nSetDirection(\"camfwd\",-1.0,0.25);
\n}
\n<\/code>
\n\/* set direction right respect the current camera*\/
\nif( IsKeyPressed(\"d\",0) )
\n{
\nSetDirection(\"camrgt\",1.0,0.25);
\n}
\n<\/code>
\n\/* set direction left respect the current camera*\/
\nif( IsKeyPressed(\"a\",0) )
\n{
\nSetDirection(\"camrgt\",-1.0,0.25);
\n}
\n<\/code>
\n}<\/code><\/p>\n

Press play to see this script in action: rotate the camera around the character and then press “w”, you will see marine turn in the same direction of the camera.(see IsKeyPressed()<\/a> function on the WIKI)<\/p>\n

Now we have to animate and move it in order to make it walking and running.<\/p>\n

We will use the animation functions of the s2script foundation library. See Animation <\/a>chapter and Animation Functions<\/a> on the WIKI.<\/p>\n

First, in the update()<\/strong> function, we define a boolean variable that store if the character is in idle or walking state:
\n
\nvar bool walk;
\nwalk=false; \/* if nothing happens character is in idle state *\/
\n<\/code><\/p>\n

Now we modify the previous code in order to set the walk state if a key is pressed:<\/p>\n

function void Update()
\n{<\/code>
\nvar bool walk;
\nwalk=false;<\/code>
\n
\n\/* set direction forward respect the current camera*\/
\nif( IsKeyPressed(\"w\",0) )
\n{
\nSetDirection(\"camfwd\",1.0,0.25);
\nwalk=true;
\n}<\/code>
\n\/* set direction backward respect the current camera*\/
\nif( IsKeyPressed(\"s\",0) )
\n{
\nSetDirection(\"camfwd\",-1.0,0.25);
\nwalk=true;
\n}
\n<\/code>
\n\/* set direction right respect the current camera*\/
\nif( IsKeyPressed(\"d\",0) )
\n{
\nSetDirection(\"camrgt\",1.0,0.25);
\nwalk=true;
\n}
\n<\/code>
\n\/* set direction left respect the current camera*\/
\nif( IsKeyPressed(\"a\",0) )
\n{
\nSetDirection(\"camrgt\",-1.0,0.25);
\nwalk=true;
\n}
\n<\/code>
\n}<\/code><\/p>\n

Now we tell the engine to play a looping animation on the channel 0, if walk state is set we make “walk” animation blend weight be 1.0 and “standby” animation weight be 0.0, otherwise we make viceversa. Also, if walk state is set we move, using physics, the character in its forward<\/strong> direction :<\/code><\/p>\n

\/* play loop animation on channel 0 *\/
\nPlayAnimation(0,true);<\/code>
\n
\n\/* get character direction *\/
\nif(walk==true)
\n{
\nBlendCurrentAnimation(\"walk\",1.0,0);
\nBlendCurrentAnimation(\"standby\",0.0,0);
\nvar vec3 dir;
\ndir = GetAxis(\"fwd\");
\nphysicsCharacterMove(dir,150.0);
\n}
\nelse
\n{
\nBlendCurrentAnimation(\"standby\",1.0,0);
\nBlendCurrentAnimation(\"walk\",0.0,0);
\n}<\/code><\/p>\n

(see PlayAnimation()<\/a> , BlendCurrentAnimation()<\/a>, physicsCharacterMove()<\/a> and GetAxis()<\/a> functions spec)<\/p>\n

Using the above code we will see that when we press “w” the character turn and move along “camera forward” direction. We can note that the character animation go from standby<\/strong> to walk <\/strong>instantly, without any type of blend. We don’t want this so we can replace the BlendCurrentAnimation function calls with one call to AnimationcrossFade()<\/strong> function.<\/p>\n

This function smoothly assigns maximum weigth (1.0) to a specified animation and minimum weight (0.0) to all the others of the same specified channel, you can specify how much time must be spent for the transition.<\/p>\n

So the previous code become:<\/p>\n

\/* play loop animation on channel 0 *\/
\nPlayAnimation(0,true);<\/code>
\n
\n\/* get character direction *\/
\nif(walk==true)
\n{
\nAnimationcrossFade(\"walk\",0,100.0);
\nvar vec3 dir;
\ndir = GetAxis(\"fwd\");
\nphysicsCharacterMove(dir,150.0);
\n}
\nelse
\n{
\nAnimationcrossFade(\"standby\",0,100.0);
\n}<\/code><\/p>\n

Now we can use another boolean varaible to specify if the character is in running<\/strong> or walking<\/strong> state and we can make character go to running<\/strong> state if shift<\/em> <\/strong>key is pressed. We also cross fade run animation<\/em> and accellerate movement if in running<\/strong> state.<\/p>\n

Putting it all together the code will look like this:<\/p>\n


\nfunction void Update()
\n{
\nvar bool walk;
\nvar bool run;
\nwalk=false;
\nrun=false;
\n<\/code>
\nif(IsKeyPressed(\"@lshift\",0))
\n{
\nrun=true;
\n}
\n<\/code>
\n\/* set direction forward respect the current camera*\/
\nif( IsKeyPressed(\"w\",0) )
\n{
\nSetDirection(\"camfwd\",1.0,0.25);
\nwalk=true;
\n}
\n<\/code>
\n\/* set direction backward respect the current camera*\/
\nif( IsKeyPressed(\"s\",0) )
\n{
\nSetDirection(\"camfwd\",-1.0,0.25);
\nwalk=true;
\n}
\n<\/code>
\n\/* set direction right respect the current camera*\/
\nif( IsKeyPressed(\"d\",0) )
\n{
\nSetDirection(\"camrgt\",1.0,0.25);
\nwalk=true;
\n}
\n<\/code>
\n\/* set direction left respect the current camera*\/
\nif( IsKeyPressed(\"a\",0) )
\n{
\nSetDirection(\"camrgt\",-1.0,0.25);
\nwalk=true;
\n}
\n<\/code>
\n\/* play loop animation on channel 0 *\/
\nPlayAnimation(0,true);
\n<\/code>
\n\/* get character direction *\/
\nif(walk==true)
\n{
\nvar vec3 dir;
\ndir = GetAxis(\"fwd\");
\nif(run)
\n{
\nAnimationcrossFade(\"run\",0,100.0);
\nphysicsCharacterMove(dir,300.0);
\n}
\nelse
\n{
\nAnimationcrossFade(\"walk\",0,100.0);
\nphysicsCharacterMove(dir,150.0);
\n}
\n}
\nelse
\n{
\nAnimationcrossFade(\"standby\",0,100.0);
\n}
\n}
\n<\/code><\/p>\n

 <\/p>\n

This tutorial is provided with Script source code and a sample scene to copy inside the sampleProject03<\/strong> project.\u00a0Download the archive and extract its files inside the sampleproject03<\/strong> project folder.<\/p>\n

DOWNLOAD SCRIPT SOURCES AND ASSETS<\/a><\/p>\n

DOWNLOAD PDF VERSION<\/a><\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n","protected":false},"excerpt":{"rendered":"

Hi guys, In this tutorial I’ll explain the basis for implementing a Third Person Camera control system.<\/p>\n","protected":false},"author":1,"featured_media":1956,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[262],"tags":[],"class_list":["post-1822","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-oldtut"],"jetpack_featured_media_url":"https:\/\/www.s2powered.com\/copiasito\/wp-content\/uploads\/2013\/08\/TPCoverSmall.jpg","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.s2powered.com\/copiasito\/wp-json\/wp\/v2\/posts\/1822","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.s2powered.com\/copiasito\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.s2powered.com\/copiasito\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.s2powered.com\/copiasito\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.s2powered.com\/copiasito\/wp-json\/wp\/v2\/comments?post=1822"}],"version-history":[{"count":105,"href":"https:\/\/www.s2powered.com\/copiasito\/wp-json\/wp\/v2\/posts\/1822\/revisions"}],"predecessor-version":[{"id":2243,"href":"https:\/\/www.s2powered.com\/copiasito\/wp-json\/wp\/v2\/posts\/1822\/revisions\/2243"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.s2powered.com\/copiasito\/wp-json\/wp\/v2\/media\/1956"}],"wp:attachment":[{"href":"https:\/\/www.s2powered.com\/copiasito\/wp-json\/wp\/v2\/media?parent=1822"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.s2powered.com\/copiasito\/wp-json\/wp\/v2\/categories?post=1822"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.s2powered.com\/copiasito\/wp-json\/wp\/v2\/tags?post=1822"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}