{"id":528,"date":"2026-03-05T12:25:32","date_gmt":"2026-03-05T12:25:32","guid":{"rendered":"https:\/\/sites.wsagames.com\/om3g24\/?p=528"},"modified":"2026-10-06T13:37:22","modified_gmt":"2026-10-06T13:37:22","slug":"development-log-02","status":"publish","type":"post","link":"https:\/\/sites.wsagames.com\/om3g24\/2026\/03\/05\/development-log-02\/","title":{"rendered":"Development Log 02 &#8211; Unity Shaders &amp; Code Refinements"},"content":{"rendered":"\n<figure class=\"wp-block-image size-full\"><img fetchpriority=\"high\" decoding=\"async\" width=\"930\" height=\"548\" src=\"https:\/\/sites.wsagames.com\/om3g24\/wp-content\/uploads\/sites\/55\/2026\/03\/image-3.png\" alt=\"\" class=\"wp-image-621\" srcset=\"https:\/\/sites.wsagames.com\/om3g24\/wp-content\/uploads\/sites\/55\/2026\/03\/image-3.png 930w, https:\/\/sites.wsagames.com\/om3g24\/wp-content\/uploads\/sites\/55\/2026\/03\/image-3-300x177.png 300w, https:\/\/sites.wsagames.com\/om3g24\/wp-content\/uploads\/sites\/55\/2026\/03\/image-3-768x453.png 768w\" sizes=\"(max-width: 930px) 100vw, 930px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Using both the research I had curated (see <a href=\"https:\/\/sites.wsagames.com\/om3g24\/2026\/03\/09\/unity-shaders\/\" data-type=\"post\" data-id=\"538\">here<\/a>) alongside a range of tutorials I found online, namely a video by YouTube creator <a href=\"https:\/\/www.youtube.com\/watch?v=Xss4__kgYiY\">CodeMonkey<\/a>, I created a Shader Graph in Unity 6 using placeholder textures that would act as the base for the minigame logic.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\" \/>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><span style=\"text-decoration: underline\">Shader Logic<\/span><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>The shader is made up of 3 individual textures:\n<ul class=\"wp-block-list\">\n<li>A base texture, labelled &#8216;MainTex&#8217;, that has the peacock in its fully coloured form.<\/li>\n\n\n\n<li>An overlay texture, labelled &#8216;DullTex&#8217;, layered on top of MainTex. In the game this layer will be erasable, allowing the player to uncover it and &#8220;restore&#8221; the peacock to its colourful form. <\/li>\n\n\n\n<li>A pure green mask texture, labelled &#8216;DullMask&#8217;. We will be using Shader Graph logic to combine this with DullTex in order to make the latter erasable.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"908\" height=\"380\" src=\"https:\/\/sites.wsagames.com\/om3g24\/wp-content\/uploads\/sites\/55\/2026\/03\/image-4.png\" alt=\"\" class=\"wp-image-631\" srcset=\"https:\/\/sites.wsagames.com\/om3g24\/wp-content\/uploads\/sites\/55\/2026\/03\/image-4.png 908w, https:\/\/sites.wsagames.com\/om3g24\/wp-content\/uploads\/sites\/55\/2026\/03\/image-4-300x126.png 300w, https:\/\/sites.wsagames.com\/om3g24\/wp-content\/uploads\/sites\/55\/2026\/03\/image-4-768x321.png 768w\" sizes=\"(max-width: 908px) 100vw, 908px\" \/><\/figure>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Using a Multiply node, we can combine the RGBA and G values of DullTex and DullMask, which gives us a complete mask that can be used as an erasable overlay for the peacock.<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"710\" src=\"https:\/\/sites.wsagames.com\/om3g24\/wp-content\/uploads\/sites\/55\/2026\/03\/image-5-1024x710.png\" alt=\"\" class=\"wp-image-635\" srcset=\"https:\/\/sites.wsagames.com\/om3g24\/wp-content\/uploads\/sites\/55\/2026\/03\/image-5-1024x710.png 1024w, https:\/\/sites.wsagames.com\/om3g24\/wp-content\/uploads\/sites\/55\/2026\/03\/image-5-300x208.png 300w, https:\/\/sites.wsagames.com\/om3g24\/wp-content\/uploads\/sites\/55\/2026\/03\/image-5-768x532.png 768w, https:\/\/sites.wsagames.com\/om3g24\/wp-content\/uploads\/sites\/55\/2026\/03\/image-5.png 1134w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Next, an colour invertion node independent of the former logic is added to the G value of DullMask, with the option to invert the red input selected. This will give the interactive DullMask texture a transparent property, hiding it form player view.<\/li>\n\n\n\n<li>Another Multiply layer is used to combine the MainTex texture and the output of the inverted colours node to create the mask.<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"973\" height=\"692\" src=\"https:\/\/sites.wsagames.com\/om3g24\/wp-content\/uploads\/sites\/55\/2026\/03\/image-6.png\" alt=\"\" class=\"wp-image-639\" srcset=\"https:\/\/sites.wsagames.com\/om3g24\/wp-content\/uploads\/sites\/55\/2026\/03\/image-6.png 973w, https:\/\/sites.wsagames.com\/om3g24\/wp-content\/uploads\/sites\/55\/2026\/03\/image-6-300x213.png 300w, https:\/\/sites.wsagames.com\/om3g24\/wp-content\/uploads\/sites\/55\/2026\/03\/image-6-768x546.png 768w\" sizes=\"(max-width: 973px) 100vw, 973px\" \/><\/figure>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Finally, the two mutliply outputs are combined via an add node &#8211; not a multiply node as this time we simply wish to create an overlay. By connectning th output to the base colour fragment of our vertex node, the material is complete, with all three stacked layers tangible and in relation to each other. <\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"683\" src=\"https:\/\/sites.wsagames.com\/om3g24\/wp-content\/uploads\/sites\/55\/2026\/03\/image-7-1024x683.png\" alt=\"\" class=\"wp-image-642\" srcset=\"https:\/\/sites.wsagames.com\/om3g24\/wp-content\/uploads\/sites\/55\/2026\/03\/image-7-1024x683.png 1024w, https:\/\/sites.wsagames.com\/om3g24\/wp-content\/uploads\/sites\/55\/2026\/03\/image-7-300x200.png 300w, https:\/\/sites.wsagames.com\/om3g24\/wp-content\/uploads\/sites\/55\/2026\/03\/image-7-768x512.png 768w, https:\/\/sites.wsagames.com\/om3g24\/wp-content\/uploads\/sites\/55\/2026\/03\/image-7.png 1136w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\" \/>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><span style=\"text-decoration: underline\">Program Scripting <\/span><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>The following code is written to detect an input from the left mouse button and output a raycast onto the texture. The texture will then record and return the co-ordinates of the texture that were hit by the raycast into the program log. For a more detailed overview, see <a href=\"https:\/\/sites.wsagames.com\/om3g24\/2026\/03\/05\/development-log-01\/\">Development Log 01 \u2013 Early Prototyping<\/a>.<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"846\" height=\"366\" src=\"https:\/\/sites.wsagames.com\/om3g24\/wp-content\/uploads\/sites\/55\/2026\/03\/image-8.png\" alt=\"\" class=\"wp-image-644\" srcset=\"https:\/\/sites.wsagames.com\/om3g24\/wp-content\/uploads\/sites\/55\/2026\/03\/image-8.png 846w, https:\/\/sites.wsagames.com\/om3g24\/wp-content\/uploads\/sites\/55\/2026\/03\/image-8-300x130.png 300w, https:\/\/sites.wsagames.com\/om3g24\/wp-content\/uploads\/sites\/55\/2026\/03\/image-8-768x332.png 768w\" sizes=\"(max-width: 846px) 100vw, 846px\" \/><\/figure>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Here, the object&#8217;s renderer is fetched by the program so that the texture can be accessed. A mesh collider is also instantiated to ensure that the raycast will hit the texture successfully.<\/li>\n\n\n\n<li>I wrote a small portion of error-prevention code for the program, courtesy of Unity Docs; however, it ironically resulted in causing some runtime errors for my game itself so I ended up excluding it.<\/li>\n\n\n\n<li>The x and y UV co-ordinates of where the raycast comes into contact with the mesh are recorded, and then stored in the custom variable &#8220;pixelUV&#8221;.<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"845\" height=\"673\" src=\"https:\/\/sites.wsagames.com\/om3g24\/wp-content\/uploads\/sites\/55\/2026\/03\/image-9.png\" alt=\"\" class=\"wp-image-645\" srcset=\"https:\/\/sites.wsagames.com\/om3g24\/wp-content\/uploads\/sites\/55\/2026\/03\/image-9.png 845w, https:\/\/sites.wsagames.com\/om3g24\/wp-content\/uploads\/sites\/55\/2026\/03\/image-9-300x239.png 300w, https:\/\/sites.wsagames.com\/om3g24\/wp-content\/uploads\/sites\/55\/2026\/03\/image-9-768x612.png 768w\" sizes=\"(max-width: 845px) 100vw, 845px\" \/><\/figure>\n\n\n\n<ul class=\"wp-block-list\">\n<li>The object texture is then called into the program as a Texture2D class, and the co-ordinates of the texture are aligned with the UV co-ordinates of the raycast by multiplying them with the pixelUV variables from before (here in the script the texture is named &#8220;epicTexture1&#8221;: this was a placeholder name at the time) and storing the result in float variables &#8216;pixelX&#8217; and &#8216;pixelY&#8217;.<\/li>\n\n\n\n<li>Finally, the pixelX and pixelY variables are themselves added together and stored in the Vector2 &#8216;paintpixelPosition&#8217;, which will be used to give the co-ordinates for painting the textures.<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>Using both the research I had curated (see here) alongside a range of tutorials I found online, namely a video by YouTube creator CodeMonkey, I created a Shader Graph in Unity 6 using placeholder textures that would act as the base for the minigame logic. Shader Logic Program Scripting<\/p>\n","protected":false},"author":46,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"saved_in_kubio":false,"footnotes":""},"categories":[45,1,44],"tags":[],"class_list":["post-528","post","type-post","status-publish","format-standard","hentry","category-dev-log","category-y2-parent","category-y2s2"],"_links":{"self":[{"href":"https:\/\/sites.wsagames.com\/om3g24\/wp-json\/wp\/v2\/posts\/528","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sites.wsagames.com\/om3g24\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/sites.wsagames.com\/om3g24\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/sites.wsagames.com\/om3g24\/wp-json\/wp\/v2\/users\/46"}],"replies":[{"embeddable":true,"href":"https:\/\/sites.wsagames.com\/om3g24\/wp-json\/wp\/v2\/comments?post=528"}],"version-history":[{"count":32,"href":"https:\/\/sites.wsagames.com\/om3g24\/wp-json\/wp\/v2\/posts\/528\/revisions"}],"predecessor-version":[{"id":691,"href":"https:\/\/sites.wsagames.com\/om3g24\/wp-json\/wp\/v2\/posts\/528\/revisions\/691"}],"wp:attachment":[{"href":"https:\/\/sites.wsagames.com\/om3g24\/wp-json\/wp\/v2\/media?parent=528"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/sites.wsagames.com\/om3g24\/wp-json\/wp\/v2\/categories?post=528"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/sites.wsagames.com\/om3g24\/wp-json\/wp\/v2\/tags?post=528"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}