{"id":1506,"date":"2020-07-15T10:49:07","date_gmt":"2020-07-15T01:49:07","guid":{"rendered":"https:\/\/www.munchou.com\/biwa-chan\/?p=1506"},"modified":"2020-07-15T10:49:54","modified_gmt":"2020-07-15T01:49:54","slug":"my-first-game-in-unity-part7-the-side-view-camera","status":"publish","type":"post","link":"https:\/\/www.munchou.com\/biwa-chan\/?p=1506","title":{"rendered":"My first game in Unity part7 \u2013 The side-view camera"},"content":{"rendered":"<p>Buenos dias muchachos!<\/p>\n<p>The truck&#8217;s behavior being satisfactory, I decided to get the final in-game view (or close to what it&#8217;ll be). So I switched to a more classic side view (I&#8217;ll keep it like that for now, maybe forever) and decided to create a &#8220;dynamic&#8221; camera that reacts to the speed of the truck and that is smooth.<br>It took me a little time to get a decent result, the first thing I tried was depending directly on the speed and &#8211; logically &#8211; ended up being too rough.<\/p>\n<p>So after a little research, I found in the Unity (online) documentation <a href=\"https:\/\/docs.unity3d.com\/ScriptReference\/Vector3.SmoothDamp.html\"><i>Vector3.SmoothDamp<\/i><\/a>, which didn&#8217;t work quite as intended, probably because I&#8217;m using it in 2D instead of 3D? Not sure, but what is shared in the documentation was affected by the rotation of the truck on the Z axis, which was leading the camera to either move up or down on the Y axis (in the air), depending on the rotation.<br>Instead of using<br><em>Vector3 targetPosition = target.TransformPoint(new Vector3(0, 5, -10));<\/em><br>I used<br><em>Vector3 targetPosition = new Vector3(some stuff here that I&#8217;m about to show you);<\/em><\/p>\n<p>First, the code that works:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-1512\" src=\"https:\/\/www.munchou.com\/biwa-chan\/wp-content\/uploads\/2020\/07\/20200715b.png\" alt=\"\" width=\"806\" height=\"656\" srcset=\"https:\/\/www.munchou.com\/biwa-chan\/wp-content\/uploads\/2020\/07\/20200715b.png 806w, https:\/\/www.munchou.com\/biwa-chan\/wp-content\/uploads\/2020\/07\/20200715b-300x244.png 300w, https:\/\/www.munchou.com\/biwa-chan\/wp-content\/uploads\/2020\/07\/20200715b-768x625.png 768w\" sizes=\"(max-width: 806px) 100vw, 806px\" \/><\/p>\n<p>I&#8217;m not sure that&#8217;s the right way to do it, but Jack65423 (one of my most diligent neurons) suggested me to consider the camera as a moving object between 2 positions (each position being given specific coordinates x, y, z). So the camera&#8217;s position at the start would be (relative to the followed object, here the truck) (3, 3, -15).<br>Little Jacky then told me to set the camera as I wished it to be at full speed (moved and zoomed out) and to write down the coordinates. I got (9.8, 4, -26). Those would be the numbers we&#8217;d get when the truck is at its maximum speed (50km\/h in that case). So at 0km\/h, we have (3, 3, -15), and at 50km\/h (9.8, 4, -26).<br>By doing an extremely complicated subtraction, we can see how much the coordinates must &#8220;evolve&#8221;.<br>For example, for the Z axis, I created the <i>speedZ <\/i>value that is equal to the vehicle speed divided by 4.55. Where does 4.55 come from? I divided 50 (the max speed) by 11 (the difference between the final coordinates and the original ones). 50\/11=4.55 (approximately).<br>Actually, for <i>speedX<\/i>, it should be around 7.4, but I wanted the camera to move much more to the right side in order to let the truck appear on the left, hence giving the player a better view of what&#8217;s to come on the road.<\/p>\n<p><em>speedX<\/em>, <em>Y<\/em> and <em>Z<\/em> vary depending on the speed, which means they are equal to 0 when the truck isn&#8217;t moving, and they&#8217;ll reach the desired end value when the speed is at its maximum.<br>Knowing that, Bob687 finished the job with the <em>Vector3<\/em> formula.<br>In case you don&#8217;t know, it&#8217;s <em>Vector3(x, y, z)<\/em>.<br>Which gives us:<br><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-1516 size-full\" src=\"https:\/\/www.munchou.com\/biwa-chan\/wp-content\/uploads\/2020\/07\/20200715c-e1594777138168.png\" alt=\"\" width=\"720\" height=\"33\" srcset=\"https:\/\/www.munchou.com\/biwa-chan\/wp-content\/uploads\/2020\/07\/20200715c-e1594777138168.png 720w, https:\/\/www.munchou.com\/biwa-chan\/wp-content\/uploads\/2020\/07\/20200715c-e1594777138168-300x14.png 300w\" sizes=\"(max-width: 720px) 100vw, 720px\" \/>For <em>x<\/em>: <em>target.position.x + 3 + speedX<\/em><br>For <em>y<\/em>: <em>target.position.y + 3 + speedY<\/em><br>For <em>z<\/em>: <em>target.position.z &#8211; 15 &#8211; speedZ &#8211; Mathf.Abs(target.position.y \/2)<\/em><br>Why is z so different? Because I noticed that when the truck goes high and jumps, the ground disappears and it&#8217;s not possible to anticipate anything (and honestly, it doesn&#8217;t look pretty). So I added one more thing that depends on the position of the truck on the Y axis. I divided by 2 so that the zoom out wouldn&#8217;t be extreme. Now it looks quite natural.<br>Oh yes, to zoom out (on the Z axis), the camera goes into the negatives, therefore it is necessary to subtract.<br>Also, because the truck goes up and down on the Y axis, I added the <i>Mathf.Abs<\/i> so that even when the Y is negative, it&#8217;s converted into a positive and the camera won&#8217;t zoom in unexpectedly (although I haven&#8217;t tested it, but I believe it should work).<\/p>\n<p><strong>The special case of <em>speedX<\/em><\/strong><br>You may have noticed I used a condition to define <em>speedX<\/em>. The reason is simple: if the truck moves forward, the camera will behave as intended the truck appears at the left side of the screen). But I the truck moves backward, then what? It&#8217;ll disappear! To counter that, I made a simple condition based on either the truck is moving to the left (<em>Truck.rb.velocity.x &lt; 0<\/em>) or not. And depending on that, the value of <em>speedX<\/em> is different.<br>That simple!<br><strong>\/!\\ NOTE :<\/strong> in order to have access to <em>Truck.rb<\/em>, you must change (if you haven&#8217;t done it yet), in the truck&#8217;s script, <i><strong>private<\/strong> Rigidbody2D rb;<\/i> into <i><b>public <\/b>Rigidbody2D rb;<\/i> .<\/p>\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Buenos dias muchachos! The truck&#8217;s behavior being satisfactory, I decided to get the final in-game view (or close to what it&#8217;ll be). So I switched to a more classic side view (I&#8217;ll keep it like that for now, maybe forever) and decided to create a &#8220;dynamic&#8221; camera that reacts to the speed of the truck [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":1520,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[42],"tags":[],"_links":{"self":[{"href":"https:\/\/www.munchou.com\/biwa-chan\/index.php?rest_route=\/wp\/v2\/posts\/1506"}],"collection":[{"href":"https:\/\/www.munchou.com\/biwa-chan\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.munchou.com\/biwa-chan\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.munchou.com\/biwa-chan\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.munchou.com\/biwa-chan\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=1506"}],"version-history":[{"count":10,"href":"https:\/\/www.munchou.com\/biwa-chan\/index.php?rest_route=\/wp\/v2\/posts\/1506\/revisions"}],"predecessor-version":[{"id":1521,"href":"https:\/\/www.munchou.com\/biwa-chan\/index.php?rest_route=\/wp\/v2\/posts\/1506\/revisions\/1521"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.munchou.com\/biwa-chan\/index.php?rest_route=\/wp\/v2\/media\/1520"}],"wp:attachment":[{"href":"https:\/\/www.munchou.com\/biwa-chan\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1506"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.munchou.com\/biwa-chan\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=1506"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.munchou.com\/biwa-chan\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=1506"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}