next »

[xot]

I didn't dig into your code, but my 2nd and 3rd phases look more different than yours. IIRC, the logic needs to invert between the two. Before phase 3, I invert the actual buffer, then start filling tightest clusters instead of largest voids.

Thanks for the reply. I'll give your description some thought, although it sounds exactly like what Ulichney described. I don't yet see the difference between a void and inverted cluster. They seem like exactly the same thing to me, at least as far as the way I'm measuring them goes. I'll do some seeded tests with both methods and see if the results are actually different. I'm quite happy with the results I already have so this isn't a pressing issue, it's just an odd observation.

[dukope]

• Some good news: My next big post here will likely include a playable build.
• Bad news: That won't be for another month. [...]

Lies.

Fullscreen Looks Terrible

I've been worried about this:

• 640x360 1-bit dithered visuals don't hold up well when stretched fullscreen on a 27" monitor. This is probably the most serious problem facing the game right now. There are a few things to try but nothing's ideal. I'll just power through and ignore this for now.

Couldn't ignore it so I went ahead and tried a few things. These pics are all crops of the full 1920x1080 frame. Click on any one for a full-size version. Scale it up to as close to fullscreen as you can to get the right effect.

Base 640x360 stretched to 1920x1080

When viewed small, everything looks great - still or in motion. Stretched to fullscreen on a huge monitor, the pixels end up so chunky that my eye can't resolve the lines and shapes easily. It's even worse in motion.


Double Resolution

The obvious solution is to just increase the resolution:

Rendered at 1280x720, stretched to 1920x1080

That helps with the chunky pixels but it loses some of the low-res style that I like. The 1-pixel wide lines are now half as thick which feels too thin. The biggest problem though is that it exposes my payless modeling and texturing, especially on the characters. I chose this 1-bit low-res style partially so that I wouldn't have to kill myself on high-res asset creation. So either I up-res all my models and rethink the asset creation or find another solution to this fullscreen problem.


Cathode Ray Tube

Ok, next try. Who doesn't like a good CRT shader?:

Base 640x360 rendered through a CRT shader at 1920x1080

Pretty good. The shader itself is not that great but I'll assume it's good enough for this test. The CRT details, border, and geometry are all full resolution 1920x1080. The blurriness helps join the pixels together so they feel cohesive again at fullscreen. The downfall is that you're looking at a low-res CRT. I personally love this effect in most cases but it just doesn't feel right here. Part of that has to do with the audio, which is realistic and high-fidelity; mixing that with an old shitty monitor feels off. The whole CRT effect is also too distracting IMO. It's hard to describe, but this feels like going too far stylistically by clashing "old computer" with "old ship".


Squares->Diamonds

Right. Now for something weirder. Diamond-shaped pixels:

Base 905x905 rendered at 45 degrees, then rotated back at 1920x1080

Not sure what I was thinking here. This is pleasantly unique and doesn't look half-bad. Vertical and horizontal lines get a nice stippling effect. Overall though, it still feels too rough and also a little gimmicky. Not that the entire 1-bit thing isn't one massive gimmick; this is just one gimmick too far.


Scale2x

Running out of steam. I went back to some Papers Please experiments and dug up scale2x:

Base 640x360 stretched to 1920x1080 using scale2x

Hey not bad. Not great, but I like the mottled look. The scale2x algorithm connects pixels really well so the lines and shapes are much easier to read. I also tried scale4x (just run scale2x twice), but it creates lots of small artifacts that look terrible. I was pretty happy with this and probably could've left it there but decided to go back and borrow some blur from the CRT technique.


Scale2x + Blur


With a touch of blur:

Base 640x360 scaled2x'd to 1280x720, guassian blurred 1 pixel, then stretched to 1920x1080

Ship it. This ends up as a kind of CRT-lite. None of the skeuomorphic business with pixel grids and screen curves but it does feel "old" without being explicitly "computer old".


Done For Now

Not saying I won't go back and waste more time on this later. Hopefully I can be happy with this for now. There's a ton of other stuff I need to do and not much time to do it.

[Scott]

Nice Not sure about the blur. (Only an opinion of course)

I'm reminded of ZSnes. hq2x (or hq3x or hq4x) is also very nice.

[edit] Looked at your Papers Please experiments - I guess hqx doesn't handle dithered images very well.

[HDSanctum]

Blur is too powerful, like the old "Vaseline in my eyes" fxaa look. I'm always a fan of scale 2x / hq2x and the like.

[BachoKiro]

Go with the increased resolution approach IMO. Best looking and easier on the eyes. May be render just the characters differently somehow (lower res?).

[Vanhail]

dukope, I have a simple solution to your problem. Dedicated hardware!

[mike_w]

I actually don't think the double-res one looks that bad on a 27" monitor (which I have). Maybe it's different in motion, but I like the look of it and I can tell what's going on in the scene. I don't enjoy the blurred ones as much by comparison, though I also suspect if I didn't have this initial choice I might think differently. I'm unable to look at the blurred/upscaled ones without comparing them to the original or the double resolution ones (both of which I really like).

[rj]

i literally genuinely think the fullscreen low-res original thing looks best and i'm viewing on a macbook pro 17 inch HD screen

but yeah

i also really do dig the increased resolution one too (of course i would, i'm the Thin Line Master) but i can see where that would be an issue from a timesink standpoint

[Canned Turkey]

What if you just add an options menu with a boat-load of shaders to turn on/off, and just leave the nicest/your favorite one on default. This could also help with people that have older computers that can't run ten different render passes.

[metlslime]

How about not running fullscreen?  Float the game viewport at a size that feels good in the center of the screen, surrounded by black?  The original 128K mac screen was only 9 inches diagonal, at 72 DPI, which is a good pixel density to read shapes.

[dukope]

I mentioned it on twitter, but this fullscreen problem surprised me. Up until recently, I've only been playing the game seriously in the Unity editor's reasonably small play window. It's always looked good to me there. Also in all the screenshots and gifs posted in the devlog.

The problem comes when taking those nice crisp 640x360 black and white pixels and filling your entire view with them. The original Mac Plus monitor was 9". You can't just stretch that to 27" and expect it to be comfortable. Especially (I found) for a 3D game.

Anyways, I most likely won't have a ton of options in the menu for this. I'm not a fan of lots of options in general; makes it harder to develop and maintain. Instead, I'll probably just have two options for fullscreen: normal or "softened".

None of this matters for windowed mode btw. Unfiltered black and white works great as long as the physical size isn't too big.

How about not running fullscreen?  Float the game viewport at a size that feels good in the center of the screen, surrounded by black?  The original 128K mac screen was only 9 inches diagonal, at 72 DPI, which is a good pixel density to read shapes.

Good point. A forced window on a black field would be my first choice. Unfortunately, I learned on Papers Please that players have zero tolerance for black bars. None. I got tons of support requests about this (Papers Please has small but permanent black bars in all resolutions).

Although I may add an option for this too, since I think it will unquestionably look the best.

[happymonster]

Have you tried increasing the resolution and doubling the thickness of the lines whilst keeping the dithering the same?

[Eigen]

I've found the same thing with my game. 1920x1080@3x is not too terrible but above that I'm opting to frame and keep the game content in the center, optionally decorating it slightly.


1920x1080

It may not be perfect but it's better than playing it in windowed-mode because the background is solid and doesn't take away the focus from the game.

edit: I noticed just now you talked about that two replies prior. I'm blind, sorry

[Quarry]

Maybe a subtle decoration frame around that?

[nenad]

Hi dukope. Very nice concept.

I'm a visual artist and big fan of those early mac dithered pictures.
I just wanted to write down a couple of thoughts regarding dithering. Maybe it could aid optimizing away some of the issues. This is strictly from perceptive/visual standpoint.

My main observation is - the more "photographic" the source, the more pleasing its dithered version will appear. Perception tends to be forgiving towards dithering artifacts if the image "underneath" is a good photograph (with full tonal range and good illusion of form). No wonder Wikipedia examples use a quality photo of a sculpture.

This realization may become critical when dealing with animation of dithered images. It's almost impossible to avoid flicker here, since large number of pixels go in and out of existence each frame. Things get even worse if a lo-res animation is blown up to fullscreen. A lot of screen estate then changes from zero to maximum intensity or vice versa between frames, resulting in onerous visual sensation.

To counter this unpleasantness and to trick the eye to keep the - so to speak - visual suspension of disbelief going, I think it's important to make the source image as cleanly photographic as possible. Please note that by "photographic" I primarily mean good light/shade consistency in depicting 3d forms. Forms itself can be stylized to any degree desired. In fact it may be better to avoid excess detail that doesn't add to form legibility but instead just contributes to random flicker.

You'll probably hate me for saying this but I think the stylization you opted for goes into opposite direction - contours and ramped shading minimize photographic consistency and thus push the flicker into the center of attention.


So in regard to all this, one of the visual strategies that may be worth looking into could consist of the following:

- get rid of contour lines and ramped shading (don't shoot me please . I understand it's a nod towards specific type of retro aesthetics but following what I've written above I feel it could be a serious deal breaker when animated).

- keep the geometry simple but well lit, with contrasty AO and light maps that strongly emphasize form and volume. Make sure that most of the vistas encountered by the player consist of the full tonal range.

- get rid of textures that are not clearly readable when dithered (probably most of the textures)

- use two colors other than black/white to lower the overall contrast. Color coding could even be employed as a narrative device, changing in different areas or different game stages.


I put together a quick example. This was rendered directly from Maya with a makeshift 4x4 order matrix shader (didn't have time to make the full 8x8 Bayer or pseudonoise, which would undoubtedly look better). To me it looks almost bearable stretched to fullscreen without interpolation.




Just thinking aloud...

Cheers!

[Thecoolestnerdguy]

This looks/sounds so great!

It could be my crappy monitor, but all scaling methods looks great for me.

Oh, and I prefer the blue noise dithering.

[azdak]

Ridiculously excited about this one. I'll throw my vote against the blur, though, too- seems to just undercut the Apple II-ness of the concept, without adding much. I'm guessing it must give a nice effect in motion? (Tough to tell just based on the static screens) Maybe try a vignette blur?

[dukope]

I'm a visual artist and big fan of those early mac dithered pictures.[...]

Whoa big post! Thank you for the suggestions. You're right about the problem with blinking pixels at such large sizes. The frame-to-frame coherence is pretty bad when the pixels are bigger, especially with sharply contrasting shades. There's also the problem that the whole dithering mechanism falls apart if things are so big that your eye can't combine neighboring pixels into the desired shade. So my solution is almost the opposite of yours - to reduce dithering as much as possible. Shape-wise, things are pretty clear with just the lines:

Lines only.

This is easy on the eyes at any size, especially in motion. Dithering improves the look but makes it harder to read, so the goal is finding the right balance. Your sample image looks cool at small sizes but in fullscreen I need to move back from the monitor to parse it. Adding another shade as you've done would let me dither less, which would be nice. But I prefer the challenge of making this work with just 1 bit.

Your other suggestions are spot on and mostly in effect: Simple geometry, Textures tuned for the dithering, and lower contrast colors.

Ridiculously excited about this one. I'll throw my vote against the blur, though, too- seems to just undercut the Apple II-ness of the concept, without adding much. [...]

Thanks! The fullscreen blur is really subtle in practice. It's a half pixel gaussian blur and just adds a slight softening or "oldening" effect. Most monitors/video cards do their own bilinear filtering when upscaling to fullscreen anyways, and this is just a little stronger than that. You'll be able to toggle it for the first demo and I think you'll be surprised how much more comfortable it is in fullscreen with the softening.

[dukope]

"Gameplay"

Imagine a zippo-like *chlink* sound when opening/closing.

[RujiK]

Love that watch transition! Is that some form of simplex noise or is it just an image you increase the threshold on? Also I too dislike the blur, but if it is only a half pixel it would probably look much better.