Spriting for Dummies - Beginner Edition!

[Elaina]

Spriting for Dummies - Beginner Edition!

Programs needed before starting:
• An Image editing software -> I'll use Photoshop in this guide
• actOR | actOR2 | Act Editor -> I'll use actOR 2 in this guide
• SPRconview -> to put bmps into spr. and vice versa

Step 1: Pick a custom or design one yourself that you want to see later in-game. Do note: You need every single Custom frame from every angle as a single picture.
For this guide I picked a Frozen Ice Dragon Spirit

Now.. depending on the custom you pick, they can have 1 to fifteen frames, unless it's an animated custom, which will have around 40 frames or more depending on the animation. Now we need the frames from all angles, because we want to see the character from all angles right?

To make a custom you'll need a .spr file which has all the images and frames inside and an .act file which holds the positions from the custom (you don't want the custom to be in mid air while you wear it right?)

We'll start with creating a .spr file
The first thing we'll do is to make sure that every file we have is an individual picture so we can edit every frame.



As you can see we got 5 frames in total and they are covering every angle.
The second thing would be the edit of the colours so SPRconview knows what background color should be transparent.
For that we'll open Photoshop, pick the first frame, then click on Image -> Mode -> Indexed Color



Click on indexed color and then you'll see this window popping up.


This step is very important or it'll mess your colors up. We will change the Palette to "Custom..." to make the background of the custom transparent. Otherwise you would run around with a Red square. Would look silly, right?
(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.)
Once you picked Custom and clicked OK
Then a window like this will appear



Basically we are switching the colors between the transparent background color and the black color.


The first color of the palette will be the transparent background color. In our case it would be red. So we pick the red color from our palette and put it in the first slot. Once done, click on "Save..." and save the palette somewhere. I've saved my palette file out as "palette_frozenIDS.act." <- This is not the act file we'll edit later so you might want to save it somewhere else so you won't get confused. Now that you have all of the color information done, save your file. Save it as an 8-bit .bmp file. All of your frames should have the same color palette. 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.

Repeat this step for all your frames.


Now your folder should look like this


Now go into your sprite data folder and pick a headgear that you feel is the closest to the headgear you're working on. For the Frozen IDS, I've chosen the Ice Dragon Spirit. 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 Ice Dragon Spirit. 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 alright! Scroll through it and make sure the colors aren't all off either, as well as the transparency.


It does look fine for me or what do you think? Save it! Now we'll get to the .act file!

Open actOR 2 and open the .act file you dragged out of your sprite folder earlier


It should look like this once you opened it. Don't worry some sprites can be off location.. then you'll just have to set them to the correct location on the small window.

Now I'll explain what you can see in Actor

• 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 custom locations are set properly. This is the most time consuming and annoying part.
  
• Direction -  This shows all the directions of the sprite that'll be in-game. Make sure that every frame is set correctly.
  
• Sprite Frames -  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 custom locations are set properly.
  
• Reference -  This is just a help for the player to set his custom location easier. It has no impact on the sprite or in-game.
  
• Xoffs -  this is the x-coordinate of the headgear. You can edit this value by clicking and dragging the headgear by hand, or hold the value under Xoffs with a certain timing to change it numerically.
  
• Yoffs - this is they-coordinate of the headgear. You can edit this value by clicking and dragging the headgear by hand, or hold the value under Yoffs with a certain timing to change it numerically.
  
• EXT -  this simply refers to the reference head sprite/hairstyle. It has no impact on the actual sprite or in-game.
  
• Mirror - On some directions you'll have to mirror your sprite. Click on Mirror so your sprite will gain a red square and then click on the sprite to press M to mirror it.
  
• ROT - This is the Rotation which is mostly used for the Act where you pick up items.
  
• That is basically all you need to know of actOR 2 to get the job done.
  

Now you must go through all the .act's angles and frames to make sure the custom locations are correct. Once you are done, simply save your file. Now you have your own self made custom!

This will be the last Part of this guide - Adding the sprite into the game!

First off, you'll go into your data folder -> then you go into the sprite folder -> you'll see two folders there -> go into the ¾Ç¼¼»ç¸® folder -> now you are at the point where you see a ³² folder and a ¿© folder. What do they mean?

• The ¾Ç¼¼»Ç¸® folder is where your headgears reside. Underneath this folder are two other folders.
  
• ¿© is the female folder -> put your custom in this if you want your custom to be available for females
  
• ³² is the male folder -> put your custom in this if you want your custom to be available for males
  

Your custom sprite and act file need to have one of the two prefixes in their name. For example: I picked the name ³²_frozenIDS earlier, so my custom will be shown for males only and it'll be put into the ³² folder.

If you also want it to be for females available or only shown for females then you'd have to rename it into ¿©_frozenIDS and put it inside the ¿© folder. You can also rename your self-made custom into one of your customs that you are using to change the sprite of your custom into your self-made one! But note: You are the only one who can see the self-made sprite.



I hope I'll see some great artworks someday!


Credits to Magna Divinus