Pixelation
General => General Discussion => Topic started by: Helm on January 01, 2013, 05:55:01 pm
-
Hello, hello!
I've talked a lot about clusters and all my theories and examples involve the new school clean pixel displays we now work on. However pixel art came to be mostly on old bleedy CRT monitors both for computers and - more importantly for us - on arcade cabinets. Many of these CRTs running all day were blown out all to hell. Phosphorous glow would leave red trails after sprites, curvy screens would deform the art, flickery scanlines would change pixel values, and non-standard pixel ratios would squish or stretch accordingly.
We won't be emulating all of these effects, but even at the best of times, The artist would have to live with phosphorous glow, scanlines and different aspect ratios.
What I want you to do is take a look at Capcom arcade classic, Knights of the Round (http://youtu.be/4bEokVIMM8s).
We'll be focusing on the Arthur sprite in particular
(http://www.locustleaves.com/arthur_original.png)
It's interesting, isn't it? Running on CPS1 hardware. Like all (most?) old arcade cabinets, it has a weird pixel aspect ratio. 12:7, 384x224 pixels, but still stretched into 4:3 screen aspect (something CRTs are a lot better at than modern non-CRT ones). It has a 16 bit color range, which is pretty much limitless for our intents. The original sprite has 26 colors. CPS1 was really powerful, compared to any 16 bit home console! I was wrong, Carnivac below catches the the sprite is 16 colours without the sword! So feel free to work with a 16 color palette just for the sprite either with a weapon separate (good time to make your own completely original weapon!) and its separate weapon palette, or one using the same palette as the sprite for extra challenge!
What I want you to do is to edit this to your heart's content. Change the colors and use whatever shading method you'd like. Just try to keep it within the aesthetic context of the old arcade game as you understand it. For my edit I based my changes on the thought that this game is trying to convey the bright, well-light context of a board game and the characters are pawns on a meticulously crafted battle map. My theory is supported by the in-between level assessment with people shuffling figures about. I took it as an approximation of a paper and pencil and lead figurine dungeons and dragons-esque session. So I tried to color and tint my sprite like someone would paint a lead figurine. Keeping the strong, saturated primaries but adding tints and dirt and stuff. Still not making it more realistic, just adding more clarity and refining the areas of complexity at the same time. I removed a lot of colors, as well.
You can look at my edit after you've done yours by clicking here (http://www.locustleaves.com/arthur_edit.png).
And then you can look at the filtered version (https://dl.dropbox.com/u/15588722/post/cluster2sl_ratio.png). We'll be filtering your edits Pixelation-side as well. Don't bother trying to filter them on your own, the exercise is exactly about not knowing how your art would look on an old CRT first, and then comparing and picking up practical knowledge. I have many notes on what I've learned from comparing the filtered version to the crisp edit, but I'll save them for after we've done a round of edits.
HUGEASS scanline filtered image! (https://dl.dropbox.com/u/15588722/post/all_scanline2.png)
NEW AND BETTER SCANLINES (https://dl.dropbox.com/u/15588722/post/all_scanline3.png)
-
interesting analysis. Ill be excited to observe your edit and also comparisons on post-process filtering.
After examining the original sprite simply from a palette perspective, im already noticing that one of the first things ill be seeking to do is adjusting values to separate the gloves from skintone. If you are running on hardware that can handle at least an 8 bit sprite, it seems to gain very little by needlessly sharing such values so heavily, particularly when the darkest value offers inadequate contrast to differentiate proper depth and distinction.
One thing ive learned that i really dislike about capcoms 90's games in their spritework was the need to 'shift' hues (particularly skintones) that would suggest a magenta-like atmospheric ambiance. Ive become much more fond of skewing towards a more natural blue ambiance, 'shifting' hues essentially in the other direction. Ill be adjusting my palette immediately to reflect that.
-
I always assumed weapons in these sorts of games such as that sword he's holding, was a seperate sprite with it's own palette. Maybe I was wrong then.
I just checked by removing the sword and the knight alone is 16 colors which seemed right. If I was to do this I would probably do the same. 16 colors for the guy but then I'm trying to keep most of my sprites 16 colors or less to get better at palette usage.
-
Carnivac might be right. I think the CPS1 can not do more than 16 colours per sprite.
Edit: Checked. Yeah. 256 sprites total, they are apperantly 16x16 and can have 15+trans.
-
that does make a lot more sense. CPS1 was a relatively older board compared to the newer fighting/action games produced by capcom.
in that case - it would also stand to reason that there is probably little value in editing this sprite as a whole considering the tech involved in combining the two sprites to be one image - where palette is undoubtedly an important aspect of the exercise. Perhaps create a new template to work with from which the sprite and weapon are separated? or at least set some base level of common understanding that the weapon palette must maintain unique from the sprite palette and the sprite should not go above 15 non-transparent colors (same for the weapon).
Good catch Carnivac.
-
Argh and here I just finished my edit, reduced the overall color count to 13, raised the contrast and tightened up some clusters, while trying to retain the original look aside from making the face more menacing.
(http://i.imgur.com/W4Sd7.gif) (http://i.imgur.com/Az630.png)
so if I change the sword-palette to a completely new one, that has less than 15 colors it should be ok?
-
(Disclaimer: Haven't been following or studying the pixel cluster theory development so my edit probably does not follow the theory at all. Also haven't pixeled anything for a while but this was fun and a welcome distraction from drawing naked people.)
Kept all the original colors as they were. My goal was to improve upon the volumes and the textures of the original:
(http://www.dennisbusch.de/shared/drawings/arthur_edit_dennis.png)(http://www.locustleaves.com/arthur_original.png)
-
Carnivac might be right. I think the CPS1 can not do more than 16 colours per sprite.
I actually got something right? Am amazed. Was oddly coincidental because for last few days I've been designing some sprites that are 16 color and then have a weapon sprite overlayed with it's own palette (I say it's own, but it can reuse colors already present in the image but point is it's a seperate sprite from the warrior and niether exceeds 16 colors). I just thought old arcade games did the same partially for palette reasons but because it's more practical to have a weapon as a seperate sprite especially if there are a selection of different weapons held the same way.
-
Good catch! I have amended the original write-up with new guidelines. I will also edit my edit though I'm fairly certain the sprite I've done on its own isn't hard to get to 16 colors.
-
(http://i.imgur.com/xP09b.gif) edit:(http://i.imgur.com/vnvm2.png)
-
eesh man kinda sucks to post right after cure, heh. This one i found quite challenging and still am not happy with the readability.
(http://spriteart.com/edit/KotR1B.png)my edit (http://www.locustleaves.com/arthur_original.png)original
-
Wee, very cool exercise :)
(http://i834.photobucket.com/albums/zz263/ErekT_Pixel/KnightsoftheRound_org.png)(http://i834.photobucket.com/albums/zz263/ErekT_Pixel/KnightsoftheRound2.png)
-
Made an edit of my edit, reducing the total color count to 16 and tweaking some pixels, also changed some colors. Kept the chain-mail look of the first edit.
(http://www.dennisbusch.de/shared/drawings/arthur_edit_dennis2.png)<-2nd edit (http://www.dennisbusch.de/shared/drawings/arthur_edit_dennis.png)<-1st edit(http://www.locustleaves.com/arthur_original.png)<-original
-
(http://dl.dropbox.com/u/27095659/alteredbeastman.gif) :-\
-
Beside the flaming sword, I like your take on the colors the best so far, Reo.
-
i quite like the flaming sword actually.
-
Everybody's done some tremendous stuff. Once Ptoing's around we can get everything filtered and compare and learn in that context. I'll have words for most edits after that if you'd like them. And obviously, go right ahead and critique each other / me when we've got everything filtered.
-
I will perform scanline magic on these sometime tomorrow.
-
st0ven: Damn that looks nice! Both this one and the Altered Beast dude have a nice, chunky, angularness to them that is very pleasing.
-
15+trans. Noodled around quite long on this. I am not used to sprites anymore, what with doing mainly background stuff. But I think it came out solid enough.
Colourwise I unified the greyish ramps for broader range and ramped the darkest brown a bit more to red to go into the cloth colour. Nothing special.
(https://dl.dropbox.com/u/15588722/post/cluster2.png)(http://www.locustleaves.com/arthur_original.png)
-
I tried something very different, using backlighting.
(http://i.imgur.com/zTwml.gif)
I imagine it being used in a very different art style, silhouette-based, something more asian.
(http://i.imgur.com/YPSAP.gif)
Hope it can help you guys to see this exercice in a total new way. I personnally find your sprites
are all very similar in terms of color / spirit, as if you were trying to fit it in the actual game. Obviously
the sprite is just a quick test, it has so many flaws.
-
alot of these are really great, but heres my humble attempt
(http://imageshack.us/a/img716/9018/clusterstudy.png)
edit: hmm this was kind of fun, maybe later Ill do another that deviates more from the original style.
-
Yeesh, where have I been? Here's my run, a more drastic edit than the first activity's.
(http://i.imgur.com/2Ik70.png)
Things added to the design for contrast/readability, the borders on the gloves and loincloth for example.
The pose was tweaked, mostly the left leg. The curve running through the left shoulder to the bottom of the loincloth in EreKt's edit provides a good dynamic, was subtler there, but it still did wonders. I attempted to add this to my edit.
More light on dark contrast--see elbow on torso, as in st0ven's edit. Cast shadows reduce the "forced" quality of it while acting as contrast areas themselves.
Color reductions were done while retaining the palette, which was very arcadey, not much hue-shifting--the creative reusage of colors, and the shifting that resulted because of it here and on other edits, not as much, but the sword on this edit does indeed use the same palette as the sprite. Grunge was added to the sprite, the sword especially but it could be too edgy (pun intended). Keeping outlines and borders defined was one intention of the color reduction and the edit altogether, so colors close to black were removed.
-
a bit rough, but heres a second go, inspirted by reo's. I gave him some kind of street fighter hair do
(http://imageshack.us/a/img28/374/cluster2.png)
-
no idea what this thread is about :crazy: just saw some coool edits here especially pistachio's :y:
(http://i.imgur.com/PUlzt.png) :-)
-
(http://i.imgur.com/8DWKS.png)
Helm, doing this is a lot of fun! I hope we continue to do this. :y:
-
(http://www.locustleaves.com/arthur_original.png) -> (http://i.imgur.com/UXqcH.png) :-\
Will probably look weird in proper aspect since I partially changed the width of some parts.
-
(http://img442.imageshack.us/img442/6853/arthurlachieedit.png)
Uh, just throwing ideas...the head felt very ninjafibile...
-
Can't wait to see all the great edits in their emulated filtered appearance.
(although Helm said not to bother filtering our own entries I could not resist playing with filters in PSP8 after my 2nd edit: spoiler (http://www.dennisbusch.de/shared/drawings/arthur_edit_dennis2filtered.png))
-
How do you apply the scanlines?
I really like stoven's edit. I think Im going to study his, and his from the other thread and do another attempt later.
The contrast in dex's and mr beasts are really good too, Im trying to get an effect like that.
-
Had no time today for that. I just do some photoshop fudge. I can go throught it when I post the stuff I guess.
-
I did another one. This time I tried using the pallete from the other cluster study sprite, but added a few more too. I think its 12 colors total
(http://imageshack.us/a/img812/5860/cluster3.png)
-
Had myself a second go. The fleshy colors looked pretty drab so I tried to make em more interesting. Less colors means more interesting colors usually I feel, so ended up bumping down the palette to 10+trans from the earlier 14+trans. Added more contrast to the legs too.
So many great edits posted, lots of stuff to learn :) I'm tempted to make a completely fresh one now.
(http://i834.photobucket.com/albums/zz263/ErekT_Pixel/KnightsoftheRound3.png) -> (http://i834.photobucket.com/albums/zz263/ErekT_Pixel/KnightsoftheRound4.png) -> (http://i834.photobucket.com/albums/zz263/ErekT_Pixel/KnightsoftheRound5.png)
EDIT: Er, he needs a nose I guess.
-
CHECK ORIGINAL POST FOR SCANLINE LINK!
-
(http://1.bp.blogspot.com/-26cl4nNzPlI/UOcizPqxf-I/AAAAAAAAFZg/UfyuAkSuh9I/s1600/knight.png)
-
wow guys check out what I found
(http://i22.photobucket.com/albums/b340/baybaybom/KingArthurBoys_zps1d61a764.jpg)(http://i22.photobucket.com/albums/b340/baybaybom/knights015-290x169_zps70f0fe3c.png)(http://www.locustleaves.com/arthur_original.png)
full size painting (https://farm3.staticflickr.com/2086/1929922013_732c28304d_o.jpg)
Doesnt the guy to the right of the painting look a lot like our Arthur?
Turns out it comes from a bunch of illustrations by N.C Wyeth for a book called "Boy's King Arthur"
(http://i22.photobucket.com/albums/b340/baybaybom/193px-Boys_King_Arthur_-_N_C_Wyeth_-_p162_zps1c362811.jpg)
https://upload.wikimedia.org/wikipedia/commons/8/8d/Boys_King_Arthur_-_N._C._Wyeth_-_p162.jpg
(http://i22.photobucket.com/albums/b340/baybaybom/194px-Boys_King_Arthur_-_N_C_Wyeth_-_p130_zps20f88194.jpg)
https://upload.wikimedia.org/wikipedia/commons/e/ed/Boys_King_Arthur_-_N._C._Wyeth_-_p130.jpg
(http://i22.photobucket.com/albums/b340/baybaybom/191px-Boys_King_Arthur_-_N_C_Wyeth_-_p4_zps965dfe7b.jpg)
https://upload.wikimedia.org/wikipedia/commons/c/c0/Boys_King_Arthur_-_N._C._Wyeth_-_p4.jpg
These all have a weirdly sidescroller perspective and a pretty similar atmosphere to the game. I think these are pretty good basis to give a painterly Arthur sprite a try for anyone who wants to :p
Here's the full collection of illustrations from the book.
http://animationresources.org/?p=6438
https://commons.wikimedia.org/w/index.php?title=Special%3ASearch&profile=default&search=boy%27s+king+arthur+wyeth&fulltext=Search
EDIT: Here's some more NC Wyeth stuff
https://pinterest.com/arthuritis/artist-n-c-wyeth/
https://secure.flickr.com/groups/wyethfamilyartist/pool/with/1929922013/
Man this thread launched me into researching arthurian art and history...fun fun fun
-
Alright, let's talk, now that Sven has kindly provided a scanline version of all the edits.
My own edit: It's very interesting what scanlining does to highlights in this edit. My AAed shapes turn much softer, the end result is washed. This is not necessarily a bad thing, but it immediately becomes apparent that harder edges for clusters is the way to go. I am surprised at how the scanlines gave my character a mouth, but it's not reliable because the sprite would move up and down and the scanlines would shift. The huse shifts are relatively successful, if anything the wash of the filtering helpts them blend. The least successful part of the edit is the red flap over his groin. The green blobs I introduced do nothing for it and nearly in every edit that area looks much better. I am happy with how the filtering treats the darker areas and especially the re-introduced outlines here and there. The second worst cluster in my edit is the highlight in the shoulderpad, which got segmented terribly and is clearly too strong, or just needed a different shape.
Long's edit: This is a conservative edit that achieves at what it sets out to do. it introduces better light/dark balance and removes some senseless linework in the original (as in the red flap area). Long has better sense than I (and most others in their edits!) to keep those two pixels of index finger in the supporting arm holding the sword, as they add a lot, even if they make the grip look less sure. However the primary arm grip is not a cluster situation that is solved in this edit. Many others try, few get it right. The lined up highlights on the face do not work to the benefit of the sprite.
Dennis' edit: The shoulder pad sadly looks like it's in front of the face, though I like the decorative idea. The chain-mail works remarkably well. The primary hand holding the sword is mushy as hell, though. Unfortunately, the groin edit, though good as a drape study, makes him look as if he has no pelvis and a tiny waist. More work could be done on the boots, more contrast.
Cure's edit: Super-solid, dark and very easy to read. One of my favourites. Better sword guard, too. Face could have used more work, I feel. Very few people gave him an actual face, which was interesting. I like how together this edit looks, like the artist has a clear way to get from a to b. The bicep is a bit bloaty, though. I like the frayed edges of the flap. I disagree with the outline on the sword, I think.
St0ven's edit: Another favourite. Best red flap, very nice idea with the fabric ripple, adds a lot of dynamic flow. The clusters here are delicious. The highlight on his left thigh might be too square there, though. His right arm holding the sword could be darkened to improve depth. This edit is the newest looking one of the bunch, great confidence in *shapes*, not *details*. Wonderful boots, too. The face lacks character, perhaps?
Erekt's edit is top-darker, which is a bit strange. The tapering of the round ends of the gloves and the red flap does not help the sprite's flow. The looser tunic over the belt is a nice touch, with a pretty highlight after filtering. Angular arm holding the sword also seems to curve outwards as the red flap edge. Is this a pattern in your art, Erekt? Pants and legs could have used more love, to make the sprite cohere. Erekt could study Cure's edit.
Dennis' second edit: The yellower highlight was a double-edged sword. Contrast reads better, but the finish now is kind of golden, confuses the materials. Primary arm less mushy for sure.
Reo's edit is very dark and comic book-like. It would work in a different game. I look at this and think on how the scanlines at an interesting texture that helps sprites like this, low-dynamic range and dark. Someone could do something with this effect. Wonderful draping and form on his left thigh here. Black sure is powerful.
Ptoing's edit: Check out how the light on the top of the legs in this edit is kind of bloomy. Interesting effect, but in no service to the sharpness of the sprite. Too soft, in general, but very clear to read still. Primary hand seems to have two index fingers. A single pixel edit could balance that. I like the face of this sprite. Baseball bat could use less texture detail and more volume work.
Tim's edit is pretty, but it belongs to a different game. Very interesting however, is what the filtering did to this sprite. I am not sure what happened to segment it so harshly. Thoughts? I otherwise enjoy the light passing through the red flap fabric. I am not sure if that's a practical axe!
Rest tomorrow.
-
Tim's edit is pretty, but it belongs to a different game. Very interesting however, is what the filtering did to this sprite. I am not sure what happened to segment it so harshly. Thoughts? I otherwise enjoy the light passing through the red flap fabric. I am not sure if that's a practical axe!
I agree with you on almost all points you made.
About the filtering, it's due to two things in my opinion :
• My sprite is a lot more contrasted than other, and the lit parts are very thin. I assume the lines cut the sprite much stronger because of this.
• I also added some horizontal texture on the leather, the pants, and the axe is also horizontally blund. Unfortunately I didn't expect this at all and it looks pretty bad actually in my opinion. I might try to redo it later.
About the practicality of the axe, I agree. I made it for the pleasure of creating an irregular object rather than a perfectly straight sword.
Otherwise, I F***ING love Stoven's sprite.
It almost looks like a reduced CG character, very impressive lighting and shapes.
-
Helm, one these games scanlines are reliable. It is not interlace or anything. The scanlines stay as they are. So the mouth thing would work fine.
Also I agree on your crits on my sprite. It looks considerably softer with the scanlines and blur in places. And the 2 index fingers thing also gets pronounced because of the scanlines. Interesting to see the changes to the look in general to all of these.
-
geeze it has been ages since I've posted here.
(https://dl.dropbox.com/u/525856/arthur16.gif)
curious to see what the scanlines'd-ness does to it.
-
WOW! This has been incredibly insightful, and fun! ;D
Here are some general thoughts on some of the edits!
Mine first: I agree my sprite doesn't really fit with the game anymore. After having done about half the work on my edit I glanced at Helms edit ( for less than a second ). And thought it looked different enough from the original that I should just go all out on it, looking at it now I might've been misstaken. I'm generally pretty happy with how my edit performs. As you say there is a pretty cool effect going on. One place where the scanlines seem to have altered the sprite though is the ''folds'' on his right boot. They appear much more uneaven. Some of my AA seem to have rendered pretty useless. As a side note when searching for references for this I found little look in pictures of people holding actual swords in this postition, and turned to baseball instead
(http://www.cobrabrigade.com/assets_c/2009/08/wide.stance-thumb-250x277-10560-thumb-250x277-10561.jpg)
@Helm I'm truly impressed with the face in yours. That is a true eyeopener. It's sort of a sub-pixel effect. There might be a few pixels that stand out other than those you mentioned. Like the pink pixel over his left arm, generally single pixels seem to work against the scanlines . But generally it is one of my favorites. You're always very good at giving your work certain character and atmosphere, 'tis no expection. It also has a fantastic clarity to it which makes it one of the best imo.
@Dennis edit is very interesting, especially the dithered mail. It looks almost like fishscales. It looks really cool when it's horizontal but the effect is lost on the diagonals. Perhaps the angular shape of it make it seem a bit lifeless. Like a statue.
@Cure's edit is also great. And works wonders. It fits into a game perfectly while at the same time looking like it comes straight out of some medievil tapestry.
@St0vens is really incredible. Fantastic clustering. Very elegant solution to the red flap. Looks almost painted rather than pixeled. Even at this resolution!
@Pistachio and @Dex also deliver strong and interesting edits!
It would be pretty sweet if there was some program that would allow you the edit the sprites while seeing a scanlined preview of it. Again great results from this!
-
Dont you guys think you're kinda overdoing it with those scanlines?
(http://i22.photobucket.com/albums/b340/baybaybom/ScanlineWB_zpsf34ffa10.jpg)
(http://i22.photobucket.com/albums/b340/baybaybom/scanlines-orig_zps73e76a60.gif)
from the times when people have experimented with photographing CRTS in pix, it seems like the scanline wouldnt be more than half as wide as the pixel itself, or atleast not as opaque...
I've experimented with this kinda thing a bit and I've tried to recreate the fringing and the rgb offsetting that happened in this
(http://i22.photobucket.com/albums/b340/baybaybom/CrtEmuTEST_zpsc06e6cb0.png)
I can send you guys a PSD of that if you want, but I pretty much just copy the layer 3 times set each layer to a RGB channel and then motionblur it sideways to create the fringing. The motionblur was 3 pixels in this 400% resized image
-
That looks like from a really bad monitor, way fringe.
But yeah, the overall thickness of a scanline should be based on lightness level of the pixels on it. I am kinda trying to emulate that to a degree, but it is not super easy just in PS.
On the C64 for example single pixels or 50% hires dither in dark colours like blue and brown to black will be eaten into significantly by the surrounding black.
And RGB offsetting and all that is not something that is automatically inherent in CRTs, it just happens when the tubes get magnetised or are otherwise decalibrated (tho a bit of it adds to the charm I think)
-
Ended up with 16 colours+trans. Whoops :yell:
(http://i.imgur.com/BH6xy.png)
Legs are different sizes too. Bother.
E; sword hilt is wonky too I think i'm blind
-
Here we go. I came up with a better as well as cleaner scanline process for this. I will go to bed now and hope that I can remember the process of what I did when I wake up. It is a bit more complicated what I did before, but way more accurately depicts glow based on relative lightness.
(https://dl.dropbox.com/u/15588722/post/better_scanline.png)
-
O.O Give us teh sekretz once the activity is done =) awesome job ptoing!
-
NEVAR!!! Actually, I am just starting of doing it, and I think I got an idea to make it even better!
But yeah, I will post a rundown of it in here.
-
How do you apply the scanlines?
My process is probably similar to what everyone else is doing. I first blow up the image by 700x1200 percent (unfiltered pixel resize), then I make a 1x12 image where I fill the lower 5 pixels with black and keep the rest transparent. I then use the 1x12 image as a fill pattern for a floodfill on a second layer in the big image to add the scanlines. Then I add a barrel distortion effect and afterwards reduce image size again, this time with a filtered resize to get some additional blur.
Dennis' edit: The shoulder pad sadly looks like it's in front of the face, though I like the decorative idea. The chain-mail works remarkably well. The primary hand holding the sword is mushy as hell, though. Unfortunately, the groin edit, though good as a drape study, makes him look as if he has no pelvis and a tiny waist. More work could be done on the boots, more contrast.
Dennis' second edit: The yellower highlight was a double-edged sword. Contrast reads better, but the finish now is kind of golden, confuses the materials. Primary arm less mushy for sure.
@Dennis edit is very interesting, especially the dithered mail. It looks almost like fishscales. It looks really cool when it's horizontal but the effect is lost on the diagonals. Perhaps the angular shape of it make it seem a bit lifeless. Like a statue.
Thank you both for those hints. I'll try to make another edit taking those observations into consideration.
I'm afraid I do not currently have any feedback to give because pretty much everyone here is a way better artist than myself and my mind feels a bit blank atm, so my crits would likely end up being inane expressions of deep admiration for what I see without much food for thought or constructive pointers towards what could be improved (I might still try doing that later).
All I have to offer for now is a photo of a real CRT monitor set to 768x448 pixels at 4:3 screen ratio, displaying the edits which have been posted so far:
http://www.dennisbusch.de/shared/drawings/2ndClusterStudyScreenPhoto.png (http://www.dennisbusch.de/shared/drawings/2ndClusterStudyScreenPhoto.png)
That photo might be a useful reference while trying to perfect any digital imagery filtering methods to recreate the effect. I should add, that monitor is about 8 years old and has lost quite a bit of color brilliance already.
-
Dennis: Why did you scale up by 700x1200 percent? That wont give you the correct ratio. You need to scale up 700x900% at some point to get the proper 4:3 ratio in the case of CPS games.
Anyway, what I did to get my scanlines.
- Scale image up 200% with nearest neighbor (NN)
- Make a new layer on top and put in scanlines, OFF ON OFF ON OFF ON...
- Turn off scanline layer, apply gradient map from black to white with smoothness at 0% on the original layer.
- Use this greyscale layer as a layermask on the greyscale, but inverted. so basically white pixels from the original will mask out the scanlines completely.
- Scale up 700x900% NN
- Duplicate a layer with everything you got now and make a greyscale gradient map at 0% smoothness and use it as a layermask on itself so that brighter stuff gets not masked out.
- Merge that layer down into a new layer so that the layermask gets applied.
- Now you have 2 layers, the bottom one with the scanlines and one which you got from a brightness mask basically
- Now apply a motion blur 2 times to the top layer, 14 pixels vertical, 18 pixels horizontal.
- Now scale down bicubic, so that the height of the image is exactly a third of what it was.
- Scale down again 50% bicubic
- Make a new merged layer from with everything and put it on top
- Gaussian blur this layer, do the greyscale gm at 0% again and apply it to itself.
- Set to soft light at like 50% or so.
- Shift around the channels a bit. I shifted the R channel to the right 1 pixel.
Also, updated scanlines with all entries in original post.
-
Erekt's edit is top-darker, which is a bit strange. The tapering of the round ends of the gloves and the red flap does not help the sprite's flow. The looser tunic over the belt is a nice touch, with a pretty highlight after filtering. Angular arm holding the sword also seems to curve outwards as the red flap edge. Is this a pattern in your art, Erekt? Pants and legs could have used more love, to make the sprite cohere. Erekt could study Cure's edit.
Yeah, I tried to fix the difference in contrast and lack of attention to the legs in my second version. But it could use more work still. Not sure which part of the arm you're referring to exactly. The upper arm? The flap curve was a conscious choice but not the arm. The original arm felt too blubbery and too long so I tried to rectify that with an angular shape. But if I bend things in unnatural directions without knowing then that's definitely something I'd like to fix! I don't really see it for the arm tho, can you clarify? And thanks for the feedback, I appreciate it :)
@Dennis: I noticed something that looks like a structural problem with your man's left thigh. The er, bulge in the loincloth just below the belt, the straight angle, and the highlight on the leg leading all the way up to the cloth suggest to me a pole-ish shape that ends abruptly below the belt. It's more visible in the second edition. And maybe the leg could be brought back some more with darker shades? I like how you did the scales and the shell-like shoulder pad. Good stuff.
-
Dennis: Why did you scale up by 700x1200 percent? That wont give you the correct ratio. You need to scale up 700x900% at some point to get the proper 4:3 ratio in the case of CPS games.
At first I tried 1200x700 which looked completely wrong, so I simply reversed width and height and went on with that without thinking about the math behind it.
@Dennis: I noticed something that looks like a structural problem with your man's left thigh. The er, bulge in the loincloth just below the belt, the straight angle, and the highlight on the leg leading all the way up to the cloth suggest to me a pole-ish shape that ends abruptly below the belt. It's more visible in the second edition. And maybe the leg could be brought back some more with darker shades? I like how you did the scales and the shell-like shoulder pad. Good stuff.
Thanks, I'll look into that as well, when I make my next edit.
Meanwhile, I've been trying to emulate a screen effect, using only layers, so it could be used to pixel with a 7x9 brush and see the effect in real-time. A picture says more than a thousand words I guess:
(http://www.dennisbusch.de/shared/drawings/HowToAddScreenEffect2.png)
Ok, some words to go along with that:
There is one layer which contains the pixels themselves (at 700x900 percent scale). On top of that is one full white layer to brighten stuff up a bit, because the next layer, which emulates a black matrix shadow mask and the phosphor stripes, darkens the overall image significantly. Then there's another layer which emulates the blank lines.
After doing this, I think I even for the first time understand why there is a need for "scanlines" or blank lines anyway. It has to have something to do with the shape of the shadow mask in the screen. Thinking about it, if one would not turn the electron beam off at times to make up for the shape of the shadow mask, it would not even be possible to draw a perfect horizontal line. Even with blank lines, some of the phosphor still glows into them, more of it on bright colors because of more electrons hitting it there... hm, don't know if this is correct though, since I'm no screen engineer.
-
@Dennis I think shadow mask emulation is the ideal thing to do so props for that, there's just one thing we need to figure out now, how do we do this without darkening bright pixels as much as dark pixels?. I personally think that's a big part of the difference in authenticity, look at the difference between Ptoing's first and second try, there's a world of difference IMO.
BTW, What's the blending mode of the Shadow Mask layer? it's kind of complicated recreating the shadow mask without separating each channel...I dont imagine how you did it. I had thought of emulating a shadow mask by having a R layer a G layer a B layer, and then setting masks so that each channel goes to the right place in the shadow mask....if you get what I mean c.c
Ptoing, dont you think the whole scanline layer could be a gradient map adjustment layer, which goes from black to a light grey, set only to affect luminance? that way it'll affect the white parts only lightly like we want to, and we dont have to re-create the masked scanline layer every time like you did. That still misses all the blurring and merging afterwards :p
EDIT:About the pose:
(http://www.thehaca.com/essays/newstancepics/VDf.jpg)(http://www.thehaca.com/essays/newstancepics/VDPDrs.jpg) these are the two variations of the Vom tag / "from the roof", longsword stance. That's probably what they were going for ingame...too bad they made it into that stupid baseball stance.
http://www.thehaca.com/essays/StancesIntro.htm here you can see the stance and it's variations in more detail, it's the "From the roof" stance
-
That might work, but I don't think it will give as good results.
Also, scanlines have NOTHING to do with the shadow mask or aperture grille at all. It is just that the beams get spaced out in lowres games.
A better way to do shadow mask stuff is to make a layer which has the shadowmask stuff as cyan, magenta and yellow, and the black bits as white and then set that layer to subtract and you will get proper colour values without extra darkening. You still need to ramp it up a bit usually, you can simply double the layer on top of itself (everything merged) and set it to overlay or lighten or something, play around.
-
I fixed a few things on my sprite which weren't as appearant on the modern pixel aspect ration (I assume that's 1:1?)
(http://i.imgur.com/W2qK2.png)
-
(http://s2.postimage.org/cvuqa95ad/Satsume_Artur_Cluster.png)
i've tried too >.<
-
@Dennis I think shadow mask emulation is the ideal thing to do so props for that, there's just one thing we need to figure out now, how do we do this without darkening bright pixels as much as dark pixels?. I personally think that's a big part of the difference in authenticity, look at the difference between Ptoing's first and second try, there's a world of difference IMO.
BTW, What's the blending mode of the Shadow Mask layer? it's kind of complicated recreating the shadow mask without separating each channel...I dont imagine how you did it. I had thought of emulating a shadow mask by having a R layer a G layer a B layer, and then setting masks so that each channel goes to the right place in the shadow mask....if you get what I mean c.c
What ptoing wrote right after your post would be a good way of recreating the shadow mask in a single layer.
By placing cyan into the position of the red phosphor stripe you could mask out everything which is not red in that position. Magenta on the green stripe to mask out everything not green and yellow on the blue stripe to mask out everything which is not blue there. White into the spaces to mask out everything in the spaces. Unfortunately, PSP8 does not have a "subtract" blend mode so I can't properly test it but in theory it should work well.
The blending mode in my previous shadow mask layer was set to multiply but that's wrong and does not mask out the individual components in any way.
EDIT:
Ok, so I downloaded the GIMP (which supports simple subtract layers) and played around with it, using the way ptoing described to emulate the black matrix shadow layer. The GIMP also allows setting individual gamma correction values per view (which I set to 1.5 in the upper left view here). Turns out it's possible to come pretty close but not quite there with just layers (comparison shot of real CRT included in screenshot). The one thing missing is the over-bright appearance of brights. See:
(http://www.dennisbusch.de/shared/drawings/HowToAddScreenEffect3.png)
-
Your RGB mask looks wonky, with the different sizes of RGB blocks. Also as far as I am concerned, proper emulation of shadowmasks and such is atm not really possible because we do not have high enough resolutions to emulate the analog effects digitally.
Did some fudging around, not feeling it.
(https://dl.dropbox.com/u/15588722/post/rgb.png)
Did these quite a while ago, not feeling that either, and again, you can see that it also is pretty high res.
Street Fighter 2 (https://dl.dropbox.com/u/15588722/sf2test.png)
Dodonpachi (https://dl.dropbox.com/u/15588722/ddpcrt.png)
We need at least 4 times that res I think, to get a good approximation (at the same screensize. Something like a stupidly high DPI like 500 or so, where every pixel we see atm, would be about 4x4 pixels but together the same size as one is now. Then we can speak about proper emulation of this kinda stuff. If you show me something good looking before that, that really looks like a realistic CRT image, I'll be pleasantly surprised.
-
I don't know if I feel like coding this, but I think it would be accurate. Basically, each pixel lights up a number of phosphor dots. Of course, before drawing, each source pixel is separated into it's R,G,B components. The emulated phosphor dots would be images of blurry dots (R,G,B) which are drawn in light/screen mode with some overlap, with extra overbright versions for high values. The dots can be scaled down and drawn at fractional pixels so there's no need to render huge images.
Also, the electron beam is not quite aligned to the shadow mask so there'd be some pre-calcs needed for rows and columns to see which dots are covered (possibly every single pixel could have associated dots and a buncha precalc). It seems like suddenly turning down the intensity of the beam has some tapering, but this could be taken into account during precalc me thinks.
(http://androidarts.com/gamedev/CRT.jpg)
This is not something which would run in realtime of course. More of a filter.
-
Arne, that could work to the extent of looking like a scaled down reproduction, but not like the real thing IRL. Which is what I meant when I wrote we need higher resolutions.
As far as your mockup image goes, that kinda pixel distribution is somehting which computer CRTs had, but as far as arcade monitors go the use the ||| kinda thing. At least I never seen anything else in arcades (apart from some modern ones which use LCDs as well)
Tho that is just a detail.
MAME has a pretty good HLSL filter with a boatload of sliders for things like phosphor decay and even scanline jitter. But even in that, imo, the shadow mask stuff looks ass.
-
At lower rez you're bound to get Moiré, but 320*240 emulation on a WUXGA might look OK. I was more thinking of using it for single sprites and stuff though.
Most people don't seem to use any sort of display calibration in MAME, leaving a lot of games looking quite pastel and strange. Perhaps monitor contrast/saturation was cranked up high, because the shadow mask would dull things down mixing in all that black...? My old Amiga stuff (drawn on a TV) doesn't look odd though.
Slightly on topic this time...
(http://androidarts.com/misc/broadswordbroad2.gif)
-
It is not A LOT of games in MAME which look odd in that way. It is a bunch of old Konami ones and others on the same hardware core. I think it has to do with faulty emulation of the gfx core in that machine than with anything else. The shadowmask or the glass and such do not make things look super different or darker at all. I am sure someone could go and fiddle with that core and get the colours looking proper relatively easily if they have access to some original board to compare.
-
It's in a lot of SEGA games too. When I mentioned the odd looking games to a guy on IRC (iirc, he was peripherally a MAME dev) a while back, he took a look at the games and concluded that the color values and gfx routines really did output what they were supposed to, so it was most likely something with the display hardware. Even the ported stuff, Wiiware and XBLA etc. looks the same kinda wrong. I'm not sure if they also use MAME though.
-
I would not be surprised if they were cheapass and just used MAME. The Neo Geo X just ripped off Final Burn Alpha, so it would not be beyond people for sure.
And yeah, I know it is in quite a few SEGA games as well, like Alien Syndrome for example. Contra is not properly dumped. Alien Syndrome is. One thing which it could be is that those boards have an analog intensitiy resistor or something which is not emulated properly. That is my best guess.
-
But even in that, imo, the shadow mask stuff looks ass.
You can make the HLSL filter use whatever shadowmask you want besides aperture.png, though. Most of this technical talk is over my head. Here's the second part of my critique of what we've got so far.
R1K's first edit: Under filtering, this looks pretty close to the original, besides added contrast as needed. Somehow a bit bland, it seems it could use more definition. Many areas are blobby, blobbier than the original. Some sharp highlights work to the favour of the first sprite. If there's something to learn from the filtering is to not oversoften sprites, I think.
Pistachio's edit: is pretty great. I especially like the legs part, which some dynamic highlights on the thighs, some hue blending (which I'm pretty convinced works better with filtering than with supersharp pixels, which makes me even more surprised the artists of the time didn't use this technique though the demoscene was all over it - I guess the Japanese didn't watch c64 demos, huh?). If anything I would make some areas even clearer and less noisy than in this edit. That angle of the flap of his right boot is too forced, though. And the arm anatomy could use some cleaning when the strongest detail is the elbow. Unless one is avoiding beefcake for a reason, in which case, sure.
R1k's 2 edit: This has kind of a Yoshi's Island vibe, what with the unAAed black in places. It's a very weird clash of styles for me. I know a lot of people didn't take my suggestion to keep to the original's aesthetic as they best see it very seriously, but it also limits what I have to say about these ones.
Batzy's edit: I kind of like it inspite of itself. The anatomy is taken to an aesthetic extreme where it seems like he's grown tumors everywhere which although 'not correct' I find interesting. The face I think is to squashed in there and the kneecaps being the same color as the biceps makes for unfortunate visual confusion. I don't think the tumor-look works well with the share shaded idea, though. Two different tendencies, you should service the one or the other. Also a four finger hand holding that sword, if that's worth mentioning I don't know.
Dex's edit: is my favourite of the bunch. First of all I'm surprised nobody else thought to add a belt buckle because it absolutely helps the sprite. Second, this is the best solution after St0ven's for the red flap, in my opinion. The color identity is strong, the sculpting is miles ahead of the original, the sprite is dark but not too dark, the visual focus is on the sword and the stance. I like the face even if it's a minimal edit keeping close to the original. The kneecaps are some good eye-candy. The fist holding the sword is not solved in this edit, though. Worth taking another look there, Dex. You're also one of the few to add bodybuilder girth on that arm which I don't think the sprite needs, really. More tendon and carved anatomy for Arthur, I would say. The highlight on the shoulderpad (which also god me) is also worth another look, too segmented. Super nice shiny boots too. Congrats.
Mr. Beast's edit: I think this has some unfortunate problems in volumes. None of them look real, kind of flat but uneven at the same time. Dark at places that I don't understand, I would like to see pencil studies of some cups or telephones or shoes or something by you to see if there's a reproducible problem here of if somehow this sprite got away from you. Dig the kickass sword, though.
Lachie's edit: Aesthetically as I said I can't say much because it's not in the spirit of the original game. I'll just note that if you were going for ninja, I would suggest looking at how fabric folds and is lit by a lightsource, because the way you adopted the lights from the arms of the original just changing the hue and said 'that's a fabric'... do not work. On the legs you make an effort to say 'these are puffy pants' but you didn't work from reference to see how they would fold. Also a katana (if you were going for that) has a flat blade.
R1k's 3 Edit: I like this palette much more but I fear it's too unified between flesh tone and pants tone, so it kind of looks like he's wearing just the flap and has unfortunately shaped musculature on his legs. I would keep these things distinct. The face did not survive filtering in a flattering way either. The darkness on his left boot is a nice idea, good volumes that read very well and suggest depth.
Erekt's second edit: I like how Arthur finally has some facial hair here, I'm kind of tickled by that none of us almost thought to fix the disparity between the portrait and sprite of Arthur. I still think some details are too defined and stylized in this, the fingers of the hand holding the dword, the tapered red flap that works against clearing up the shape distinction between flap and legs (could be mistaken for a skirt with a red middle and white sides, for example).
PPD's edit: Is from another game, heh. An awesome game I want to play, but another game nonetheless. I enjoy the simple and interlocking muscle shapes on the arm, this is a very good solution. And again, I feel kind of in love at how dark sprites look with the scanline effect. I really think someone should persue this, if they don't I will. Also nice to see some racial diversity in the mix. Great cluster shapes on his left thigh too. Generally, some nice technique here. Lots of strong diagonals and so on. That adopted two-finger hold of the sword hand could be solved in a better way, though. Also take care of the clusters on his right kneepad, they cand be disambiguated much better. And I would ease up on all these specular highlights. Make your eyes go blurry (if you can, some people can't!) and look how much the sprite is a black blob with oily shines. Do you want this? Even if you do, I would suggest trying to tone it down and have it lead the yes to the jewel on the forehead, the sword most, secondarily on the belt, shoulderpad and kneepads and much less on the shoes.
Xion's edit: I love the color mixing on the pants, although they share with the arms, they're clearl not the same material and therefore the mind makes an automatic distinction. Yours has my favourite sword design/render, eventhough that guard is small for such a big sword, I think. I think the lower legs could use some more contrast, but otherwise one of my favourite edits. A very different but equally interesting solution to the red flap. I think that belt is too loose, but not a big deal. And extra credit for those very interesting detail designs on the gauntlets, they solve a lot of readability problems that I hadn't considered before. I don't particularly enjoy the superjaw but I can see the desire for him to have more personality.
Jeremy's edit: I want to congratulate you for somehow creating what I think is a very possible redraw representation of this sprite were Knights of the Round to have been ported on the Amiga 500 back in the day. Everything from the dark and washed color range to the 'Arthur should have a beard, dammit!' mentality. I Actually think this is my favourite head edit. The legs have unfortunate muscles which you should reference for. I like the ornamental design around the red flap. You didn't solve the fingers holding the sword, but it's a tough bit. Your highlight on the rip of the shoulderpad wors best from the filtered ones. If you spent more time with anatomy, this would be my favourite.
-
I like the character select design:
(http://3.bp.blogspot.com/-I60AMMoYDYA/UOu7rxlFa1I/AAAAAAAAFbQ/VNNo3-BjTfI/s1600/arthur_2.png)
Thanks for the crit Helm.
It's always helpful to get another perspective.
-
Mr. Beast's edit: I think this has some unfortunate problems in volumes. None of them look real, kind of flat but uneven at the same time. Dark at places that I don't understand, I would like to see pencil studies of some cups or telephones or shoes or something by you to see if there's a reproducible problem here of if somehow this sprite got away from you. Dig the kickass sword, though.
This could be caused by the method I use to for shading. I try to find and follow the flow of the shape, this can work quite well in higher resolutions and especially for textures but not so much for sprites. (Basically imagining the shape of a object as a wire-frame out of curves instead of straight lines.)
st0ven gave me the advice to use primitives for shading in this scale, something I've never even considered before and which seems to work quite well, but I still need to experiment with that a bit more.
-
(https://lh3.ggpht.com/-I60AMMoYDYA/UOu7rxlFa1I/AAAAAAAAFbQ/VNNo3-BjTfI/s1600/arthur_2.png)(http://i22.photobucket.com/albums/b340/baybaybom/KORArthur_zpseb191f44.png) =O found some concept art
http://capcom.wikia.com/wiki/Knights_Of_The_Round
-
Oh nice!
I hadn't thought to twist the sword like that.
My blade is maybe too round looking.
Showing the backside of the armor in the armpit was a good call, missed that too.
I tried really hard to make his boots more boot like and draw them different than I normally would.
Personally I don't wear anything with a heel but I notice a lot of shoes have them and its something I omit from drawings unconsciously.
Thanks for posting the concept.
-
I was browsing for sprites I like and for the first time I looked at shin megami tensei sprites
http://www.spriters-resource.com/psx_ps2/shinmegamitensei2/
I post them here because they seemed from what I understand very cluster focused. Much like St0ven's art in this thread and the last. Many enemies in catlevania x/rondo /symphony of the night, wakfu and galaxy fight also aproach what I understand to be cluster focus
-
Yes the SMT sprites are awesome and a definite influence.