Jump to content
  • Sign Up
  • 0
jTynne

[Guide] How to Recolor Sprites - by Eiphes

Asked by jTynne

Question

jTynne    101

jTynne
Posted

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.pnghttp--,,--//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.pnghttp--,,--//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.pnghttp--,,--//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.pnghttp--,,--//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.pnghttp--,,--//justintfields.com/guides/recolors/6.png[/url]]
 
7. Let's dive into the headgears folder.
7.pnghttp--,,--//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.pnghttp--,,--//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.pnghttp--,,--//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.pnghttp--,,--//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.pnghttp--,,--//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.pnghttp--,,--//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.pnghttp--,,--//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.pnghttp--,,--//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.pnghttp--,,--//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.pnghttp--,,--//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.pnghttp--,,--//justintfields.com/guides/recolors/17.png[/url]]
 
18. Navigate into the folder the frames were extracted into.
18.pnghttp--,,--//justintfields.com/guides/recolors/18.png[/url]]
 
19. It's time to open CS4 or above!
19.pnghttp--,,--//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.pnghttp--,,--//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.pnghttp--,,--//justintfields.com/guides/recolors/21.png[/url]]
 
22. Once you're satisfied with your coloration, save the file.
22.pnghttp--,,--//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.pnghttp--,,--//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.pnghttp--,,--//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.pnghttp--,,--//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.pnghttp--,,--//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.pnghttp--,,--//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.pnghttp--,,--//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.pnghttp--,,--//justintfields.com/guides/recolors/30.png[/url]]
 
31. Make a copy of the .act file.
31.pnghttp--,,--//justintfields.com/guides/recolors/31.png[/url]]
 
32. Rename it, and keep the female prefix.
32.pnghttp--,,--//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.pnghttp--,,--//justintfields.com/guides/recolors/33.png[/url]]
 
34. Rename the other .act file, this time with a male prefix.
34.pnghttp--,,--//justintfields.com/guides/recolors/34.png[/url]]
 
35. Make a copy of your recolored .spr file.
35.pnghttp--,,--//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.pnghttp--,,--//justintfields.com/guides/recolors/36.png[/url]]
 
37. Move the male sprites to the male folder..
37.pnghttp--,,--//justintfields.com/guides/recolors/37.png[/url]]
 
38. And move the female sprites to the female folder..
38.pnghttp--,,--//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.pnghttp--,,--//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.pnghttp--,,--//justintfields.com/guides/recolors/40.png[/url]]
 
41. Navigate to where you extracted files from the GRF in steps 4 and 5.
41.pnghttp--,,--//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.pnghttp--,,--//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.pnghttp--,,--//justintfields.com/guides/recolors/43.png[/url]]
 
44. And rename it. Note: Take off any prefix (female or male) your files may have.
44.pnghttp--,,--//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.pnghttp--,,--//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.pnghttp--,,--//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.pnghttp--,,--//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.pnghttp--,,--//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.pnghttp--,,--//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.pnghttp--,,--//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.pnghttp--,,--//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.pnghttp--,,--//justintfields.com/guides/recolors/52.png[/url]]
 
53. Just to clarify,
53.pnghttp--,,--//justintfields.com/guides/recolors/53.png[/url]]
 
54. Now, rename the files to what you named your recolored sprite,
54.pnghttp--,,--//justintfields.com/guides/recolors/54.png[/url]]
 
55. Now, in Photoshop, let's play with Replace color once again!
55.pnghttp--,,--//justintfields.com/guides/recolors/55.png[/url]]
 
56. Replace the colors you need to, and save the image.
56.pnghttp--,,--//justintfields.com/guides/recolors/56.png[/url]]
 
57. Repeat with the second image,
57.pnghttp--,,--//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.pnghttp--,,--//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!




Ind, Neo-Mind, evilpuncker and 6 others reacted to this

Share this post

Link to post
Share on other sites

14 answers to this question

Recommended Posts

  • 0

Mystery    594

Mystery
Posted

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

Ind reacted to this

Share this post

Link to post
Share on other sites
  • 0

jTynne    101

jTynne
Posted

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

 

 

excellent indeed :) I've made various recolours already because of this guide :D

 

I'm glad it's been of use! :)

Share this post

Link to post
Share on other sites
  • 0

Neo-Mind    264

Neo-Mind
Posted

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 :P

Share this post

Link to post
Share on other sites
  • 0

Unbelieve    0

Unbelieve
Posted (edited)

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

Edited by sapu1

Share this post

Link to post
Share on other sites
  • 0

jTynne    101

jTynne
Posted
 
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):
 
2. Let's make sure we have our GRF Tool configured properly. Click on "Settings" and make sure the first option is selected.
 
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)
 
4. (You will return to do the same as step 3, but after you do the extraction process in step 5)
 
 
 
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.
 
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.
 
7. Let's dive into the headgears folder.
 
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.
 
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.
 
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.
 
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.
 
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..."
 
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.
 
14. Once you've assigned SprConview to open the .spr files, double click the sprite to open it!
 
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"
 
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".
 
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.
 
18. Navigate into the folder the frames were extracted into.
 
19. It's time to open CS4 or above!
 
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"
 
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.
 
22. Once you're satisfied with your coloration, save the file.
 
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.
 
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".
 
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".
 
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".
 
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.
 
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.
 
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.
 
31. Make a copy of the .act file.
 
32. Rename it, and keep the female prefix.
 
33. Select the male folder as if to rename it, but just copy the filename into your clipboard (Ctrl+C)
 
34. Rename the other .act file, this time with a male prefix.
 
35. Make a copy of your recolored .spr file.
 
36. Rename the original and the copy to have the same names as the .act files (one male, one female)
 
37. Move the male sprites to the male folder..
 
38. And move the female sprites to the female folder..
 
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.
 
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!
 
41. Navigate to where you extracted files from the GRF in steps 4 and 5.
 
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.)
 
 
43. Paste the .act file into where you have YOUR recolored sprite in your drop sprite folder.
 
44. And rename it. Note: Take off any prefix (female or male) your files may have.
 
45. Next, go up two directories into the "data" folder. If you've already made a texture folder, ignore this step.
 
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.
 
47. So, let's re-open GRF Tool and open data.grf back up if you've closed it already.
 
48. Search for "item" and then click "Extract", and extract the files to whatever folder you extracted the .spr and .act files to.
 
49. Search for "collection" and then click "Extract", and extract the files to whatever folder you extracted the .spr and .act files to.
 
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
 
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.
 
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.
 
53. Just to clarify,
 
54. Now, rename the files to what you named your recolored sprite,
 
55. Now, in Photoshop, let's play with Replace color once again!
 
56. Replace the colors you need to, and save the image.
 
57. Repeat with the second image,
 
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.
 
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

bWolfie and Daifuku reacted to this

Share this post

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Answer this question...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
Go To Question Listing
×
×
  • Create New...

Important Information

By using this site, you agree to our Terms of Use.

  I accept