{"author_link":"\/users\/coleslaughter","author_name":"ColeSlaughter","author_uid":"coleslaughter","comments":[],"epoch":1602651912,"event":"LD47","format":"md","ldjam_node_id":231190,"likes":7,"metadata":{"p_key":"151506","p_author":"ColeSlaughter","p_authorkey":"1013882","p_urlkey":"368011","p_title":"Making the snappy camera of Dude Ranch (Part 2: The Zoom)","p_cat":"LDJam ","p_event":"LD47","p_time":"1602651912","p_likes":"7","p_comments":"0","p_status":"WAYBACK","us_key":"1013882","us_name":"ColeSlaughter","us_username":"coleslaughter","event_start":"1601596800","event_key":"76","event_name":"Ludum Dare 47"},"node":{"_collation":{"body_sanitizer":"TextUtils::SanitizeHTML via existing importer","event":"LD47","removed_author":false},"_superparent":212256,"_trust":10,"author":13882,"body":"Howdy folks! :cowboy: \n\nBack at it again with another breakdown of how I got the camera working for our game, [**Dude Ranch**](https:\/\/ldjam.com\/events\/ludum-dare\/47\/dude-ranch)!  This time I\u2019m here to talk about how I implemented the dynamic zoom effect that happens as you mash the mouse buttons to wrangle a particularly thicc Dude into your clutches.\n\n![dudeRanchSmall.gif](\/\/\/raw\/a36\/3\/z\/3a237.gif)\n\nThe logic for this is actually pretty straightforward, so I\u2019ll start with posting the relevant code for you to peruse.\n\n```\n    private void InitiateImpactZoom()\n    {\n        if (this.ImpactZoomCoroutine == null && this.SnapCoroutine == null)\n        {\n            this.ImpactZoomCoroutine = StartCoroutine(this.ImpactZoom());\n        }\n    }\n\n    private IEnumerator ImpactZoom()\n    {\n        if (this.ImpactReturnCoroutine != null)\n        {\n            StopCoroutine(this.ImpactReturnCoroutine);\n        }\n\n        this.cumulativeYZoom += this.impactZoomAmount;\n\n        Vector3 targetPoint = new Vector3(showcasePoint.x, this.transform.position.y - this.impactZoomAmount, showcasePoint.z);\n\n        while (Mathf.Abs(this.transform.position.y - targetPoint.y) > 0.1f && followPlayer == false)\n        {\n            this.transform.position = Vector3.Lerp(this.transform.position, targetPoint, this.impactZoomSpeed);\n            yield return null;\n        }\n\n        this.transform.position = targetPoint;\n\n        this.ImpactReturnCoroutine = StartCoroutine(this.ReturnFromImpactZoom());\n        this.ImpactZoomCoroutine = null;\n    }\n\n    private IEnumerator ReturnFromImpactZoom()\n    {\n        Vector3 targetPoint = new Vector3(this.transform.position.x, this.zoomedInYValue, this.transform.position.z);\n\n        while (this.transform.position.y < targetPoint.y && followPlayer == false)\n        {\n            this.transform.position = Vector3.Lerp(this.transform.position, targetPoint, this.impactReturnZoomSpeed);\n            yield return null;\n        }\n\n        this.transform.position = targetPoint;\n        this.ImpactReturnCoroutine = null;\n    }\n```\n\nI won\u2019t post the full camera script, because honestly it\u2019s a mess of flags and poorly organized code that would probably just serve to confuse rather than educate.  But allow me to explain what\u2019s going on here in case any of it\u2019s confusing!\n\nSo basically, whenever the player clicks a mouse button to start wrangling a dude in, an event is fired that calls `InitiateImpactZoom()`.  This in turn fires off a coroutine that does the actual zooming.  The \u201cshowcasePoint\u201d in the `ImpactZoom()` coroutine is actually the midpoint that we figured out earlier in Part 1.  We use this as our anchor to determine what exactly we\u2019re zooming into.  Since our game functions on the X\/Z plane, we\u2019ll be manipulating the Y position of the camera to zoom in and out.\n\n`impactZoomAmount` and `impactZoomSpeed` can be set to whatever you want inside the class, and you can fiddle around with the values to make more bombastic or more understated zoom effects that fit your needs.  From there, we just do a simple Lerp in order to ensure that the camera doesn\u2019t jarringly jump to positions and disorient the player.\n\nAfter the impact zoom was finished, I wanted to have a little \u201crecovery\u201d zoom-out effect that slowly tried to return the camera back to its original position, so it encouraged you to keep wranglin' once you latched onto a Dude.  \n\n![dudeRanchRecovery.gif](\/\/\/raw\/a36\/3\/z\/3a238.gif)\n\nThis is called at the end of the `ImpactZoom()` coroutine, and it slowly \u201cundoes\u201d the effects of the original impact zoom.  It\u2019s important to make the value for `impactReturnZoomSpeed` significantly smaller than the initial `impactZoomSpeed`, otherwise the camera will look all jumpy zooming in and out between every click.  This zoom-out coroutine should also be cancelled if the player clicks again, so it doesn't interfere with the next zoom (this is handled in the first lines of the `ImpactZoom()` coroutine).\n\nAnd that\u2019s about it!  To be honest, this isn\u2019t the prettiest thing in the world.  Every now and then the camera still has its moments where it looks a little jitterier than I would prefer.  And as I mentioned before, the whole script that these short functions fit into is an absolute mess, which was the source of many of my frustrating bug hunts\u2026\n\nHowever, I don\u2019t regret spending so much time fiddling with it and wrestling with bugs, because I like to think the dynamic camera makes a big difference in making our frenetic game feel even more chaotic and playful!\n\n[**If you\u2019d like, you can see the fruits of our labor by playing Dude Ranch here!**]( https:\/\/ldjam.com\/events\/ludum-dare\/47\/dude-ranch)\n\nWe already have a big ol\u2019 list of games to play from the people who were kind enough to comment on our game, and we\u2019ve already played a ton of super stellar ones already!  Be on the lookout for a recommendations post very soon!\n\n\u2018Til next time! :point_right: :cowboy: :point_right:\n","comments":1,"comments-timestamp":"2020-10-14T06:03:57Z","created":"2020-10-14T04:36:58Z","files":[],"files-timestamp":0,"id":231190,"love":7,"love-timestamp":"2020-10-14T11:18:28Z","meta":[],"modified":"2020-10-14T11:18:28Z","name":"Making the snappy camera of Dude Ranch (Part 2: The Zoom)","node-timestamp":"2020-10-14T05:05:12Z","parent":224516,"parents":[1,5,9,212256,224516],"path":"\/events\/ludum-dare\/47\/dude-ranch\/making-the-snappy-camera-of-dude-ranch-part-2-the-zoom","published":"2020-10-14T05:05:12Z","scope":"public","slug":"making-the-snappy-camera-of-dude-ranch-part-2-the-zoom","subsubtype":"","subtype":"","type":"post","version":705468},"node_metadata":{"n_key":"231190","n_urlkey":"368011","n_parent":"224516","n_path":"\/events\/ludum-dare\/47\/dude-ranch\/making-the-snappy-camera-of-dude-ranch-part-2-the-zoom","n_slug":"making-the-snappy-camera-of-dude","n_type":"post","n_subtype":"","n_subsubtype":"","n_author":"13882","n_created":"1602650218","n_modified":"1602674308","n_version":"705468","n_status":"WAYBACK"},"source_url":"https:\/\/ldjam.com\/events\/ludum-dare\/47\/dude-ranch\/making-the-snappy-camera-of-dude-ranch-part-2-the-zoom","text":"Howdy folks! :cowboy: \n\nBack at it again with another breakdown of how I got the camera working for our game, [**Dude Ranch**](https:\/\/ldjam.com\/events\/ludum-dare\/47\/dude-ranch)!  This time I\u2019m here to talk about how I implemented the dynamic zoom effect that happens as you mash the mouse buttons to wrangle a particularly thicc Dude into your clutches.\n\n![dudeRanchSmall.gif](\/\/\/raw\/a36\/3\/z\/3a237.gif)\n\nThe logic for this is actually pretty straightforward, so I\u2019ll start with posting the relevant code for you to peruse.\n\n```\n    private void InitiateImpactZoom()\n    {\n        if (this.ImpactZoomCoroutine == null && this.SnapCoroutine == null)\n        {\n            this.ImpactZoomCoroutine = StartCoroutine(this.ImpactZoom());\n        }\n    }\n\n    private IEnumerator ImpactZoom()\n    {\n        if (this.ImpactReturnCoroutine != null)\n        {\n            StopCoroutine(this.ImpactReturnCoroutine);\n        }\n\n        this.cumulativeYZoom += this.impactZoomAmount;\n\n        Vector3 targetPoint = new Vector3(showcasePoint.x, this.transform.position.y - this.impactZoomAmount, showcasePoint.z);\n\n        while (Mathf.Abs(this.transform.position.y - targetPoint.y) > 0.1f && followPlayer == false)\n        {\n            this.transform.position = Vector3.Lerp(this.transform.position, targetPoint, this.impactZoomSpeed);\n            yield return null;\n        }\n\n        this.transform.position = targetPoint;\n\n        this.ImpactReturnCoroutine = StartCoroutine(this.ReturnFromImpactZoom());\n        this.ImpactZoomCoroutine = null;\n    }\n\n    private IEnumerator ReturnFromImpactZoom()\n    {\n        Vector3 targetPoint = new Vector3(this.transform.position.x, this.zoomedInYValue, this.transform.position.z);\n\n        while (this.transform.position.y < targetPoint.y && followPlayer == false)\n        {\n            this.transform.position = Vector3.Lerp(this.transform.position, targetPoint, this.impactReturnZoomSpeed);\n            yield return null;\n        }\n\n        this.transform.position = targetPoint;\n        this.ImpactReturnCoroutine = null;\n    }\n```\n\nI won\u2019t post the full camera script, because honestly it\u2019s a mess of flags and poorly organized code that would probably just serve to confuse rather than educate.  But allow me to explain what\u2019s going on here in case any of it\u2019s confusing!\n\nSo basically, whenever the player clicks a mouse button to start wrangling a dude in, an event is fired that calls `InitiateImpactZoom()`.  This in turn fires off a coroutine that does the actual zooming.  The \u201cshowcasePoint\u201d in the `ImpactZoom()` coroutine is actually the midpoint that we figured out earlier in Part 1.  We use this as our anchor to determine what exactly we\u2019re zooming into.  Since our game functions on the X\/Z plane, we\u2019ll be manipulating the Y position of the camera to zoom in and out.\n\n`impactZoomAmount` and `impactZoomSpeed` can be set to whatever you want inside the class, and you can fiddle around with the values to make more bombastic or more understated zoom effects that fit your needs.  From there, we just do a simple Lerp in order to ensure that the camera doesn\u2019t jarringly jump to positions and disorient the player.\n\nAfter the impact zoom was finished, I wanted to have a little \u201crecovery\u201d zoom-out effect that slowly tried to return the camera back to its original position, so it encouraged you to keep wranglin' once you latched onto a Dude.  \n\n![dudeRanchRecovery.gif](\/\/\/raw\/a36\/3\/z\/3a238.gif)\n\nThis is called at the end of the `ImpactZoom()` coroutine, and it slowly \u201cundoes\u201d the effects of the original impact zoom.  It\u2019s important to make the value for `impactReturnZoomSpeed` significantly smaller than the initial `impactZoomSpeed`, otherwise the camera will look all jumpy zooming in and out between every click.  This zoom-out coroutine should also be cancelled if the player clicks again, so it doesn't interfere with the next zoom (this is handled in the first lines of the `ImpactZoom()` coroutine).\n\nAnd that\u2019s about it!  To be honest, this isn\u2019t the prettiest thing in the world.  Every now and then the camera still has its moments where it looks a little jitterier than I would prefer.  And as I mentioned before, the whole script that these short functions fit into is an absolute mess, which was the source of many of my frustrating bug hunts\u2026\n\nHowever, I don\u2019t regret spending so much time fiddling with it and wrestling with bugs, because I like to think the dynamic camera makes a big difference in making our frenetic game feel even more chaotic and playful!\n\n[**If you\u2019d like, you can see the fruits of our labor by playing Dude Ranch here!**]( https:\/\/ldjam.com\/events\/ludum-dare\/47\/dude-ranch)\n\nWe already have a big ol\u2019 list of games to play from the people who were kind enough to comment on our game, and we\u2019ve already played a ton of super stellar ones already!  Be on the lookout for a recommendations post very soon!\n\n\u2018Til next time! :point_right: :cowboy: :point_right:\n","title":"Making the snappy camera of Dude Ranch (Part 2: The Zoom)","wayback_source":[]}