next »

[lobstersteve]

Hey there!

Does anyone have tips on how to achieve a style similar to this?





What i'm especially talking about are the "dirty pixels". Like, if you look on the wall,
the pixels that are next to each other have a slightly different hue and i doubt that they are drawn one by one.

So..do you think it's some filter done in code? (I code in actionscript) Or are the pictures pre-made with some filter in photoshop? (If so, do you any experience with it?)

[Loop Gain]

Lone Survivor uses pixel bender shaders. The creator discusses how he integrated pixel bender with Flixel in this blog post and gives a high-level overview of how the various effects were implemented in this forum post.

[s-spooky g-g-ghosts]

DO YOU EVEN LIFT?

[lobstersteve]

@Loop Gain: Thx! I won't go the exactly same path as lone survivor of course, but there are some helpful terms.

@s-spooky g-g-ghosts: I'm not an artist and stuff like this is seriously not helpful. Also if that's a shading tool, i don't think that's what i'm looking for. The way for example the walls are colored in, seems way too patternless, like it was made with some noise filter. (I could be wrong though)

[s-spooky g-g-ghosts]

Oh, come on, I'm just messing with you Personally I'd do the entire thing with gradients and then lower the amount of colors (same effect appears in light weight GIFs).

I can't really give the right instruction how to do this in Photoshop, because this is not something I have done before, but I know that for sure you can reduce colors through Save for web & devices... option.

[lobstersteve]

Thx for the feedback.

I don't think it's just filmgrain, although that's a nice addition 

[Trash_Empire]

gradients + hue shifting? I'm not really sure, but this is a really interesting art style that I would like to know more about.

[Nu-Type]

DO YOU EVEN LIFT?

genius hehe. 

[Knives]

I'd probably just do it pixel by pixel It's tedious, but art in general is tedious. Just put on some music or a podcast while doing it and the work goes by rather quickly and enjoyably.

That second one is Etienne Perin's work if I'm not mistaken (beautifully done, by the way!), so he can probably answer your question more definitively. But from what I'm seeing, I suspect there had to be a good amount of pixel-by-pixel work involved one way or another, even if other secondary techniques (like transparent overlaying layers perhaps) might have come into play in order to achieve the slight glare and greenish tint, which I think also contribute largely to the feel of the art.

[s-spooky g-g-ghosts]

I'd probably just do it pixel by pixel

[Whiteclaws]

it kinda looks like lossy compression/dithering shaders with some kind of crt shader ontop

actually, the background looks handpainted, the smoke is a perlin noise with darker points being transparent and a crt shader is thrown ontop

You can just dig the devlog

edit:

Thanks man - I think it's more exciting in motion because you get all the dither patterns overlapping with different colours, the moving fog and the noise and so on.

The way it's done is quite convoluted - it's probably a 8 pass process or something... 

- First comes the fog.  It's a simple Pixel Bender shader (so it runs on its own thread) which scrolls three copies of the same semi-transparent texture at different speeds  It always goes R-L, but nobody's noticed that so I'm fine with it!

- First lighting process is to prepare the virtual lights (the Pixel Bender shader I wrote supports three, one of which is used for the flashlight.)  The scene supports infinite virtual lights, but it wall only render the three nearest the camera, so this bit of code just assigns the properties of the two nearest virtual lights to their two spare shader brethren. This means setting up their colours and attenuation as well as the bitmap mask that's used to draw them, and nice things like glows, flickers and fades. 

- The light shader does its thing and is applied to the main buffer.

- Next is the warp shader, which is in use in the top screen, but probably not doing that much.  It's used to convey general fucked-up-ness.  This has four main parameters - the scratch texture in use (and its position) for old-movie type effects, a desaturation parameter, a blur parameter and TV+magnet-like sin-wave displacement thing.  A lot of the work is done code-side to get an interesting spread of parameters, and not have everything fuck up at once.

- That's then applied on top of the fog/light pass.

- In hi-fi mode (there's two modes, these shots are hi-fi,) two grain textures are applied, but updated at a slower framerate than the game (around 24fps which gives a nice filmy feel without sacrificing the smoothness of the game which is meant to go at 60fps.)  One grain texture runs at the same resolution as the background image, one runs in native resolution.  In this way you get both the individual 4x pixels flickering, as well as the more realistic per-pixel film grain.

- The very last process is to apply the vignette / special texture.  This texture took about two days to get right!  It has a very subtle set of four overlays which are more pronounced towards the edge...  First is a simulation of an RGB CRT, so each 4x pixel is split into a reg, green, blue and 'gap' pixel.  Then there's the scanlines, which are very subtle indeed in this one (don't want to hammer them in every game I make.)  The next step is a vignette, just a general darkening towards the edges, and finally my favourite, which is the weird 'outlined pixel' thing, which you can spot towards the edge- the pixels become more like individual spot of light, like a faulty CRT or something.  Didn't want it all over the image, as it's too strong and distracts from flat areas of colour such as the player's shirt, but I ike the way it breaks up towards the edge.