[Guide] How to Recolor Sprites - by Eiphes

jTynne

High Council
Messages
249
Points
0
Emulator
Tools/Things You Will Need

  •  
  • Photoshop CS4 or above (I use CS6 in this tutorial)
  • SprConview
  • GRF Tool
  • WeeThumbnail Viewer (instructions on how to install below)
  • 800mb-1.5gb Available HDD space
Optional:

  •  
  • Jasc Paint Shop Pro 7 or GIMP (not included in toolpack.zip below; not necessary)
Preface/Getting Started
First and foremost, download my tool package here: http://www.jtynne.co...es/toolpack.zip

  •  
  • This tool pack contains SprConview, GRF Tool, and other essential programs I use when working on the server (Browedit, various patchers for different official RO servers, etc)
  • Extract the entire tool pack to a location on your computer that you can easily find/return to.
Guide
1. Navigate to your GRF Tool program from the tool pack contents. Open it, click "Open", and find your data.grf (located in your CasualRO install folder):
http--,,--//justintfields.com/guides/recolors/1.png [/url]]
 
2. Let's make sure we have our GRF Tool configured properly. Click on "Settings" and make sure the first option is selected.
2.png
http--,,--//justintfields.com/guides/recolors/2.png[/url]]
 
3. Now, we're going to extract ALL of the .spr files from the GRF. Search for .spr and hit enter, or click the button on the right to search. (GO TO STEP 5 TO LEARN HOW TO EXTRACT)
3.png
http--,,--//justintfields.com/guides/recolors/3.png[/url]]
 
4. (You will return to do the same as step 3, but after you do the extraction process in step 5)
4.png
http--,,--//justintfields.com/guides/recolors/4.png[/url]]
 
 
 
5. When you've found all the .spr or .act files, click "Extract", make a new folder, and name it something you'll remember in a location you can easily return to. Then click OK to begin the extraction process.
 
5.png
http--,,--//justintfields.com/guides/recolors/5.png[/url]]
 
6. After you've extracted both .spr and .act files, navigate to where you extracted them. Once you get to the /data/sprite/ folder, you'll see a ton of folders and other files. Refer to the image below to find the drop sprite folder and the headgear folder. These are the only two we will use for this tutorial. I've made note of where monsters and robes are located in case you want to take a gander in them.
6.png
http--,,--//justintfields.com/guides/recolors/6.png[/url]]
 
7. Let's dive into the headgears folder.
7.png
http--,,--//justintfields.com/guides/recolors/7.png[/url]]
 
8. As you can see above, I can see previews of sprites in my folders. This is important because NOTHING is named in English besides a few of the newer class sprites, so you will also want to be able to visibly see a preview of what each sprite file is of. That said, navigate to you extracted the toolpack.zip, and go into the WeeThumbnail folder, and then into the folder noted in the screencapture below. Double click "Install". Head back into your sprites folder. If you can't see previews still, reboot your computer. Then return to the headgears folder in step 7.
8.png
http--,,--//justintfields.com/guides/recolors/8.png[/url]]
 
9. I always work with the female headgear sprites as my bases for recolors because a lot of the female sprites have an extra frame in their .spr file, that the male sprites for whatever reason lack. If you work with male headgear sprites as bases, you'll encounter crashes in-game due to the missing frame, so let's go into the female headgear sprite folder as noted in step 7.
9.png
http--,,--//justintfields.com/guides/recolors/9.png[/url]]
 
10. For this tutorial, I've opted to make a recolor of the Racoon Doll Hat. You will want to copy both the .act and .spr file with the same filename.
10.png
http--,,--//justintfields.com/guides/recolors/10.png[/url]]
 
11. Now, let's move these into a safe location and set up our folder hierarchy.

  •  
  • Create a folder on your desktop named "data"
  • Inside of this folder, create two folders, "sprite" and "texture"
  • Go into the "sprite" folder
  • Once inside the sprite folder, create a folder with the following name: ¾ÆÀÌÅÛ
  • While still inside the sprite folder, create another folder with this name: ¾Ç¼¼»ç¸®
  • Go inside of the folder named ¾Ç¼¼»ç¸® and create two folders; one named ¿© and the other named ³²
  • Navigate backwards into the "data" folder again, and enter the "texture" folder
  • Inside the texture folder, create a folder called À¯ÀúÀÎÅÍÆäÀ̽º
  • Go into the folder called À¯ÀúÀÎÅÍÆäÀ̽º and create two folders named "item" and "collection"
At the end of this hierarchy creation, you should have the following hierarchy created:
 
data
------- sprite
------- ------- ¾ÆÀÌÅÛ
------- ------- ¾Ç¼¼»ç¸®
------- ------- ------- ¿©
------- ------- ------- ³²
------- texture
------- ------- À¯ÀúÀÎÅÍÆäÀ̽º
------- ------- ------- item
------- ------- ------- collection
 
Remember when I told you to copy the .act and .spr in step 10? Locate where you copied those files to, and I recommend placing them within data/sprite/¾Ç¼¼»ç¸®/ for the time being as seen below.
11.png
http--,,--//justintfields.com/guides/recolors/11.png[/url]]
 
12. Now, when you double-click .spr files, by default, Windows usually has NO idea what to do with them. So let's assign the default program to open .spr files to be SprConview from the toolpack.zip archive. Right-click the .spr file, go to "Open With", and "Choose default program..."
12.png
http--,,--//justintfields.com/guides/recolors/12.png[/url]]
 
13. Chances are high that SprConview won't be in your Recommended Programs list, so if it's not, click "Browse", locate where you extracted the toolpack.zip contents, and locate SprConview inside of that folder. Once you've found it, make sure you check the box on the left so .spr files always open with Sprconview. Then click OK.
13.png
http--,,--//justintfields.com/guides/recolors/13.png[/url]]
 
14. Once you've assigned SprConview to open the .spr files, double click the sprite to open it!
14.png
http--,,--//justintfields.com/guides/recolors/14.png[/url]]
 
15. Now, let's extract the frames from the sprite file by converting each frame into a .bmp image. Click "Convert" and select "Spr to Bmp"
15.png
http--,,--//justintfields.com/guides/recolors/15.png[/url]]
 
16. A new box will appear. Under "Sprite" click the Browse button to the right of the blank field. Select the sprite (use the preview window to confirm it's the file you want) and click "Open".
16.png
http--,,--//justintfields.com/guides/recolors/16.png[/url]]
 
17. Next, enter a name in the BMP directory field (no need to click browse; just write a name for a new folder to be created where you're currently located). Click "Convert" to extract the frames.
17.png
http--,,--//justintfields.com/guides/recolors/17.png[/url]]
 
18. Navigate into the folder the frames were extracted into.
18.png
http--,,--//justintfields.com/guides/recolors/18.png[/url]]
 
19. It's time to open CS4 or above!
19.png
http--,,--//justintfields.com/guides/recolors/19.png[/url]]
 
20. Open just the very first file (far left side, usually numbered 001 at the end of the file name) in Photoshop. Once open, go to "Image" -> "Adjustments" -> "Replace Color"
20.png
http--,,--//justintfields.com/guides/recolors/20.png[/url]]
 
21. Replace the colors until you achieve a coloration you like! I've opted to make this head all gray (like a real racoon!), but you can easily make it any color(s) you want by playing with the Hue/Saturation/Lightness sliders.
21.png
http--,,--//justintfields.com/guides/recolors/21.png[/url]]
 
22. Once you're satisfied with your coloration, save the file.
22.png
http--,,--//justintfields.com/guides/recolors/22.png[/url]]
 
23. This is just an aside really, but you only have to edit the first frame of each sprite in order to achieve the recolor effect throughout the entire sprite. This is because later when we convert the bmp back into a .spr, SprConview uses only the first frame to create the palette for the sprite file. Super handy and saves time! I used to edit every single frame, but it's not necessary to do.
 
24. Once you've saved the file, you should see the preview image update with your changes in the folder.
24.png
http--,,--//justintfields.com/guides/recolors/24.png[/url]]
 
25. It's time to repack these .bmp images into a sprite file! Back in SprConview, click "Convert", and this time select the second option "Bmp to Spr".
25.png
http--,,--//justintfields.com/guides/recolors/25.png[/url]]
 
26. A new window will appear. Click "Add" and another box will open. Left click the first image (the one you recolored) then hold down shift and left-click the very last image at the bottom. This will select all of the frames in the correct order. Then click "Open".
26.png
http--,,--//justintfields.com/guides/recolors/26.png[/url]]
 
27. Now enter the filename you wish to assign to your recolored sprite. Make sure you include the .spr file extension at the end of the name. I've chosen "racoon_head_recolor.spr" for this demonstration. Uncheck the "Encode" box. We no longer use this option in the clients and leaving it checked will cause your sprite to display incorrectly once in-game. Once you've done the preceeding instructions, click "Convert".
27.png
http--,,--//justintfields.com/guides/recolors/27.png[/url]]
 
28. Your newly created sprite will appear in the same folder the .bmp frames are found, so jump back in there if you were elsewhere.
28.png
http--,,--//justintfields.com/guides/recolors/28.png[/url]]
 
29. Admire your work! No, actually, make sure all of the frames are there, and that you can't see the background color from the .bmp files. It should include all of the frames you originally extracted from the original sprite. Below, I've opened the sprite in five different windows to see all angles. It's not necessary to do, but helps to see an overview of your work.
29.png
http--,,--//justintfields.com/guides/recolors/29.png[/url]]
 
30. Copy and paste your newly recolored sprite up one directory where you pasted the original .spr and .act files. Now, let's tidy things up a bit.. If you have any extra files besides the original .spr and .act, delete those. Keep the female and male folders, AND the default .act as we still need that.
30.png
http--,,--//justintfields.com/guides/recolors/30.png[/url]]
 
31. Make a copy of the .act file.
31.png
http--,,--//justintfields.com/guides/recolors/31.png[/url]]
 
32. Rename it, and keep the female prefix.
32.png
http--,,--//justintfields.com/guides/recolors/32.png[/url]]
 
33. Select the male folder as if to rename it, but just copy the filename into your clipboard (Ctrl+C)
33.png
http--,,--//justintfields.com/guides/recolors/33.png[/url]]
 
34. Rename the other .act file, this time with a male prefix.
34.png
http--,,--//justintfields.com/guides/recolors/34.png[/url]]
 
35. Make a copy of your recolored .spr file.
35.png
http--,,--//justintfields.com/guides/recolors/35.png[/url]]
 
36. Rename the original and the copy to have the same names as the .act files (one male, one female)
36.png
http--,,--//justintfields.com/guides/recolors/36.png[/url]]
 
37. Move the male sprites to the male folder..
37.png
http--,,--//justintfields.com/guides/recolors/37.png[/url]]
 
38. And move the female sprites to the female folder..
38.png
http--,,--//justintfields.com/guides/recolors/38.png[/url]]
 
39. Go into the female folder and copy the .spr file to your clip board. Next, go up two directories so you can get into the drop sprite folder.
39.png
http--,,--//justintfields.com/guides/recolors/39.png[/url]]
 
40. Paste the .spr from your clip board inside of the drop sprite folder. It still needs a .act, so let's go grab it!
40.png
http--,,--//justintfields.com/guides/recolors/40.png[/url]]
 
41. Navigate to where you extracted files from the GRF in steps 4 and 5.
41.png
http--,,--//justintfields.com/guides/recolors/41.png[/url]]
 
42. Find the .act file associated with the headgear you chose to recolor. (Technically any .act in this folder will work fine, but for the sake of consistency in this tutorial, just humor me and do it.)
42.png
http--,,--//justintfields.com/guides/recolors/42.png[/url]]
 
 
43. Paste the .act file into where you have YOUR recolored sprite in your drop sprite folder.
43.png
http--,,--//justintfields.com/guides/recolors/43.png[/url]]
 
44. And rename it. Note: Take off any prefix (female or male) your files may have.
44.png
http--,,--//justintfields.com/guides/recolors/44.png[/url]]
 
45. Next, go up two directories into the "data" folder. If you've already made a texture folder, ignore this step.
45.png
http--,,--//justintfields.com/guides/recolors/45.png[/url]]
 
46. And inside this folder named texture, create the "collection" and "item" folders if you haven't already. (If you've followed this tutorial step by step, then disregard this step as you should have already created them.) We will, however, need to get back into the GRF and pull out the collection and item images belonging to the original sprite.
46.png
http--,,--//justintfields.com/guides/recolors/46.png[/url]]
 
47. So, let's re-open GRF Tool and open data.grf back up if you've closed it already.
47.png
http--,,--//justintfields.com/guides/recolors/47.png[/url]]
 
48. Search for "item" and then click "Extract", and extract the files to whatever folder you extracted the .spr and .act files to.
48.png
http--,,--//justintfields.com/guides/recolors/48.png[/url]]
 
49. Search for "collection" and then click "Extract", and extract the files to whatever folder you extracted the .spr and .act files to.
49.png
http--,,--//justintfields.com/guides/recolors/49.png[/url]]
 
50. Navigate to the folder you just extracted all of the item/collection images to (data/texture/À¯ÀúÀÎÅÍÆäÀ̽º/). Inside you will see two folders; collection and image
50.png
http--,,--//justintfields.com/guides/recolors/50.png[/url]]
 
51. Inside of the collection folder, find the image associated with your headgear you recolored, copy/paste it into your own collection image folder, and load the copied version into Photoshop.
51.png
http--,,--//justintfields.com/guides/recolors/51.png[/url]]
 
52. Inside of the item folder, find the image associated with your headgear you recolored, copy/paste it into your own item image folder, and load the copied version into Photoshop.
52.png
http--,,--//justintfields.com/guides/recolors/52.png[/url]]
 
53. Just to clarify,
53.png
http--,,--//justintfields.com/guides/recolors/53.png[/url]]
 
54. Now, rename the files to what you named your recolored sprite,
54.png
http--,,--//justintfields.com/guides/recolors/54.png[/url]]
 
55. Now, in Photoshop, let's play with Replace color once again!
55.png
http--,,--//justintfields.com/guides/recolors/55.png[/url]]
 
56. Replace the colors you need to, and save the image.
56.png
http--,,--//justintfields.com/guides/recolors/56.png[/url]]
 
57. Repeat with the second image,
57.png
http--,,--//justintfields.com/guides/recolors/57.png[/url]]
 
58. Go to /data/texture/ and if your "item" and "collection" folders aren't already inside of the long filename folder, À¯ÀúÀÎÅÍÆäÀ̽º/, then move them into it.
58.png
http--,,--//justintfields.com/guides/recolors/58.png[/url]]
 
59. At the end, you should have the following (assuming you did the same recolor as shown above, with the same filenames) files / file heirarchy:
 

data

------- sprite

------- ------- ¾ÆÀÌÅÛ

------- ------- ------- racoon_head_recolor.spr

------- ------- ------- racoon_head_recolor.act

------- ------- ¾Ç¼¼»ç¸®

------- ------- ------- ¿©

------- ------- ------- ------- ¿©_racoon_head_recolor.spr

------- ------- ------- ------- ¿©_racoon_head_recolor.act

------- ------- ------- ³²

------- ------- ------- ------- ³²_racoon_head_recolor.spr

------- ------- ------- ------- ³²_racoon_head_recolor.act

------- texture------- ------- À¯ÀúÀÎÅÍÆäÀ̽º

------- ------- ------- item

------- ------- ------- ------- racoon_head_recolor.bmp

------- ------- ------- collection

------- ------- ------- ------- racoon_head_recolor.bmp

Additional Notes
 
This tutorial only covers creating the sprites. There are still additional steps to get them in-game: Creating the sprites is the most time-consuming part of the entire process, however.
 
You may NOT copy/reproduce this guide without providing a link back to a location I've posted this guide to, and you must give me full credit. Thank you!
 
A copy of this tutorial's contents can be found at the following address: http--,,--//justintfields.com/gu...or Tutorial.zip It includes the toolpack.zip, and all of the .png images, as well, the files and folders used in the tutorial for recoloring the Racoon hat.
 
Addendum:
Please do not bother asking me for support in this thread, as I will not be very active for the next several months due to university. I tried to "dummy proof" this guide as much as possible so that even the most novice of people could understand what's going on here.
 
If you found this tutorial useful, PLEASE +1 this thread, rate me five stars, and consider sending me enough money to buy some Starbucks via Paypal: [email protected] -- Thank you and good luck!



 
Last edited by a moderator:
Nicely done! I like how it really is in-depth. Thanks for taking the time! But I am with Strudel... in-game screenshot plox <3 ;3

 
  • Upvote
Reactions: Ind
Excelent guide thanks for this, I am sure many people will put this to good use. +1'd

 
excellent indeed
default_smile.png
I've made various recolours already because of this guide
default_biggrin.png


 
just need to recolour only first image from BMP? O_O
yes because the sprite only uses the palette from the first bmp image and re-uses it for rest of the images. I also noticed this only recently.

even when u extract the recolored sprite all the bmp images will be recolored..... almost magically
default_tongue.png


 
Why me alt+q Keep Error n no see the sprite ? Anyone Can Help Me How To Fix This Error .. Me Recolor Darkness_Dragoon to Red ..

screeneAthena000_zps5d90fa51.jpg


 
Last edited by a moderator:
@@jTynne do you think you could update this someday? All pictures are missing and I wanted to learn T-T 

 
 
jTynne, on 06 Jan 2014 - 22:20, said:
 
Tools/Things You Will Need
 
Photoshop CS4 or above (I use CS6 in this tutorial)
SprConview
GRF Tool
WeeThumbnail Viewer (instructions on how to install below)
800mb-1.5gb Available HDD space
 
Optional:
 
Jasc Paint Shop Pro 7 or GIMP (not included in toolpack.zip below; not necessary)
 
Preface/Getting Started
First and foremost, download my tool package here:  http://justintfields.com/guides/SpriteRecolorTutorial.zip
 
This tool pack contains SprConview, GRF Tool, and other essential programs I use when working on the server (Browedit, various patchers for different official RO servers, etc)
Extract the entire tool pack to a location on your computer that you can easily find/return to.
 
Guide
1. Navigate to your GRF Tool program from the tool pack contents. Open it, click "Open", and find your data.grf (located in your CasualRO install folder):
 http://justintfields.com/guides/recolors/1.png 
 
2. Let's make sure we have our GRF Tool configured properly. Click on "Settings" and make sure the first option is selected.
2.png http://justintfields.com/guides/recolors/2.png
 
3. Now, we're going to extract ALL of the .spr files from the GRF. Search for .spr and hit enter, or click the button on the right to search. (GO TO STEP 5 TO LEARN HOW TO EXTRACT)
3.png http://justintfields.com/guides/recolors/3.png
 
4. (You will return to do the same as step 3, but after you do the extraction process in step 5)
4.png http://justintfields.com/guides/recolors/4.png
 
 
 
5. When you've found all the .spr or .act files, click "Extract", make a new folder, and name it something you'll remember in a location you can easily return to. Then click OK to begin the extraction process.
 5.png http://justintfields.com/guides/recolors/5.png
 
6. After you've extracted both .spr and .act files, navigate to where you extracted them. Once you get to the /data/sprite/ folder, you'll see a ton of folders and other files. Refer to the image below to find the drop sprite folder and the headgear folder. These are the only two we will use for this tutorial. I've made note of where monsters and robes are located in case you want to take a gander in them.
6.png http://justintfields.com/guides/recolors/6.png
 
7. Let's dive into the headgears folder.
7.png http://justintfields.com/guides/recolors/7.png
 
8. As you can see above, I can see previews of sprites in my folders. This is important because NOTHING is named in English besides a few of the newer class sprites, so you will also want to be able to visibly see a preview of what each sprite file is of. That said, navigate to you extracted the toolpack.zip, and go into the WeeThumbnail folder, and then into the folder noted in the screencapture below. Double click "Install". Head back into your sprites folder. If you can't see previews still, reboot your computer. Then return to the headgears folder in step 7.
8.png http://justintfields.com/guides/recolors/8.png
 
9. I always work with the female headgear sprites as my bases for recolors because a lot of the female sprites have an extra frame in their .spr file, that the male sprites for whatever reason lack. If you work with male headgear sprites as bases, you'll encounter crashes in-game due to the missing frame, so let's go into the female headgear sprite folder as noted in step 7.
9.png http://justintfields.com/guides/recolors/9.png
 
10. For this tutorial, I've opted to make a recolor of the Racoon Doll Hat. You will want to copy both the .act and .spr file with the same filename.
10.png http://justintfields.com/guides/recolors/10.png
 
11. Now, let's move these into a safe location and set up our folder hierarchy.
 
Create a folder on your desktop named "data"
Inside of this folder, create two folders, "sprite" and "texture"
Go into the "sprite" folder
Once inside the sprite folder, create a folder with the following name: ¾ÆÀÌÅÛ
While still inside the sprite folder, create another folder with this name: ¾Ç¼¼»ç¸®
Go inside of the folder named ¾Ç¼¼»ç¸® and create two folders; one named ¿© and the other named ³²
Navigate backwards into the "data" folder again, and enter the "texture" folder
Inside the texture folder, create a folder called À¯ÀúÀÎÅÍÆäÀ̽º
Go into the folder called À¯ÀúÀÎÅÍÆäÀ̽º and create two folders named "item" and "collection"
 
At the end of this hierarchy creation, you should have the following hierarchy created:
 
data
------- sprite
------- ------- ¾ÆÀÌÅÛ
------- ------- ¾Ç¼¼»ç¸®
------- ------- ------- ¿©
------- ------- ------- ³²
------- texture
------- ------- À¯ÀúÀÎÅÍÆäÀ̽º
------- ------- ------- item
------- ------- ------- collection
 
Remember when I told you to copy the .act and .spr in step 10? Locate where you copied those files to, and I recommend placing them within data/sprite/¾Ç¼¼»ç¸®/ for the time being as seen below.
11.png http://justintfields.com/guides/recolors/11.png
 
12. Now, when you double-click .spr files, by default, Windows usually has NO idea what to do with them. So let's assign the default program to open .spr files to be SprConview from the toolpack.zip archive. Right-click the .spr file, go to "Open With", and "Choose default program..."
12.png http://justintfields.com/guides/recolors/12.png
 
13. Chances are high that SprConview won't be in your Recommended Programs list, so if it's not, click "Browse", locate where you extracted the toolpack.zip contents, and locate SprConview inside of that folder. Once you've found it, make sure you check the box on the left so .spr files always open with Sprconview. Then click OK.
13.png http://justintfields.com/guides/recolors/13.png
 
14. Once you've assigned SprConview to open the .spr files, double click the sprite to open it!
14.png http://justintfields.com/guides/recolors/14.png
 
15. Now, let's extract the frames from the sprite file by converting each frame into a .bmp image. Click "Convert" and select "Spr to Bmp"
15.png http://justintfields.com/guides/recolors/15.png
 
16. A new box will appear. Under "Sprite" click the Browse button to the right of the blank field. Select the sprite (use the preview window to confirm it's the file you want) and click "Open".
16.png http://justintfields.com/guides/recolors/16.png
 
17. Next, enter a name in the BMP directory field (no need to click browse; just write a name for a new folder to be created where you're currently located). Click "Convert" to extract the frames.
17.png http://justintfields.com/guides/recolors/17.png
 
18. Navigate into the folder the frames were extracted into.
18.png http://justintfields.com/guides/recolors/18.png
 
19. It's time to open CS4 or above!
19.png http://justintfields.com/guides/recolors/19.png
 
20. Open just the very first file (far left side, usually numbered 001 at the end of the file name) in Photoshop. Once open, go to "Image" -> "Adjustments" -> "Replace Color"
20.png http://justintfields.com/guides/recolors/20.png
 
21. Replace the colors until you achieve a coloration you like! I've opted to make this head all gray (like a real racoon!), but you can easily make it any color(s) you want by playing with the Hue/Saturation/Lightness sliders.
21.png http://justintfields.com/guides/recolors/21.png
 
22. Once you're satisfied with your coloration, save the file.
22.png http://justintfields.com/guides/recolors/22.png
 
23. This is just an aside really, but you only have to edit the first frame of each sprite in order to achieve the recolor effect throughout the entire sprite. This is because later when we convert the bmp back into a .spr, SprConview uses only the first frame to create the palette for the sprite file. Super handy and saves time! I used to edit every single frame, but it's not necessary to do.
 
24. Once you've saved the file, you should see the preview image update with your changes in the folder.
24.png http://justintfields.com/guides/recolors/24.png
 
25. It's time to repack these .bmp images into a sprite file! Back in SprConview, click "Convert", and this time select the second option "Bmp to Spr".
25.png http://justintfields.com/guides/recolors/25.png
 
26. A new window will appear. Click "Add" and another box will open. Left click the first image (the one you recolored) then hold down shift and left-click the very last image at the bottom. This will select all of the frames in the correct order. Then click "Open".
26.png http://justintfields.com/guides/recolors/26.png
 
27. Now enter the filename you wish to assign to your recolored sprite. Make sure you include the .spr file extension at the end of the name. I've chosen "racoon_head_recolor.spr" for this demonstration. Uncheck the "Encode" box. We no longer use this option in the clients and leaving it checked will cause your sprite to display incorrectly once in-game. Once you've done the preceeding instructions, click "Convert".
27.png http://justintfields.com/guides/recolors/27.png
 
28. Your newly created sprite will appear in the same folder the .bmp frames are found, so jump back in there if you were elsewhere.
28.png http://justintfields.com/guides/recolors/28.png
 
29. Admire your work! No, actually, make sure all of the frames are there, and that you can't see the background color from the .bmp files. It should include all of the frames you originally extracted from the original sprite. Below, I've opened the sprite in five different windows to see all angles. It's not necessary to do, but helps to see an overview of your work.
29.png http://justintfields.com/guides/recolors/29.png
 
30. Copy and paste your newly recolored sprite up one directory where you pasted the original .spr and .act files. Now, let's tidy things up a bit.. If you have any extra files besides the original .spr and .act, delete those. Keep the female and male folders, AND the default .act as we still need that.
30.png http://justintfields.com/guides/recolors/30.png
 
31. Make a copy of the .act file.
31.png http://justintfields.com/guides/recolors/31.png
 
32. Rename it, and keep the female prefix.
32.png http://justintfields.com/guides/recolors/32.png
 
33. Select the male folder as if to rename it, but just copy the filename into your clipboard (Ctrl+C)
33.png http://justintfields.com/guides/recolors/33.png
 
34. Rename the other .act file, this time with a male prefix.
34.png http://justintfields.com/guides/recolors/34.png
 
35. Make a copy of your recolored .spr file.
35.png http://justintfields.com/guides/recolors/35.png
 
36. Rename the original and the copy to have the same names as the .act files (one male, one female)
36.png http://justintfields.com/guides/recolors/36.png
 
37. Move the male sprites to the male folder..
37.png http://justintfields.com/guides/recolors/37.png
 
38. And move the female sprites to the female folder..
38.png http://justintfields.com/guides/recolors/38.png
 
39. Go into the female folder and copy the .spr file to your clip board. Next, go up two directories so you can get into the drop sprite folder.
39.png http://justintfields.com/guides/recolors/39.png
 
40. Paste the .spr from your clip board inside of the drop sprite folder. It still needs a .act, so let's go grab it!
40.png http://justintfields.com/guides/recolors/40.png
 
41. Navigate to where you extracted files from the GRF in steps 4 and 5.
41.png http://justintfields.com/guides/recolors/41.png
 
42. Find the .act file associated with the headgear you chose to recolor. (Technically any .act in this folder will work fine, but for the sake of consistency in this tutorial, just humor me and do it.)
42.png http://justintfields.com/guides/recolors/42.png
 
 
43. Paste the .act file into where you have YOUR recolored sprite in your drop sprite folder.
43.png http://justintfields.com/guides/recolors/43.png
 
44. And rename it. Note: Take off any prefix (female or male) your files may have.
44.png http://justintfields.com/guides/recolors/44.png
 
45. Next, go up two directories into the "data" folder. If you've already made a texture folder, ignore this step.
45.png http://justintfields.com/guides/recolors/45.png
 
46. And inside this folder named texture, create the "collection" and "item" folders if you haven't already. (If you've followed this tutorial step by step, then disregard this step as you should have already created them.) We will, however, need to get back into the GRF and pull out the collection and item images belonging to the original sprite.
46.png http://justintfields.com/guides/recolors/46.png
 
47. So, let's re-open GRF Tool and open data.grf back up if you've closed it already.
47.png http://justintfields.com/guides/recolors/47.png
 
48. Search for "item" and then click "Extract", and extract the files to whatever folder you extracted the .spr and .act files to.
48.png http://justintfields.com/guides/recolors/48.png
 
49. Search for "collection" and then click "Extract", and extract the files to whatever folder you extracted the .spr and .act files to.
49.png http://justintfields.com/guides/recolors/49.png
 
50. Navigate to the folder you just extracted all of the item/collection images to (data/texture/À¯ÀúÀÎÅÍÆäÀ̽º/). Inside you will see two folders; collection and image
50.png http://justintfields.com/guides/recolors/50.png
 
51. Inside of the collection folder, find the image associated with your headgear you recolored, copy/paste it into your own collection image folder, and load the copied version into Photoshop.
51.png http://justintfields.com/guides/recolors/51.png
 
52. Inside of the item folder, find the image associated with your headgear you recolored, copy/paste it into your own item image folder, and load the copied version into Photoshop.
52.png http://justintfields.com/guides/recolors/52.png
 
53. Just to clarify,
53.png http://justintfields.com/guides/recolors/53.png
 
54. Now, rename the files to what you named your recolored sprite,
54.png http://justintfields.com/guides/recolors/54.png
 
55. Now, in Photoshop, let's play with Replace color once again!
55.png http://justintfields.com/guides/recolors/55.png
 
56. Replace the colors you need to, and save the image.
56.png http://justintfields.com/guides/recolors/56.png
 
57. Repeat with the second image,
57.png http://justintfields.com/guides/recolors/57.png
 
58. Go to /data/texture/ and if your "item" and "collection" folders aren't already inside of the long filename folder, À¯ÀúÀÎÅÍÆäÀ̽º/, then move them into it.
58.png http://justintfields.com/guides/recolors/58.png
 
59. At the end, you should have the following (assuming you did the same recolor as shown above, with the same filenames) files / file heirarchy:
 
data
------- sprite
------- ------- ¾ÆÀÌÅÛ
------- ------- ------- racoon_head_recolor.spr
------- ------- ------- racoon_head_recolor.act
------- ------- ¾Ç¼¼»ç¸®
------- ------- ------- ¿©
------- ------- ------- ------- ¿©_racoon_head_recolor.spr
------- ------- ------- ------- ¿©_racoon_head_recolor.act
------- ------- ------- ³²
------- ------- ------- ------- ³²_racoon_head_recolor.spr
------- ------- ------- ------- ³²_racoon_head_recolor.act
------- texture
------- ------- À¯ÀúÀÎÅÍÆäÀ̽º
------- ------- ------- item
------- ------- ------- ------- racoon_head_recolor.bmp
------- ------- ------- collection
------- ------- ------- ------- racoon_head_recolor.bmp
 
Additional Notes
 
This tutorial only covers creating the sprites. There are still additional steps to get them in-game: Creating the sprites is the most time-consuming part of the entire process, however.
 
You may NOT copy/reproduce this guide without providing a link back to a location I've posted this guide to, and you must give me full credit. Thank you!
 
A copy of this tutorial's contents can be found at the following address:  http://justintfields.com/gu...or Tutorial.zip It includes the toolpack.zip, and all of the .png images, as well, the files and folders used in the tutorial for recoloring the Racoon hat.
 
Addendum:
Please do not bother asking me for support in this thread, as I will not be very active for the next several months due to university. I tried to "dummy proof" this guide as much as possible so that even the most novice of people could understand what's going on here.
 
If you found this tutorial useful, PLEASE +1 this thread, rate me five stars, and consider sending me enough money to buy some Starbucks via Paypal: [email protected] -- Thank you and good luck!
For whatever reason, the board is NOT allowing me to edit the original post, so I've moved the /guides/ directory and posted a response. Click the links (for now) to view the steps image by image. 

//////////////////////////////////////////////////////

The URL for the zip with the toolpack and all of the images in the guide is located here: http://justintfields.com/guides/SpriteRecolorTutorial.zip

 
Last edited by a moderator:
Thanks for updating this as much as possible! I'm sure a lot of people appreciate it. ♥

 
Back
Top