Final Fantasy Hacktics

Modding => Tutorials and Learning => Topic started by: Xifanie on May 06, 2016, 01:38:41 pm

Title: Editing Effects' Palette and Graphic
Post by: Xifanie on May 06, 2016, 01:38:41 pm
Why this tutorial?
[indent=2]To show people how change the graphics and palettes of Effect files (ability graphic animations)[/indent]

Requirements

[indent=2]
For every user:


For 32bit Windows users:


For 64bit Windows users:

[indent=1]

This tutorial assumes your main drive is C:\, feel free to adapt the information to your needs

  • Install DOSBox

  • Extract the contents of Win31.7z to C:\ (You should be able to browse to C:\Win31\WINDOWS\TIM Utility\)

  • Run DOSBox

  • Enter Mount C C:\Win31

  • Enter C:\WINDOWS\win (at this point Windows 3.1 should be booting)

  • TIM Utility should run on startup; use it as described later in the tutorial (Files can be imported from/exported to C:\Win31\WINDOWS\TIM Utility\.)



WARNING:
[indent=2]With this method, the file index is only refreshed once Windows 3.1 is rebooted. Because of how the program handles file names, try to keep your file names very short if you don't want to deal with the infamous "SomeFileName.bmp" becoming "SomeF~1.bmp". You will likely have to manually type the file names most of the time unless you reboot, because the file browser will not display them (but the files will still be loaded properly).[/indent]
[/indent]
[/indent]

Tutorial

[indent=2]

Getting started
[indent=2]Visit http://ffhacktics.com/wiki/Effects (http://ffhacktics.com/wiki/Effects). This page contains very important information used through this tutorial. Also, make sure you grab the .BMP version of the Effect file you want to edit.[/indent]


Editing the file
[indent=2]Just change the colors and graphics as you want... unless you know what you're doing, do not change the dimensions, and if the wiki page (http://ffhacktics.com/wiki/Effects) states that the Effect file is "4bpp Multi-CLUT", do not use any color other than the first 16. Feel free to edit the colors; but don't use them in the graphical area.

For the sake of this tutorial, we will be using this "Bloody Sword" edit I made:
(http://xifanie.ffhacktics.com/EffectsTut/E163.png)
[/indent]


Reducing colors while maximizing quality (optional)
[indent=2]* This is a lot more for 8bpp effect files than 4bpp; since you only have 16 colors per palette, chances are, using this method won't change a damn thing, in fact, it could become a hindrance

What it comes down to, is the TIM files that will be generated for 8bpp effects are in fact 15bpp + 1 byte for the transparency channel, but indexed. 15bpp means 5 bits per color. So instead of the usual 0 to 255 Red, you'll have 0 to 31 Red. Or, if you prefer, 0-8-16-24-32-and so on... i.e. in increments of ~8. Unfortunately, the best way, by far, to achieve this, is using Photoshop. So, if you don't have Photoshop, sorry because I don't know how any other way to do this.

Assuming you were working with a .psd (and you should), save your file as a BMP, but select 16bit (which is really the 15bpp I mentioned earlier).
(http://xifanie.ffhacktics.com/EffectsTut/MC1.png)

Next, open that BMP in Photoshop. Then, we want to reduce it to 8bpp, so head over to "Image"/"Mode"/"Indexed Color"
(http://xifanie.ffhacktics.com/EffectsTut/MC2.png)

Make sure "Preserve Exact Colors" is checked! Otherwise, new colors will be generated, and there WILL be conflict, making similar colors becoming the same when creating a TIM out of it, and you WILL lose quality. Otherwise, just adjust the Dither and its % as you wish.
(http://xifanie.ffhacktics.com/EffectsTut/MC3.png)

Just save as a 8 bit BMP and you're good to go!
[/indent]


Creating a 4bpp BMP (optional)
[indent=2]* This section is only necessary for Effect files that have a "4bpp Multi-CLUT" color depth, and only if the Graphic was altered.

First load up your 8bpp BMP in Photoshop, then just access its color table.
(http://xifanie.ffhacktics.com/EffectsTut/PS1.png)

Next you will want to select all the colors from the start of the second row to the end of the last row.
(http://xifanie.ffhacktics.com/EffectsTut/PS2.png)

A color selection dialog will appear; the color needs to be RGB 0,0,0 (pure black), then press OK. The color dialog will appear again, just press OK again.
(http://xifanie.ffhacktics.com/EffectsTut/PS3.png)

Now you can save you file (under a new name ideally). When prompted, select "4 Bit" under "Depth", then press OK.
(http://xifanie.ffhacktics.com/EffectsTut/PS4.png)


First load up your 8bpp BMP into GraphicsGale. Or if you were already working on it, save your file.
(http://xifanie.ffhacktics.com/EffectsTut/GG1.png)

Next you will want to change its Color Depth.
(http://xifanie.ffhacktics.com/EffectsTut/GG2.png)

Make sure 4bpp is selected, then press OK.
(http://xifanie.ffhacktics.com/EffectsTut/GG3.png)

You will notice that the order of the palette is all wrong; this can cause some major problems, so we need to fix this. Click the arrow pointing downwards under the palette colors, and select "Load Palette..."
(http://xifanie.ffhacktics.com/EffectsTut/GG4.png)

Choose "File"/"Import From File"...
When prompted, select the file you are currently using. This is why saving the file beforehand is important.
(http://xifanie.ffhacktics.com/EffectsTut/GG5.png)

Make sure that "Match Pixels with Colors" is checked. To make things easier, instead of using drag & drop with the colors, just press the "All" button. Then press "OK".
(http://xifanie.ffhacktics.com/EffectsTut/GG6.png)

Your palette should now look identical to the first row of the 8bpp file. Now you can save (under a new name ideally).
(http://xifanie.ffhacktics.com/EffectsTut/GG7.png)

[/indent]


Creating a TIM file
[indent=2]WARNING: If your Effect file's color depth is "4bpp Multi-CLUT", and you want to import a new graphic, you will need to create a 4bpp TIM file. However, if you edited the colors beyond the first 16 (i.e. the other palettes) and want to import those changes, you will need to create a 8bpp TIM file. Obviously if you want both new palettes and new graphics, you will need to create the two; a 4bpp and a 8bpp TIM.

Simply use TIM Utility with the right settings as displayed below. You can preview your file using the "Preview..." button; if it doesn't display properly, something's wrong. If everything looks good, close the Preview window and click "Convert...".
[indent=2]
4bpp: For 4bpp files (Graphic)
8bpp: For 8bpp files and 4bpp files (Palette)[/indent]
[indent=2]
(http://ffhacktics.com/smf/Smileys/FFH/check_mark.png) Translucent except black
(http://ffhacktics.com/smf/Smileys/FFH/check_mark.png) Transparent for black
[/indent]
[indent=2]
Write Type: TIM
[/indent]
(http://xifanie.ffhacktics.com/EffectsTut/TIM Utility.png)
[/indent]


Importing the new Palette (optional)
[indent=2]
* If your Effect file's color depth is "4bpp Multi-CLUT", use the 8bpp TIM file that you created for these steps. If you only edited the first 16 colors, you can instead use the 4bpp TIM file with the range 0x 14 to 0x 33.

(http://xifanie.ffhacktics.com/EffectsTut/PaletteTIM.png)(http://xifanie.ffhacktics.com/EffectsTut/PaletteEffect.png)
[/indent]


Importing the new Graphic (optional)
[indent=2]
* If your Effect file's color depth is "4bpp Multi-CLUT", use the 4bpp TIM file that you created for these steps

(http://xifanie.ffhacktics.com/EffectsTut/GraphicTIM.png)(http://xifanie.ffhacktics.com/EffectsTut/GraphicEffect.png)
[/indent]


Finishing steps
[indent=2][/indent]
(http://xifanie.ffhacktics.com/EffectsTut/Bloody_Sword.gif)
[/indent]


Advanced hacking notes
[indent=2]
Let's say your file changed filesize... Normally you'd use the wiki, where I was nice enough to compile a list of all the offsets for you guys, but here is how it is actually calculated:

4bpp:

8bpp:

[/indent]
Title: Re: Editing Effects' Palette and Graphic
Post by: 3lric on May 06, 2016, 03:43:46 pm
Thank you VERY much for this. The new Wiki documentation as well as the tutorial to go along with it will save so much time!

Adding this to the Tutorial Link Index
Title: Re: Editing Effects' Palette and Graphic
Post by: Jumza on May 06, 2016, 09:01:52 pm
Awesome! We sorely needed a new tutorial on recolouring effects :)
Title: Re: Editing Effects' Palette and Graphic
Post by: Xifanie on May 07, 2016, 02:13:23 am
Alright, added the section on how to make 4bpp BMPs with Photoshop and GraphicsGale... and I just found out yesterday that Photoshop easily beats GraphicsGale at that. Well, the only way it could cause real issues in GraphicsGale AFAIK is when you have 2 colors with the same RBG values being used. Because GraphicsGale reconstructs the graphical/palette data in the process, it would set both colors as the first one... meaning this could cause trouble for alternate palettes. We're still talking about a very rare case scenario, but it's worth mentioning.

I can't believe I neglected to add that section... oops. >>;
Title: Re: Editing Effects' Palette and Graphic
Post by: Lijj on May 07, 2016, 05:11:59 am
Xifanie, this is a great tutorial. Also good to know I can still use TIM utility via dosbox.
Title: Re: Editing Effects' Palette and Graphic
Post by: Xifanie on May 07, 2016, 05:26:52 am
Added the section: Reducing colors while maximizing quality (optional) which I feel is very important for any artist dealing with TIM files to know.
Title: Re: Editing Effects' Palette and Graphic
Post by: Guru on May 07, 2016, 12:28:44 pm
Wow this is awesome! I had looked into changing the ability effects but this goes way beyond how far I got when researching. That's a pretty sweet looking effect you came up with for this. Thanks for your continued awesomeness xif!
Title: Re: Editing Effects' Palette and Graphic
Post by: Choto on May 20, 2016, 06:33:19 pm
For whoever wants it, I wrote a bootloader program that will enter all the text in DOSBox to start Windows 3.1. Just put it in the same directory as DOSBox!

Thanks Xif for making our dreams of using timutil again come true!


Edit: Elric had trouble with the program, anybody else try it? Let me know if it worked or not!