{"id":67,"date":"2021-01-30T18:34:34","date_gmt":"2021-01-30T18:34:34","guid":{"rendered":"http:\/\/crashedcreativity.pl\/?p=67"},"modified":"2022-06-22T20:02:28","modified_gmt":"2022-06-22T20:02:28","slug":"meet-shaders-part-1-luna-the-shadow-dust-effect","status":"publish","type":"post","link":"https:\/\/crashedcreativity.pl\/index.php\/2021\/01\/30\/meet-shaders-part-1-luna-the-shadow-dust-effect\/","title":{"rendered":"Meet shaders (part 1) – Luna The shadow dust effect"},"content":{"rendered":"\n
\"\"<\/figure>\n\n\n\n

Hi, Today I want to share a result of my first aproach to shader implementation. I have decided to look closeler to this feature after seeing LUNA – The Shadow Dust (lantern-studio.com)<\/a>. Visualy astonishong.<\/p>\n\n\n\n

I wanted to make a reverse engineering some effect i have noticed waching this game.<\/p>\n\n\n\n

I decided to use Universal Render Pieline. This Unity asset gives a posiibility to make shaders in very simple manner, using visual graph<\/p>\n\n\n\n

Creating first shader<\/h2>\n\n\n\n

Create->Shader->Universal Render Pipeline-> Sprite Lit Shader Graph<\/p>\n\n\n\n

I have createt property Color(Input parameter of the shader accessible from a scene) for sand color. Honestly until shader is not finished it is better create input node insted property. You will be able to see results on preview.<\/p>\n\n\n\n

I have created a property: texture. Analogicaly it is better to drag and drop some texture into the graph.<\/p>\n\n\n\n

One more parameter Value (called “phase”). (Insted of one You can add slider to play with parameter an remove it after shader is ready)<\/p>\n\n\n\n

<\/p>\n\n\n\n

All parameters have to be dragged and dropped to the graph.<\/p>\n\n\n\n

I have connected color with “Base Color” on “Fragment” Node.<\/p>\n\n\n\n

With texture wchich was actualy a mask i had to play a little bit. I show You the finall result of it<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Slider (finaly “phase”) was conected twice: With R input of “Combine” node” and with “Add Node” (adding 0.01 value). Output of add withc was connected two “G” input of “Combine”. In this way i hav coded in RG two values (not colors) which can be input Min Max of Remap (requires two values input) Second Remap input was set to 0 and 1. Output of a Remap was connected two. Sprite Mask channel of “Fragmnt” node.\\<\/p>\n\n\n\n

Remap: Math->Range->Remap<\/p>\n\n\n\n

Add : Math ->Basic<\/p>\n\n\n\n

Combine: Channel<\/p>\n\n\n\n

Click “Save Asset”<\/p>\n\n\n\n

Create material and set this shader in shader property. Set texture like this:<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

<\/p>\n\n\n\n

Set a sand Color<\/p>\n\n\n\n

Now You can apply this material to sprite (there will be warning that this material have no main texture but it will work anyway)<\/p>\n\n\n\n

You can create sprite animation changing “phase” value of shader<\/p>\n","protected":false},"excerpt":{"rendered":"

Hi, Today I want to share a result of my first aproach to shader implementation. I have decided to look<\/p>\n

Read Now ►<\/span><\/a><\/div>\n","protected":false},"author":1,"featured_media":70,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[1],"tags":[],"_links":{"self":[{"href":"https:\/\/crashedcreativity.pl\/index.php\/wp-json\/wp\/v2\/posts\/67"}],"collection":[{"href":"https:\/\/crashedcreativity.pl\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/crashedcreativity.pl\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/crashedcreativity.pl\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/crashedcreativity.pl\/index.php\/wp-json\/wp\/v2\/comments?post=67"}],"version-history":[{"count":7,"href":"https:\/\/crashedcreativity.pl\/index.php\/wp-json\/wp\/v2\/posts\/67\/revisions"}],"predecessor-version":[{"id":79,"href":"https:\/\/crashedcreativity.pl\/index.php\/wp-json\/wp\/v2\/posts\/67\/revisions\/79"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/crashedcreativity.pl\/index.php\/wp-json\/wp\/v2\/media\/70"}],"wp:attachment":[{"href":"https:\/\/crashedcreativity.pl\/index.php\/wp-json\/wp\/v2\/media?parent=67"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/crashedcreativity.pl\/index.php\/wp-json\/wp\/v2\/categories?post=67"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/crashedcreativity.pl\/index.php\/wp-json\/wp\/v2\/tags?post=67"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}