[GUIDE] Spriting 101: Creating A Sprite and Act File

[sizenine]

The following is a guide that my friend, Vi, created mainly for the players of my old server during her early days of spriting. She is no longer active in the RO scene and my old server is no longer active so I just thought it would be a big waste to not share this with the community. By passing on this knowledge to those who are interested in learning the basics of spriting, I hope that more talented artists will arise in this community and more professional work can be seen. Please refrain from ripping images off of this guide and do give Vi full credits if you decide to repost this elsewhere.

p.s. I am only sharing this information, therefore no support can be given from me over this guide so please don't ask me any questions. ^^

--------------------------------------------

hello!

In this guide, I will cover the point after which you have completed your frames and you want to transition your .bmp frames into files workable for Ragnarok Online. This is perhaps the most grueling part of creating custom work for RO. I am in no way an expert (I am simply a novice, still always learning) and simply writing this to aid anyone who wishes to sprite. This is dedicated smexy Lexy.

Before starting, you will need these programs:

• Any image editing software, I personally use Photoshop to do the artwork.
  
• actOR to edit your .act files.
  
• SPRconview to convert your .bmp files to .spr files and vice versa.
  

You can obtain actOR and SPRConview from ratemyserver's RO tools page here.

things to know

At this point, you should have the artwork for your headgear done. This is what I'll be using as an example for this guide, Lady's Sailor Hat:

Depending on your hat, you can have one to fifteen frames (if this isn't an animated headgear). Generally, things such as "GF Wanted," "Notice Board," etc. hats have one frame. Hats generally have five+ frames. Hats with five frames generally only have art work done for the first five angles of the hat, while the ones with fifteen frames have artwork done for all poses/angles. The Lady's Sailor Hat has fifteen frames.

What determines how many frames you have is the .act you choose to work off of for your headgear. I don't know how to create an .act from scratch, I typically pick a headgear closest/most similar to the hat I have done.

The .act file holds the positioning information for your headgear, it references the .spr file for the images. What does the .spr file do? The .spr file holds all the visual information for your headgear. The .act and .spr files work hand in hand. Let's get started.

creating your .spr file.

Time to slice your original artwork into its individual frames. Make sure all of the frames of your headgear are the correct size. If the size you choose is too large, you will encounter problems when you create your .spr file. It will do things such as distort or repeat itself in the frame.

So slice up your artwork. I've picked the size 31 x 31 for the Lady's Sailor Hat.

You have to save each of your frame files as an indexed .bmp. In Photoshop, you must go to Image > Mode > Indexed Color... It will ask you to Flatten Layers, click OK. This window will pop up:

Now you want to go to the drop down menu where it says "Exact" and select Custom. (Make sure that before you select Custom, the drop down menu is already set to Exact. If not, select Exact and then go to Custom.) A second window will pop-up and you will see all of the colors used in your headgear. This step is critical, or else your headgear will show up with crazy colors when you convert it in SPRConview.

Now, you have to denote what color is going to be transparent. In this second window, which is called the Color Table, the first box is the color which tells the .spr file what to make transparent. I've chosen this mint green color.

So click the first box and the color picker will pop up. Simply click your background color. Now you want to save out your Color Table. Click save on the right hand of the color table. This is also indeed an .act file, but don't be confused! This is different from your file to be used with RO. I've saved my palette file out as "palette_ladyssailorhat.act." Now that you have all of the color information done, save your file. Save it as an 8-bit .bmp file.

• naming convention in ragnarok online, each gender has their own set of spr/act files. If you dig through the sprite files in your data folder, you'll notice ¿© and ³² as a suffix for your file names. ¿© denotes female, while ³² denotes male. Generally, I save my files as suffix_headgearname00xx.bmp.
  

So continuing saving your frames out. Remember to check if your headgear's color palette is loaded into each frame. You can load your color palette by going to the "Custom" drop down menu and clicking "Load..." on the right hand side to select your palette file.

After you finish, your folder should look something like this:

Now go into your sprite data folder and pick a headgear that you feel is closest to the headgear you're working on. For the Lady's Sailor Hat, I've chosen Pirate's Pride. So copy and paste the .act/.spr files of the headgear into the folder of the headgear you are working on.

Now open up SPRconview. Now go to Convert > Bmp to Spr. You will get another pop up window. Add all of the frames of your headgear and make sure that they're in numerical order. Under where it says Sprite, hit Browse and browse to where you saved the .spr file of the headgear you chose. Remember, I chose the Pirate's Pride. After you've done that, click Convert. Done with your .spr file!

When you do this, SPRconview will replace the images of the original headgear with the ones you have made. Open up the .spr file and check to make sure everything is a-okay. Scroll through it and make sure the colors aren't all off either, as well as the transparency.

That's it for your .spr file.

time to edit your .act file

Now go back to your folder and open up the .act file that you had copy and pasted for your headgear with actOR.

Most of the time, when you open up your .act for the first time, you may get a message saying that the width and height is not correct. Simply click Yes and carry on. Now you should see this:

Now look to the right. Under reference, check the box next to "head." You'll see that the head shows up, but the hat is behind the head! So look to the left where it says "Change priority ref. spr..." A window pops up. Underneath "head" hit the bubble for back. The hat is now in front of the head. Look:

You can change the reference head anytime you want by replacing the ref_head act/spr files in the location where you installed actOR. Simply replace those files.

Now, we have to edit the .act file. But first, here is a quick diagram explaining the basics of actOR.

• 
  01 action This refers to each of the acts that correspond with an action in Ragnarok. In the drop down menu, there are 13 acts, going from 0-12. Act 00 is the act for standing, act 01 is for walking, act 02 is for sitting, etc. You have to check every single act and every single direction to make sure that the hat sits on the head properly. This is where most of the labor comes from.
  02 direction clicking through this scrolls through all of the angles of the head and hat.
  03 scroll bar for each pose/angle, there are several frames. this scroll bar scrolls through all of them. You must check through all of these to make sure that the hat sits on the head properly.
  04 reference this is simply where you turn the reference head and body on and off via the boxes, x is on and a blank box is off.
  05 x offs this is the x-coordinate of the headgear. You can edit this value by clicking and dragging the headgear by hand, or tap-tap double clicking the value under Xoffs with a certain timing to change it numerically.
  06 y offs this is they-coordinate of the headgear. You can edit this value by clicking and dragging the headgear by hand, or tap-tap double clicking the value under Yoffs with a certain timing to change it numerically.
  07 EXT this simply refers to the reference head sprite/hairstyle.
  08 x offs this is the x-coordinate of the head. You can edit this value by clicking and dragging the headgear by hand, or tap-tap double clicking the value under Xoffs with a certain timing to change it numerically.
  09 y offs this is the y-coordinate of the head. You can edit this value by clicking and dragging the headgear by hand, or tap-tap double clicking the value under Xoffs with a certain timing to change it numerically.
  

That is basically all you need to know of actOR to get the job done. Personally, I don't know what everything else does!

Now you must go through all the .act's angles and frames to make sure the hat sits correctly on the character's head. Once you are done, simply save your file.

And you're done! You now have the .act and .spr file of your headgear.

the data folder

• 
  1 sprite this main folder is where your sprites reside. under this folder is two other folders.
• a. ¾ÆÀÌÅÛ holds the .spr/.act of the thumbnail of your headgear.
  
• b. ¾Ç¼¼»Ç¸® where your headgears reside. Underneath this folder are two other folders.
  
• c. ¿© the female folder
  
• d. ³² the male folder
  2 texture this main folder is where your .bmp images for your items reside. under this folder is two other folders.
  
• a. À¯ÀúÀÎÅÍÆäÀ̽º this folder holds two other folders under it.
  
• b. collection this is where the artwork for your headgear resides as a 75 x 100 bitmap image.
  
• c. item this is where the .bmp thumbnail of your image resides; the image is the same as the .spr thumbnail of your headgear and is 24 x 24 in size.
  

notes

I generally work with the female .act/.spr files first. Afterwards, I simply copy and paste those files over to the male folder and paste, afterwards, I rename them. A lot of the time, the female .act will not suffice for the male .act since the male hairstyles tend to be smaller than the females. You will have to go back and edit the male .act file after copying and pasting.

The way you position your headgear might not work across all hairstyles as well. You want to choose a position that can be workable across most hairstyles.

Edited April 16, 2012 by sizenine

[Matrixfox]

Thanks for sharing, kinda lame how TSR went down with all their guides :<

[Uplink]

Thank You! I need this a lot. I'm trying to study spriting but am having little luck on it, maybe this guide will finally make me a successful spriter. LOL. Anyway, thanks again!

[Byakuran]

sir.. how can i make frames?

[jedwynne]

really nice guide. keep it up~ thanks for sharing~

[Pink Guy]

I need help.. I got the sprite from data folder and converted it to bmp and edited Boyfriend Hat and changed the text inside it, but when I try to save it, the choice is only 16 bit, 24 bit and 32 bit.. can anyone help me? because whenever I try to edit the picture, the picture turns red so I copy the image and make a new picture and then paste.. Please help me. I am using Adobe photoshop cs5

I can't unlock the image..

[sizenine]

I need help.. I got the sprite from data folder and converted it to bmp and edited Boyfriend Hat and changed the text inside it, but when I try to save it, the choice is only 16 bit, 24 bit and 32 bit.. can anyone help me? because whenever I try to edit the picture, the picture turns red so I copy the image and make a new picture and then paste.. Please help me. I am using Adobe photoshop cs5

I can't unlock the image..

change the mode to RGB. should be one of the menu options at the top left of the program.

[DevilEvil]

I need help.. I got the sprite from data folder and converted it to bmp and edited Boyfriend Hat and changed the text inside it, but when I try to save it, the choice is only 16 bit, 24 bit and 32 bit.. can anyone help me? because whenever I try to edit the picture, the picture turns red so I copy the image and make a new picture and then paste.. Please help me. I am using Adobe photoshop cs5

I can't unlock the image..

change the mode to RGB. should be one of the menu options at the top left of the program.

Wait... shouldn't he change it to Index Color instead of RGM? Image > Mode > Index color?

[sizenine]

I need help.. I got the sprite from data folder and converted it to bmp and edited Boyfriend Hat and changed the text inside it, but when I try to save it, the choice is only 16 bit, 24 bit and 32 bit.. can anyone help me? because whenever I try to edit the picture, the picture turns red so I copy the image and make a new picture and then paste.. Please help me. I am using Adobe photoshop cs5

I can't unlock the image..

change the mode to RGB. should be one of the menu options at the top left of the program.

Wait... shouldn't he change it to Index Color instead of RGM? Image > Mode > Index color?

Yeah.. lol that's what I meant, sorry haven't opened CS in a while!

[DevilEvil]

Lulz, RGB* soz xD.

[Infinite ART]

The following is a guide that my friend, Vi, created mainly for the players of my old server during her early days of spriting. She is no longer active in the RO scene and my old server is no longer active so I just thought it would be a big waste to not share this with the community. By passing on this knowledge to those who are interested in learning the basics of spriting, I hope that more talented artists will arise in this community and more professional work can be seen. Please refrain from ripping images off of this guide and do give Vi full credits if you decide to repost this elsewhere.

p.s. I am only sharing this information, therefore no support can be given from me over this guide so please don't ask me any questions. ^^

--------------------------------------------

hello!

In this guide, I will cover the point after which you have completed your frames and you want to transition your .bmp frames into files workable for Ragnarok Online. This is perhaps the most grueling part of creating custom work for RO. I am in no way an expert (I am simply a novice, still always learning) and simply writing this to aid anyone who wishes to sprite. This is dedicated smexy Lexy.

Before starting, you will need these programs:

• Any image editing software, I personally use Photoshop to do the artwork.
  
• actOR to edit your .act files.
  
• SPRconview to convert your .bmp files to .spr files and vice versa.
  

You can obtain actOR and SPRConview from ratemyserver's RO tools page here.

things to know

At this point, you should have the artwork for your headgear done. This is what I'll be using as an example for this guide, Lady's Sailor Hat:

Depending on your hat, you can have one to fifteen frames (if this isn't an animated headgear). Generally, things such as "GF Wanted," "Notice Board," etc. hats have one frame. Hats generally have five+ frames. Hats with five frames generally only have art work done for the first five angles of the hat, while the ones with fifteen frames have artwork done for all poses/angles. The Lady's Sailor Hat has fifteen frames.

What determines how many frames you have is the .act you choose to work off of for your headgear. I don't know how to create an .act from scratch, I typically pick a headgear closest/most similar to the hat I have done.

The .act file holds the positioning information for your headgear, it references the .spr file for the images. What does the .spr file do? The .spr file holds all the visual information for your headgear. The .act and .spr files work hand in hand. Let's get started.

creating your .spr file.

Time to slice your original artwork into its individual frames. Make sure all of the frames of your headgear are the correct size. If the size you choose is too large, you will encounter problems when you create your .spr file. It will do things such as distort or repeat itself in the frame.

So slice up your artwork. I've picked the size 31 x 31 for the Lady's Sailor Hat.

You have to save each of your frame files as an indexed .bmp. In Photoshop, you must go to Image > Mode > Indexed Color... It will ask you to Flatten Layers, click OK. This window will pop up:

Now you want to go to the drop down menu where it says "Exact" and select Custom. (Make sure that before you select Custom, the drop down menu is already set to Exact. If not, select Exact and then go to Custom.) A second window will pop-up and you will see all of the colors used in your headgear. This step is critical, or else your headgear will show up with crazy colors when you convert it in SPRConview.

Now, you have to denote what color is going to be transparent. In this second window, which is called the Color Table, the first box is the color which tells the .spr file what to make transparent. I've chosen this mint green color.

So click the first box and the color picker will pop up. Simply click your background color. Now you want to save out your Color Table. Click save on the right hand of the color table. This is also indeed an .act file, but don't be confused! This is different from your file to be used with RO. I've saved my palette file out as "palette_ladyssailorhat.act." Now that you have all of the color information done, save your file. Save it as an 8-bit .bmp file.

• naming convention in ragnarok online, each gender has their own set of spr/act files. If you dig through the sprite files in your data folder, you'll notice ¿© and ³² as a suffix for your file names. ¿© denotes female, while ³² denotes male. Generally, I save my files as suffix_headgearname00xx.bmp.
  

So continuing saving your frames out. Remember to check if your headgear's color palette is loaded into each frame. You can load your color palette by going to the "Custom" drop down menu and clicking "Load..." on the right hand side to select your palette file.

After you finish, your folder should look something like this:

Now go into your sprite data folder and pick a headgear that you feel is closest to the headgear you're working on. For the Lady's Sailor Hat, I've chosen Pirate's Pride. So copy and paste the .act/.spr files of the headgear into the folder of the headgear you are working on.

Now open up SPRconview. Now go to Convert > Bmp to Spr. You will get another pop up window. Add all of the frames of your headgear and make sure that they're in numerical order. Under where it says Sprite, hit Browse and browse to where you saved the .spr file of the headgear you chose. Remember, I chose the Pirate's Pride. After you've done that, click Convert. Done with your .spr file!

When you do this, SPRconview will replace the images of the original headgear with the ones you have made. Open up the .spr file and check to make sure everything is a-okay. Scroll through it and make sure the colors aren't all off either, as well as the transparency.

That's it for your .spr file.

time to edit your .act file

Now go back to your folder and open up the .act file that you had copy and pasted for your headgear with actOR.

Most of the time, when you open up your .act for the first time, you may get a message saying that the width and height is not correct. Simply click Yes and carry on. Now you should see this:

Now look to the right. Under reference, check the box next to "head." You'll see that the head shows up, but the hat is behind the head! So look to the left where it says "Change priority ref. spr..." A window pops up. Underneath "head" hit the bubble for back. The hat is now in front of the head. Look:

You can change the reference head anytime you want by replacing the ref_head act/spr files in the location where you installed actOR. Simply replace those files.

Now, we have to edit the .act file. But first, here is a quick diagram explaining the basics of actOR.

• 
  01 action This refers to each of the acts that correspond with an action in Ragnarok. In the drop down menu, there are 13 acts, going from 0-12. Act 00 is the act for standing, act 01 is for walking, act 02 is for sitting, etc. You have to check every single act and every single direction to make sure that the hat sits on the head properly. This is where most of the labor comes from.
  02 direction clicking through this scrolls through all of the angles of the head and hat.
  03 scroll bar for each pose/angle, there are several frames. this scroll bar scrolls through all of them. You must check through all of these to make sure that the hat sits on the head properly.
  04 reference this is simply where you turn the reference head and body on and off via the boxes, x is on and a blank box is off.
  05 x offs this is the x-coordinate of the headgear. You can edit this value by clicking and dragging the headgear by hand, or tap-tap double clicking the value under Xoffs with a certain timing to change it numerically.
  06 y offs this is they-coordinate of the headgear. You can edit this value by clicking and dragging the headgear by hand, or tap-tap double clicking the value under Yoffs with a certain timing to change it numerically.
  07 EXT this simply refers to the reference head sprite/hairstyle.
  08 x offs this is the x-coordinate of the head. You can edit this value by clicking and dragging the headgear by hand, or tap-tap double clicking the value under Xoffs with a certain timing to change it numerically.
  09 y offs this is the y-coordinate of the head. You can edit this value by clicking and dragging the headgear by hand, or tap-tap double clicking the value under Xoffs with a certain timing to change it numerically.
  

That is basically all you need to know of actOR to get the job done. Personally, I don't know what everything else does!

Now you must go through all the .act's angles and frames to make sure the hat sits correctly on the character's head. Once you are done, simply save your file.

And you're done! You now have the .act and .spr file of your headgear.

the data folder

• 
  1 sprite this main folder is where your sprites reside. under this folder is two other folders.
• a. ¾ÆÀÌÅÛ holds the .spr/.act of the thumbnail of your headgear.
  
• b. ¾Ç¼¼»Ç¸® where your headgears reside. Underneath this folder are two other folders.
  
• c. ¿© the female folder
  
• d. ³² the male folder
  2 texture this main folder is where your .bmp images for your items reside. under this folder is two other folders.
  
• a. À¯ÀúÀÎÅÍÆäÀ̽º this folder holds two other folders under it.
  
• b. collection this is where the artwork for your headgear resides as a 75 x 100 bitmap image.
  
• c. item this is where the .bmp thumbnail of your image resides; the image is the same as the .spr thumbnail of your headgear and is 24 x 24 in size.
  

notes

I generally work with the female .act/.spr files first. Afterwards, I simply copy and paste those files over to the male folder and paste, afterwards, I rename them. A lot of the time, the female .act will not suffice for the male .act since the male hairstyles tend to be smaller than the females. You will have to go back and edit the male .act file after copying and pasting.

The way you position your headgear might not work across all hairstyles as well. You want to choose a position that can be workable across most hairstyles.

I cant find my RO Sprite folder can some one help me

[NeoGenesis]

have any video turtorial for this section ? pls give me link . thx

Edited November 11, 2012 by NeoGenesis

[bluememi]

thank you for the guide

[TheLibra]

Can you help me? I'm trying to create my own sprite. It just keeps giving me problems when I try to make it into a .act file, I have a .spr file created, though I do want an animated one, and all I can get to work for the .spr is each frame automatically gets set to a direction. the gif is 7 frames, and I want it to look the same from each direction.

[playgron123]

nice and cool program , i will test it

[Eivohr]

I download the Actor application. Extraxt it and open the folder. I just want to install it but when I click the all application format. Its not work. How can I use this. I need to convert my .bmp or sprite to actor

[NeoGenesis]

why when I open .spr file with actor I can not see the co-ordinates available to the that spr? Can anyone help me?

[bertpatz]

is this same tutorial for NPC sprite ?

[Markhie]

im wondering if this is the same on making weapon sprites..

[Igor]

Can you make a new guide of creating Npc and Custom Job Suit? i really want to test it

thx b4

[mrlongshen]

can someone give full tutorial how making a custom item ?

[DevilEvil]

Wiki docs should be enough imo.

[Infinite ART]

What should I do if I didn't use the RO color palette? Please help.

[DevilEvil]

You don't need to, but it is encouraged to use the RO standard colors. As I said in another post, it's not a requirement.

[Galik]

i need help..can you help how to edit or make new skill effects? like for example change the sleep "Z Z Z" in top of the head to "SLEEP"?