Search Unity

  1. Megacity Metro Demo now available. Download now.
    Dismiss Notice
  2. Unity support for visionOS is now available. Learn more in our blog post.
    Dismiss Notice

Trying to find a good pixel art style

Discussion in '2D' started by imaginaryhuman, Jan 10, 2018.

  1. imaginaryhuman

    imaginaryhuman

    Joined:
    Mar 21, 2010
    Posts:
    5,834
    I'm trying to settle on a pixel art 'style' for a 2d shootemup.

    I'm interested in particular 'uses of the medium'... or thematic styles, which could pervade all of the graphics. My display is a chunky pixel 640x360 resolution with a limited palette (not sure how limited yet). I've seen some games which are strict on the palette restrictions, number of colors, color accuracy/subtlety etc.

    Here are some examples of what I've found so far, but please if you have any other distinct styles you know of, post them below.

    I notice a lot of use of rectangles and also thin vertical and horizontal lines. This seems to go well with the 'pixel' theme and is 'natural' to the medium which I think looks quite good. Things are forced into a grid kind of format even if they would normally be more rounded or irregular normally, e.g square rocks, stick-figure legs, etc.
    15acfd48fb23abb5e7d0c6e9267909a7--art-styles-visual-arts.jpg
    a5c87dba5babb7526a4fcdfa630a471e.jpg

    Here is a style where there's a mix of horizontal and vertical straight edges, but also diagonal edges and triangles.
    6108323eaf7e637f545c7d903f9e002e.gif

    A look which uses a lot of horizontal lines
    089dd26d1132100adef3ea114b52d5d5.gif

    A more painterly kind of look where major features have at most 1 or 2 colors rather than 3-5, the blocks of color are more 'solid' almost like they would look if made with plain geometry and no texturing. I guess the absence of 'texture' is the key here?
    0c7b7bd6de1525cecb762d4f3de34ea1.gif
     
    Last edited: Jan 10, 2018
  2. imaginaryhuman

    imaginaryhuman

    Joined:
    Mar 21, 2010
    Posts:
    5,834
    Some more...

    Again here there's a lot of use of the 'rectangular enforced' kind of look. Hardly anything round or curved. Not anatomically correct at all but there's a lot of consistency at various levels. Also the use of muted or at least less saturated colors, and colors you would not so often see like browns.
    347ac97cdca3c73088e3219f853fd583.jpg

    This one is doing several things. I notice there are horizontal, vertical, and also some diagonal lines. The shapes tend to lend themselves to what is 'natural' to pixel art, certain 'nice' looking slopes, vertical lines, rectangles, single-pixel lines, but also accented with a few more organic parts.
    21c8e71c3b846a47267ee8acd0218276.jpg

    Mainly liking the color scheme here and the limited palette.
    23a6f97855bd96bb2b31d6d2181ae43d.gif.gif

    This one... hmm... every part of the image is quite 'detailed' in that it seems like its made of many small parts.. look at all the little details in the greens and browns. Clouds are unusually detailed. Nothing is made of anything 'large', it's all made of small pieces. The details add 'texture' without being per-pixel texture per-se, and also it's a form of exaggerated dithering.
    9f9a88ebf94f14e1485acc028d747dcd.jpg

    Old-school, not really a fan - cartoony outlines, gradients, a bit garish color palette. Reminds me of the early pc VGA days, minimal colors, higher resolution, lots of dither.
    bf1f4787b5d1910dfc2d36c367bdc120.jpg
     
    Last edited: Jan 10, 2018
  3. imaginaryhuman

    imaginaryhuman

    Joined:
    Mar 21, 2010
    Posts:
    5,834
    Some more...

    Noticed this in a few games, like ridiculous fishing... high-res triangulated display. It's not typical retro at all, but a new twist in a 'cellular' look. I think it can look nice - unique anyway, but not really a pixel-art feel.
    2a2d2bf44a784ac0d6b7e6093c717053.jpg

    This from owl boy (i think)... highly detailed "realistic" look, 3d perspective, detailed lifelike trees, realism, etc... still pixel-arty but more lifelike. There's fairly realistic lighting/shadows also.
    c46636b29f1e257ec04b0f0643bbfbc8.jpg

    Not sure how to explain this.... organic? natural? not really many hugely strict rectangles but still mostly rectangular but 'rounded off', plus natural impurities. Kind of like an 'eroded' rectangular style.
    07a14e9fd4eb15f32a30b20ba3f53288.jpg

    Another example of the stick-figure-ish strict adherence to pixel grids, lots of vertical and horizontal rectangularity, contrasted with really obvious pure-circular parts.
    db09e3908151578928fe53696851e39e.gif

    I like the palette here. I like also that it's maybe a bit higher-res but you can tell it's pixel art. Again like the fish pond, there are fewer levels of brightness to a given color, like 2 or 3 at most, so areas are 'flatter' and there is much less texture. I kind of like the cleanness of this. Its also a bit more cartoony? It almost looks like vector art with no antialiasing and in low resolution? Edges and curves are all quite smooth and ideal. It has that 'clean vector art' non-textured sort of look but pixellated at the same time. Also not many straight edges.
    048210b8a8ba6e6f8fe2c4d9ebc84280.jpg
     
    Last edited: Jan 10, 2018
    StinkyDubeau likes this.
  4. imaginaryhuman

    imaginaryhuman

    Joined:
    Mar 21, 2010
    Posts:
    5,834
    Some more...

    Another example of the 'flat textureless' style with only 2 or 3 levels to each color. Kind of suggests almost a bit of 'impressionism'?
    081dc35b43fafab3c4d7310e4502aa1e.jpg

    Titan Attacks is an example where the pixelized-look is played upon... the sprites are made from exaggerated large pixels. Here also there is a strong outline and the pixels are quite chunky. Background are also pixelated and use some gradients. Also this shows a ‘glowing’ effect on pixels. The game isn’t strictly compliant to pixelation though because sometimes there are search lights or enemies who are hit who go onto an angle and are obviously higher-res. This is where the display itself is high-res but the art is low res and so when stuff rotates, it has smooth edges rather than chunky pixelated edges - sort of a modern take. Steredenn does this too.
    44A6DBBF-EEC9-4AEC-AED0-D1F46221AF65.jpeg

    A scene from Hydorah... noticed the screen effect shader emulating the old tv scanlines. Fairly limited color palette but possibly not strictly true to the hardware of the time, maybe leaning more towards the 16-bit/24-bit or 256-color era.
    68E11282-7E00-44F5-8FC6-D45738473D41.jpeg

    Another example from titan attacks. Use of glows, transparency, chunky yet smoothly rotated elements, exaggerated blockiness etc.
    5F004B9E-7A41-4A63-9B2C-7A9F9C3C4DD4.jpeg
     
    Last edited: Jan 10, 2018
  5. imaginaryhuman

    imaginaryhuman

    Joined:
    Mar 21, 2010
    Posts:
    5,834
    Here’s a few more I spotted in the wild.

    Firstly, I’m pretty sure the colors used in this palette are much more than 16 and probably upwards of 64-256. Also the precision of the colors - the subtlety, is clearly to me colors you would not find in the 8/16-bit color days. This is more in line with when 256-color palettes and millions of colors came about. But I do see some games doing this where it’s pixel art but the palette is more refined. And yet, it’s not using absolutely every color imaginable, there are still limits. I think it makes it somewhat more attractive? Some of the strictly limited e.g. 16-color or 64-color palettes can be a bit garish or over-satuated or not harmonious?
    E02566DA-4209-486A-BD30-9FD1A5A51B6E.jpeg

    This one seems to be doing a ‘thing’ with a highly stylized dither. Rather than orderly or random or flloyd types of dithers, the dithering becomes part of the art, with many rectangles and patterns, a play of dark over light and light over dark, small rectangles etc.
    5090406C-7CC5-411F-A909-56E326F03A20.jpeg

    This example reminds me also of the days when early consoles and amiga etc were moving into 24-bit color capabilities, but still with only the ability to use at most 256 colors. This is probably less than 256 I think, but graphics in this style took on this kind of ‘look’ with ‘nicer’ more refine colors and objects getting more levels of brightness. It’s also I think a not-quite realistic style, where the rocks and such tend to be made to look attractive more than life like. The higher color resolution looks "prettier"? Uses of pinks/purples/pastels etc.
    3C0CD199-488E-41C4-87E6-F8EA82CD83CE.jpeg

    A different example I found of a dithering style, here only ordered dithering or cross-hatching is used, partly mixed with some horizontal banding between levels. It’s a cleaner look, and it never mixes more than 2 colors in a dither. It still comes across as ‘flat’.
    E51757BD-C007-41F9-9106-5AEDDB548381.jpeg

    Here I think I’d describe this as... detailed? Lots of small ‘gritty’ details, very organic, no real sign of major rectangles anywhere, somewhat more organic of a feel. Again using single horizontal lines as a form of dithering. All the little details gives kind of a... rough-around-the-edges or frayed or "less defined" look.
    2916EC8A-4471-4888-A74C-13D36F50F371.jpeg
     
    Last edited: Jan 10, 2018
  6. imaginaryhuman

    imaginaryhuman

    Joined:
    Mar 21, 2010
    Posts:
    5,834
    And some more, why not.

    Rather than flat-ish objects, here the style is much more three-dimensional (though not "realistic" 3d), and somewhat realistic, coupled with a limited palette and some dithering. Everything is stylized. Even the rock edges are idyllic looking. I notice the use of dithering more than texturing, like the big character’s shoulder, yellow into dither into orange into dither into red. It’s also a bit two-tone... gray vs orange. I think this is more akin to the early 16 or 32-color palette displays and where also the color resolution is limited, e.g. an 8 or 12-bit palette.
    759F9D85-604E-4CB8-85A0-F00E4CD9DEF4.jpeg

    In this picture I noticed again the use of loooong horizontal and vertical parts. The tall trees, the long pier, the wide flat steps Again a contrast between lots of rectangles,and some organic curvy parts. What I also liked about this is the kind of ‘highlights’ along the tree trunks and the steps and edges of the grass and patterns in amongst the rocks like some kind of ancient writing. It’s interesting. 6B210B21-0784-4BF9-97F1-198BF04F630F.jpeg

    In this example, visually the style is quite organic and partly realistic... but kind of fantasy-ish. I also notice again the use of horizontal stripes for orderly dithering. It seems moreso that the image itself is not really in-touch with the medium, ie the medium is just used to display the image, the form of objects etc is not rectangular at all, so it comes across a bit more like a quantized higher-precision image.
    8F4D6584-8CEE-41F9-A78B-229A83919C1F.jpeg

    And finishing off with a painterly look. Not sure if this was drawn on computer but I think so. Areas are formed from ‘blobs’ of solid non-textured color. Particularly teh sky and trees look like they were painted.
    BA237F90-4FCE-47B7-8A4C-359B696E4682.jpeg
     
    Last edited: Jan 10, 2018
  7. imaginaryhuman

    imaginaryhuman

    Joined:
    Mar 21, 2010
    Posts:
    5,834
    Some more finds.

    This one keeps coming to mind because I think they’re using subtler color choices, from a 24-bit palette precision, yet it’s still highly rectangular. Even the explosions are rectangular. I like the way the background layers form a kind of gradient which includes a hue shift, from bluer to greener in addition to going from dark to light. It’s a gradient without any particular block or object having any gradients to them. I notice also that they show the 'back' of the ships to some degree.
    72F49328-01D3-4D3D-A6DA-478D26C664BD.jpeg

    Here we see quite a lot of use of triangular parts, diagonal lines, ships made from triangles, things being quite "pointy". Or perhaps we could say, "fake polygonal"? Like the most basic form of a 3d polygon possible.
    shoot__em_up___mockup_by_kirokaze-d8pgb4i.png.jpg

    I see a similar trend here with parts of the ships at a sloped angle. A slight side-view that allows you to see the front of objects a little, kind of isometric I guess. The use of careful color palettes is attractice. The angles of the triangular parts have 2 or 3 slopes. Almost makes them look like they are made of polygons or cardboard boxes. Apparently this angle of view is 0 degrees Oblique?
    mockup_space_pirate_ships_by_kirokaze-d8shk6c.png.jpg

    This one I notice that almost all shapes are 'outlined' in some way. There isn't especially a trend in shapes otherwise other than rectangles and some diagonals. Almost everything has an outline.
    final_strike___spaceship_by_kirokaze-d8npksd.gif

    Here we're seeing rectangles and diagonals for the tech parts, and organic natural for the rest.
    outpost_by_theodenn.png
     
    Last edited: Jan 10, 2018
  8. imaginaryhuman

    imaginaryhuman

    Joined:
    Mar 21, 2010
    Posts:
    5,834
    More...

    Here we'll call this, dithered high-res CGA? Extreme contrasts of colors. Reminds me of MSDOS. ;-)
    zx_cosmopolis_by_retronator-d974j9d.png

    High resolution pixel art. Even though it's high res it still borrows some pixel-related styling like the rectangles and diagonals. High amounts of detail in small areas.
    010_by_k_hos.png

    An organic illustrative style, not a lot of texturing, mainly flat color areas, no dither.
    od_by_fool-d9vsa04.png

    A work of art in itself, not sure how to describe it as a style... almost seems better suited to a cut-scene than in-game? Kind of mock 3d. Highly polished though.
    dream_house_by_naunau08-d5hrcr7.png

    Another example of the stick-figure "rectangularism", coupled with more muted colors and indistinct features. Leaves a lot to the imagination. 33422d9ba8001b4269485fb9aa819003-d4v1ii0.png
     
    Last edited: Jan 10, 2018
    StinkyDubeau likes this.
  9. LaneFox

    LaneFox

    Joined:
    Jun 29, 2011
    Posts:
    7,462
    I think they all look great.
     
  10. LiterallyJeff

    LiterallyJeff

    Joined:
    Jan 21, 2015
    Posts:
    2,807
    One of my favorite pixel-art titles is CrossCode, which you can find a WebGL demo for here:
    http://www.cross-code.com/en/start

    Combines larger portrait art for dialog and cutscenes with lower resolution characters and objects for the world.
     
  11. imaginaryhuman

    imaginaryhuman

    Joined:
    Mar 21, 2010
    Posts:
    5,834
    Continued...

    Ok. Another nod to the non-textured 'flat with 1 or 2 levels' style.
    walkin___in_the_woods_by_xamlllew-d59v0ok.png

    Here I noticed the combination of the flat textureless style (only 1 or 2 levels of brightness per color) coupled with the use of gradients. The trees in the background have gradients vertically. I think it's quite a pleasant combination of flatness which looks like monotone areas, but filled with a subtle gradient (full color resolution). It adds an extra level of subtlety.
    _commision__earthdome_by_mirugin-d8hbahf.png

    One thing I noted about this styl eis that the objects are made to look quite "flat" on purpose. They don't go into the depth of the screen very far. The tree-like things to the sides of the building look like they barely have depth. The rocks are quite flat looking. Even the mountains. The rooms look 'shallow' and 'tight/cramped'. I also notice the use of the completely 'not correct perspective' roof on the doorway, coupled with the side-panel of the doorway in kind of isometric, along with the steps showing their sides somewhat. The 'non-realistic perspective' look is quite attractive. The truck looks quite shallow also and the water at the bottom appears to have no depth. Everything is very "flattened into layers". Even the building itself is very narrow and has little depth to it.
    15_fishermans_daughter_pixelshuh_pixel_art_by_octavinavarro-d8hbwzx.png.jpg

    Here I notice the use of diagonal lines as a form of adding orderly texture to the sky.
    titan_by_orange_magik-d93sb29.png


    Another pretty good example of the pixely-look... lots of rectangles, consistent diagonals, a "flatness", some thin one-pixel-width lines. Modern color precision. 22_the_flood_pixelshuh_pixel_art_by_octavinavarro-d91jhn3.png.jpg
     
    Last edited: Jan 10, 2018
  12. imaginaryhuman

    imaginaryhuman

    Joined:
    Mar 21, 2010
    Posts:
    5,834
    And more...

    Another example in the style mentioned earlier where dithering is done artistically in a highly stylized way, with overlaid areas of lighter/darker tone and rectangles and even spirals. Everything appears to be made up of small parts so the overall silhouette is quite gritty and torn looking. Lends itself well to an organic feel, particularly mixed with the earth tones and greens.
    colossus_of_the_endless_marsh_by_sky_burial-danv6sj.png


    What I noticed about the below again is the semi-isometric view where you get to see the right hand side or 'fronts' of side-facing objects, coupled with very "flat" panels comprising e.g. the vehicle. Accented with more rectangles and diagonals in the background and in the street lamps. Sort of a fake isometric low-poly polygonal look. rainy_day_by_kirokaze-d8rhtt0.png.jpg

    An example of building graphics from triangles. I find it hard to "read" this actually, it's unusual and maybe against how our eyes are used to seeing. There aren't many completely flat horizontal or vertical parts, and it makes it hard to create those unless you alternate the triangles (alternating rows upside down). Creating any kind of straight vertical edge is tough. triangle_zelda_fanart_by_caesarssalad-d4ygiu4.png

    Grayscale, combined with a super-low-palette 'silhouette' style. Dark in the foreground, light in the background. I suppose it could work the other way around also. We usually see dark silhouettes around dusk/after sunset so it gives it that kind of 'almost night' feel.
    lurking_in_the_woods_by_theodenn-d3540ie.png

    One more in the stylized dither rectangular style.. though moving so far away from discernable shapes that it becomes more of an art piece, kind of impressionistic, and not so easy to read. lightmares_by_sky_burial-db8wtz8.png
     
  13. imaginaryhuman

    imaginaryhuman

    Joined:
    Mar 21, 2010
    Posts:
    5,834
    Still going...

    Cartoon-like, anime-inspired, dark outlines, high-resolution. sky_town_screen_2_by_jump_button-d6ga3kp.png

    I though this was interesting in that it is still doing the 'rectangles' thing in the foreground, but the background is using some crystalline-like traingle-based areas. Notably the background uses a blur effect, and the foreground has a kind of mist covering it, plus there is lighting. So it's using more environmental touches. Perhaps we can call this "post-processed" pixel art? There's also some lens flares. It has more "atmosphere"?
    f4783edf82188d311ee64b7806ab0b44_by_josheiten-d6aqk4k.png

    I noticed this picture mainly in the use of a lot of 'glow' and lights. The glow doesn't seem low-res, so it's probably a high-res screen with low-res art scaled up, with a post-processed glow applied. A bit kind of over-using of the effect though.
    tower57___amor_s_den_by_cyangmou-d91b4q2.png

    Cartoon cutesy? Bold colors, dark outlines, oversized heads, fun and child-like. Good for kids?
    mushroom_hill_zone_by_albertov-db6a9p7.png

    I notice here again the kind of partly-isometric look, whereby you can see the 'front' of the robot but also some of the side. I've also noticed 'cinematically' in a number of image I saw the use of a 'platform' coupled with a large open space behind it, in some kind of cityscape, giving the impression of a large expanse or of being high-up.
    orange_squad__by_gumustdo-d7kpbyc.png
     
    Last edited: Jan 10, 2018
  14. imaginaryhuman

    imaginaryhuman

    Joined:
    Mar 21, 2010
    Posts:
    5,834
    Still more finds...

    Here you see some trace of the same rectangular theme, but I also notice the use of gradients. The walls and and the background have vertically gradients. The gradients typically go from darker at bottom to light at top, and also shift the hue e.g. from bluer to greener. It's still pixel-art based with blocks of solid color, and limited 'palette', but within the solid color areas, there is high-quality gradients running through it. The smoothness of the gradients adds a 'smooth' and perhaps slightly 'lit' feel to it. Maybe makes it seem a little more real?
    water_room_by_mante_pls-d656u9r.png.jpg

    This was another I saw with a seemingly high-up platform with a large cityscape behind but in the far distance, giving the impression of a huge 'gap' between, and therefore a sense of size and of being high-up in the open. Super low palette, this might even be 4 colors.
    5345234_by_winged_doom-d4dhjxc.png

    Grayscale. Interesting that it's supposed to be nighttime and in the foreground the character is black and in the dark, but still the background is fairly lit. faraway_castle_by_kingkersharks-db37xto.png.jpg

    Another example of more solid blocks of color and no dithering, coupled with nature-colors. Green rocks? Kind of over-saturated? One interesting thing though is, the foreground items are stronger saturation than the background. Also more contrast. So they stand out more.
    maysketchaday___18_by_fabianrensch-da34f16.png

    In this picture notice the sky. One of the benefits of pixel art I think is the ability to draw something which you would never see in real life... the clouds are idyllic and stylized and are not supposed to look real, so look more like 'art'. Is that the city of london I see? the_mummy_demastered___30_by_cyangmou-dbtwy0y.png
     
    Last edited: Jan 10, 2018
    StinkyDubeau likes this.
  15. imaginaryhuman

    imaginaryhuman

    Joined:
    Mar 21, 2010
    Posts:
    5,834
    More...

    I notice in a lot of more retro pixel art there is often this fake 'edge lighting', where layers or rocks etc are quite a 'flat' layer and in the middle of the area it's almost all one color. The palette looks more like a 256-color palette here though, so it's doing this style not so much because of a lack of colors but to give a nod back to the lower-palette days.
    the_mummy_demastered___10_by_cyangmou-dbstdlf.png

    That same style with the little stylized artsy edges/dithering, giving everything a kind of fluffy/organic/made-of-materials kind of look.
    rose_garden_by_sky_burial-d9lif7f.png

    This has a similar feel. I notice when there is a lot of fine-grained details around the edges, breaking up all the edges, that it gives it this kind of look. We could call it "rough edges"?
    scanulationfinal_by_raiyumi-d94cbof.png

    One other sort of example of limited-palette pixels coupled with use of gradients. Not so fond of how they did this here maybe because the background layers are too subtle or close to each other.
    c_by_cellusious-db9fii7.png

    Below we're seeing a fairly low-palette sort of single-hue style, coupled with rectangular parts and hard outlines. It doesn't look cartoony, maybe because its quite dark and thematically 'serious' looking. two_travelers_by_08__n7r6_7984-dbahdhm.png
     
  16. imaginaryhuman

    imaginaryhuman

    Joined:
    Mar 21, 2010
    Posts:
    5,834
    Continued...

    Quite liking the non-textured 'flat' look with not many brightness levels per color. Maybe here it also looks good in that there are more colors in total in the green/brown spectrum to help gel it together more. The distinct flatness of each part doesn't stand out quite as much.
    green_forest1_1__by_kingkersharks-db3n89g.png

    Another take on the 'freyed edges' look, sort of an 'under construction' or 'post-apocalypse' or 'broken down' kind of theme.
    endzeit_2050_by_sprayerdayuri.png

    Giving this example as one which uses almost one single hue for the whole image.
    deluge_by_spriterdex-d5p4iur.png

    More experiments with rectangularism and interconnected rectangles. One thing to note I guess is that rectangles render 100% perfectly in `pixels` with absolutely zero antialiasing or jagged edges. I think I also see a gradient in the center portion.
    area_concept_02_by_danarogon_ap-daxkm7y.png

    I found this quite interesting where they went for really limited silhouette/flat color areas, barely any shading or texture, but then coupled with gradients.
    zeathre___3_by_cellusious-d6nnjvm.png
     
    Last edited: Jan 10, 2018
  17. imaginaryhuman

    imaginaryhuman

    Joined:
    Mar 21, 2010
    Posts:
    5,834
    This is all for now.

    There's something 'arcadey' about this image. Maybe it's the bright colors. Maybe it's the kind of oriental influence with the ornamental dragon using red and gold. I guess it's a blend of hot and cold red/blue. There is also some light and shadows. The whole thing looks handmade. Maybe it's because there is no repetition and many of the parts look unique?
    bayonetta_2d_shmup_by_jnkboy.png

    High resolution highly detailed art with per-pixel details. Kind of hard to actually 'see' the details though because they're too small.
    chronoblast___boss_02_by_pieterator-d7twvc0.png

    Another good example of the 45 degree diagonal theme, used on the legs and exterior walls and interior 'wallpaper' and various other places. starbound_2017_06_20_08_17_38_59_by_6pohang66-dbdh8gb.png.jpg

    Here this was an example of pixel art where it looks like lighting is applied as well. It may just be gradients but it's kind of how I imagine it would look with various point lights overlaid. Otherwise the look is quite complex. It seems there are some parts that look 'less lit' or in shadow, although there aren't really real shadows or specular highlights. Diffuse lit?
    29203138790_b40ea38bc0_o_by_6pohang66-dap929i.png.jpg

    This one appeals to me for a few reasons. First the use of diamonds in the background - 45 degree angles. The whole image is kind of on an angle, not that that's the key. But I also like how the ship trails are stylized, not trying to look real or correct or physically accurate or lifelike. Streams which break apart and give way to seemingly independent twirls and twists. I also like the high contrast. Not such a huge fan of the dithering. I like the 'off white' vs 'off black'.
    starfighter_by_ohnhai-d514put.png.jpg
     
    Last edited: Jan 10, 2018
    Avalin likes this.
  18. imaginaryhuman

    imaginaryhuman

    Joined:
    Mar 21, 2010
    Posts:
    5,834
    Couple more...

    Notice the smooth gradient on the water even though mainly it's limited palette.
    1558_game1.jpg

    And another example of a somewhat post-processed-looking style. Actually it might be mostly 3d but the foreground looks like rectangular pixels. Background is blurred and maybe with a glow that bleeds into the foreground. Background looks almost textured.
    4wP0wOSvDyFGfrhMQa711hHiT1ON9vTqFSykwPtF5UoFsR7K9EhRHxWYrVDo0BrRwg=h900.png.jpg
     
    StinkyDubeau likes this.
  19. imaginaryhuman

    imaginaryhuman

    Joined:
    Mar 21, 2010
    Posts:
    5,834
    Hmm. Decisions decisions.
     
    StinkyDubeau likes this.
  20. AssembledVS

    AssembledVS

    Joined:
    Feb 23, 2014
    Posts:
    248
    The images that you posted are all excellent examples of the style that they're going for, which just shows you that anything can work if you do it well enough.

    I like no outlines, more painterly styles, though anything can look great. If your reference resolution is 640 x 360, I'll just say this: not too many indie pixel art games are made in 640 x 360 because that's quite a bit of detail. (In fact, it is about 4x the pixel area of most Super Nintendo games.)
     
  21. hippocoder

    hippocoder

    Digital Ape

    Joined:
    Apr 11, 2010
    Posts:
    29,723
    You should go with the art style you like the most, that you are capable of obtaining.
     
    imaginaryhuman likes this.
  22. imaginaryhuman

    imaginaryhuman

    Joined:
    Mar 21, 2010
    Posts:
    5,834
    Yes I have to be realistic in terms of what I can actually do, and what I enjoy.

    Some of the trends to narrow down:

    1) The rectangle thing - various plays on rectangular shapes, trying to build objects from rectangles and forcing into rectangular shapes ‘abnormally’. Accented with very rounded or flowing lines.

    2) Thin lines - single-pixel width horizontal and vertical, maybe also used in simple dithering.

    3) Diagonal lines and shapes, triangles, octagonal objects.

    4) Fake polygons or objects with very ‘flat’ surfaces.

    5) Flattened depth, objects which are ‘flat’ camera-facing surfaces which look like they have no depth.

    6) Gradients in some or all parts of the image.

    7) Realistic vs nonrealistic vs highly artistic vs illustrative vs “trendy”

    8) Lighting and shadows.

    9) “Flat filled” vs more textured or multi-brightness-level shapes (vs also gradients).

    10) Number of colors in the palette, palette selection, and accuracy/quantization of colors.

    11) Amount of seriousness vs cartoon/humorous looking.

    12) Whether to use outlines (light or dark, and thickness).

    13) Solid vs fragmented/fluffy/broken edges.

    14) Dithering and style of dithering if any.
     
  23. imaginaryhuman

    imaginaryhuman

    Joined:
    Mar 21, 2010
    Posts:
    5,834
    I think I agree on no outlines. I recognize the resolution is higher. But I had to do a lot of calculations and research into monitor sizes and popularity of resolutions etc. 640x360 fits perfectly into 1280x720p and 1920x1080p and 2560x1440p and 4k. I am targeting desktop and appletv. This resolution gives me exactly perfect pixel clarity ie all pixels are the same size. At 640x360 its 1x1, 720p is 2x2, 1080p is 3x3, 1440p is 4x4 and so on. Most popular/average monitor size is 21-23 inches in 16:9 aspect (or some in 16:10). Also upwards of 60% of windows users now have a 1080p screen, and even more with a 16:9 aspect ratio. Going with 320x180 is just way too blocky.

    I’ve been playing Steredenn on a 27” 1440p screen and the pixels are just too large for my taste. 640x360 looks quite good, still pixelated, on a 19” HD screen and pixels “slightly large” on a 27”. I’m basically doubling the resolution of that game. I realize it’s a lot more pixels to draw but I have some procedural programming tricks up my sleeve.
     
  24. AssembledVS

    AssembledVS

    Joined:
    Feb 23, 2014
    Posts:
    248
    If you can do it, 640 x 360 is great for hitting all of the 16:9 resolutions that you mentioned (and getting close to the common laptop resolution of 1366 x 768). I wished I could have continued with 640 x 360 for a while but I grew to like my current resolution of 360 x 180.

    "Doubling" the resolution means quadrupling the number of pixels, though: 230400 (640 x 320) vs. 57600 (320 x 180).

    Alternative: Hyper Light Drifter, Crossing Souls, Stardew Valley all use 480 x 270. It will hit 1920 x 1080 and 4K, but not 2K cleanly.

    But I know what you mean by "blocky" pixels. The biggest issue for me is the UI and text (still want it to be pixel-art based), so I opted to use a 640 x 360 reference resolution, but with 320 x 180 assets that are doubled. Mostly UI-based assets are the true native 640 x 360, which makes the UI still somewhat crisp. My "lights" or superimposed color gradients (neon, etc.) are particles, which are crisp because they render at the actual resolution.
     
  25. imaginaryhuman

    imaginaryhuman

    Joined:
    Mar 21, 2010
    Posts:
    5,834
    I came up with some potential colors... though I am thinking about trying to restrict to maybe 1/3rd of this. It's a little hard to have many different types of enemies without color coding them distinctly, otherwise their shapes or behaviors have to be quite unique. I'm also concerned about having too many hues on screen at once.

    Palette2018FinalAdjustedLarge.png
     
    LiterallyJeff likes this.
  26. Lars-Steenhoff

    Lars-Steenhoff

    Joined:
    Aug 7, 2007
    Posts:
    3,521
    LiterallyJeff likes this.
  27. imaginaryhuman

    imaginaryhuman

    Joined:
    Mar 21, 2010
    Posts:
    5,834
    Mmm that's interesting, thanks for the link. I guess that may have some uses. For me it's not pure pixel art, mainly because it's just recoloring and dithering, and good pixel art has elements which are "not lifelike" and "not realistic". Or with perspective which is not physically correct, or stylized in a way that only an artist could do. If the tool could do that I'd be seriously impressed, but down-graded dithered recolored tinted photographs doesn't do it for me.
     
  28. Lars-Steenhoff

    Lars-Steenhoff

    Joined:
    Aug 7, 2007
    Posts:
    3,521

    Not photographs of course, but a texture here and there seems to work very well.
     
  29. Hyblademin

    Hyblademin

    Joined:
    Oct 14, 2013
    Posts:
    725
    I would like to emphasize the importance of matching the style with the tone of the game's narrative-- just based on my perception, straight lines seem to lend well to serious or somber feels, boxes esp. squares have a mysterious air to them, diagonals feel more tense and beg for action... these examples are possibly not too accurate since my only basis is personal experience, but we do know that tone and visual style need to work together.

    I have some general notes on my own preferences, in case they help for anything:

    -Stay away from polygons as a style focus. It's too easy for them to feel overused, but they're great for drawing attention to truly important objects

    -I'm not a fan of the thin lines, especially when it comes to drawing characters. Maybe because I haven't seen a use of this style that feels substantially different from the other uses

    -Anything more than subtle dithering is distracting. Use in transitions between very similar shades and over only small areas of the viewport is fine

    -Consider a softly-colored outline for actors. This is a purely functional consideration. Especially in the case that you're trying to limit the number of colors in a scene or entire project, characters that can move between environments can cause visibility problems if they blend in to the scenery too well. There are other ways around this problem, of course

    -Don't stress about limiting the colors too much. I totally get that it's important for rendering certain styles and it's one of the main things that help define pixel art (without limits like this, who's to stop someone from calling any game or movie "high-res pixel art"?), but it came from necessity before. If you concern yourself too much with the authenticity aspect of the artwork, at some point you may as well just go make a game for SNES or DOS or something. Admittedly, that would be cool

    -Go nuts with lighting, I think it looks amazing in low res styles, even if the lighting itself is a high resolution. We're lucky enough to have tools that make lighting super easy to do, and I don't think it should ever be passed over in favor of authenticity, only when it causes performance issues


    Please ignore any or all of my points that don't resonate with you, and I hope this helps you narrow it down some more.
     
    Avalin and imaginaryhuman like this.
  30. imaginaryhuman

    imaginaryhuman

    Joined:
    Mar 21, 2010
    Posts:
    5,834
    Nice tips, thank you!
     
  31. SiegfriedCroes

    SiegfriedCroes

    Joined:
    Oct 19, 2013
    Posts:
    569
    I use pixel art for all my games and try to do my own thing (not always the case). Here are some of the games I made/am working on (most of them very low res and very limited in colors):







     
  32. imaginaryhuman

    imaginaryhuman

    Joined:
    Mar 21, 2010
    Posts:
    5,834
    What size is your palette on the first and last ones?
     
  33. SiegfriedCroes

    SiegfriedCroes

    Joined:
    Oct 19, 2013
    Posts:
    569
  34. StuwuStudio

    StuwuStudio

    Joined:
    Feb 4, 2015
    Posts:
    165