Differences

This shows you the differences between two versions of the page.

--- dev:zsprites [2024/08/18 18:59] – created stub wylem
+++ dev:zsprites [2024/09/18 07:25] (current) – [Overview] add notes about programs antidale
@@ Line 1: / Line 1: @@
 ====== Creating Zeromus Sprites ======
-(stub page with notes)
+===== Overview =====
+Z sprites have max(ish) dimensions of 140px high and 200px wide. You have about 100px of height before the bottom your image starts interacting with the background layer. Z sprites are limited to a palette of 15 colors, plus a transparency color; the sprite tool will use whatever color that is in the top right pixel of your image for that transparency color. Should your image bump right up against that top right corner, you'll want to adjust it by coloring that pixel to whatever you're using for a transparency color.
-Running the tool site: ''python fetools/tool_site.py /path/to/rom''
+Pretty much any image editing program should work, like Photoshop, GIMP, or paint.net. Photograph oriented ones might not quite be the thing, but you definitely do not need a sprite-specific tool to use.
-  * Site will be available at http://localhost:8082/
+===== Picking an image =====
+Sprites from other 16-bit systems, or from 8-bit systems work pretty well as Z sprites. You might want to play with resizing the image a little, like increasing the size of NES sprites, but generally you don't have much need to tinker.
-Dimensions: Up to 140px high and 200(ish)px wide.
+Photographs are tricky, and I've had better success with images that are clear at fairly small resolutions; if it doesn't look good and have a strong presence at 400px wide, it's hard to make it look good at 200px, you know? Photos also just naturally have a lot of colors and shading going on, further complicating your task.
-Colors: Will be quantized to 16 colors (15 + transparent). Top-right pixel will be used as the transparency color
-Advise: Using an external image editor (Photoshop, etc.), resize first, then quantize to 15-16 colors using whichever options work best.
+Sprites from more more modern games than the 16-bit era will have a sliding scale of difficulty. The closes they are in time or spirit to what the SNES can display, the easier time you'll have. Similar concerns from photographs come into play the more detailed/realistic/complex the images are from newer consoles or games. The stronger and simpler the composition is, the more likely you'll be able to make a good sprite out of it.
-  * Dithering will give the illusion of having more colors, and can help with shading, but will look "gritty" / less smooth
-==== Resources ====
+===== Resizing =====
+When you're working with an image that's too big, you'll decide on either cropping the image, resizing the image, or both. When resizing an image, pay attention resampling options your editor is giving you. I've found that `Nearest Neighbor` is a good first choice; it provides/adds a bit of a pixelation effect, which fits the aesthetic well, and generally does a good job of preserving the essence of the image. Bicubic has also been a decent option for me, especially for photographs. I've not really liked the effects of options with "(Smooth)" or "(Sharp)" as part of the option name. This is definitely something to play around with a bit, though, and develop a feel for.
+===== Quantization - Coloring within the lines =====
+For images that have too many colors, you'll want to use quantization to reduce the amount of colors in the image down to the restrictions that are imposed (15 colors, plus a transparency color). The tools site will automatically apply a quantization to the image, so this isn't a strictly necessary step; however, you can often generate better results than the default values the tools site will use, and if you do this step yourself, you'll have an opportunity to make some edits after you have a set palette to work with to help clean up/enhance the image.
+Playing around with dithering values as you're quantizing the image can help either produce a smoother image, or going the other way, can produce an image with more apparent color, at the risk of it looking grainy or gritty.
+If you need to both resize the image and quantize it, make sure to resize first. If you resize after quantizing it, you can get messy looking images, and you'll have more clean up work to do to make the final product look good.
+===== Importing and Testing =====
+You'll use the [[dev:tools_site|Tools Site]] to turn your `.png` into the format that the randomizer uses. You'll use the `Test ROM` button to do generate a ROM that auto plays a quick Z fight so that you can review how everything looks. I look for places where the background is leaking through when it shouldn't, any stray bits of whatnot that I missed during editing the image, and get a general sense of whether or not the sprite works.
+Sometimes I'll find that some part of the process has introduced some semi-transparent pixels, or has added some light pixels at the edge of the image, both of which tend to look not good. I've had success combining erasing some of those pixels with using the color closest to black in the image and either outlining or coloring over the light pixels on the image's edges.
+===== Resources =====
   * Script source: ''fetools/processors/zsprites.py''
     * Will use median cut quantization with Floyd-Steinberg dithering
   * [[https://youtu.be/7e8LJoqU8Qk?si=lfyUset_xl8srNeB&t=2256|SchalaKitty discussing Z sprite creation]]

Free Enterprise Wiki

User Tools

Site Tools

Differences

Page Tools