{"id":1729,"date":"2024-09-25T00:29:47","date_gmt":"2024-09-24T22:29:47","guid":{"rendered":"http:\/\/www.michalorzelek.com\/blog\/?p=1729"},"modified":"2024-09-25T12:50:12","modified_gmt":"2024-09-25T10:50:12","slug":"cel-shaded-stylized-material-in-unreal-engine","status":"publish","type":"post","link":"https:\/\/www.michalorzelek.com\/blog\/cel-shaded-stylized-material-in-unreal-engine\/","title":{"rendered":"Cel-Shaded \/ Stylized Material in Unreal Engine"},"content":{"rendered":"\n<p>If you follow this blog or my <a href=\"https:\/\/www.youtube.com\/@UnrealBucket\" data-type=\"link\" data-id=\"https:\/\/www.youtube.com\/@UnrealBucket\"><strong>YouTube channel<\/strong><\/a>, you probably know that I&#8217;m an advocate for all things procedural in Unreal Engine. Whether it&#8217;s 3D workflows, in-editor tools, or my favorite\u2014procedural and easily customizable shaders\u2014this approach brings me a lot of joy. Creating content this way allows for greater flexibility and easier testing of new ideas. As a tech artist, I want to explore new techniques and continually grow. The topic of stylized graphics is perfect for this.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1920\" height=\"1080\" src=\"https:\/\/www.michalorzelek.com\/blog\/wp-content\/uploads\/2024\/09\/AdvStylizedMaterials_Preview_00.jpg\" alt=\"\" class=\"wp-image-1731\" srcset=\"https:\/\/www.michalorzelek.com\/blog\/wp-content\/uploads\/2024\/09\/AdvStylizedMaterials_Preview_00.jpg 1920w, https:\/\/www.michalorzelek.com\/blog\/wp-content\/uploads\/2024\/09\/AdvStylizedMaterials_Preview_00-512x288.jpg 512w, https:\/\/www.michalorzelek.com\/blog\/wp-content\/uploads\/2024\/09\/AdvStylizedMaterials_Preview_00-768x432.jpg 768w, https:\/\/www.michalorzelek.com\/blog\/wp-content\/uploads\/2024\/09\/AdvStylizedMaterials_Preview_00-1536x864.jpg 1536w\" sizes=\"auto, (max-width: 1920px) 100vw, 1920px\" \/><\/figure>\n\n\n\n<!--more-->\n\n\n\n<p><strong><a href=\"https:\/\/store.steampowered.com\/app\/1676130\/Deadlink\/\" target=\"_blank\" rel=\"noreferrer noopener\">Deadlink <\/a><\/strong>&#8211; a game we created as part of <strong><a href=\"https:\/\/grubyentertainment.com\/\" data-type=\"link\" data-id=\"https:\/\/grubyentertainment.com\/\">Gruby Entertainment<\/a><\/strong> &#8211; was an excellent creative sandbox for our team. Working closely with the <strong><a href=\"https:\/\/www.artstation.com\/tomaszcwik\" data-type=\"link\" data-id=\"https:\/\/www.artstation.com\/tomaszcwik\">art director<\/a><\/strong>, we managed to develop a relatively <strong><a href=\"https:\/\/www.linkedin.com\/posts\/micha%C5%82-orze%C5%82ek-12b9b74a_digitaldragons-deadlink-activity-7064377907875340288-hrZf\" data-type=\"link\" data-id=\"https:\/\/www.linkedin.com\/posts\/micha%C5%82-orze%C5%82ek-12b9b74a_digitaldragons-deadlink-activity-7064377907875340288-hrZf\">unique visual style.<\/a><\/strong> After many years of experience with Unreal Engine, I know one thing &#8211; creating stylized projects can be a bit challenging.<\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"Deadlink - Launch Trailer | PS5 Games\" width=\"474\" height=\"267\" src=\"https:\/\/www.youtube.com\/embed\/0_-fRHoq7-8?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<p>The experience I&#8217;ve gathered with the Deadlink project, the battle-tested techniques, and the non-PBR approach allowed me to start working on a highly flexible &#8217;<strong><a href=\"https:\/\/www.unrealengine.com\/marketplace\/en-US\/product\/advanced-stylized-material\" data-type=\"link\" data-id=\"https:\/\/www.unrealengine.com\/marketplace\/en-US\/product\/advanced-stylized-material\">Advanced Stylized Framework<\/a><\/strong>.&#8217; The first step was developing the <strong><a href=\"https:\/\/www.unrealengine.com\/marketplace\/en-US\/product\/stylized-glass\">stylized glass shader<\/a><\/strong>, which I recently wrote about <a href=\"https:\/\/www.michalorzelek.com\/blog\/stylized-glass-in-unreal-engine\/\" data-type=\"post\" data-id=\"1696\"><strong>here<\/strong><\/a>. The next step was creating a master material that, thanks to its modularity, can be used for most objects. My goal was to create a user-friendly system that can be modified as needed.<\/p>\n\n\n\n<p>Below is a brief description of the material features that can be enabled based on the artist&#8217;s choice. Take a look at the video to see these features in action.<\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"Stylized Material UE5 (Cel Shading) How to | Part 1\" width=\"474\" height=\"267\" src=\"https:\/\/www.youtube.com\/embed\/CK-TU7KFYf0?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Color<\/strong><br>A vector or texture based color that is a base for other procedural effects<br><\/li>\n\n\n\n<li><strong>Procedural Gradient<\/strong><br>A black-and-white gradient with convenient controls and a preview mode. It is used as a mask that interpolates two colors. Color banding is supported (for a sharp color transitions)<br><\/li>\n\n\n\n<li><strong>Detail Layer<\/strong><br>A texture-based detail using triplanar projection or object UVs. It serves as a mask that blends with the base color.<br><\/li>\n\n\n\n<li><strong>Fake Reflection<\/strong><br>A camera-based projection that uses a RGB packed mask. Emphasizes the stylized vibe\/look.<br><\/li>\n\n\n\n<li><strong>Fake Directional Light<\/strong><br>An effect based on a directional light. It adds a customizable highlight and emphasized the 3D form of the object by making its silhouette, rounded surfaces more visible.<br><\/li>\n\n\n\n<li><strong>Rim Light<\/strong><br>A fake light effect used to create a strong highlight.<br><\/li>\n\n\n\n<li><strong>Normal<\/strong><br>A normal map or a greyscale texture is used to distort other procedural effect. It uses either triplanar mapping or object&#8217;s UVs.<br><\/li>\n\n\n\n<li><strong>Fake Outline<\/strong><br>A Fresnel based sharp outline used to emphasize edges of an object<br><\/li>\n\n\n\n<li><strong>Distance Field Fake Shadow<\/strong><br>Soon<\/li>\n<\/ul>\n\n\n\n<p>The pack is available on the Unreal Engine marketplace: <a href=\"https:\/\/www.unrealengine.com\/marketplace\/en-US\/product\/advanced-stylized-material\"><strong>https:\/\/www.unrealengine.com\/marketplace\/en-US\/product\/advanced-stylized-material<\/strong><\/a><\/p>\n\n\n\n<p>Example pack using the shader:<\/p>\n\n\n\n<p><strong><a href=\"https:\/\/www.unrealengine.com\/marketplace\/en-US\/product\/stylized-fruits\" data-type=\"link\" data-id=\"https:\/\/www.unrealengine.com\/marketplace\/en-US\/product\/stylized-fruits\">Stylized Fruits Pack<\/a><\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/www.unrealengine.com\/marketplace\/en-US\/product\/stylized-fruits\"><img loading=\"lazy\" decoding=\"async\" width=\"894\" height=\"488\" src=\"https:\/\/www.michalorzelek.com\/blog\/wp-content\/uploads\/2024\/09\/StylizedFood_Fruits_Featured_894x488.png\" alt=\"\" class=\"wp-image-1733\" srcset=\"https:\/\/www.michalorzelek.com\/blog\/wp-content\/uploads\/2024\/09\/StylizedFood_Fruits_Featured_894x488.png 894w, https:\/\/www.michalorzelek.com\/blog\/wp-content\/uploads\/2024\/09\/StylizedFood_Fruits_Featured_894x488-512x279.png 512w, https:\/\/www.michalorzelek.com\/blog\/wp-content\/uploads\/2024\/09\/StylizedFood_Fruits_Featured_894x488-768x419.png 768w\" sizes=\"auto, (max-width: 894px) 100vw, 894px\" \/><\/a><\/figure>\n","protected":false},"excerpt":{"rendered":"<p>If you follow this blog or my YouTube channel, you probably know that I&#8217;m an advocate for all things procedural in Unreal Engine. Whether it&#8217;s 3D workflows, in-editor tools, or my favorite\u2014procedural and easily customizable shaders\u2014this approach brings me a lot of joy. Creating content this way allows for greater flexibility and easier testing of &hellip; <a href=\"https:\/\/www.michalorzelek.com\/blog\/cel-shaded-stylized-material-in-unreal-engine\/\" class=\"more-link\">Czytaj dalej <span class=\"screen-reader-text\">Cel-Shaded \/ Stylized Material in Unreal Engine<\/span> <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[66,16,30,62],"class_list":["post-1729","post","type-post","status-publish","format-standard","hentry","category-misc","tag-cel-shaded","tag-material","tag-procedural","tag-stylized"],"_links":{"self":[{"href":"https:\/\/www.michalorzelek.com\/blog\/wp-json\/wp\/v2\/posts\/1729","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.michalorzelek.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.michalorzelek.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.michalorzelek.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.michalorzelek.com\/blog\/wp-json\/wp\/v2\/comments?post=1729"}],"version-history":[{"count":3,"href":"https:\/\/www.michalorzelek.com\/blog\/wp-json\/wp\/v2\/posts\/1729\/revisions"}],"predecessor-version":[{"id":1735,"href":"https:\/\/www.michalorzelek.com\/blog\/wp-json\/wp\/v2\/posts\/1729\/revisions\/1735"}],"wp:attachment":[{"href":"https:\/\/www.michalorzelek.com\/blog\/wp-json\/wp\/v2\/media?parent=1729"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.michalorzelek.com\/blog\/wp-json\/wp\/v2\/categories?post=1729"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.michalorzelek.com\/blog\/wp-json\/wp\/v2\/tags?post=1729"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}