{"id":1267,"date":"2023-12-21T01:42:03","date_gmt":"2023-12-20T16:42:03","guid":{"rendered":"https:\/\/heyyocg.link\/?p=1267"},"modified":"2023-12-21T02:07:39","modified_gmt":"2023-12-20T17:07:39","slug":"design-process-of-flame-slash","status":"publish","type":"post","link":"https:\/\/heyyocg.link\/en\/design-process-of-flame-slash\/","title":{"rendered":"Design Process of &#8216;Fire Slash&#8217; VFX"},"content":{"rendered":"\n<h2 class=\"wp-block-heading\">Introduction.<\/h2>\n\n\n\n<p>This is an explanation of the &#8220;Fire Slash&#8221; effect that I created using Niagara in UE5.<\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-rich is-provider-twitter wp-block-embed-twitter\"><div class=\"wp-block-embed__wrapper\">\n<blockquote class=\"twitter-tweet\" data-width=\"500\" data-dnt=\"true\"><p lang=\"ja\" dir=\"ltr\">Fire Slash<br><br>UE5\u30a2\u30c9\u30d9\u30f3\u30c8\u30ab\u30ec\u30f3\u30c0\u30fc\u3067\u5c11\u3057\u30a2\u30fc\u30c8\u9762\u306e\u89e3\u8aac\u8a18\u4e8b\u51fa\u3057\u307e\u3059<a href=\"https:\/\/twitter.com\/hashtag\/UE5?src=hash&amp;ref_src=twsrc%5Etfw\">#UE5<\/a> <a href=\"https:\/\/twitter.com\/hashtag\/niagara?src=hash&amp;ref_src=twsrc%5Etfw\">#niagara<\/a> <a href=\"https:\/\/t.co\/UrtSrNeM15\">pic.twitter.com\/UrtSrNeM15<\/a><\/p>&mdash; HeyYo (@yo_hanashima) <a href=\"https:\/\/twitter.com\/yo_hanashima\/status\/1736730019370815605?ref_src=twsrc%5Etfw\">December 18, 2023<\/a><\/blockquote><script async src=\"https:\/\/platform.twitter.com\/widgets.js\" charset=\"utf-8\"><\/script>\n<\/div><\/figure>\n\n\n\n<p>In this article, I would like to explain a slash part in the effect.<br>I will focus more on the artistic aspect of how the fire slash was designed than on the technical details of implementations of Niagara and Materials.<\/p>\n\n\n\n<p>If you are interested in the contents of the implementation and the parts other than the slash in this effect, please take a look at the link below where the UE data of the effect is provided.<\/p>\n\n\n\n<p><a href=\"https:\/\/heyyohanashima.gumroad.com\/l\/uajdj\">https:\/\/heyyohanashima.gumroad.com\/l\/uajdj<\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">\u76ee\u6b21<\/h2>\n\n\n\n<ol>\n<li>Silhouette of a flame-like slash<\/li>\n\n\n\n<li>How to create a flame texture and color<\/li>\n\n\n\n<li>Polish up<\/li>\n\n\n\n<li>Flame-like vanishing<\/li>\n\n\n\n<li>Additional<\/li>\n<\/ol>\n\n\n\n<h2 class=\"wp-block-heading\">1. Silhouette of a flame-like slash<\/h2>\n\n\n\n<p>We often see silhouettes of slashing effects with sharp outer edges and fading on the inside.<\/p>\n\n\n\n<figure class=\"wp-block-gallery has-nested-images columns-default is-cropped wp-block-gallery-1 is-layout-flex wp-block-gallery-is-layout-flex\">\n<figure class=\"wp-block-image size-large\"><img fetchpriority=\"high\" decoding=\"async\" width=\"1024\" height=\"652\" data-id=\"1223\" src=\"https:\/\/heyyocg.link\/wp-content\/uploads\/2023\/12\/K-015-1024x652.png\" alt=\"\" class=\"wp-image-1223\" srcset=\"https:\/\/heyyocg.link\/wp-content\/uploads\/2023\/12\/K-015-1024x652.png 1024w, https:\/\/heyyocg.link\/wp-content\/uploads\/2023\/12\/K-015-300x191.png 300w, https:\/\/heyyocg.link\/wp-content\/uploads\/2023\/12\/K-015-768x489.png 768w, https:\/\/heyyocg.link\/wp-content\/uploads\/2023\/12\/K-015.png 1286w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"703\" height=\"512\" data-id=\"1222\" src=\"https:\/\/heyyocg.link\/wp-content\/uploads\/2023\/12\/\u30b9\u30af\u30ea\u30fc\u30f3\u30b7\u30e7\u30c3\u30c8-2023-09-19-231308.png\" alt=\"\" class=\"wp-image-1222\" srcset=\"https:\/\/heyyocg.link\/wp-content\/uploads\/2023\/12\/\u30b9\u30af\u30ea\u30fc\u30f3\u30b7\u30e7\u30c3\u30c8-2023-09-19-231308.png 703w, https:\/\/heyyocg.link\/wp-content\/uploads\/2023\/12\/\u30b9\u30af\u30ea\u30fc\u30f3\u30b7\u30e7\u30c3\u30c8-2023-09-19-231308-300x218.png 300w\" sizes=\"(max-width: 703px) 100vw, 703px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"572\" data-id=\"1224\" src=\"https:\/\/heyyocg.link\/wp-content\/uploads\/2023\/12\/unnamed-file-1024x572.png\" alt=\"\" class=\"wp-image-1224\" srcset=\"https:\/\/heyyocg.link\/wp-content\/uploads\/2023\/12\/unnamed-file-1024x572.png 1024w, https:\/\/heyyocg.link\/wp-content\/uploads\/2023\/12\/unnamed-file-300x168.png 300w, https:\/\/heyyocg.link\/wp-content\/uploads\/2023\/12\/unnamed-file-768x429.png 768w, https:\/\/heyyocg.link\/wp-content\/uploads\/2023\/12\/unnamed-file-1536x858.png 1536w, https:\/\/heyyocg.link\/wp-content\/uploads\/2023\/12\/unnamed-file.png 1920w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n<\/figure>\n\n\n\n<p>However, in searching for various references, I felt that a more realistic slash of flame could be achieved by shaving both edges of the silhouette, so I decided to use such a silhouette for this work.<\/p>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-6 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-vertically-aligned-top is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:100%\">\n<figure class=\"wp-block-gallery has-nested-images columns-default is-cropped wp-block-gallery-3 is-layout-flex wp-block-gallery-is-layout-flex\">\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"517\" height=\"516\" src=\"https:\/\/heyyocg.link\/wp-content\/uploads\/2023\/12\/fwfwefwe-1.png\" alt=\"\" class=\"wp-image-1219\" srcset=\"https:\/\/heyyocg.link\/wp-content\/uploads\/2023\/12\/fwfwefwe-1.png 517w, https:\/\/heyyocg.link\/wp-content\/uploads\/2023\/12\/fwfwefwe-1-300x300.png 300w, https:\/\/heyyocg.link\/wp-content\/uploads\/2023\/12\/fwfwefwe-1-150x150.png 150w\" sizes=\"(max-width: 517px) 100vw, 517px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"910\" height=\"1024\" src=\"https:\/\/heyyocg.link\/wp-content\/uploads\/2023\/12\/IMG_1120-910x1024.png\" alt=\"\" class=\"wp-image-1221\" srcset=\"https:\/\/heyyocg.link\/wp-content\/uploads\/2023\/12\/IMG_1120-910x1024.png 910w, https:\/\/heyyocg.link\/wp-content\/uploads\/2023\/12\/IMG_1120-267x300.png 267w, https:\/\/heyyocg.link\/wp-content\/uploads\/2023\/12\/IMG_1120-768x864.png 768w, https:\/\/heyyocg.link\/wp-content\/uploads\/2023\/12\/IMG_1120.png 1105w\" sizes=\"(max-width: 910px) 100vw, 910px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"1012\" src=\"https:\/\/heyyocg.link\/wp-content\/uploads\/2023\/12\/IMG_1511-1024x1012.png\" alt=\"\" class=\"wp-image-1220\" srcset=\"https:\/\/heyyocg.link\/wp-content\/uploads\/2023\/12\/IMG_1511-1024x1012.png 1024w, https:\/\/heyyocg.link\/wp-content\/uploads\/2023\/12\/IMG_1511-300x296.png 300w, https:\/\/heyyocg.link\/wp-content\/uploads\/2023\/12\/IMG_1511-768x759.png 768w, https:\/\/heyyocg.link\/wp-content\/uploads\/2023\/12\/IMG_1511.png 1170w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n<\/figure>\n<\/div>\n<\/div>\n\n\n\n<p>To create a silhouette with both edges shaved off, the base Texture is a simple square mask with faded sides, and it will be UV-distorted with a Voronoi-based noise Texture in a material.<\/p>\n\n\n\n<figure class=\"wp-block-gallery has-nested-images columns-default is-cropped wp-block-gallery-7 is-layout-flex wp-block-gallery-is-layout-flex\">\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"512\" height=\"512\" data-id=\"1236\" src=\"https:\/\/heyyocg.link\/wp-content\/uploads\/2023\/12\/Gradient02.jpg\" alt=\"\" class=\"wp-image-1236\" srcset=\"https:\/\/heyyocg.link\/wp-content\/uploads\/2023\/12\/Gradient02.jpg 512w, https:\/\/heyyocg.link\/wp-content\/uploads\/2023\/12\/Gradient02-300x300.jpg 300w, https:\/\/heyyocg.link\/wp-content\/uploads\/2023\/12\/Gradient02-150x150.jpg 150w\" sizes=\"(max-width: 512px) 100vw, 512px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"512\" height=\"512\" data-id=\"1237\" src=\"https:\/\/heyyocg.link\/wp-content\/uploads\/2023\/12\/T_Noise01.jpg\" alt=\"\" class=\"wp-image-1237\" srcset=\"https:\/\/heyyocg.link\/wp-content\/uploads\/2023\/12\/T_Noise01.jpg 512w, https:\/\/heyyocg.link\/wp-content\/uploads\/2023\/12\/T_Noise01-300x300.jpg 300w, https:\/\/heyyocg.link\/wp-content\/uploads\/2023\/12\/T_Noise01-150x150.jpg 150w\" sizes=\"(max-width: 512px) 100vw, 512px\" \/><\/figure>\n<\/figure>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"400\" height=\"218\" src=\"https:\/\/heyyocg.link\/wp-content\/uploads\/2023\/12\/Portfolio_Game-Unreal-Editor-2023-12-17-11-28-07.gif\" alt=\"\" class=\"wp-image-1244\"\/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">2. How to create a flame texture and color<\/h2>\n\n\n\n<p>Voronoi-based Noise Texture, which I also used to create the silhouettes, proved to be a great match for creating the flame-like texture, as Voronoi creates streaky areas with high contrast, which is ideal for creating the organic distortion and stringy color shading of flames. I think.<\/p>\n\n\n\n<p>In this case, I used Voronoi textures from the Substance Designer presets with a slightly adjusted distortion and contrast.<\/p>\n\n\n\n<figure class=\"wp-block-gallery has-nested-images columns-default is-cropped wp-block-gallery-9 is-layout-flex wp-block-gallery-is-layout-flex\">\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"512\" height=\"512\" data-id=\"1238\" src=\"https:\/\/heyyocg.link\/wp-content\/uploads\/2023\/12\/T_Noise03.jpg\" alt=\"\" class=\"wp-image-1238\" srcset=\"https:\/\/heyyocg.link\/wp-content\/uploads\/2023\/12\/T_Noise03.jpg 512w, https:\/\/heyyocg.link\/wp-content\/uploads\/2023\/12\/T_Noise03-300x300.jpg 300w, https:\/\/heyyocg.link\/wp-content\/uploads\/2023\/12\/T_Noise03-150x150.jpg 150w\" sizes=\"(max-width: 512px) 100vw, 512px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"512\" height=\"512\" data-id=\"1239\" src=\"https:\/\/heyyocg.link\/wp-content\/uploads\/2023\/12\/T_Noise04.jpg\" alt=\"\" class=\"wp-image-1239\" srcset=\"https:\/\/heyyocg.link\/wp-content\/uploads\/2023\/12\/T_Noise04.jpg 512w, https:\/\/heyyocg.link\/wp-content\/uploads\/2023\/12\/T_Noise04-300x300.jpg 300w, https:\/\/heyyocg.link\/wp-content\/uploads\/2023\/12\/T_Noise04-150x150.jpg 150w\" sizes=\"(max-width: 512px) 100vw, 512px\" \/><\/figure>\n<\/figure>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"400\" height=\"218\" src=\"https:\/\/heyyocg.link\/wp-content\/uploads\/2023\/12\/Portfolio_Game-Unreal-Editor-2023-12-17-11-30-54.gif\" alt=\"\" class=\"wp-image-1245\"\/><\/figure>\n\n\n\n<p>Next is Highlights. As with the flames in the middle of the above reference, I thought it would be good to add highlights with a slightly rough, fire dust-like impression, so I used a fine-grained noise texture and added it to the base to create the highlights. In doing so, I applied Power and Multiply nodes to the output of the Texture Color in material and set both values to high, thereby increasing the value while narrowing the highlight range.<\/p>\n\n\n\n<figure class=\"wp-block-image size-medium\"><img loading=\"lazy\" decoding=\"async\" width=\"300\" height=\"300\" src=\"https:\/\/heyyocg.link\/wp-content\/uploads\/2023\/12\/T_Noise02-300x300.jpg\" alt=\"\" class=\"wp-image-1240\" srcset=\"https:\/\/heyyocg.link\/wp-content\/uploads\/2023\/12\/T_Noise02-300x300.jpg 300w, https:\/\/heyyocg.link\/wp-content\/uploads\/2023\/12\/T_Noise02-150x150.jpg 150w, https:\/\/heyyocg.link\/wp-content\/uploads\/2023\/12\/T_Noise02.jpg 512w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"400\" height=\"218\" src=\"https:\/\/heyyocg.link\/wp-content\/uploads\/2023\/12\/Portfolio_Game-Unreal-Editor-2023-12-17-11-32-05.gif\" alt=\"\" class=\"wp-image-1246\"\/><\/figure>\n\n\n\n<p>Finally, ColorMapping is done with the texture gradient created so far to add the color of the flames. You can find a variety of flame color gradients on Pinterest by searching for &#8216;fire color palette,&#8217; so I created a ColorCurve based on those.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"932\" height=\"92\" src=\"https:\/\/heyyocg.link\/wp-content\/uploads\/2023\/12\/FireColorPalette.jpg\" alt=\"\" class=\"wp-image-1241\" srcset=\"https:\/\/heyyocg.link\/wp-content\/uploads\/2023\/12\/FireColorPalette.jpg 932w, https:\/\/heyyocg.link\/wp-content\/uploads\/2023\/12\/FireColorPalette-300x30.jpg 300w, https:\/\/heyyocg.link\/wp-content\/uploads\/2023\/12\/FireColorPalette-768x76.jpg 768w\" sizes=\"(max-width: 932px) 100vw, 932px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"400\" height=\"218\" src=\"https:\/\/heyyocg.link\/wp-content\/uploads\/2023\/12\/Portfolio_Game-Unreal-Editor-2023-12-17-11-32-33.gif\" alt=\"\" class=\"wp-image-1247\"\/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">3. Polish up<\/h2>\n\n\n\n<p>And so, the following flame slash was created at this stage. Now, suddenly, what is wrong with this effect?<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"400\" height=\"218\" src=\"https:\/\/heyyocg.link\/wp-content\/uploads\/2023\/12\/Portfolio_Game-Unreal-Editor-2023-12-09-11-37-04_1.gif\" alt=\"\" class=\"wp-image-1225\"\/><\/figure>\n\n\n\n<p>Here is a lecture video telling the answer, which very well verbalizes the design principles of game effects.<\/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 title=\"\u904a\u6232\u7279\u6548\u8996\u89ba\u8a2d\u8a08 Real-Time VFX Visual Design - Color (B)\" width=\"500\" height=\"281\" src=\"https:\/\/www.youtube.com\/embed\/MbyeXYXeJcc?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<p>This video breaks down game effects into the three elements of shape, color, and timing, and provides a clear and easy-to-understand summary of design principles for each, as well as how to differentiate between Real and Stylized tastes.<\/p>\n\n\n\n<p>I will excerpt one of these slides and discuss the answer to the previous question.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"587\" src=\"https:\/\/heyyocg.link\/wp-content\/uploads\/2023\/12\/3-Gradation-of-Color-Design-1024x587.jpg\" alt=\"\" class=\"wp-image-1226\" srcset=\"https:\/\/heyyocg.link\/wp-content\/uploads\/2023\/12\/3-Gradation-of-Color-Design-1024x587.jpg 1024w, https:\/\/heyyocg.link\/wp-content\/uploads\/2023\/12\/3-Gradation-of-Color-Design-300x172.jpg 300w, https:\/\/heyyocg.link\/wp-content\/uploads\/2023\/12\/3-Gradation-of-Color-Design-768x440.jpg 768w, https:\/\/heyyocg.link\/wp-content\/uploads\/2023\/12\/3-Gradation-of-Color-Design-1536x880.jpg 1536w, https:\/\/heyyocg.link\/wp-content\/uploads\/2023\/12\/3-Gradation-of-Color-Design.jpg 1635w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>The Hadouken effect in Street Fighter 6 is very well designed in terms of color. The high-energy tip has a strong highlight color, intentionally drawing the user&#8217;s eye to the tip, which is the most important part of the move.<\/p>\n\n\n\n<p>So one important aspect of color design is to create color gradations with an awareness of energy intensity and eye guidance.<\/p>\n\n\n\n<p>This point highlights the no-no of the above-mentioned flame slash. In slashing, the tip of the sword flash should have the highest energy, and the user&#8217;s gaze should be directed to the tip to help them grasp the sword&#8217;s movement.<\/p>\n\n\n\n<p>However, the above-mentioned is a factor that causes the gaze to be scattered, because when the entire image of the sword flash is seen, the entire image is uniformly luminous, and on the contrary, the tip is seen where it is darkened.<\/p>\n\n\n\n<figure class=\"wp-block-image size-medium\"><img loading=\"lazy\" decoding=\"async\" width=\"300\" height=\"229\" src=\"https:\/\/heyyocg.link\/wp-content\/uploads\/2023\/12\/qfqfqwqqwffw-300x229.jpg\" alt=\"\" class=\"wp-image-1228\" srcset=\"https:\/\/heyyocg.link\/wp-content\/uploads\/2023\/12\/qfqfqwqqwffw-300x229.jpg 300w, https:\/\/heyyocg.link\/wp-content\/uploads\/2023\/12\/qfqfqwqqwffw.jpg 597w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/figure>\n\n\n\n<p>And here I polished it up.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"400\" height=\"218\" src=\"https:\/\/heyyocg.link\/wp-content\/uploads\/2023\/12\/Portfolio_Game-Unreal-Editor-2023-12-09-13-43-24.gif\" alt=\"\" class=\"wp-image-1229\"\/><\/figure>\n\n\n\n<p>In the improved version, the Emitter was separated for highlights and adjusted to move faster than the underlying slash, with a stronger emission, so that the gradation from the tip to the end is clearer and the eye is directed to the tip.<\/p>\n\n\n\n<figure class=\"wp-block-image size-medium\"><img loading=\"lazy\" decoding=\"async\" width=\"300\" height=\"210\" src=\"https:\/\/heyyocg.link\/wp-content\/uploads\/2023\/12\/wefwwgw-300x210.jpg\" alt=\"\" class=\"wp-image-1231\" srcset=\"https:\/\/heyyocg.link\/wp-content\/uploads\/2023\/12\/wefwwgw-300x210.jpg 300w, https:\/\/heyyocg.link\/wp-content\/uploads\/2023\/12\/wefwwgw.jpg 597w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/figure>\n\n\n\n<p>In addition, apart from the color design, to break the overall silhouette and eliminate the mesh feeling, another mask texture for the silhouette was added for the highlight, and two Particles with different Scale, Position, and Timing were Applied.<\/p>\n\n\n\n<figure class=\"wp-block-image size-medium\"><img loading=\"lazy\" decoding=\"async\" width=\"300\" height=\"300\" src=\"https:\/\/heyyocg.link\/wp-content\/uploads\/2023\/12\/T_Slash01-300x300.jpg\" alt=\"\" class=\"wp-image-1242\" srcset=\"https:\/\/heyyocg.link\/wp-content\/uploads\/2023\/12\/T_Slash01-300x300.jpg 300w, https:\/\/heyyocg.link\/wp-content\/uploads\/2023\/12\/T_Slash01-150x150.jpg 150w, https:\/\/heyyocg.link\/wp-content\/uploads\/2023\/12\/T_Slash01.jpg 512w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-gallery has-nested-images columns-default is-cropped wp-block-gallery-11 is-layout-flex wp-block-gallery-is-layout-flex\">\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"400\" height=\"218\" data-id=\"1248\" src=\"https:\/\/heyyocg.link\/wp-content\/uploads\/2023\/12\/Portfolio_Game-Unreal-Editor-2023-12-17-11-38-04.gif\" alt=\"\" class=\"wp-image-1248\"\/><figcaption class=\"wp-element-caption\">Particle1<\/figcaption><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"400\" height=\"218\" data-id=\"1249\" src=\"https:\/\/heyyocg.link\/wp-content\/uploads\/2023\/12\/Portfolio_Game-Unreal-Editor-2023-12-17-11-39-00.gif\" alt=\"\" class=\"wp-image-1249\"\/><figcaption class=\"wp-element-caption\">Particle2<\/figcaption><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"400\" height=\"218\" data-id=\"1255\" src=\"https:\/\/heyyocg.link\/wp-content\/uploads\/2023\/12\/Portfolio_Game-Unreal-Editor-2023-12-17-12-02-40.gif\" alt=\"\" class=\"wp-image-1255\"\/><figcaption class=\"wp-element-caption\">Both<\/figcaption><\/figure>\n<\/figure>\n\n\n\n<p>Finally, another darker underlying slash is created to represent Highlight\/Midtone\/Shadow with separate Emitters for each.<\/p>\n\n\n\n<figure class=\"wp-block-gallery has-nested-images columns-default is-cropped wp-block-gallery-13 is-layout-flex wp-block-gallery-is-layout-flex\">\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"400\" height=\"218\" data-id=\"1250\" src=\"https:\/\/heyyocg.link\/wp-content\/uploads\/2023\/12\/Portfolio_Game-Unreal-Editor-2023-12-17-11-39-48.gif\" alt=\"\" class=\"wp-image-1250\"\/><figcaption class=\"wp-element-caption\">Shadow<\/figcaption><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"400\" height=\"218\" data-id=\"1251\" src=\"https:\/\/heyyocg.link\/wp-content\/uploads\/2023\/12\/Portfolio_Game-Unreal-Editor-2023-12-17-11-40-23.gif\" alt=\"\" class=\"wp-image-1251\"\/><figcaption class=\"wp-element-caption\">Final Look<\/figcaption><\/figure>\n<\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">4. Flame-like vanishing<\/h2>\n\n\n\n<p>Another twist is added to express a flame-like appearance.<\/p>\n\n\n\n<p>As the flame moves at a fast speed and extinguishes, it appears to spread and disappear, partly due to centrifugal force.<\/p>\n\n\n\n<p>To express this, the width of the mesh is widened when disappearing with World Position Offset.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"400\" height=\"218\" src=\"https:\/\/heyyocg.link\/wp-content\/uploads\/2023\/12\/Portfolio_Game-Unreal-Editor-2023-12-17-11-41-35.gif\" alt=\"\" class=\"wp-image-1252\"\/><\/figure>\n\n\n\n<p>In addition, by changing the intensity of the UV-Distortion and the scale of distortion texture, a fluid-like texture movement, not a simple Texture Scroll, is slightly added when the texture disappears.<\/p>\n\n\n\n<p>\u203bFluid-like motion caused by changes in UV Distortion intensity and Scale are explained below.<\/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 title=\"\uac8c\uc784 \uc774\ud399\ud2b8 Unreal Dust FlowMap concept Tutorial \uba3c\uc9c0 \ud50c\ub85c\uc6b0\ub9f5 \ud6a8\uacfc1\" width=\"500\" height=\"281\" src=\"https:\/\/www.youtube.com\/embed\/URRf4Yd-3ss?start=3458&#038;feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<p>It is a small device, but I think it strengthens the impression of flame-like quality a little by comparison.<\/p>\n\n\n\n<figure class=\"wp-block-gallery has-nested-images columns-default is-cropped wp-block-gallery-15 is-layout-flex wp-block-gallery-is-layout-flex\">\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"400\" height=\"218\" data-id=\"1253\" src=\"https:\/\/heyyocg.link\/wp-content\/uploads\/2023\/12\/Portfolio_Game-Unreal-Editor-2023-12-17-11-43-22.gif\" alt=\"\" class=\"wp-image-1253\"\/><figcaption class=\"wp-element-caption\">WPO\u306a\u3057<\/figcaption><\/figure>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"400\" height=\"218\" data-id=\"1251\" src=\"https:\/\/heyyocg.link\/wp-content\/uploads\/2023\/12\/Portfolio_Game-Unreal-Editor-2023-12-17-11-40-23.gif\" alt=\"\" class=\"wp-image-1251\"\/><figcaption class=\"wp-element-caption\">WPO\u3042\u308a<\/figcaption><\/figure>\n<\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">5. Additional<\/h2>\n\n\n\n<p>If we only use mesh to express sword flashes, the volume is weak and there is a limit to how much the silhouette can be broken up without mesh shape feeling, so we have created particles of flame and smoke to match the trajectory of the sword flashes.<\/p>\n\n\n\n<figure class=\"wp-block-image size-medium\"><img loading=\"lazy\" decoding=\"async\" width=\"300\" height=\"224\" src=\"https:\/\/heyyocg.link\/wp-content\/uploads\/2023\/12\/unnamed-file-1-300x224.png\" alt=\"\" class=\"wp-image-1232\" srcset=\"https:\/\/heyyocg.link\/wp-content\/uploads\/2023\/12\/unnamed-file-1-300x224.png 300w, https:\/\/heyyocg.link\/wp-content\/uploads\/2023\/12\/unnamed-file-1-1024x763.png 1024w, https:\/\/heyyocg.link\/wp-content\/uploads\/2023\/12\/unnamed-file-1-768x572.png 768w, https:\/\/heyyocg.link\/wp-content\/uploads\/2023\/12\/unnamed-file-1.png 1048w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><figcaption class=\"wp-element-caption\">The organic silhouette in the Street Fighter 6 effect is genius.<\/figcaption><\/figure>\n\n\n\n<p>In this case, if the Particles are simply produced in accordance with the trajectory without any effort, the Particles themselves may contribute to a monotonous silhouette, so it is necessary to pay attention to how they move and disappear.<\/p>\n\n\n\n<p>In the movement of the Particle, the Particle is given a small amount of speed in the opposite direction of the slash&#8217;s movement, as if the Particle were left behind.<\/p>\n\n\n\n<figure class=\"wp-block-gallery has-nested-images columns-default is-cropped wp-block-gallery-17 is-layout-flex wp-block-gallery-is-layout-flex\">\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"597\" height=\"418\" data-id=\"1259\" src=\"https:\/\/heyyocg.link\/wp-content\/uploads\/2023\/12\/velocitysample.jpg\" alt=\"\" class=\"wp-image-1259\" srcset=\"https:\/\/heyyocg.link\/wp-content\/uploads\/2023\/12\/velocitysample.jpg 597w, https:\/\/heyyocg.link\/wp-content\/uploads\/2023\/12\/velocitysample-300x210.jpg 300w\" sizes=\"(max-width: 597px) 100vw, 597px\" \/><figcaption class=\"wp-element-caption\">In the opposite direction of the slash&#8217;s movement.<\/figcaption><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"559\" height=\"366\" data-id=\"1258\" src=\"https:\/\/heyyocg.link\/wp-content\/uploads\/2023\/12\/addvelocity.jpg\" alt=\"\" class=\"wp-image-1258\" srcset=\"https:\/\/heyyocg.link\/wp-content\/uploads\/2023\/12\/addvelocity.jpg 559w, https:\/\/heyyocg.link\/wp-content\/uploads\/2023\/12\/addvelocity-300x196.jpg 300w\" sizes=\"(max-width: 559px) 100vw, 559px\" \/><figcaption class=\"wp-element-caption\">Calculate direction using outer product<\/figcaption><\/figure>\n<\/figure>\n\n\n\n<p>In the vanishing process, to avoid a rounded silhouette as much as possible, we clearly differentiated the contrast of the texture and added a fluid-like motion to the vanishing process as described above.<\/p>\n\n\n\n<figure class=\"wp-block-image size-medium\"><img loading=\"lazy\" decoding=\"async\" width=\"300\" height=\"300\" src=\"https:\/\/heyyocg.link\/wp-content\/uploads\/2023\/12\/FireAtlas01-300x300.jpg\" alt=\"\" class=\"wp-image-1257\" srcset=\"https:\/\/heyyocg.link\/wp-content\/uploads\/2023\/12\/FireAtlas01-300x300.jpg 300w, https:\/\/heyyocg.link\/wp-content\/uploads\/2023\/12\/FireAtlas01-150x150.jpg 150w, https:\/\/heyyocg.link\/wp-content\/uploads\/2023\/12\/FireAtlas01.jpg 512w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-gallery has-nested-images columns-default is-cropped wp-block-gallery-19 is-layout-flex wp-block-gallery-is-layout-flex\">\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"400\" height=\"218\" data-id=\"1256\" src=\"https:\/\/heyyocg.link\/wp-content\/uploads\/2023\/12\/Portfolio_Game-Unreal-Editor-2023-12-17-12-07-20.gif\" alt=\"\" class=\"wp-image-1256\"\/><figcaption class=\"wp-element-caption\">Flames and Smoke<\/figcaption><\/figure>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"400\" height=\"218\" data-id=\"1261\" src=\"https:\/\/heyyocg.link\/wp-content\/uploads\/2023\/12\/Portfolio_Game-Unreal-Editor-2023-12-17-12-28-07.gif\" alt=\"\" class=\"wp-image-1261\"\/><figcaption class=\"wp-element-caption\">Final look (slash + fire and smoke + fire sparks)<\/figcaption><\/figure>\n<\/figure>\n\n\n\n<p>I think there is room for a little more brushing up in this area, but I will leave it at that for now.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Lastly<\/h2>\n\n\n\n<p>I think many blog posts on Vfx tend to be technical content, although I can&#8217;t find many articles focusing on the design itself.<\/p>\n\n\n\n<p>Vfx often requires a lot of knowledge on the technical side, but since artistic expression is realized through both technical and design aspects, I would like to see more articles explaining not only the technical aspects but also the design aspects!<\/p>\n\n\n\n<p>In this article, I have introduced the trial and error of the design aspect and the Texture I actually used. If you are curious about how the actual implementation is done or interested in the creation of parts other than the fire slash, please take a peek at the UE data provided below for this individual work!<\/p>\n\n\n\n<p><a href=\"https:\/\/heyyohanashima.gumroad.com\/l\/uajdj\">https:\/\/heyyohanashima.gumroad.com\/l\/uajdj<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Introduction. This is an explanation of the &#8220;Fire Slash&#8221; effect that I created using Niagara in UE5. In this article, I would like to explain a slash part in the effect.I will focus more on the artistic aspect of how the fire slash was designed than on the technical details of implementations of Niagara and [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":1263,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_lmt_disableupdate":"","_lmt_disable":"","_mi_skip_tracking":false,"footnotes":"","_locale":"en_US","_original_post":"https:\/\/heyyocg.link\/?p=1213"},"categories":[17],"tags":[32,15],"modified_by":"yohanashima","_links":{"self":[{"href":"https:\/\/heyyocg.link\/wp-json\/wp\/v2\/posts\/1267"}],"collection":[{"href":"https:\/\/heyyocg.link\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/heyyocg.link\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/heyyocg.link\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/heyyocg.link\/wp-json\/wp\/v2\/comments?post=1267"}],"version-history":[{"count":9,"href":"https:\/\/heyyocg.link\/wp-json\/wp\/v2\/posts\/1267\/revisions"}],"predecessor-version":[{"id":1281,"href":"https:\/\/heyyocg.link\/wp-json\/wp\/v2\/posts\/1267\/revisions\/1281"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/heyyocg.link\/wp-json\/wp\/v2\/media\/1263"}],"wp:attachment":[{"href":"https:\/\/heyyocg.link\/wp-json\/wp\/v2\/media?parent=1267"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/heyyocg.link\/wp-json\/wp\/v2\/categories?post=1267"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/heyyocg.link\/wp-json\/wp\/v2\/tags?post=1267"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}