What is your process for creating graphics for the SNES?

Discussion of hardware and software development for Super NES and Super Famicom. See the SNESdev wiki for more information.

Moderator: Moderators

Forum rules
  • For making cartridges of your Super NES games, see Reproduction.
Esns68
Posts: 31
Joined: Tue Jan 07, 2020 2:03 pm

What is your process for creating graphics for the SNES?

Post by Esns68 »

I'm still new to SNES assembly, but I'm currently using Grafx2 to create graphics for my projects.

I was messing around with a load sprite source code I found online, tested it with my own sprite (after using the converter in the famous SNES-Starter kit) and in result, the background of the image was not transparent and the overall colors were flickering a little, and the background was rapidly changing colors.

After doing a little more research I learned that the color and transparency issues can happen because the color palette numbers in the file are out of order, which happens as your switching colors and drawing in the graphics editor. Don't know if any of this is true or if I'm misunderstanding so correct if incorrect.

For now on I want to make sure I do it all successfully, so I just wondered what your whole process is for creating sprites/graphics for the SNES, what all do you do, what programs do you use, and what do you do to make sure it works on the SNES, with the color palette file in mind?

Also, is there any program that lets you fix the color numbers in sprite image files or anything?
Thank you for you time.
Oziphantom
Posts: 1565
Joined: Tue Feb 07, 2017 2:03 am

Re: What is your process for creating graphics for the SNES?

Post by Oziphantom »

Programs :
Deluxe Paint V, Brilliance, Pro Motion NG.

Draw all your graphic with palettes and thus make sure you keep you palette in order for all of them. Don't ever let them get converted into 24bit images.

I use this for conversion https://github.com/Optiroc/SuperFamiconv
calima
Posts: 1745
Joined: Tue Oct 06, 2015 10:16 am

Re: What is your process for creating graphics for the SNES?

Post by calima »

Draw in gimp/mtpaint. Save as PNG with the palette already ordered how it should be.

Optimize on the PNG level using my tools (github.com/clbr/nes). Import the palette with them.

Use superfamiconv to convert the PNG to CHR. In dumb mode, so it does no optimizations, no palette reordering. Everything is exactly how I set it in the PNGs.

Bugs like yours, where the palette order changes, are often due to allowing superfamiconv to optimize, and it deciding on different optimizations on different frames.
User avatar
Nikku4211
Posts: 569
Joined: Sun Dec 15, 2019 1:28 pm
Location: Florida
Contact:

Re: What is your process for creating graphics for the SNES?

Post by Nikku4211 »

Bruh I just doodle some random crap in MS Paint or take some random image from the internet and then put it in GIMP, use the Posterise tool under the Colours menu set to a value of 32 because the SNES' 15-bit colour essentially means that each RGB component uses 5-bits or 32 values, and then use Image menu and change the image mode from RGB to indexed colour, setting 128-255 colours for 8BPP graphics because 8BPP graphics share the latter half of its colours with sprites, 16 colours for 4BPP graphics, or 4 colours for 2BPP graphics, and then choose the dithering algorithm I want.

Okay, that was a mouthful.

I then export the image as a .PNG, load up Optiroc's SuperFamiConv, and then have it convert the .PNG into a pile of tiles, tilemap, and palette, specifying the format the .PNG was meant to be converted to.
I have an ASD, so empathy is not natural for me. If I hurt you, I apologise.
redllama7
Posts: 3
Joined: Sat Dec 26, 2020 7:05 pm

Re: What is your process for creating graphics for the SNES?

Post by redllama7 »

I use aseprite. My images are always indexed. I use aseprite cli to export to a temporary png and use Superfamiconv to convert the png to palettes + tiles.

I have been experimenting with metatiles in the tiled map editor. In this case, I use Superfamiconv to make an 8x8 optimized tileset from a 16x16 tileset and a map that I use later in tiled as a metatileset to draw maps.
93143
Posts: 1717
Joined: Fri Jul 04, 2014 9:31 pm

Re: What is your process for creating graphics for the SNES?

Post by 93143 »

If you have a lot of sprite animation to make, aseprite is good. Mostly I use GIMP with posterize (32 levels), save as an X1R5G5B5 bitmap, then run it through my custom tools I wrote in Matlab (at the time Octave wasn't up to the task, but it should be fine now).

If you don't know Matlab this isn't very helpful, but if you do you'll realize it's probably one of the easiest ways to write your own tools. The only catch is that it's runtime-interpreted and therefore slow, so if you have a heavy optimization to run (like, say, using HDMA to CGRAM to bust the palette limits*, or quantizing a high-colour image into multiple 4bpp subpalettes) it can take a while.

I've found that pcx2snes does weird things to hues. From looking at the code, it seems that it's adjusting the hue in a crude attempt to preserve brightness, and it does this even if the source image has been posterized to 32 levels already. This can ruin subtle gradients, and it is the reason I began using Matlab in the first place.

* Tricks like this are one reason I don't typically go to indexed colours in GIMP. For high-colour images (as opposed to your typical 4bpp actor sprite, which you can usually palettize by hand), I find Color Quantizer to be helpful, as it's dedicated to the task and much more powerful. I can't guarantee that CQ will be better than GIMP in all circumstances, but it definitely gives you more knobs to twiddle.
Esns68
Posts: 31
Joined: Tue Jan 07, 2020 2:03 pm

Re: What is your process for creating graphics for the SNES?

Post by Esns68 »

Thank you very much for the responses!! They are helpful.

And just wondering to some of the responses: For future reference how exactly do yo "Draw with a palette"?
User avatar
dougeff
Posts: 3079
Joined: Fri May 08, 2015 7:17 pm

Re: What is your process for creating graphics for the SNES?

Post by dougeff »

This is something that a Asepite is good for, or similar pixel editor programs, as you are forced to work in a limited palette.

You could do the same in Photoshop or Gimp by working in indexed mode.

Even though SNES can use nearly any color, it will make your life easier if you restrict yourself to 5-10 colors while you do Sprite drawing.
nesdoug.com -- blog/tutorial on programming for the NES
User avatar
Nikku4211
Posts: 569
Joined: Sun Dec 15, 2019 1:28 pm
Location: Florida
Contact:

Re: What is your process for creating graphics for the SNES?

Post by Nikku4211 »

dougeff wrote: Wed Jan 27, 2021 5:39 pm This is something that a Asepite is good for, or similar pixel editor programs, as you are forced to work in a limited palette.

You could do the same in Photoshop or Gimp by working in indexed mode.

Even though SNES can use nearly any color, it will make your life easier if you restrict yourself to 5-10 colors while you do Sprite drawing.
Aseprite doesn't support non-square pixels, by the way, so what you see in Aseprite isn't going to be accurate when it comes to the proportions of the SNES' actual output.

With GIMP, you can change the proportions of the pixels by going into the Image drop down menu, clicking on 'Print Size...', and changing the X resolution to 63 and changing the Y resolution to 72 if your game is 60hz(used in most of North America, western South America, Caribbean, Liberia, Myanmar, South Korea, Taiwan, Philippines, Japan, and some Pacific island nations/territories), or changing the X resolution to 52 and changing the Y resolution to 72 if your game is 50hz(used by most European countries, all the African countries that had never been Belgian or French, by Argentina, Paraguay, and Uruguay, most of Asia, and Oceania). After that, go to the View drop down menu and disable 'Dot for Dot'.

I've heard that Photoshop also supports non-square pixels, but I know nothing about Photoshop because I don't have it.
Last edited by Nikku4211 on Wed Jan 27, 2021 8:49 pm, edited 1 time in total.
I have an ASD, so empathy is not natural for me. If I hurt you, I apologise.
lidnariq
Posts: 11432
Joined: Sun Apr 13, 2008 11:12 am

Re: What is your process for creating graphics for the SNES?

Post by lidnariq »

Maybe better to refer to those as "50Hz video" and "60Hz video"? or 625-line and 525-line? Because the color encoding isn't actually relevant, disambiguates the weirdness of Brazil's PAL-M, and also doesn't need to explain SECAM.
93143
Posts: 1717
Joined: Fri Jul 04, 2014 9:31 pm

Re: What is your process for creating graphics for the SNES?

Post by 93143 »

blargg's SNES NTSC library has a test program included that's good for previewing and mockups. I think the PAR is slightly too wide, but it's almost perfect; a lot closer than square, and probably closer than a lot of period TVs. Unfortunately it's source-only, and I had some trouble compiling it because I don't develop on Windows. I don't know if a publicly-available binary exists - I suppose I could post mine... (EDIT: never mind; see below.)
Last edited by 93143 on Wed Jan 27, 2021 6:52 pm, edited 2 times in total.
lidnariq
Posts: 11432
Joined: Sun Apr 13, 2008 11:12 am

Re: What is your process for creating graphics for the SNES?

Post by lidnariq »

Rainwarrior did that: viewtopic.php?t=11947
Pokun
Posts: 2681
Joined: Tue May 28, 2013 5:49 am
Location: Hokkaido, Japan

Re: What is your process for creating graphics for the SNES?

Post by Pokun »

I use Gimp after learning how to set it up for pixel art. I used to think that Photoshop and Gimp are both way too heavy for something as simple as pixel art, but on modern computers they start a bit faster than they used to. I like that Gimp allows full control of the palette and you can use the grid and stuff.

Like other people I use SuperFamiconv for converting to the SNES' native format. I don't bother with palette, just clean conversation and no deleting of duplicates and stuff. I generate the palette manually in the code. I use a program that can convert 24-bit RGB to SNES' 15-bit RGB when trying out various colors to get their values, then just copypasta.

For the SuperFamiconv, I just put the following code in a batch file as part of the ROM building process:

Code: Select all

superfamiconv -igraphic/font8x8.png -tgraphic/font8x8.2bp -Msnes -B2 ^
  -W8 -H8 -R -D -F
superfamiconv -igraphic/sp0.png -tgraphic/sp0.4bp -Msnes -B4 ^
  -W8 -H8 -R -D -F
superfamiconv -igraphic/tileset0.png -tgraphic/tileset0.4bp -Msnes -B4 ^
  -W8 -H8 -R -D -F
Then just add a line for each additional file I need to convert.
none
Posts: 117
Joined: Thu Sep 03, 2020 1:09 am

Re: What is your process for creating graphics for the SNES?

Post by none »

I'm also using GrafX2, it's great for pixel art and once you get used to it the workflow is really quick (you can work faster than with gimp or photoshop). IMO you best stick with that. You also can restrict the palette to 5bits per color. The only thing I really miss is probably better palette editing (color curve tools etc).

I've built a custom tool chain for converting images to snes compatible formats, you can look into that if you want. It consists of a small number of different programs that can be used from the command line and that can be chained together in the project makefile to get the desired results (shuffling around tiles in a tilemap etc). It's included here: https://github.com/rmn0/rem/tree/develop

The graphics tools are easy to build, the only dependency is libgif. Also the sources are not very long or complicated so maybe looking at them can help you understand how things work basically.

I don't use superfamiconv mainly because it can't process gifs. GrafX2 stores its layers / animation frames as gif frames, and that's perfect for making animations / multi layered graphics without having to previously split the file / export single frames to png. You can also have helper stuff in a separate layer in your gif that doesn't get written to the output, for example.

Also I've made a custom fork of GrafX2 that uses the PAL SNES's pixel aspect ratio. If you want to have that, let me know, I could upload it to github if its of any use to you.
After doing a little more research I learned that the color and transparency issues can happen because the color palette numbers in the file are out of order, which happens as your switching colors and drawing in the graphics editor. Don't know if any of this is true or if I'm misunderstanding so correct if incorrect.
On snes, the transparent color is always the first color in a palette. But it's hard to tell whats the issue there, maybe you can post a little more info like a screenshot and the image that you have been using and the command line you have been using to convert it etc?
Esns68 wrote: Wed Jan 27, 2021 3:13 pm And just wondering to some of the responses: For future reference how exactly do yo "Draw with a palette"?
Its basically what you do when you draw with GrafX2. GrafX2 doesn't store the RGB values of every pixel while you paint but instead it stores an 8-bit reference to a 256 color palette (its called indexed mode in gimp and photoshop, the palette is basically what you see in the lower right, it gets stored with the gif / png). That way you can order the colors in the palette the way you want in the graphics program / easily see how many colors you have left / have two different palette entries with the same color value that are exported differently with out them getting merged etc.
Oziphantom
Posts: 1565
Joined: Tue Feb 07, 2017 2:03 am

Re: What is your process for creating graphics for the SNES?

Post by Oziphantom »

Pokun wrote: Thu Jan 28, 2021 11:37 am I use Gimp after learning how to set it up for pixel art. I used to think that Photoshop and Gimp are both way too heavy for something as simple as pixel art, but on modern computers they start a bit faster than they used to. I like that Gimp allows full control of the palette and you can use the grid and stuff.
For me its not to heavy but too light. Photoshop and Gimp are not very good pixel editors they focus more on Photo editing. What will be pain and takes ages to do in PS or GIMP will take 3 clicks to do in DPV.
Post Reply