PCEngineFans.com - The PC Engine and TurboGrafx-16 Community Forum
Tech and Homebrew => Turbo/PCE Game/Tool Development => Topic started by: ccovell on February 21, 2011, 02:12:38 AM
Title: Graphics remapping techniques?
Post by: ccovell on February 21, 2011, 02:12:38 AM
Okay, so everybody knows that the PCE's 9-bit colour space is pretty limited. Especially when remapping photographs or high-colour art, you get banding, flat colours, or have to resort to a high amount of dithering.
Does anyone know of a paint program that can remap 24-bit -> 9-bit (or any other colour space in RGB (non-indexed)) and apply dithering at the same time?
One technique which I've toyed around with in the meantime: (http://www.chrismcovell.com/images/RemapExample.png) (The images at the bottom have been posterized again into the PCE's 8-level colour space.)
Each combination of posterization levels gives a different dithering type, to high dither, dither in dark colours only, bright colours only, narrow dithering bands, etc. There's no perfect balance that I've found, so one has to select the best-looking type for each picture: (http://www.chrismcovell.com/images/RemapExample2.png)
Any other good ideas?
Title: Re: Graphics remapping techniques?
Post by: Arkhan on February 21, 2011, 06:51:03 AM
NeoPaint!
Has tons of dithering modes also. Sierra is my favorite.
NeoPaint is my favorite Paint program, especially for PCX related things.
Title: Re: Graphics remapping techniques?
Post by: ccovell on February 21, 2011, 09:13:45 AM
With all due respect, NeoPaint is a step in the wrong direction. Simplified options, 16- 256- colour indexed modes only: it's for kids.
What I asked about above is not about programs for dithering 24-bit down to 16 indexed colours. There are plenty of those. I'm looking for ways to remap 24-bit RGB down to, for example, 15-bit RGB, or 9-bit RGB non-indexed, and perhaps apply some picture voodoo during the conversion process.
Title: Re: Graphics remapping techniques?
Post by: Arkhan on February 21, 2011, 09:28:20 AM
Oh. I read your post too fast because I was doing something else at the same time.
I'm not really an art person. 16 colors dithered is about all I can manage, so I have no idea. Maybe sunteam_paul knows, hes smrt.
Title: Re: Graphics remapping techniques?
Post by: sunteam_paul on February 21, 2011, 09:33:25 AM
I dunno, I kind of went from Dpaint to Photoshop and am only just getting started on all this mysterious PCE palette stuff.
Title: Re: Graphics remapping techniques?
Post by: Bonknuts on February 21, 2011, 10:31:45 AM
Chris, that's a fantastic method you've got there. I take it that the posterization there is straight, right? How about a weighted conversion to each posterized level? I've toyed with that idea in the past (a non linear rounding scale). It'd be interesting to try that in conjunction with the method you described. Either way, nice job :D Have you tried out Orion's Magictreme?
Title: Re: Graphics remapping techniques?
Post by: ParanoiaDragon on February 21, 2011, 09:11:05 PM
Anyone tried asking Nod or Keranu? Or what about Frag? I saw him on IRC last nite, maybe he'd know?
Title: Re: Graphics remapping techniques?
Post by: ccovell on February 22, 2011, 02:16:30 AM
I take it that the posterization there is straight, right? How about a weighted conversion to each posterized level?
Bonknuts, that's it!!! Regular posterization won't work, so a pair of colour biasing curves has to be created for each image.
Here's a set of curve maps for Photoshop that'll do regular 8-level and 15-level posterization... but also the two 8-level posterizations that'll dither into 15 levels: http://www.chrismcovell.com/data/PCE_Remapping_Curves.zip
Here's a demonstration: (http://www.chrismcovell.com/images/Example-Improved.png)
Title: Re: Graphics remapping techniques?
Post by: esteban on February 22, 2011, 09:25:47 AM
Can you use apply this technique on the same reference photo (of the SuperCD + CoreGrafx combo) for comparison purposes?
Thanks in advance :)
Title: Re: Graphics remapping techniques?
Post by: ccovell on February 22, 2011, 09:54:49 AM
Okay, here are the old methods next to the new (15-level dither) method: (http://www.chrismcovell.com/images/RemapExample2.png)(http://www.chrismcovell.com/images/RTypeNewDither.png)
Title: Re: Graphics remapping techniques?
Post by: nodtveidt on February 22, 2011, 10:34:40 AM
You would have a hell of a time getting that onto the real hardware though. :) The colors are correct but you'd have a murderous time trying to reduce 8x8 blocks to only sixteen 15+1 color palettes. 402 uniques in the entire image, and I couldn't get a 256x224 selection at any lower than around 260 uniques. Even with sprite mixing, you'd be at this for hours... and I know; I've been working with Black Tiger's highly colorful images, which are already designed for the PCE palette limitations, and it can take up to 3 hours to get a single image reduced enough to fit into 16 palettes.
Of course, if you can get this technique to work for actual pics you would use in a real game, it might be a different story. It really depends on the source, and whether or not you want to do color reduction blending (that is to say, combining similar colors without noticeable detail loss).
Title: Re: Graphics remapping techniques?
Post by: ccovell on February 22, 2011, 12:23:54 PM
Naah, this is just a reference pic. And if I wanted to get that much colour in, I'd overlap sprites and BG.
Title: Re: Graphics remapping techniques?
Post by: Bonknuts on February 25, 2011, 04:49:30 AM
Chris, how do I use those files you posted?
Title: Re: Graphics remapping techniques?
Post by: esteban on February 25, 2011, 07:13:36 AM
Chris, thanks for posting the reference pics. Pretty damn nice, I say. :)
If only the cover art for the Ultra Box catalogs used some of these techniques :)
Title: Re: Graphics remapping techniques?
Post by: ccovell on February 25, 2011, 10:52:29 AM
You'll need Adobe Photoshop. Get your image, select Adjust->"Curves", click "load", and change the file extension in the load dialogue to *.amp.
Title: Re: Graphics remapping techniques?
Post by: Vecanti on February 25, 2011, 08:03:01 PM
Realtime 9bit painting
Title: Re: Graphics remapping techniques?
Post by: ccovell on February 25, 2011, 11:36:21 PM
Yes, Brilliance Paint is the program that I routinely use to finalize my hand-drawn / composited indexed bitmaps in 9 bits. It's basically chock-full of options.
Title: Re: Graphics remapping techniques?
Post by: fragmare on February 27, 2011, 08:30:10 PM
Chris, The best method I've found for remapping a 24-bit image into dithered 9-bit color is one you've already discovered how to attain the end results of, but my method might be a bit simpler. Here's what I do in Photoshop...
-First, take the image into photoshop (duh) -Then posterize using 8 levels (9-bit color) -Reduce that image to indexed color using 'palette: exact' and 'dither: none' -Then go back in the history or simply 'undo' until you're back at the original 24-bit image -Now posterize using 15 levels (this gives you 12-bit color, which is 4-bits per RGB color channel. This allows for exactly TWICE the number of colors per channel as the PCE could generate) -Then index that image once again, but this time use 'palette: previous' and 'dither: pattern'
Voila! Then what i normally do is use tilepile.exe to break the image down into 8x8 tiles and then batch convert them to 15+1 colors in Photoshop. The difficult part is palette mapping the image to 16 total background palettes. Tom found a couple programs that do this. The one with the best results seemed to be a program called NitroCharacter from the DS devkit, but it's licensed software only or something. :/
Title: Re: Graphics remapping techniques?
Post by: Bonknuts on March 03, 2012, 08:00:26 PM
I wanted to revisit this topic since I'm writing yet another pic2pce app and want to use this as one of the methods. I get the bias on the 8 level scale and all (thanks for the files, I edited them in a hex editor to get some different results), but for the post about 10+11 and 9+10, what is that in reference too? I only have 15a and 15b for the alts (which worked great).
Title: Re: Greyscale remapping techniques?
Post by: ccovell on March 04, 2012, 12:24:43 AM
The 10+11, 9+10 are posterization levels. I take the same image, make a copy, and posterize each copy using different levels, then overlay a regular 2x2 checkerboard pattern over one image and pick up only the remaining pixels from that image and paste them over the 2nd image (same as the 15a, 15b procedure) Then IIRC, I posterize the lot to 8 levels.
I've been playing around with the PCE palette limitations a bit more too. Legendary Axe II always impressed me in the penultimate level with the large, concrete-ish columns that used about 32 colours with a base grey gradient. The artists did this quite cleverly (although everyone's done it in some way or another) by ramping the R,G,B bits in order of luminosity to make a few more shades in between each grey: Grey1 -> B->R->M->G->C->Y-> Grey2.
If you step this way through all the greys you get 50 shades instead of the normal 8: (http://www.chrismcovell.com/images/PCE50greys.gif)
Of course, the rainbowy pattern is an artifact that can either detract from or enhance the picture. Original low-colour pixel art probably is a better candidate for this rainbowy remapping than are renders or whatever.
Other ways involve using 15 or 16 colours with the in-betweens one hue or a couple. Cyan (http://www.chrismcovell.com/images/PCE16greysC.gif) Red->Yellow (http://www.chrismcovell.com/images/PCE16greysRY.gif)
Some comparisons from pixel art, original by someone (not me.) (http://www.chrismcovell.com/images/pandemic_006.png)
You all can let me know which one is more pleasing to your eye, & with reasons why.
First pic: Using just the 8 PCE greys; 2nd, using 16; 3rd, using 50. (http://www.chrismcovell.com/images/pandemic_8pce.gif)(http://www.chrismcovell.com/images/pandemic_16pce.gif)(http://www.chrismcovell.com/images/pandemic_50pce.gif)
The same with some converted render: (http://www.chrismcovell.com/images/displayhack-sphere-on-plane.jpg)(http://www.chrismcovell.com/images/displayhack_8pce.gif)(http://www.chrismcovell.com/images/displayhack_16pce.gif)(http://www.chrismcovell.com/images/displayhack_50pce.gif)
Title: Re: Graphics remapping techniques?
Post by: nat on March 04, 2012, 06:05:49 AM
For the first set, I like the last one (the one with 50). The first two are too grainy. The rainbowy effect on the third is minimal, and I have a hunch that it would look really smooth on a CRT.
On the second set, I'm really torn. The middle one is by far the worst, but the red/pink/whatever of the third is a little more pronounced than in the first set. That said, the first image of the second set is REALLY grainy, so I guess I'd go with the third pic again.
Title: Re: Graphics remapping techniques?
Post by: Keranu on March 04, 2012, 08:29:11 AM
My eyes are glued to that babe's luscious ass, I have no clue what's being said.
Title: Re: Graphics remapping techniques?
Post by: nodtveidt on March 04, 2012, 09:16:01 AM
My eyes are glued to that babe's luscious ass, I have no clue what's being said.
Glad I'm not the only one. :lol:
Title: Re: Graphics remapping techniques?
Post by: Arkhan on March 04, 2012, 09:36:17 AM
We're talking about pixel art?
where?
Title: Re: Graphics remapping techniques?
Post by: ccovell on March 04, 2012, 10:32:21 AM
Look at the girl's ass. No, not just to gawk, but to appreciate the subtle hand-drawn dithering in the original girl picture. The dithering pattern can be seen more clearly in the 50-colour greys picture as I didn't add any dithering to it from the original picture. Also, check out the interweaving strands in her hair without any Ys-title-screen-style high-contrast lines.
That's pixel art. 8)
Title: Re: Graphics remapping techniques?
Post by: Black Tiger on March 04, 2012, 11:00:32 AM
The third pic of the girl looks best to me, as the extra colors suit the artwork. The second pic of the balls looks best as an interpretation of the original.
Title: Re: Graphics remapping techniques?
Post by: Vecanti on March 04, 2012, 05:29:41 PM
Are those penises behind that ass?
(http://tinypic.com/images/404.gif)
Title: Re: Graphics remapping techniques?
Post by: Keranu on March 04, 2012, 06:03:14 PM
This forum has been penis loco lately.
Title: Re: Graphics remapping techniques?
Post by: ccovell on March 04, 2012, 06:03:29 PM
Of course not. They're dildos.
Title: Re: Graphics remapping techniques?
Post by: Vecanti on March 04, 2012, 06:44:02 PM
Title: Re: Graphics remapping techniques?
Post by: Vecanti on March 08, 2012, 05:41:29 PM
Here's the image using just 16 colors (out of the legal 512 9bit pallete) (http://i39.tinypic.com/op47s3.jpg)
and
(http://i41.tinypic.com/8xn7h1.jpg)
They look so good in color why use B&W :)
Title: Re: Graphics remapping techniques?
Post by: ccovell on March 09, 2012, 12:34:42 AM
Of course, I was talking about techniques to get more shades out of greyscale art, or pictures that are already in greyscale / sepia only ( except I happened to use colour examples). Remapping colour pictures to limited RGB palettes has had enough written about it; greyscale remapping hasn't.
Title: Re: Graphics remapping techniques?
Post by: Vecanti on March 09, 2012, 02:45:51 AM
Of course, I was talking about techniques to get more shades out of greyscale art, or pictures that are already in greyscale / sepia only ( except I happened to use colour examples). Remapping colour pictures to limited RGB palettes has had enough written about it; greyscale remapping hasn't.
Yeah, I was just joking about going with color after I gave up playing with grey scale. I couldn't get anything to look as good as the ones you have. But I have another idea I might try.
Title: Re: Graphics remapping techniques?
Post by: Vecanti on March 10, 2012, 06:08:28 AM
My other idea didn't work as good as yours :) Well, it didn't work at all. I got one close, but it was bad. Though just using the 8 grey colors I did make these. Though I'm guessing the techniques you are trying are to find ways to do more without dithering? Does dithering take up more space mem wise?
PCE 8 color out of 512 on this side ------ > Original JPG on this side (http://vecanti.net/8color/car.gif) (http://vecanti.net/8color/jpg/car.jpg)
Title: Re: Graphics remapping techniques?
Post by: Vecanti on March 10, 2012, 09:51:46 AM
I converted them 512x240 made a slide show using your demo.
http://vecanti.net/8color/slideshow.pce
I guess the dithering loses something at lower resolutions. Duh, I suppose.
BTW, I couldn't compile the Hi-Res Slideshow example with a default install of MagicKit V2.51, it said that batcpy syntax has changed.
This is what is there:
batcpy $0,\ #64,\ $8200,\ #64,\ #30
After looking at the original from teh MagicKit site I removed a value :) And it compiled. That may be why I have random artifacts in that demo. Sadly I know nothing about assembly, but it would be cool to get this slide show working.
Here's what I ended up with that worked. batcpy $0,\ $8200,\ #64,\ #30
Title: Re: Graphics remapping techniques?
Post by: Bonknuts on March 10, 2012, 10:56:36 AM
Your 8 greyscale dither could use some hblur effect :)
Since we're talking about imagine conversions and dither, here's my hblur one
[simulated image of what it should looks like on the real system or emulator that doesn't drop frames] (http://www.pcedev.net/hblur/rb2.png) [what it looks like prep'd and going into the pce code] (http://www.pcedev.net/hblur/rb1.png) [hsync frame 0] (http://www.pcedev.net/hblur/example_robo-0001.png) [hsync frame 1] (http://www.pcedev.net/hblur/example_robo-0000.png)
It's a 30hz pic. Instead of switching between two different dithered pics in vram, this is just a single pic. The upside is vram savings, the down side is that the color depth for RGB is only increased to 12bit(4bit element) from that of 9bit (3bit element) RGB. The original image needs to be patterned dithered into vertical lines instead of XOR pattern. That way each frame *IS* XOR pattern from the hsync shift on every other line.
http://www.pcedev.net/hblur/example_robo.pce Warning: emulators will drop frames now and again, spoiling the effect a little. (I haven't tested this exact revision on the real console, but the previous revision worked fine - so this should as well.)
Title: Re: Graphics remapping techniques?
Post by: Vecanti on March 10, 2012, 11:11:48 AM
Wow, interesting. That's a pretty cool idea/effect. :)
Title: Re: Graphics remapping techniques?
Post by: Black Tiger on March 10, 2012, 11:18:53 AM
I guess the dithering loses something at lower resolutions. Duh, I suppose.
Yeah, the highest resolution used to cover a quarter of an image does a lot to increase the effectiveness of dithering. :P
Here's a comparison of the tire pic to a simple conversion of the same image in the resolution most likely to be used by people developing new PCE games-
I guess the dithering loses something at lower resolutions. Duh, I suppose.
Yeah, the highest resolution used to cover a quarter of an image does a lot to increase the effectiveness of dithering. :P
Yeah, I start to see that when I made the Slideshow demo. But they still look pretty good in the demo I think. But if you keep them at the orignal large size you could use them as a background and scroll around. Make a Zelda game on a tire? Maybe not. :)
Title: Re: Graphics remapping techniques?
Post by: ccovell on March 10, 2012, 11:53:35 AM
320- and 512- resolutions on a TV also sometimes make the dithering look nasty and juddery, ie: the hair on the girl on the Ys title screen. That's why increasing the shades and decreasing the dithering would be a better tradeoff than full ordered or F-S dithering looking nasty on-screen.
Title: Preserving the beauty of Magician Lord
Post by: ccovell on May 04, 2012, 01:34:26 AM
Bump onto a new page... (too many damn pics here!)
Title: Re: Graphics remapping techniques?
Post by: ccovell on May 04, 2012, 01:35:57 AM
Bump onto a new page... (too many damn pics here!)
Title: Re: Graphics remapping techniques?
Post by: ccovell on May 04, 2012, 01:36:22 AM
Bump..
Title: Re: Graphics remapping techniques?
Post by: ccovell on May 04, 2012, 01:36:36 AM
Bump
Title: Re: Graphics remapping techniques?
Post by: ccovell on May 04, 2012, 01:36:55 AM
Bump onto a new page... (too many damn pics here!)
Title: Preserving the beauty of Magician Lord
Post by: ccovell on May 04, 2012, 01:37:12 AM
Magician Lord on the Neo-Geo is a beautiful game. Let's see if -- just hypothetically -- its graphics can be brought to the PCE.
First, I played with the title screen.
Neo Geo original on left. Around 80 unique colours (not counting "Alpha" text). Middle is a simple constraining to PCE colour space. Not bad, but down to 50 colours and it's looking a little like a rotten egg. Right is a touching-up that I did to make the colour balance better and have few or no "lost" colours on the egg, the tree, or the logo. (Twisty thing on the right edge got some colour loss, but who cares?) 58 colours. (http://www.chrismcovell.com/images/MagLord_NeoTit.gif) (http://www.chrismcovell.com/images/MagLord_NeoTit-PCE.gif) (http://www.chrismcovell.com/images/MagLord_NeoTit-PCE-Recol.gif)
Next, I imagined if I ported the game, I'd expand the screen size to something befitting the PCE.
Neo-Geo original. 192 colours. (http://www.chrismcovell.com/images/MagLord_Neo.gif) Simple constraining. Not bad actually. 108 colours. (http://www.chrismcovell.com/images/MagLord_Neo-PCE.gif) Finally, here's a recolouring and re-compositing of all the layers. 123 colours. Not a great gain, but there's less colour banding in several areas. (http://www.chrismcovell.com/images/MagLord_Neo-PCE-Recol.gif)
The final is 352x242 compared to the Neo's 320x224. Well, a guy can dream...
Title: Re: Graphics remapping techniques?
Post by: grahf on May 04, 2012, 02:57:07 AM
The PCE is really capable of some colorful games, isn't it? Too bad we didn't get more Neo ports back then...
Title: Re: Graphics remapping techniques?
Post by: sunteam_paul on May 04, 2012, 05:45:27 AM
Nice! Does this take into account the max PCE palettes / colours per palette limitations?
Title: Re: Graphics remapping techniques?
Post by: ccovell on May 04, 2012, 01:30:31 PM
If remapped to the SGX (as intended) to preserve the parallax, then, more or less.
The pyramids in the sky are sprites, 16 colours each. The instrument panels also would take up a single sprite palette.
The sky/mountains are 32 colours and easily split up into top/bottom halves of 16 colours each. The foreground platforms are 32 colours and could be split up too.
That leaves the statues, etc in the foreground, which use 48 colours and would need a bit of work.
There's actually a middle layer of faded grass and ruins between the FG and mountains, but I don't think that could technically be made to parallax.
[Edit] But if that middle layer is made to slide around below the mountains, it could be part of the same BG layer. (The middle layer of ruins would have to be sprites.)
Title: Re: Graphics remapping techniques?
Post by: roflmao on May 04, 2012, 01:51:04 PM
Wow, that looks great!
Title: Re: Graphics remapping techniques?
Post by: Bonknuts on May 04, 2012, 06:47:39 PM
Quote
The final is 352x242 compared to the Neo's 320x224. Well, a guy can dream...
The NeoGeo's 320 res and 304 pixel res is the same. The 320 mode has unecessary overscan. Anyway, my point is the NeoGeo dot clock is exactly 6.0mhz. PCE low res is 5.37mhz and mid res is 7.16mhz dot block. The mid point between 5.37mz and 7.16mhz is 6.265mhz. So NG dot clock (horizontal width pixel size) is closer to the low res mode on the PCE than the mid res mode. I.e. you could get away without even rescaling, but just cropping a bit.
Title: Re: Graphics remapping techniques?
Post by: Bonknuts on May 04, 2012, 07:19:51 PM
Also:
(http://www.pcedev.net/pic2pce/magicianloard.png)
That image would need quite a bit of editing still (it chokes on my image converter).
Some more statistic of the above image: (http://www.pcedev.net/pic2pce/CCM.png)
Title: Re: Graphics remapping techniques?
Post by: touko on May 06, 2012, 02:13:12 AM