Jump to content

[Tutorial]How to add Animated Flame Effect(Enhanced yet Simplified version:21/Apr/2018 updated)


Otakadelic

Recommended Posts

[Tutorial]How to add Animated Flame Effect(Enhanced yet Simplified version)

 

Update info:

21/Apr/2018 : 'How to adjust animation speed' section added.

 

Based on zxfda's Stunning Animated Flame Effect

https://www.loverslab.com/topic/80124-【course】火焰流光教程/

 

Thanks to the updated tools, I could make necessary steps simplified yet enhanced its effect from zxfda's original method.

 

Kasumi_on_Fire.gif.9f135b596bbaa5740e2241cfbd7fd6ed.gifhitomi_red_and_ble_fire.gif.d149e329f97c155295e6f8ba57cfc9fb.gif

 

- Collect necessary tools and files

 

You need following tools and files:

 

TMC Object Tool (Must be the most recent version)

TMC Polygon Insert Tool

Texture Tool JPN Custom(requires on advanced steps)

https://www.mediafire.com/folder/9zi2gt8dyllaj/doa5mod

 

LR Photo Studio(not required but very handy)

https://www.mediafire.com/folder/f2d5z16fv0xm2/DOA5LR

 

AnimatedEffect-5slots.7z

(attached this topic.)

And targeted TMC/TMCL files which you want to add this effect.

 

- STEP 1: Open targeted TMC with TMC Object Tool and extract targeted mesh(es)

 

Lets try with very ordinal one, KASUMI_COS_002.TMC/TMCL files. Open with TOTool.

Select which mesh(es) which you want to apply this effect. This time I will apply three meshes, WGT_cos6,7, and 9(Blue parts of Kasumi's outlet).

Right click each mesh then select 'Extract Mesh Data'. Save each *.tmcmesh files to somewhere.

 

WS000376.thumb.jpg.b745566eb74f53420ce989d65d990aa3.jpg

 

- STEP 2: Import 'AnimatedEffect-5slots.TMC'

 

Then, click 'Import' and import 'AnimatedEffect-5slots.TMC' file(located inside of AnimatedEffect-5slots.7z file). 

 

step1-tot.thumb.jpg.c5a1eeaca3e9f86cd582dd953175cc7d.jpg

 

Select all Object Group(There is only one).

 

WS000377.jpg.367f833cffc9612d579bc693ec987e1f.jpg

 

Save with different name(better to keep KASUMI_COS_002.TMC/TMCL as original).

 

- STEP 3: Insert targeted meshes to AnimatedSlots

 

Launch TMC Polygon Insert Tool then open with saved TMC file on above step.

 

- Check 'Enable Insert Into Object of D...'. This is very important!!!

- Check the character is correct one. Sometime detected with wrong character.

 

step3-tpit.thumb.jpg.b9d49714369be7be08254613ce041d00.jpg

 

Then D&D pre-saved tmcmesh files. The result should be like this.

 

WS000380.thumb.jpg.30bada1d972d96854a391807f5aad537.jpg

 

Then change each 'Destination' to one of 'WGT_AnimatedSlots_*'. (The order is not important but start with WGT_AnimatedSlots_0 will make things simple.)

 

step3-tpit-change-destination.thumb.jpg.c7910fbbd9f6c5ea3b9b6a20df024ea3.jpg

*** In rare cases, targeted tmcmesh can not set animation slot as destination. The reason is unknown and it means the mesh is not compatible with this effect. ***

 

Click Save. That's it! All done!!! 

 

KASUMI_COS_002_with_3fires.7Z

 

- (Optional)STEP 4: Check animation on actual game situation

 

Since there is no viewer to display this effect properly, put Autolink folder and check how animation works.

 

- (Optional)STEP 5: More than 5 then Up to 10 meshes

 

If five slots are not enough, I included 10 slots TMC file.  I haven't try this(not at all) so please report here if it works or not.

 

 

=== ADVANCED TECHNIQUES ====

 

- Change Fire Texture(color,pattern)

Above steps are effective enough but lets go further. First, change Fire Texture. Here is the fire texture zxfda applied.

 

WS000383.jpg.0a4aeab7bcacf26d4644ed195c366df6.jpg

 

Keep in mind this texture needs Alpha Channel. Below is her one.

 

WS000384.jpg.594d06e159899fc9d7f2d2cb6e400e3f.jpg

 

As you can see, we can learn several rules.

 

- Alpha channel indicates only small parts of fire image are used(White area of Alpha channel)

- Alpha channel keeps 'which area will displays and which area will not' info only.

 

Since no color related info is not stored inside of the alpha channel, you can change color of the fire image(with Photoshop or GIMP) or, search similar image using Google and swap with original fire image(=reuse alpha channel).

I swapped blue fire image.

blue-fire.dds

And here is Blue-Fired Hitomi.

HITOMI_on_BlueFire.7Z

I also swapped blue and red fire image(2 colors in single texture).

blue-and-red.dds

 

- Apply different Texture to each meshes

We have several textures now, so we can apply different patterns on each mesh.

KASUMI_COS_002_with_3fires_with_diffrent_color.7Z

 

- Change Alpha Channel

But since Alpha channel is same one from the original, not only red and blue but black color appears on 'Red and Blue' animation. Not optimized with newly replaced image.

Now time to advance one more step. Generating alpha channel from image file is easy(Photoshop) or tricky but possible(GIMP).

 

This is targeted image file.

WS000385.jpg.967c0e336464063071ae728331ad4abd.jpg

 

zxfda uses only small portion of texture image. Then what happens if larger area has applied to this effect?

This is one of Alpha channel I made, aggressively enlarged.

 

WS000386.jpg.a1afed51c727a251c69fba07ab4cf41a.jpg

 

Try by yourself what will happen with this texture. It'll be like a sharp knife, greater result or great side effect(s).

blue_red_fire_aggressive.dds

 

We learned how what kind of image and what shape of alpha channel will affect the animation.

Then how about with letters? 

 

- Animated text

 

I tried several colors and several size of fonts but since how to adjust animation speed is unknown (can adjust by TMC OBject Tool. See Below), my answer is black colored text. But background color must be black(not proven but highly likely) and we want black colored text(ed texture). Here is how to make black colored text texture file for this effect.

First, type any kind of word then copy to roughly 10 - 20 set then put them randomly.

Here is one example. The size of image is 512 x 512.

 

bitch-text.jpg.456875b97f751d1700badbf562450316.jpg

 

Then create Alpha Channel based on above image. (Pls try Google for exact operation)

Now you will get proper alpha channel.

 

bitch-alpha.jpg.0bb1ac4b9183b93be751490c709820f3.jpg

 

Once you created alpha channel, then the actual image is not needed anymore. remove it or paint it all by black color(but keep alpha channel intact)

Save this as DXT5 with alpha.

 

Text-bitch.dds

 

Here is an example of this effect applied to Ayane.

(The combination of word and character is pure coincidence hence no political nor personal opinions included, indicated.)

ayane_da_bitch.gif.baef37a02100960f8b0055c6937004ce.gif

 

AYANE_DA_BITCH.7Z

 

umm, looks like other colors might be readable if dark enough. Try with other colors. The answers are in your imagination.

Longer text like 'I am Da Bitch any problem?' won't be suited with current research. *Maybe* become readable with 1024 x 1024(or higher). Not sure.

This is the area to look deeper for effective results.

 

- How to adjust animation speed (added 21/Apr/2018)

 

While look for the secret of this effect by TMC Object Tool, Mr. Dotoku has already discovered and added the functions to adjust the speed of this effect.

Open Any animated TMC with TMC Object Tool(must be the most recent version. I checked with 0.32.2).

There is menu item called 'Texture Parameters' under 'Edit' button on top menu. Select animated slot then click 'Texture Parameters'. 

 

WS000398.jpg.56a3c9438f77d16f6426b1b35a6e61c8.jpg

 

In DOA5LR, there are two type of animations discovered. This Flaming Effect is the first one, 'Slide' as Mr. Dotoku called. This is done by sliding texture's location to create animation-like effect. But since only single texture is involved, the actual texture can't be modified or changed. 

The other is 'Multiple', using multiple number of textures. This is real animation and enables more possibilities, however, you have to take care of TMCL's file size. Could be really tight.

 

Two params of 'Slide' are adjustable with current TOTool.

- Speed U

  speed of Horizontal direction.

- Speed V

  speed of Vertical direction.

 

I tried with variety of values and meaningful range should be: 

 

- 50% to +50%

 

Which means exact value should be:

 

between '0.005' and '0.015'.

 

+100%(=0.02) is too fast I think, not effective except rare situations.

If you put extremely large value like 20, then simply stop to slide. No animation.

Note that current TOTool is little hard to set such very small values. Maybe easier to type somewhere else then copy & paste to the target param.

 

That's it forks! Hope this will help!

 

Suggestions and recommendations are highly welcomed! (Pointing errors will be also accepted.)  

 

edit1:fixed typo.

edit2:added text animation.

edit3:rare case of incompatibility added.

edit4:'how to adjust animation speed' section added.

Link to comment
2 hours ago, Otakadelic said:

- Animated text

 

I tried several colors and several size of fonts but since how to adjust animation speed is unknown, my answer is black colored text. But background color must be black(not proven but highly likely) and we want black colored text(ed texture). Here is how to make black colored text texture file for this effect.

First, type any kind of word then copy to roughly 10 - 20 set then put them randomly.

Here is one example. The size of image is 512 x 512.

 

bitch-text.jpg.456875b97f751d1700badbf562450316.jpg

 

Then create Alpha Channel based on above image. (Pls try Google for exact operation)

Now you will get proper alpha channel.

 

bitch-alpha.jpg.0bb1ac4b9183b93be751490c709820f3.jpg

 

Once you create alpha channel, then the actual image is not needed anymore. remove it or paint it all by black color(but keep alpha channel intact)

Save them as DXT5 with alpha.

 

Text-bitch.dds

 

Here is an example of this effect applied Ayane.

ayane_da_bitch.gif.baef37a02100960f8b0055c6937004ce.gif

 

AYANE_DA_BITCH.7Z

 

umm, looks like other colors might be readable if dark enough. Try with other colors. The answers are in your imagination.

Longer text like 'I am Da Bitch any problem?' won't be suited with current research. *Maybe* become readable with 1024 x 1024(or higher). Not sure.

This is the area to look deeper for effective results.

 

That's it for now forks! Hope this will help!

 

Suggestions and recommendations are highly welcome! (Pointing errors will be also accepted.)  

 

edit1:fixed typo.

edit2:added text animation.

 

 

 

All is fine, but you chose not the most cultured word, without thinking that Ayane can have fans who will call you the same word.

 

  LOL

 

 

 

 

 

Link to comment
4 hours ago, Baralgin said:

 

All is fine, but you chose not the most cultured word, without thinking that Ayane can have fans who will call you the same word.

 

  LOL

 

 

 

 

 

 

Tutorials ended up as boring contents very easily, so I have to add some kind of humor. And yes, that is an humor, in case of Ayane fans didn't notice.

But, sorry Ayane and her fans, no intention but make laugh. 

 

- Bitchitadelic

 

 

edit1:fixed typo

 

Link to comment

Archived

This topic is now archived and is closed to further replies.

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. For more information, see our Privacy Policy & Terms of Use