{"id":3429,"date":"2016-10-19T21:57:54","date_gmt":"2016-10-19T20:57:54","guid":{"rendered":"http:\/\/www.holyfingers.co.uk\/main\/?p=3429"},"modified":"2016-10-24T11:06:36","modified_gmt":"2016-10-24T10:06:36","slug":"on-the-turn","status":"publish","type":"post","link":"https:\/\/www.holyfingers.co.uk\/main\/blog\/2016\/10\/19\/on-the-turn\/","title":{"rendered":"Tutorial: On the turn&#8230;"},"content":{"rendered":"<p style=\"text-align: justify;\">Alongside\u00a0blocking in the environment and fiddling around with cameras, I took this morning to test out a\u00a0system\u00a0for making certain objects manipulable via the mouse. After a bit of head scratching I got it to work pretty well so I thought I share the Playmaker setup and a few notes&#8230;<!--more--><\/p>\n<p>&nbsp;<\/p>\n<p><a href=\"https:\/\/imgur.com\/t4Auvd8\"><img decoding=\"async\" title=\"source: imgur.com\" src=\"https:\/\/i.imgur.com\/t4Auvd8.gif\" \/><\/a><\/p>\n<p>&nbsp;<\/p>\n<p style=\"text-align: justify;\">The two cylinders on the left represent separate transform parents, this is to avoid <a href=\"https:\/\/en.wikipedia.org\/wiki\/Gimbal_lock\">gimbal lock<\/a>\u00a0and related silliness. Here&#8217;s the Playmaker setup, you&#8217;ll probably want to open up the full size version in another tab; it&#8217;s rather large&#8230;.<\/p>\n<p>&nbsp;<\/p>\n<p><a class=\"ngg_lightbox\" title=\" \" href=\"https:\/\/www.holyfingers.co.uk\/main\/wp-content\/gallery\/tutorials\/Rotate_Object_Playmaker.png\" data-image-id=\"120\" data-src=\"https:\/\/www.holyfingers.co.uk\/main\/wp-content\/gallery\/tutorials\/Rotate_Object_Playmaker.png\" data-thumbnail=\"https:\/\/www.holyfingers.co.uk\/main\/wp-content\/gallery\/tutorials\/thumbs\/thumbs_Rotate_Object_Playmaker.png\" data-title=\"Rotate_Object_Playmaker\" data-description=\" \"><img decoding=\"async\" class=\"ngg-singlepic ngg-none\" src=\"https:\/\/www.holyfingers.co.uk\/main\/wp-content\/gallery\/tutorials\/thumbs\/thumbs_Rotate_Object_Playmaker.png\" alt=\"Rotate_Object_Playmaker\" \/><\/a><\/p>\n<p>&nbsp;<\/p>\n<p style=\"text-align: justify;\"><strong><span style=\"color: #99ccff;\">Idle<\/span> <\/strong>is waiting for a mouse event, in this case a mouse click. The FSM is actually on an invisible cube with a collider a bit larger than the cube you can see above, after a bit of fiddling it seemed more reliable and controllable to have this separate and static.<\/p>\n<p style=\"text-align: justify;\"><span style=\"color: #37d45c;\"><strong>Rotate X or Y <\/strong><\/span>gets\u00a0the <em>absolute<\/em> values for the change in mouse position so we can compare them without worrying about negative numbers, I wanted the rotation to be either around X or Y, not both at the same time, this way I can have a separate state handling each. You can find the\u00a0GetMouseDeltaPosition action <a href=\"https:\/\/github.com\/jeanfabre\/PlayMakerCustomActions_U4\/blob\/master\/Assets\/PlayMaker%20Custom%20Actions\/Input\/GetMouseDeltaPosition.cs\">here<\/a>,\u00a0or just search &#8220;delta&#8221; in <a href=\"https:\/\/hutonggames.fogbugz.com\/?W1181\">Ecosystem<\/a>.<\/p>\n<p style=\"text-align: justify;\">Both<span style=\"color: #000000;\"> <strong><span style=\"color: #ffcc00;\">Rotate X<\/span><\/strong> <\/span>and<span style=\"color: #000000;\"> <strong><span style=\"color: #ff9900;\">Rotate Y<\/span><\/strong> <\/span>have the same actions, just for their respective axes. The first action changes the parent of the object we want to rotate, we apply rotations to that object instead and only around one axis, that way we always know what our pivot&#8217;s up to. Next we get the mouse position delta again. The float multiplication defines how quickly and in what direction the object will rotate in relation to mouse movement. This takes a bit of fiddling and will be different for each object, I&#8217;m using a cylinder with a 90\u00b0 rotation as a parent for example, so both X and Y mouse delta values end up being applied to Y axis rotation. Depending on your own set-up there will be a bit of trial and error here; keep in mind the <em>translation<\/em> of the mouse <em>along<\/em>\u00a0an axis is being applied as\u00a0<em>rotation around<\/em> another axis and vice-versa. The mouse pick event at the end checks to make sure the cursor is still over the object and the button is still down.<\/p>\n<p style=\"text-align: justify;\"><span style=\"color: #000000;\"><strong><span style=\"color: #ffcc00;\">Ease out X<\/span><\/strong> <\/span>and<span style=\"color: #000000;\"> <strong><span style=\"color: #ff9900;\">Ease out Y<\/span><\/strong>\u00a0<\/span>aren&#8217;t necessary but act to soften the transition between dragging the object and letting go, it can be quiet abrupt otherwise. These states don&#8217;t update the Mouse X\/Y variable, they use the last known values, this means that the ease out will be different depending on how fast the mouse was moving in the previous state. These actions can be fiddled with to achieve lots of different effects, a longer time value on the rotation, for example, would allow you to spin an object. The final mouse event action checks to see if the player has clicked, this makes sure they don&#8217;t have to wait for the rotation to completely finish before interacting again.<\/p>\n<p style=\"text-align: justify;\">It&#8217;s pretty straight forward but works surprisingly well, I&#8217;m thinking I might use this for a few elements in <em>Reel<\/em> I would otherwise have had to use rigid bodies.<\/p>\n<p style=\"text-align: justify;\"><em>UPDATE: I posted this tutorial up on the <a href=\"http:\/\/hutonggames.com\/playmakerforum\/index.php?topic=13754\">Playmaker forums<\/a> and user\u00a0<\/em>djaydino<em>\u00a0ponted out that iTween was getting a bit long in the tooth, at their suggestion I checked out DOTween. The set up is slightly different so I thought I&#8217;d include the alternative Ease Out state:<\/em><\/p>\n<p>&nbsp;<\/p>\n<p><img decoding=\"async\" class=\"ngg-singlepic ngg-none\" src=\"https:\/\/www.holyfingers.co.uk\/main\/wp-content\/gallery\/tutorials\/Rotate_Object_Playmaker_dotween.png\" alt=\"Rotate_Object_Playmaker_dotween\" \/><br \/>\nAs ever, I\u2019ll be floating around on <a href=\"http:\/\/twitter.com\/holyfingers\">Twitter<\/a>,\u00a0<a href=\"http:\/\/artoftoryanse.tumblr.com\/\">Tumblr<\/a>\u00a0and <a href=\"https:\/\/www.facebook.com\/pages\/Toryans%C3%A9\/139100656265397\">Facebook<\/a>\u00a0throughout development, if you have any questions. If you just want to hear about the big stuff, release dates etc. you can sign up to the Arcto Games <a href=\"https:\/\/tinyletter.com\/arctogames\">Tinyletter<\/a>.<\/p>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Alongside\u00a0blocking in the environment and fiddling around with cameras, I took this morning to test out a\u00a0system\u00a0for making certain objects manipulable via the mouse. After a bit of head scratching I got it to work pretty well so I thought I share the Playmaker setup and a few notes&#8230;<\/p>\n","protected":false},"author":2,"featured_media":3436,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"ngg_post_thumbnail":0,"footnotes":""},"categories":[55,12],"tags":[75,100,76,90,57],"class_list":["post-3429","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-game-development","category-tutorials","tag-playmaker","tag-reel","tag-toryanse","tag-tutorial","tag-unity"],"_links":{"self":[{"href":"https:\/\/www.holyfingers.co.uk\/main\/wp-json\/wp\/v2\/posts\/3429","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.holyfingers.co.uk\/main\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.holyfingers.co.uk\/main\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.holyfingers.co.uk\/main\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.holyfingers.co.uk\/main\/wp-json\/wp\/v2\/comments?post=3429"}],"version-history":[{"count":32,"href":"https:\/\/www.holyfingers.co.uk\/main\/wp-json\/wp\/v2\/posts\/3429\/revisions"}],"predecessor-version":[{"id":3469,"href":"https:\/\/www.holyfingers.co.uk\/main\/wp-json\/wp\/v2\/posts\/3429\/revisions\/3469"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.holyfingers.co.uk\/main\/wp-json\/wp\/v2\/media\/3436"}],"wp:attachment":[{"href":"https:\/\/www.holyfingers.co.uk\/main\/wp-json\/wp\/v2\/media?parent=3429"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.holyfingers.co.uk\/main\/wp-json\/wp\/v2\/categories?post=3429"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.holyfingers.co.uk\/main\/wp-json\/wp\/v2\/tags?post=3429"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}