{"id":620,"date":"2011-02-22T00:38:38","date_gmt":"2011-02-22T05:38:38","guid":{"rendered":"http:\/\/oztalay.com\/matt\/?page_id=620"},"modified":"2012-01-19T11:50:00","modified_gmt":"2012-01-19T16:50:00","slug":"rule-of-thirds-camera-udk","status":"publish","type":"page","link":"http:\/\/www.oztalay.com\/matt\/tutorials\/rule-of-thirds-camera-udk\/","title":{"rendered":"Rule of Thirds Camera &#8211; UDK"},"content":{"rendered":"<p>So, you&#8217;re composing shots in Unreal, and you&#8217;re having trouble guessing where those pesky thirds lines have run off to. You&#8217;re jealous because CAs have a camera that can show third lines that adjust to their screen size. Further, you can&#8217;t make a thirds plane and attach it to your camera and use that in the editor.<\/p>\n<p>Fear Not! We&#8217;ll turn this simple, boring, composition-tool-lacking UDK file into something useful!<\/p>\n<p><a href=\"http:\/\/oztalay.com\/matt\/wp-content\/uploads\/world_noThirds.jpg\"><img loading=\"lazy\" decoding=\"async\" style=\"border: 0px initial initial;\" src=\"http:\/\/oztalay.com\/matt\/wp-content\/uploads\/world_noThirds.jpg\" border=\"0\" alt=\"\" width=\"400\" height=\"243\" \/><\/a><\/p>\n<p>First, we need some things:<\/p>\n<p>Make a square texture with colored lines on each third (for a 512 map that&#8217;s at 170px and 340px), it&#8217;ll look like this:<\/p>\n<div style=\"display: block; text-align: left;\">\n<p><a href=\"http:\/\/oztalay.com\/matt\/wp-content\/uploads\/mask.jpg\"><img loading=\"lazy\" decoding=\"async\" style=\"border: 0px initial initial;\" src=\"http:\/\/oztalay.com\/matt\/wp-content\/uploads\/mask.jpg\" border=\"0\" alt=\"\" width=\"200\" height=\"200\" \/><\/a><\/p>\n<p>You can also add title and action safes to this texture in the proper proportions, 7.5% of width from each side should do it.<\/p>\n<p>Import that texture into a new package in Unreal (because you&#8217;ll want to keep using this after your current project is done, right?)<\/p>\n<p>Next, copy in a post process chain of your choosing from UDK, or make a new one of your own.<\/p>\n<div style=\"display: block; text-align: left;\">\n<p><a href=\"http:\/\/oztalay.com\/matt\/wp-content\/uploads\/makePP.jpg\"><img loading=\"lazy\" decoding=\"async\" style=\"border: 0px initial initial;\" src=\"http:\/\/oztalay.com\/matt\/wp-content\/uploads\/makePP.jpg\" border=\"0\" alt=\"\" width=\"830\" height=\"1118\" \/><\/a><\/p>\n<p>Label it as a &#8220;clean&#8221; post process, or whatever you wish.<\/p>\n<p>Right click that one and make a copy of it, calling that one &#8220;ruleOfThirds_PP&#8221;<\/p>\n<p>Before we go fiddling with the post process chains, we need a material! Quite simply, make this with your thirds line texture:<\/p>\n<div style=\"display: block; text-align: left;\">\n<p><a href=\"http:\/\/oztalay.com\/matt\/wp-content\/uploads\/shader.jpg\"><img loading=\"lazy\" decoding=\"async\" style=\"border: 0px initial initial;\" src=\"http:\/\/oztalay.com\/matt\/wp-content\/uploads\/shader.jpg\" border=\"0\" alt=\"\" width=\"1410\" height=\"802\" \/><\/a><\/p>\n<p>It is an Unlit, Masked material. Changing the Opacity Mask Clip Value determines at what grayscale value the mask will be on or off.<\/p>\n<p>Plug the RGB output of your map into Emissive.<\/p>\n<p>Make a new Desaturation node, and plug a constant value of 1 into the &#8220;Percent&#8221; input and your map&#8217;s RGB output into the top. This fully desaturates your map.<\/p>\n<p>Make a new &#8220;Math -&gt; OneMinus&#8221;, and plug the output of Desturation into that.<\/p>\n<p>Plug the output of the OneMinus into OpacityMask<\/p>\n<p>NOW we can go into the PostProcess Chain. Open up your ruleOfThirds_PP.<\/p>\n<p>You see this, it is a copy of your clean post process chain. I used one from my thesis which is fairly simple.<\/p>\n<div style=\"display: block; text-align: left;\">\n<p><a href=\"http:\/\/oztalay.com\/matt\/wp-content\/uploads\/pp_clean.jpg\"><img loading=\"lazy\" decoding=\"async\" style=\"border: 0px initial initial;\" src=\"http:\/\/oztalay.com\/matt\/wp-content\/uploads\/pp_clean.jpg\" border=\"0\" alt=\"\" width=\"966\" height=\"416\" \/><\/a><\/p>\n<p>Right click and select &#8220;Material Effect&#8221;<\/p>\n<div style=\"display: block; text-align: left;\">\n<p><a href=\"http:\/\/oztalay.com\/matt\/wp-content\/uploads\/pp_makeMatEffect.jpg\"><img loading=\"lazy\" decoding=\"async\" style=\"border: 0px initial initial;\" src=\"http:\/\/oztalay.com\/matt\/wp-content\/uploads\/pp_makeMatEffect.jpg\" border=\"0\" alt=\"\" width=\"966\" height=\"621\" \/><\/a><\/p>\n<p>Drop this into the chain anywhere you like. A PostProcess Chain isn&#8217;t like Kismet in that something can have multiple inputs and outputs, so be sure to drag from OUT to IN<\/p>\n<div style=\"display: block; text-align: left;\">\n<p><a href=\"http:\/\/oztalay.com\/matt\/wp-content\/uploads\/pp_insertMaterialEffect.jpg\"><img loading=\"lazy\" decoding=\"async\" style=\"border: 0px initial initial;\" src=\"http:\/\/oztalay.com\/matt\/wp-content\/uploads\/pp_insertMaterialEffect.jpg\" border=\"0\" alt=\"\" width=\"933\" height=\"585\" \/><\/a><\/p>\n<p>With the new material effect selected, insert the material you just made.<\/p>\n<div style=\"display: block; text-align: left;\">\n<p><a href=\"http:\/\/oztalay.com\/matt\/wp-content\/uploads\/pp_insertMaterial.jpg\"><img loading=\"lazy\" decoding=\"async\" style=\"border: 0px initial initial;\" src=\"http:\/\/oztalay.com\/matt\/wp-content\/uploads\/pp_insertMaterial.jpg\" border=\"0\" alt=\"\" width=\"1409\" height=\"747\" \/><\/a><\/p>\n<p>Next, go to View -&gt; World Properties and scroll down to World Info. Toward the bottom of this is &#8220;World PostProcess Chain&#8221;. With your rule of thirds PostProcessChain selected, hit the green arrow to insert it.<\/p>\n<div style=\"display: block; text-align: left;\"><a href=\"http:\/\/oztalay.com\/matt\/wp-content\/uploads\/worldInfoScreen.jpg\"><img loading=\"lazy\" decoding=\"async\" style=\"border: 0px initial initial;\" src=\"http:\/\/oztalay.com\/matt\/wp-content\/uploads\/worldInfoScreen.jpg\" border=\"0\" alt=\"\" width=\"614\" height=\"442\" \/><\/a><\/div>\n<p>And you get this!<\/p>\n<div style=\"display: block; text-align: left;\">\n<p><a href=\"http:\/\/oztalay.com\/matt\/wp-content\/uploads\/world_thirdsd.jpg\"><img loading=\"lazy\" decoding=\"async\" style=\"border: 0px initial initial;\" src=\"http:\/\/oztalay.com\/matt\/wp-content\/uploads\/world_thirdsd.jpg\" border=\"0\" alt=\"\" width=\"400\" height=\"243\" \/><\/a><\/p>\n<p>This is, admittedly, a little clunky in its execution. Until I can make an editor hotkey, this&#8217;ll have to do.<\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>So, you&#8217;re composing shots in Unreal, and you&#8217;re having trouble guessing where those pesky thirds lines have run off to. You&#8217;re jealous because CAs have a camera that can show third lines that adjust to their screen size. Further, you can&#8217;t make a thirds plane and attach it to your camera and use that in [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":407,"menu_order":0,"comment_status":"open","ping_status":"open","template":"","meta":{"footnotes":""},"class_list":["post-620","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"http:\/\/www.oztalay.com\/matt\/wp-json\/wp\/v2\/pages\/620","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/www.oztalay.com\/matt\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"http:\/\/www.oztalay.com\/matt\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"http:\/\/www.oztalay.com\/matt\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/www.oztalay.com\/matt\/wp-json\/wp\/v2\/comments?post=620"}],"version-history":[{"count":6,"href":"http:\/\/www.oztalay.com\/matt\/wp-json\/wp\/v2\/pages\/620\/revisions"}],"predecessor-version":[{"id":951,"href":"http:\/\/www.oztalay.com\/matt\/wp-json\/wp\/v2\/pages\/620\/revisions\/951"}],"up":[{"embeddable":true,"href":"http:\/\/www.oztalay.com\/matt\/wp-json\/wp\/v2\/pages\/407"}],"wp:attachment":[{"href":"http:\/\/www.oztalay.com\/matt\/wp-json\/wp\/v2\/media?parent=620"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}