Delta-V Wiki - User contributions [en]

Spriting

2024-02-04T22:57:16Z

Leonardo DaBepis:

This is a guide to spriting for SS14 and the general expectations for spritework on Delta-V.

You will mainly be using the art program of your choice, but it will help to have your own repository and development environment so that you can test your sprites and eventually add them to the game. For information about dev environment setup, see [[Mapping]].

= Basics of Spriting =

== Getting Set Up ==
To begin, you will need a digital art program. There are many free programs such as '''Krita''' or '''GIMP''' that can be used to make sprites. The most important things to look for when choosing a program for spriting is you will want something that supports layers and transparency (no MS Paint), and you will want a program that comes with a 1x1 pixel brush.

Most of what you will be spriting will be 32x32 pixels because each tile in the game is 32x32. It gets more complicated when you are spriting something that has multiple states (such as a sprite that faces different directions), when you are spriting larger objects, or when you are spriting something animated. Most sprites related to the player character for example (such as clothing or customization options), will be 64x64 because the player character can face four directions.

== Simple Spriting Tutorial ==

<div style="text-align:right">''The base human sprite for SS14, very useful when spriting clothing items.'' - [[File:SS14Guy.png|64px]]</div>

I will now go over the steps involved in spriting a simple clothing item. The program being used in this tutorial is Krita, but as mentioned earlier, other art programs will work too as long as they support layers and pixel art. For clothing items such as this, make sure you are working in 64x64.

<br clear=all>
=== Layer Setup ===
The first thing you will want to do is set up your layers in your digital art program. The background layer should be a neutral grey tone, similar to the floor tiles on the station, so that you can get a good idea of what the sprite will look like in-game. The layer above that should be the base human sprite, then each layer above that will be different clothing items. Make sure if you are spriting multiple pieces of clothing at once, that they are in seperate layers, so then you can export each item separately.
[[File:Spriting Tutorial Unedited Base Human.png|thumb|right|150px|Note that the feet are touching the bottom of the image, and the base human sprite is centered]]
[[File:Spriting_Tutorial_Layer_Setup.png|thumb|center|An example of proper layer setup.]]

<br clear=all>
=== Color and Outlines ===
Now we are going to put some clothes on him. Choose whatever colors you have in mind for your clothing item and draw it out '''on the appropriate clothing layer'''. Remember to use a 1x1 pixel brush too. Finer details, shading, and outlines don't need to be added at this stage. Just lay out the base colors of your sprite. Make sure that each part of the sprite (sleeve, belt, patterns, etc.) stays consistent no matter which direction the sprite is facing.
[[File:Spriting Tutorial Base Color.png|thumb|left|150px|Clothing sprite with just base colors.]]

<br clear=all>
Once you get the base colors laid out, you should then add outlines. The outlines should '''not''' be just black, but should instead be a darker shade of the base color. The outline should also mainly just be on the outer edge of the sprite, because it helps the sprite stand out.
[[File:Spriting Tutorial Outline.png|150px|thumb|left|Clothing sprite now with outlines.]]

<br clear=all>
=== Shading and Finer Details ===
Finally, you will add shading to the sprite. Imagine a light floating above and around your sprite and casting shadows onto it. Use a shade in between your outline color and your base color to add the shading in areas that would logically be shaded. You can also make the outline slightly lighter in areas that would be hit by light. The outline should never be lighter than the base color, however.

Additionally, use higher contrast shades to make sure the shading and outline combined give a good idea of the shape of the object. Too low of contrast and you risk having your sprite look flat and dull.
[[File:Spriting Tutorial Shading.png|150px|thumb|left|A finished clothing sprite, ready to be exported.]]

<br clear=all>
=== Exporting Your Sprite ===
Once your sprite is done, in whichever art program you are using, make sure all layers '''except for''' the layer with the sprite you're exporting are invisible. Layer visibility can be toggled in the layer menu as shown above. Once you have your sprite alone over just a transparent background, it is then ready to be exported.

<br clear=all>
== Putting Your Sprites in the Game ==
If you are making sprites to be put in the game, ideally you should already have a [[Mapping#Setting_up_the_Development_Environment|development environment]] and repository set up.

In your repository there will be a '''Resources''' folder containing two other folders; '''Prototypes''' and '''Textures'''. These are the two folders you care about for spriting.

In '''Textures''', you will see sprites organized by what their purposes is (Clothing, Mobs, Objects, etc.) or organized by what codebase they're from (DeltaV, Nyanotrasen, Simplestation).

Go further into any of these and you will see each item has its own .rsi file. You will need to make your own .rsi file in its appropriate folder, then put any sprites related to your new item (icon sprite, inhand sprites, equipped sprites, etc.) in the .rsi file. You can use pre-existing .rsi files as reference to see how it's organized.

Additionally, you will need a ''meta.json'' file inside the .rsi. The ''meta.json'' file will contain copyright information, as well as information that tells the game how to render these sprites. Again, reference pre-existing meta.json files to understand how it works.

Once you have your .rsi set up, you can then go to the previously mentioned '''Prototypes''' folder and write out all the .yml files needed for your item. Read about how to contribute for further information (this part is incomplete.)

Spriting

2023-12-08T01:41:10Z

Leonardo DaBepis:

Spriting

2023-11-07T10:30:09Z

Leonardo DaBepis: Created page with " This is a guide to spriting for SS14 and the general expectations for spritework on Delta-V. You will mainly be using the art program of your choice, but it will help to have your own repository and development environment so that you can test your sprites and eventually add them to the game. For information about dev environment setup, see Mapping. =Basics of Spriting= ==Getting Set Up== To begin, you will need a digital art program. There are many free program..."

This is a guide to spriting for SS14 and the general expectations for spritework on Delta-V.

You will mainly be using the art program of your choice, but it will help to have your own repository and development environment so that you can test your sprites and eventually add them to the game. For information about dev environment setup, see [[Mapping]].

=Basics of Spriting=

==Getting Set Up==

To begin, you will need a digital art program. There are many free programs such as Krita or GIMP that can be used to make sprites. The most important things to look for when choosing a program for spriting is you will want something that supports layers and transparency (no MS Paint), and you will want a program that comes with a 1x1 pixel brush.

Most of what you will be spriting will be 32x32 pixels because each tile in the game is 32x32. It gets more complicated when you are spriting something that has multiple states (such as a sprite that faces different directions), when you are spriting larger objects, or when you are spriting something animated. Most sprites related to the player character for example (such as clothing or customization options), will be 64x64 because the player character can face four directions.

==Simple Spriting Tutorial==

[[File:SS14Guy.png|thumb|right|The base human sprite for SS14.]]I will now go over the steps involved in spriting a simple clothing item. The program being used in this tutorial is Krita, but as mentioned earlier, other art programs will work too as long as they support layers and pixel art. For clothing items such as this, make sure you are working in 64x64. Also here is the base human sprite, which is very useful when spriting clothing items.

===Layer Setup===

[[File:Spriting_Tutorial_Layer_Setup.png|thumb|left|An example of proper layer setup.]]

The first thing you will want to do is set up your layers in your digital art program. The background layer should be a neutral grey tone, similar to the floor tiles on the station, so that you can get a good idea of what the sprite will look like in-game. The layer above that should be the base human sprite, then each layer above that will be different clothing items. Make sure if you are spriting multiple pieces of clothing at once, that they are in seperate layers, so then you can export each item separately.

[[File:Spriting Tutorial Unedited Base Human.png|thumb|right|150px|Note that the feet are touching the bottom of the image, and the base human sprite is centered]]

===Color and Outline===

Now we are going to put some clothes on him. Choose whatever colors you have in mind for your clothing item and draw it out '''on the appropriate clothing layer'''. Remember to use a 1x1 pixel brush too. Finer details, shading, and outlines don't need to be added at this stage. Just lay out the base colors of your sprite. Make sure that each part of the sprite (sleeve, belt, patterns, etc.) stays consistent no matter which direction the sprite is facing. Once you get the base colors laid out, you should then add outlines. The outlines should '''not''' be just black, but should instead be a darker shade of the base color. The outline should also mainly just be on the outer edge of the sprite, because it helps the sprite stand out.
[[File:Spriting Tutorial Base Color.png|thumb|left|150px|clothing sprite with just base colors]]
[[File:Spriting Tutorial Outline.png|150px|thumb|center|clothing sprite now with outline]]

===Shading and Finer Details===

Finally, you will add shading to the sprite. Imagine a light floating above and around your sprite and casting shadows onto it. Use a shade in between your outline color and your base color to add the shading in areas that would logically be shaded. You can also make the outline slightly lighter in areas that would be hit by light. The outline should never be lighter than the base color, however. Additionally, use higher contrast shades to make sure the shading and outline combined give a good idea of the shape of the object. Too low of contrast and you risk having your sprite look flat and dull.
[[File:Spriting Tutorial Shading.png|150px|thumb|left|a finished clothing sprite, ready to be exported]]

===Exporting Your Sprite===

Once your sprite is done, in whichever art program you are using, make sure all layers '''except for''' the layer with the sprite you're exporting are invisible. Layer visibility can be toggled in the layer menu as shown above. Once you have your sprite alone over just a transparent background, it is then ready to be exported.

==Putting Your Sprites in the Game==

If you are making sprites to be put in the game, ideally you should already have a development environment and repository set up (See [[Mapping]].) In your repository, you will see a folder called ''Resources''. In ''Resources'', there will be two folders called ''Prototypes'' and ''Textures'', and these are the main two you care about for spriting. In ''Textures'', you will see sprites organized by what their purposes is (Clothing, Mobs, Objects, etc.) or organized by what codebase they're from (DeltaV, Nyanotrasen). Go further into any of these and you will see each item has its own .rsi file. You will need to make your own .rsi file in its appropriate folder, then put any sprites related to your new item (icon sprite, inhand sprites, equipped sprites, etc.) in the .rsi file. You can use preexisting .rsi files as reference to see how it's been done in the past. Additionally, you will need a .json file inside the .rsi, and this will contain copyright information, as well as information that tells the game how to render these sprites. Again, reference preexisting .json files to understand how it's done.
Once you have your .rsi set up, you can then go to the previously mentioned ''Prototypes'' folder and write out all the .yml files needed for your item. Read about how to contribute for further information (this part is incomplete.)

=Art Direction and Quality Standards of Delta-V=

Delta-V is a Medium Roleplay (MRP) server that pushes to emphasize a more serious and hard sci-fi aesthetic, as opposed to the goofy chaos SS13/14 is often known for. Sprites that are overly silly, overly fantasy, overly anachronistic, or which just don't fit the tone of the server will not be accepted. Additionally, if a quality of a sprite is poor (low contrast, unclear form, poor color choice, etc.) it will not be accepted. This section is incomplete, more information about the specific direction of each department or faction will be added at a later date. Any questions can be redirected to the spriting channel on the Discord.

File:Spriting Tutorial Shading.png

2023-11-07T09:46:00Z

Leonardo DaBepis:

an example of shading for the spriting tutorial

File:Spriting Tutorial Outline.png

2023-11-07T09:34:45Z

Leonardo DaBepis:

the sample clothing from the spriting tutorial with the outline shown

File:Spriting Tutorial Base Color.png

2023-11-07T09:20:50Z

Leonardo DaBepis:

unshaded/unoutlined sprite for the spriting tutorial

File:Spriting Tutorial Unedited Base Human.png

2023-11-07T08:59:09Z

Leonardo DaBepis:

unedited base human sprite for the spriting tutorial

File:SS14Guy.png

2023-11-07T08:54:48Z

Leonardo DaBepis:

base human sprite for SS14.

File:Spriting Tutorial Layer Setup.png

2023-11-07T08:41:48Z

Leonardo DaBepis:

Spriting Tutorial Layer Setup