{"author_link":"\/users\/coleslaughter","author_name":"ColeSlaughter","author_uid":"coleslaughter","comments":[],"epoch":1602484302,"event":"LD47","format":"md","ldjam_node_id":230980,"likes":6,"metadata":{"p_key":"151372","p_author":"ColeSlaughter","p_authorkey":"1013882","p_urlkey":"367877","p_title":"Making the Snappy Camera of Dude Ranch (Part 1: The Snap)","p_cat":"LDJam ","p_event":"LD47","p_time":"1602484302","p_likes":"6","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":"As the sole engineer this time around for the Keyboard Cowboys, there was a *lot* of components that I had to contend with to make sure our game, [**Dude Ranch**](https:\/\/ldjam.com\/events\/ludum-dare\/47\/Dude-ranch) was functional.  Character movement, lasso mechanics, Dude AI, a spawning system, scorekeeping, UI anchoring, etc.  It was a lot of work!  \n\nUnfortunately, the curse of game design is the fact that a *functional* game is not necessarily a *fun* game!  As such, I also had to dedicate a large amount of time making these mechanics \u201cpop\u201d in any way that I could.  One of the most taxing layers of \u201cjuice\u201d that I added to the game had to do with the dynamic camera movement.\n\nWhen you walk around Dude Ranch, the camera follows the player around the screen as you would expect it to.  Right off the bat there\u2019s a bit of a wrinkle to this.  Our game is presented with a 70-degree isometric view.  Despair!  This would cause some problems if we were to attempt to move the camera both horizontally and vertically, as illustrated here:\n\n![cameraWeirdness.gif](\/\/\/raw\/a36\/3\/z\/3a090.gif)\n\nSo what\u2019s a programmer to do?  The answer is actually surprisingly simple:\n\n![cameraHolder.png](\/\/\/raw\/a36\/3\/z\/3a091.png)\n\nCreate a parent CameraHolder object that always maintains a 0-degree rotation!  Now you can rotate the camera to your heart\u2019s content, and as long as you reference the CameraHolder for all of your movement, you\u2019ll be able to move parallel with a player character at all times!\n\n![cameraGoodness.gif](\/\/\/raw\/a36\/3\/z\/3a092.gif)\n\nOkay, so we have a *functional* camera now.  How can we make it *feel* better?\nOne of the ideas I came up with was to have the camera \u201csnap\u201d right to the action whenever the player managed to latch onto a Dude.  No matter where the player was, or where the Dude was wrangled, I wanted to action to be perfectly framed.\n\n![wrangleGif.gif](\/\/\/raw\/a36\/3\/z\/3a097.gif)\n\nThis was accomplished through the magic of midpoints!  After dusting off some old high school geometry skills, I took the position of the player character and the position of the wrangled Dude, then averaged the X and Y values in order to find the exact middle between the two every time.  After that, I would just lerp the camera\u2019s position to that target point.\n\n![midpoint.png](\/\/\/raw\/a36\/3\/z\/3a093.png)\n\nThis would ensure that the camera would always be positioned right between the player character and the wrangled Dude, no matter where either of them were at any time.  Easy peasy!\n\n*But wait!*\n\nOur game is presented with a 70-degree isometric view.  **DESPAIR!!**\n\nThis method would only work if our camera was looking straight-down at a 90-degree angle!\nNot a problem!  All it takes is a little dusting off of even more high school geometry.  Allow me to explain with a poorly-made diagram I made in MS Paint!\n\n![cameraDiagram.png](\/\/\/raw\/a36\/3\/z\/3a094.png)\n\nBasically, our camera is looking too far ahead of the target point that it\u2019s snapping to.  In fact, it\u2019s looking exactly X distance too far.  If we can just move it back X distance, then it would be looking exactly at the target point.  Lucky for us, we can do some simple trig to figure out what X is.  We already know what Y is, and we know the degree of rotation on the camera, so we can use both of those to solve for X:\n\n![CodeCogsEqn.png](\/\/\/raw\/a36\/3\/z\/3a095.png)\n\nNice, now every time we snap the camera to the midpoint of 2 objects, we can subtract X from the value to make sure that the angled view point of the camera is what lines up with the target point, rather than the camera\u2019s position lining up with it instead!\n\n\u2026But we\u2019re not done yet\u2026\n\nStay tuned for Part 2, where I talk about what I had to do to make the camera dynamically zoom closer to the player as they struggle to wrangle in the thiccer Dudes on the Ranch.\n\n![dudeRanchSmall.gif](\/\/\/raw\/a36\/3\/z\/3a096.gif)\n\nHopefully this was somewhat useful for folks.  I\u2019m a tad tired, so apologies if any of this is unclear at all.  This camera ate up a lot of my time during this jam, so if I can somehow make it easier for future devs, then the struggles will have all been worth it. :heart:\n\n[**Until then, feel free to check out the fruits of our labor by playing Dude Ranch here!**]( https:\/\/ldjam.com\/events\/ludum-dare\/47\/Dude-ranch)  We\u2019ve been loving the reception we\u2019ve been getting so far, and we\u2019re slowly going through everyone who was kind enough to leave a comment on our page with plans to rate their games in the very near future!\n\n\u2018Til next time! :point_right: :cowboy: :point_right: \n\n","comments":1,"comments-timestamp":"2020-10-12T14:43:14Z","created":"2020-10-12T06:14:21Z","files":[],"files-timestamp":0,"id":230980,"love":6,"love-timestamp":"2020-10-12T17:32:57Z","meta":[],"modified":"2020-10-12T17:32:57Z","name":"Making the Snappy Camera of Dude Ranch (Part 1: The Snap)","node-timestamp":"2020-10-12T06:31:42Z","parent":224516,"parents":[1,5,9,212256,224516],"path":"\/events\/ludum-dare\/47\/dude-ranch\/making-the-snappy-camera-of-dude-ranch-part-1-the-snap","published":"2020-10-12T06:31:42Z","scope":"public","slug":"making-the-snappy-camera-of-dude-ranch-part-1-the-snap","subsubtype":"","subtype":"","type":"post","version":704409},"node_metadata":{"n_key":"230980","n_urlkey":"367877","n_parent":"224516","n_path":"\/events\/ludum-dare\/47\/dude-ranch\/making-the-snappy-camera-of-dude-ranch-part-1-the-snap","n_slug":"making-the-snappy-camera-of-dude","n_type":"post","n_subtype":"","n_subsubtype":"","n_author":"13882","n_created":"1602483261","n_modified":"1602523977","n_version":"704409","n_status":"WAYBACK"},"source_url":"https:\/\/ldjam.com\/events\/ludum-dare\/47\/dude-ranch\/making-the-snappy-camera-of-dude-ranch-part-1-the-snap","text":"As the sole engineer this time around for the Keyboard Cowboys, there was a *lot* of components that I had to contend with to make sure our game, [**Dude Ranch**](https:\/\/ldjam.com\/events\/ludum-dare\/47\/Dude-ranch) was functional.  Character movement, lasso mechanics, Dude AI, a spawning system, scorekeeping, UI anchoring, etc.  It was a lot of work!  \n\nUnfortunately, the curse of game design is the fact that a *functional* game is not necessarily a *fun* game!  As such, I also had to dedicate a large amount of time making these mechanics \u201cpop\u201d in any way that I could.  One of the most taxing layers of \u201cjuice\u201d that I added to the game had to do with the dynamic camera movement.\n\nWhen you walk around Dude Ranch, the camera follows the player around the screen as you would expect it to.  Right off the bat there\u2019s a bit of a wrinkle to this.  Our game is presented with a 70-degree isometric view.  Despair!  This would cause some problems if we were to attempt to move the camera both horizontally and vertically, as illustrated here:\n\n![cameraWeirdness.gif](\/\/\/raw\/a36\/3\/z\/3a090.gif)\n\nSo what\u2019s a programmer to do?  The answer is actually surprisingly simple:\n\n![cameraHolder.png](\/\/\/raw\/a36\/3\/z\/3a091.png)\n\nCreate a parent CameraHolder object that always maintains a 0-degree rotation!  Now you can rotate the camera to your heart\u2019s content, and as long as you reference the CameraHolder for all of your movement, you\u2019ll be able to move parallel with a player character at all times!\n\n![cameraGoodness.gif](\/\/\/raw\/a36\/3\/z\/3a092.gif)\n\nOkay, so we have a *functional* camera now.  How can we make it *feel* better?\nOne of the ideas I came up with was to have the camera \u201csnap\u201d right to the action whenever the player managed to latch onto a Dude.  No matter where the player was, or where the Dude was wrangled, I wanted to action to be perfectly framed.\n\n![wrangleGif.gif](\/\/\/raw\/a36\/3\/z\/3a097.gif)\n\nThis was accomplished through the magic of midpoints!  After dusting off some old high school geometry skills, I took the position of the player character and the position of the wrangled Dude, then averaged the X and Y values in order to find the exact middle between the two every time.  After that, I would just lerp the camera\u2019s position to that target point.\n\n![midpoint.png](\/\/\/raw\/a36\/3\/z\/3a093.png)\n\nThis would ensure that the camera would always be positioned right between the player character and the wrangled Dude, no matter where either of them were at any time.  Easy peasy!\n\n*But wait!*\n\nOur game is presented with a 70-degree isometric view.  **DESPAIR!!**\n\nThis method would only work if our camera was looking straight-down at a 90-degree angle!\nNot a problem!  All it takes is a little dusting off of even more high school geometry.  Allow me to explain with a poorly-made diagram I made in MS Paint!\n\n![cameraDiagram.png](\/\/\/raw\/a36\/3\/z\/3a094.png)\n\nBasically, our camera is looking too far ahead of the target point that it\u2019s snapping to.  In fact, it\u2019s looking exactly X distance too far.  If we can just move it back X distance, then it would be looking exactly at the target point.  Lucky for us, we can do some simple trig to figure out what X is.  We already know what Y is, and we know the degree of rotation on the camera, so we can use both of those to solve for X:\n\n![CodeCogsEqn.png](\/\/\/raw\/a36\/3\/z\/3a095.png)\n\nNice, now every time we snap the camera to the midpoint of 2 objects, we can subtract X from the value to make sure that the angled view point of the camera is what lines up with the target point, rather than the camera\u2019s position lining up with it instead!\n\n\u2026But we\u2019re not done yet\u2026\n\nStay tuned for Part 2, where I talk about what I had to do to make the camera dynamically zoom closer to the player as they struggle to wrangle in the thiccer Dudes on the Ranch.\n\n![dudeRanchSmall.gif](\/\/\/raw\/a36\/3\/z\/3a096.gif)\n\nHopefully this was somewhat useful for folks.  I\u2019m a tad tired, so apologies if any of this is unclear at all.  This camera ate up a lot of my time during this jam, so if I can somehow make it easier for future devs, then the struggles will have all been worth it. :heart:\n\n[**Until then, feel free to check out the fruits of our labor by playing Dude Ranch here!**]( https:\/\/ldjam.com\/events\/ludum-dare\/47\/Dude-ranch)  We\u2019ve been loving the reception we\u2019ve been getting so far, and we\u2019re slowly going through everyone who was kind enough to leave a comment on our page with plans to rate their games in the very near future!\n\n\u2018Til next time! :point_right: :cowboy: :point_right: \n\n","title":"Making the Snappy Camera of Dude Ranch (Part 1: The Snap)","wayback_source":[]}