Forums

Sega Master System / Mark III / Game Gear
SG-1000 / SC-3000 / SF-7000 / OMV
Home - Forums - Games - Scans - Maps - Cheats - Credits
Music - Videos - Development - Hacks - Translations - Homebrew

View topic - Recommended workflow for sprite creation

Reply to topic
Author Message
  • Joined: 07 Jun 2017
  • Posts: 4
Reply with quote
Recommended workflow for sprite creation
Post Posted: Fri Jun 09, 2017 12:45 pm
Hi,

I am new to SMS development and I am currently struggling with my graphics workflow. Maxim's bmp2tile software seems to be great for converting sprites to the sega tile format, but the problem I have is to create graphics suitable for the program.

I only experimented with PNGs and from what I can tell bmp2tile is only able to convert paletted PNG files.
1. I tried to create some with MS Paint, but paint seems to produce only non-paletted PNGs.
2. Next I tried to use paint.net: The produced PNGs seem to work with bmp2tile, however for sprites I have the problem, that the color 0 in the generated palette has to be transparent, but neither paint.net nor bmp2tile allow you to specify the palette.
3. I tried to edit the PNG's palette with tweakpng, which worked, but messes up the images colors pixels (of course)
4. I tried editing again with paint.net, but it ignores the existing palette and overwrites it.

I am wondering if anyone has an established, proven, efficient workflow and if you could share it. Worst case I write a tool to allow PNG palette manipulations while changing the image accordingly, which seems not an ideal workflow anyway.
  View user's profile Send private message
  • Joined: 01 Feb 2014
  • Posts: 844
Reply with quote
Post Posted: Fri Jun 09, 2017 2:40 pm
Personally, I can't recommend Cosmigo's ProMotion enough. It's by far the best tool for creating pixel graphics, IMO. Plus it allows you to tweak the palette exactly as you need it, for example if you want to have certain colors in the first 4 or 8 spots to create 2bpp or 3bpp tiles.
ProMotion is not free, but I think there's a trial version.

Of course you can get perfect results with other tools, too.

Concerning the transparent color: Any color in position 0 of the sprite palette will be transparent automatically. So just pick one with enough contrast to the rest of your colors. You don't have to define actual transparency in the png.
  View user's profile Send private message
  • Joined: 22 Mar 2015
  • Posts: 228
Reply with quote
Post Posted: Fri Jun 09, 2017 2:43 pm
I'm using Paint Shop Pro 7.04 and can actually handle paletted png and bmp images, besides It can handle palettes of 16 or 256 colors (where 64 are the SMS palette) and some more. Just have in mind the first color of a palette has to be the transparent color for your homebrew. :)
  View user's profile Send private message
  • Joined: 05 Sep 2013
  • Posts: 3762
  • Location: Stockholm, Sweden
Reply with quote
Post Posted: Fri Jun 09, 2017 3:02 pm
Any program that can save a 256-color or 16-color image in PNG/BMP/GIF/PCX format should do. If this program lets you handle the palette it's better (as you have to fill with color 0 all what's supposed to be transparent in your sprites).
If only BMP2Tile had an option to swap any color with color 0 on the palette... ;)
  View user's profile Send private message Visit poster's website
  • Joined: 07 Jun 2017
  • Posts: 4
Reply with quote
Post Posted: Fri Jun 09, 2017 3:45 pm
@Kagesan: I will check out the free ProMotion version. Thank you for the hint.

@sverx: I totally agree! A palette swap function would be great for BMP2Tile. I checked out the project at Github, but it seems to be developed in Delphi... so I won't add it.

In the meantime I developed a little hard coded tool in golang to swap palettes. I don't think anyone will have a use for it, but I attached it just in case...
tileizer.go.txt (1.58 KB)

  View user's profile Send private message
  • Joined: 01 Aug 2012
  • Posts: 322
  • Location: Porto, Portugal
Reply with quote
Post Posted: Fri Jun 09, 2017 5:35 pm
the most important thing i think you need to get is a code result that you can clearly understand what is there, just like:

  defb $FF,0,0,%01111100
  defb $FF,0,0,%11000110
  defb $FF,0,0,%11011110
  defb $FF,0,0,%11011110
  defb $FF,0,0,%11011110
  defb $FF,0,0,%11000000
  defb $FF,0,0,%01111100
  defb $FF,0,0,%00000000

  defb $FF,0,0,%00111000
  defb $FF,0,0,%01101100
  defb $FF,0,0,%11000110
  defb $FF,0,0,%11000110
  defb $FF,0,0,%11111110
  defb $FF,0,0,%11000110
  defb $FF,0,0,%11000110
  defb $FF,0,0,%00000000

  defb $FF,0,0,%11111100
  defb $FF,0,0,%11000110
  defb $FF,0,0,%11000110
  defb $FF,0,0,%11111100
  defb $FF,0,0,%11000110
  defb $FF,0,0,%11000110
  defb $FF,0,0,%11111100
  defb $FF,0,0,%00000000

  defb $FF,0,0,%00111100
  defb $FF,0,0,%01100110
  defb $FF,0,0,%11000000
  defb $FF,0,0,%11000000
  defb $FF,0,0,%11000000
  defb $FF,0,0,%01100110
  defb $FF,0,0,%00111100
  defb $FF,0,0,%00000000


i use to create my own png files from Gimp or GrafX2, use a converter that i coded in sdlBasic (i don’t know where i have it now), and i think the result looks a bit like the code above somehow
  View user's profile Send private message Visit poster's website
  • Site Admin
  • Joined: 19 Oct 1999
  • Posts: 14687
  • Location: London
Reply with quote
Post Posted: Fri Jun 09, 2017 6:18 pm
I use Paint Shop Pro 7 and assume you want to control the palette manually. If BMP2Tile let you pick the transparent colour, how would it assign indices to the other colours? Your code may want to play with the palette so messing with the order will ruin it. Anyway, my biggest recommendation is to save the palette independently so you can apply it to multiple images.
  View user's profile Send private message Visit poster's website
  • Joined: 28 Jan 2017
  • Posts: 544
  • Location: Málaga, Spain
Reply with quote
Post Posted: Fri Jun 09, 2017 6:40 pm
I even use imagemagick (convert.exe) to make automatic palette reduction with good results. But shame we do not have a palette reduction tool for 12 bits palette, as some near colors got the same when reduce to 16 colors palette and pass in bmp2tile.

If bmp2tile could take and optimize rgb images... would be great!
  View user's profile Send private message
  • Joined: 07 Jun 2017
  • Posts: 4
Reply with quote
Post Posted: Fri Jun 09, 2017 7:29 pm
@Maxim:
Imagine, after importing an image into bmp2tile, you would have the following palette (this was exactly the problem I experienced):
0: Black
1: Red
2: Pink
...

Now it would have been nice, if I could tell bmp2tile "Please swap the color 0 and 2 (so pink gets transparent now) and reassign the indices accordingly in the picture". If you are still wondering how this would be possible, you can check the source code I attached before (tileizer.go.txt), however it is really just a) switching the (rgb-)colors in the palette and b) switching the indices in the picture (0 <-> 2). No rocket science.

The reason I had the problem is, that I couldn't find free image software for manuell palette manipulation. So while that feature would have been helpful, I will try my luck with ProMotion as it seems to do the trick. A proper image software is the better solution anyways for reasons you gave (palette control across images).

Edit: Btw... thanks for the beginner tutorial, Maxim! Gave me a good intro :)
  View user's profile Send private message
  • Joined: 05 Sep 2013
  • Posts: 3762
  • Location: Stockholm, Sweden
Reply with quote
Post Posted: Fri Jun 09, 2017 9:40 pm
@Maxim: I totally agree and I manually manage my palettes with Paint Shop Pro too, but anyway I have to relocate the 'no color' to index 0, and that's something that BMP2Tile could do by itself, with a simple swap 'n' with 0, as grit does, for instance (see -gT). This way it doesn't matter where the transparent color is in the palette, the converter will adapt it to SMS hardware requirements.
  View user's profile Send private message Visit poster's website
  • Joined: 28 Jan 2017
  • Posts: 544
  • Location: Málaga, Spain
Reply with quote
Post Posted: Sat Jun 10, 2017 6:00 am
... the first time you want to do palette manipulation effects your problem wont be the 0 color. Will be all the colors involved order or prerare to work with reference tables so i should find a complete solution.
  View user's profile Send private message
  • Site Admin
  • Joined: 19 Oct 1999
  • Posts: 14687
  • Location: London
Reply with quote
Post Posted: Sat Jun 10, 2017 6:28 am
It's all a bit beyond the design of BMP2Tile - which assumes you already made a paletted image exactly right. The tools to do that are necessarily quite complicated and built in to image editors. Anyway, I don't really want to touch old crappy Delphi code any more, it probably needs a rewrite in a modern language.
  View user's profile Send private message Visit poster's website
  • Joined: 28 Jan 2017
  • Posts: 544
  • Location: Málaga, Spain
Reply with quote
Post Posted: Sat Jun 10, 2017 6:46 am
I earn the bucks touching not so crappy delphi code.... in fact i do not see crappiness in delphi, but this is not the forum for this discussion lol :)
  View user's profile Send private message
  • Site Admin
  • Joined: 19 Oct 1999
  • Posts: 14687
  • Location: London
Reply with quote
Post Posted: Sat Jun 10, 2017 10:26 am
Delphi is not a bad language, but​ like VB and PHP it has suffered from making it easy to make bad apps. Anyway, it's my crappy old code (predating me being a developer by education and profession) and needs to be redone from scratch, so I may as well do that in a modern language. It might be interesting to do it in Python, for example, for some cross platform ability - but then I have even less experience in Python...

Anyway, surely there are tools for applying a fixed palette to an image, I bet ImageMagick can do it somehow. Reducing a true colour image to a suitable palette is very complicated, see RGBQuantSMS for example.
  View user's profile Send private message Visit poster's website
  • Joined: 30 Jun 2016
  • Posts: 194
  • Location: Melbourne, Australia
Reply with quote
Post Posted: Sat Jun 10, 2017 3:17 pm
My own workflow is, to be honest, kind of bonkers.

I've generally worked on pixel artwork from using Paint Tool SAI, pre-made palette .pngs to use as a colour picker, and Irfanview for converting the end results to palettized .bmps.

It is possible to generate artwork using the preferred palette (including the specific index, with transparency) through this way. Irfanview always being the last step before BMP2Tile does mean the workflow is somewhat interrupted, but it does generally work.


For anyone wondering why the hell I use Paint Tool SAI for working on pixel art? It's because I'm the kind of lazy bastard that uses a graphics tablet for pixel art.

It would be kind of neat to see the pixel artists around these parts show off in another topic.
  View user's profile Send private message Visit poster's website
  • Joined: 23 Mar 2013
  • Posts: 611
  • Location: Copenhagen, Denmark
Reply with quote
Post Posted: Tue Jun 13, 2017 1:59 pm
I have my own wierd sprite creation workflow. I works for me :)

I draw my sprites on the Ipad in Sprite Something. Then I execute this .bat file from within the sprite assets folder in my project directory:


echo off
:: process_sprite_something_sheet.bat.
:: Go to the Dropbox Sprite Something folder and get two spritesheets.
:: One sheet for 16x16 sprites, and one for 8x8. Merge them with each other,
:: convert them to pico palette and tiles.
:: NOTE: Depends on a special pico-8 colormap_cube.png and bmp2tile
:: being present in the tools folder.

SET folder="C:\Users\ANSJ\Dropbox\Apps\Sprite Something\"
SET filename1=astro_sheet_1.png
SET filename2=astro_sheet_2.png
SET output=spritesheet.png

:: Copy to this folder.
copy %folder%%filename1%
copy %folder%%filename2%

:: Use ImageMagick to insert the 16 pico-8 colors as the first 16 tiles of the
:: image (in order to preserve the correct palette in the tile conversion.)
convert ..\tools\colormap_cube.png  %filename1% -append %filename1%

:: Use ImageMagick to convert the image to 16 colors.
convert %filename1% -quantize RGB -remap ..\tools\colormap_cube.png  %filename1%

:: Append 8x8 sprites.
convert -append %filename1% %filename2% %output%

:: Use bmp2tile (in the tools folder) to make tiles out of the appended image.
..\tools\bmp2tile.exe %~dp0%output% -savetiles %~dp0%output%_tiles.inc -fullpalette -spritepalette -noremovedupes -nomirror -tileoffset 128 -exit

:: Remove the comments and the first 32 lines (thus removing the tiles of the
:: color map).
for /f "skip=32 delims=*" %%a in (%output%_tiles.inc) do (
echo %%a >>newfile.txt
)
xcopy newfile.txt %output%_tiles.inc /y

:: Clean up.
del newfile.txt /f /q
del %filename1%
del %filename2%
del %output%


I don't know if the above code makes sense to anyone but me, but it shows how I use ImageMagic, BMP2Tile, and an image (the colorcube) consisting of colors arranged in my preferred order (my selected palette). With this setup, I can practically draw a sprite on the ipad, click the .bat file on my computer, compile my project, and instantly see my new graphics in action.
  View user's profile Send private message Visit poster's website
  • Joined: 01 Feb 2014
  • Posts: 844
Reply with quote
Post Posted: Wed Jun 14, 2017 3:42 pm
eruiz00 wrote
But shame we do not have a palette reduction tool for 12 bits palette, as some near colors got the same when reduce to 16 colors palette and pass in bmp2tile.

Can you explain this? I'm curious. Other than for digitized photos or similar images I can't imagine why you would want to use a feature like that when creating graphics for the master system.

Why not create the graphics within the system's limits in the first place? It will surely yield better results than creating them with more/different colours and then adjusting them afterwards.
  View user's profile Send private message
  • Joined: 25 Feb 2006
  • Posts: 863
  • Location: Belo Horizonte, MG, Brazil
Reply with quote
Post Posted: Wed Jun 14, 2017 3:48 pm
RgbQuant-SMS takes the SMS palette limits into consideration; it's far from perfect, but if you want to convert a preexisting image, that may be a good option.
  View user's profile Send private message Visit poster's website
  • Joined: 05 Sep 2013
  • Posts: 3762
  • Location: Stockholm, Sweden
Reply with quote
Post Posted: Wed Jun 14, 2017 5:16 pm
you mean 12 colors, not 12 bits right? (SMS selection of colors is 6 bits...)
  View user's profile Send private message Visit poster's website
  • Joined: 28 Jan 2017
  • Posts: 544
  • Location: Málaga, Spain
Reply with quote
Post Posted: Wed Jun 14, 2017 9:44 pm
Last edited by eruiz00 on Wed Jun 14, 2017 9:55 pm; edited 1 time in total
Yeah! Sorry sverx. 6 bits.

Uffff... too work kagesan! I were near from craziness with astroforce (too work to do) and now its getting even worse (funnier !). My major pleasure is to make the music after all.

The fact is that with ps, by example, you can reduce the palette nicely, but after pass the image by bmp2tile the color palette depth reduction leads to similar colors where ps calculated near colors, so the spritr/tile suffer when in game. With a fixed precalculatef and forced palette it does not matter, as you see the final result and even can apply dithering.
  View user's profile Send private message
  • Joined: 28 Jan 2017
  • Posts: 544
  • Location: Málaga, Spain
Reply with quote
Post Posted: Wed Jun 14, 2017 9:46 pm
I really liked rgbquant idea but have not tried to integrate into workflow (and being a javascript tool, have my doubts.... could work with nodejs or node-webkit?)
  View user's profile Send private message
  • Joined: 28 Jan 2017
  • Posts: 544
  • Location: Málaga, Spain
Reply with quote
Post Posted: Wed Jun 14, 2017 10:05 pm
It is a javascript tool? Or a php one
  View user's profile Send private message
  • Site Admin
  • Joined: 19 Oct 1999
  • Posts: 14687
  • Location: London
Reply with quote
Post Posted: Wed Jun 14, 2017 10:16 pm
I have a Master System palette file which I can apply to any true colour image, ignoring palette count limits. You can also posterize to 4 levels for the same effect. However, as mentioned above you will do better for a game if you pick your palette manually (maybe starting with an automatic reduction as above) and then draw using it. Automatic depth reduction will always be worse than manual pixel drawing for sprites, RGBQuant is a good option for approximating true colour images (photos).
  View user's profile Send private message Visit poster's website
  • Joined: 25 Feb 2006
  • Posts: 863
  • Location: Belo Horizonte, MG, Brazil
Reply with quote
Post Posted: Wed Jun 14, 2017 10:37 pm
eruiz00 wrote
It is a javascript tool? Or a php one


It's pure client-side JS.

eruiz00 wrote
I really liked rgbquant idea but have not tried to integrate into workflow (and being a javascript tool, have my doubts.... could work with nodejs or node-webkit?)


The current version stil has some slight, easily removable, dependancies on the DOM, so it could probably work on vanilla Node.js as long as some slight modifications are made; it also should be work on node-webkit (would be a bit hacky, but should take less work than pure node).
  View user's profile Send private message Visit poster's website
  • Joined: 05 Sep 2013
  • Posts: 3762
  • Location: Stockholm, Sweden
Reply with quote
Post Posted: Thu Jun 15, 2017 7:57 am
eruiz00 wrote
Yeah! Sorry sverx. 6 bits.


"posterize" to 2 bits per channel, this will reduce the image to the 64 colors that are available on the SMS. But then probably your image won't fit into a single 16 colors palette... but if it's using less than 32 colors you might be able to split the image in parts and use two palettes. It isn't easy and -AFAIK- we have no tool to make it automatically. Might be another feature request for a newer BMP2Tile-like tool, as Maxim already clarified he won't add more features into it (and I understand his point, also!)
  View user's profile Send private message Visit poster's website
  • Site Admin
  • Joined: 19 Oct 1999
  • Posts: 14687
  • Location: London
Reply with quote
Post Posted: Thu Jun 15, 2017 8:46 am
Converting true colour images is a surprisingly common thing people want to do (it was my first step in coding for the Master​ System) but at the same time it's quite unimportant for game artwork...
  View user's profile Send private message Visit poster's website
  • Joined: 30 Jun 2016
  • Posts: 194
  • Location: Melbourne, Australia
Reply with quote
Post Posted: Thu Jun 15, 2017 8:53 am
Any image complex enough to bust over 32 colours will likely bust over the VRAM capacity too.

If I've managed to accidentally do so while working on full-screen cartoony pixel art?

I daresay any conversion would probably look better with hand-drawing a conversion of an image.
  View user's profile Send private message Visit poster's website
Reply to topic



Back to the top of this page

Back to SMS Power!