You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: docs/client/spriting.md
+18-20Lines changed: 18 additions & 20 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -1,3 +1,5 @@
1
+
# Spriting
2
+
1
3
## Creating Your Own Frames
2
4
3
5
You will need
@@ -10,29 +12,28 @@ When creating a new image, it is recommended that you use the bitmap format. The
10
12
are planing to make. It does not need to be a particular size (only the inventory item sprite and .bmp image must have a
11
13
size of 24x24 px, it is recommended that the drop sprite be this size too), but remember the bigger it is the more
12
14
likely it is to look odd inside the game (and if your frames are too big, there is a big chance of getting an error
13
-
ingame). The background needs to 'Magenta'. The hexadecimal format of this color is \#FF00FF. The RGB for this color is
15
+
ingame). The background needs to 'Magenta'. The hexadecimal format of this color is #FF00FF. The RGB for this color is
14
16
R 255, G 0, B 255.
15
17
16
18
Now that you have the size and everything figured out, its time to change it from .bmp to indexed color. Download this
17
-
file: [RO common colors](RO_Pixeling_Colors"wikilink"), then navigate to Image \> Mode \> Indexed Color... In the
18
-
window that pops up, the palette can be anything you want, but if forced you select Custom... Then select load and
19
+
file: [RO common colors](./ro-pixeling-colors.md"), then navigate to `Image > Mode > Indexed Color...` In the
20
+
window that pops up, the palette can be anything you want, but if forced you select `Custom...` Then select load and
19
21
change file type from .act to .pal, then find the .pal file then select and open it, it will be wherever you saved the
20
22
file to. Once it has loaded, make sure the colors are 256, then select OK, then you will now have an image compatible
21
23
with ragnarok, and you can now draw out your image. After this you can save your image as .bmp (bitmap).
22
24
23
-
You must get familiarized with this color table (you can access to your color table in Photoshop through Image \> Mode
24
-
\>Color Table). First color in the color table is the transparency color. This means that ingame, this color won't
25
-
appear. This color must be \#FF00FF for inventory items (you can change the colors of the color table by clicking on
26
-
them. You can also make color gradients by selecting a group of colors if you are working with Photoshop). It can be any
25
+
You must get familiarized with this color table (you can access to your color table in Photoshop through
26
+
`Image > Mode > Color Table`). First color in the color table is the transparency color. This means that ingame, this
27
+
color won't appear. This color must be #FF00FF for inventory items (you can change the colors of the color table by clicking
28
+
on them. You can also make color gradients by selecting a group of colors if you are working with Photoshop). It can be any
27
29
other color for Mobs, Jobs, Headgears, etc. However, It is recommended to use this color as background transparency
28
-
color. Make sure background color is the first color in the color table. It is common that color \#FF00FF (magenta)
30
+
color. Make sure background color is the first color in the color table. It is common that color #FF00FF (magenta)
29
31
appears as the third color in the color table, and not first. If you are working with inventory items images, you must
30
-
change this color to any other color and make first color \#FF00FF. Then, you must change the background color to
31
-
\#FF00FF manually (replacing the background color for \#FF00FF). We do this because you may have two magenta's in your
32
-
color table (one in the first cell and another one in the third). If this happens and you make your background color
33
-
\#FF00FF you may be using the third color, and not first. What will happen then? It will make a part of your inventory
32
+
change this color to any other color and make first color #FF00FF. Then, you must change the background color to
33
+
#FF00FF manually (replacing the background color for #FF00FF). We do this because you may have two magenta's in your
34
+
color table (one in the first cell and another one in the third). If this happens and you make your background color #FF00FF you may be using the third color, and not first. What will happen then? It will make a part of your inventory
34
35
skin background disappear. So background color must be always the first color in the color table, and when we are
35
-
working with inventory items, it also must be color \#FF00FF.
36
+
working with inventory items, it also must be color #FF00FF.
36
37
37
38
Some spriters usually use some neon colors as references, to make the edges of their sprite before coloring it. It is
38
39
recommended you start making only the edges, so you can concentrate only in the perspective and size of your sprite
@@ -48,8 +49,8 @@ use for this.
48
49
49
50
As soon as you have one frame (8bits/256 colors bmp image), you will be able to create your sprite. For this, you will
50
51
need a SPR maker. You can use [SPR Conviewer](http://www.divinero.net/devilevil/archivos/tools/SPRConviewer.rar) (made
51
-
by bakausagi) to make your sprite. Once you opened SPR conview, you will have to go to "Convert \> Bmp to SPR" (only
52
-
works with 8 bits bmp images). Click on "Add" and select all your frames. Try to name them like "Frame1", "Frame2", etc.
52
+
by bakausagi) to make your sprite. Once you opened SPR conview, you will have to go to `Convert > Bmp to SPR` (only
53
+
works with 8 bits bmp images). Click on `Add` and select all your frames. Try to name them like `Frame1`, `Frame2`, etc.
53
54
and then select them all at the same time. If not, the order of frames in the sprite may not be correct. Avoid using
54
55
control + click to add more frames. Select them all and if you selected something you don't want, just use control +
55
56
click to deselect it. But don't use it to select frames because it may mess the frames up. Then, browse the directory
@@ -86,10 +87,7 @@ not remove the collection image.
0 commit comments