Creating pixel art

Page 8/34
1 | 2 | 3 | 4 | 5 | 6 | 7 | | 9 | 10 | 11 | 12 | 13

By spacemoai1973

Expert (96)

spacemoai1973's picture

01-05-2016, 11:25

Grauw wrote:

Has he down syndrome?

By Kai Magazine

Paragon (1303)

Kai Magazine's picture

01-05-2016, 12:05

to me it looks like a female fairy, white wizard or cleric, holding a hammer.

The clothes have a nice volume effect. Very good usage of the colors. I see you did try to put as many as possible.
Good job!

By Grauw

Ascended (8457)

Grauw's picture

01-05-2016, 13:13

8 colours excluding background.

I went for a bit different style this time, without outlines.

By Grauw

Ascended (8457)

Grauw's picture

21-07-2017, 04:32

By hamlet

Scribe (2539)

hamlet's picture

21-07-2017, 07:19

Very nice! so detailed.

By syn

Paragon (1920)

syn's picture

21-07-2017, 10:29

Hair doesnt have clear outline but the character itself does. Making it a weirdlooking combination imo.

Perhaps try outlining hair as well or dont outline at all.

Background also yours? Are you thinking of making an RPG?

By Grauw

Ascended (8457)

Grauw's picture

21-07-2017, 14:30

Actually the background is what I wanted to show off; I posted the character earlier Big smile. But it’s good to see it in context, to see what does and doesn’t work. Indeed it’s some RPG thing I’ve been working on from time to time.

Honestly I’m not a big fan of the outline, however its function is to create contrast with the background. I need to experiment, maybe just removing it will be ok but I have my doubts, need to see it in motion.

There must be other ways to provide contrast, I’m thinking maybe having a lot of animation will generate the necessary contrast, or maybe keep using the outline but using a quite brighter colour. Or maybe just careful pixeling, using the lighting and primarily brighter colours with strong shadowing. The 16 colour palette and 3-bit colour values are my enemy (and V9990 is ever tempting Tongue). Any advice?

As for the background, I’m happy with how the grass turned out, I don’t see the tiling at all. A bit busy though, I want to try some other styles with larger features or more flat colour areas too.

I tweaked the chests and rocks a bit to integrate better with the terrain; on the grassy areas they have a few strands of grass hugging up to the front, and on the sand they have a bit of an outline at the base which can be taken for either ambient occlusion or disturbed dirt. Subtle, but…

By syn

Paragon (1920)

syn's picture

21-07-2017, 14:45

Yeah, as a beginner in pixel art, ive been thinking about this for a while. I dont wanna use more than 2 sprites on top of each other so that only leaves me with 3 colors per row. A sprite is a bit too small for stuff like dithering so thats not really an option. If I just use colors without a black/dark grey outline I can get some nice colored sprites. I guess in the worst case you can see a part of the sprite missing OCCASIONALLY, but is it a problem?

I recall noticing this in Aleste 2, where sometimes a part of the plane seems to get lost in the background (that area right side next to the cockpit being the most notable). But it did not affect the gameplay.

By Grauw

Ascended (8457)

Grauw's picture

21-07-2017, 15:10

I want smooth 60fps scroll and pretty graphics, so I’m kinda trying to make my design and code choices around those. Software sprites are too slow for smooth scroll and require double buffering, so I need to use hardware spites. But I don’t want to limit myself in terms of character design, so if I have to use 3-4 sprites then that’s what I’ll have to do. The remaining sprites can be used for particle effects. I don’t want sprite flickering! And I don’t like random encounters. And I like action RPGs. Pff.

So with that in mind, I’m taking some inspiration from Chrono Trigger; while walking around it’s just the main character that moves, everything else is only tile animations (which are cheap, no save-restore). Maybe some moving NPCs in towns. Then, when you approach an enemy the screen scrolls to a fixed position, all characters change to software sprites at 30 fps, and visual effects use hardware sprites.

That’s the theory Big smile.

By Grauw

Ascended (8457)

Grauw's picture

23-07-2017, 12:44

Some thoughts about working with 16 palette colours in game art;

The biggest problem is to combine environment and character art. Environments alone generally do not use too many shades and are doable in 16 colours, however main character colours need to be common everywhere, and use up colour slots even when they’re not used by the environment. On the V9990 backdrop and sprites can have different palettes, however our trusty old V9938 has no such luxury.

I think the sweet spot is to have about 12-14 colours shared between all areas and the main character sprites, and 2-4 area-specific colours which can also be used by area NPCs. The colours are grouped into colour ramps (going from dark to light).

To decide on the colours, I feel it helps to view the colours a bit scientifically, where colours are based on two elements: material colour and lighting.

Material

For the environments, the material colours needed depend on the area, e.g. greens are mostly occurring in nature areas and not in caves or castle hallways, while a beach has a lot of yellows and blues.

I think it’s useful to think in terms of primary and secondary material colours; in nature areas green would be a primary colour, and the red colour of flowers would be a secondary one.

The material colours for the main characters must be chosen carefully, because they are always present. Fortunately brownish skin-colour is pretty common, hair and clothing options are more troublesome. It’s best to choose colours which will be useful as either primary or secondary colour in most other environments. (For the sake of contrast, secondary colours may even be preferable?)

Luckily you may not need as many shades for the characters as you do for the environments. E.g. in the grassy area above I have 4 four greens, but the sprites I’ve made so far use only two greens. So if I decide to use green in a main character sprite, at least it will only take 2 colours.

It’s worth noting that for many objects you have more choice in material colours than you may think if you think outside the stereotypical colours; grass can be green but also be yellow, rocks can be grey but also brown, dirt can be brown or grey, tree foliage can be red as well, metals can be a number of colours, water can be blue, green, or any colour when it’s reflective (stylistic choice).

In my grassy fields environment above I use the following primary material colours: green (grass, foliage), brown (dirt, wood, rock, skin), grey (metal, rock, cloth) and a few additional secondary colours.

Lighting

Without light, everything is pitch black. The materials need to be lit to produce the final colour, combining the material colour with the light colour and the light intensity. This is done by multiplication, meaning that in a room with a red light, only red colours will remain. In sunlight, the brighter something is lit, colours are tinted yellow and blues diminish.

This is very interesting, because if all your light sources have the same colour, this means that the number of colours you need is reduced, and it’s also easier to share colours between different materials of similar colour.

Additionally, your characters are similarly affected by the lighting. Again, very interesting, because this means that as long as you match up the material colours with those of the environment, they will get the same lighting and don’t need separate palette entries.

Imagine a knight in a mysterious purple cave. The rocks didn’t change colour, they are still grey, just like the knight’s armour. They just changed colour because there is this purple lighting, and so should the knight’s armour.

The light intensity is a factor which depends on the angle of incidence of the light (object shape & texture), and whether the light is direct or indirect (object shadowed).

How many shades of lighting you need depends on the size and amount of definition you want to give the object, as well as the lighting conditions of the objects. Generally speaking, for the primary material colours you probably want to have more shades, and for the secondary colours you’ll need fewer. Because the latter are used infrequently, some less detailed lighting would not be very noticeable. You can always use dithering if need be.

Special cases

For shadows, never use pure black. In the real world, even in really dark areas light is never entirely blocked. This is because there is always some amount of diffuse light reflecting off other objects. This can be simplified as “ambient light”, a single omnipresent light, typically a dark cold colour like dark blue, purple or grey. This colour can be shared between your colour ramps.

Specular highlights are not influenced by the material colour, they are always only showing the light colour. Therefore when you add a specular highlights, you can simply use the light colour at full or near-full intensity. Again, this colour can be shared between your colour ramps.

The only exception is metals; their specular highlight shows the material colour instead of the light colour. However it’s generally ok to ignore this if it saves you a colour.

Emissive material colours are interesting because they are not affected by lighting. Think glowing buttons, displays with text, sparks, etc. This is nice, because this means they do not need shading, and often just one colour will suffice, although two can be nice for anti-aliasing or refraction.

For UI, I would always present it at the top or bottom of the screen and use a palette split so that it can use its own dedicated palette. This so that the gameplay palette does not have to take UI into account, and also so that the UI palette is not affected by the lighting (as I think I’ve seen in some Umax RPGs).

One more interesting idea; to also use colours unique to each environment in the main characters, one could have a character which wields an orb which uses a different elemental power based on the environment, and changes colour accordingly (e.g. green in nature areas, red in caves, blue at the beach, etc.).

Process

So, in summary, a basic process of assigning colours could be as follows;

  • Pick a limited number of base material colours (e.g. green, brown, grey and blue/purple), with two shades each for starters.
  • Add a highlight (white) and a deep shadow ambient colour (dark grey).
  • These are for your characters, maybe add a third shade to one of the colours if needed.
  • Then for each environment, add more shades for the primary material colours where necessary, and add secondary material colours as needed.
  • And finally modify all the colours to be affected by the predominant light colour, tweak them by hand, and don’t forget to include the ambient lighting.

As for the last step, some simple guideline for sun-lit environments would be; increase the amount of blue in the darker colours, and decrease the blue in the lighter colours. As a result dark colours will turn blue-ish, and light colours will turn yellow-ish.

I think this serves as a good basis for game art which works well within the 16-colour palette.

[Edit] Another nice thought:

As for how to distribute the colours; the large surfaces need the most detail, which are the surfaces facing the camera. When the sun is shining on the scene at some angle behind the camera, most of those large surfaces will be brightly lit, so you can focus your shades on the bright side of the spectrum. Surfaces which can be shadowed (e.g. ground) also need definition in darkness, so those need one or more darker colours. For the sides it’s ok to make more sudden colour changes with the shadow colour.

Page 8/34
1 | 2 | 3 | 4 | 5 | 6 | 7 | | 9 | 10 | 11 | 12 | 13