Pixelation

Critique => Pixel Art => Topic started by: tecnologgamer on February 05, 2020, 01:34:07 pm

Title: [Feedback] Mockup for a game using only blue
Post by: tecnologgamer on February 05, 2020, 01:34:07 pm
Hi, this is my first mockup. It's about a project that may happen.

The main characterist is the color palette only use blue, however I'm terrible in choose colors and I would like to receive
a better feedback on color palette and on the floor.

(https://i.ibb.co/yn7RTy4/Estum-Inferno.png)

I'm have many doubts when I'm mark top down tiles, specially in flat
planes because I don't know how lights work, as long I knew is obsvioulsy that lights will cover all the plane, I'm just try to add
some more details about the texture that only doesn't exactly means that the floor is broken or damaged. Like this reference, it's see that the lights hits all the plane, but there are details that aren't crack or greater damages. From the rest I know that I need to change.

(https://i.ibb.co/BZrKQnt/Padr-o-Ch-o2.jpg)
Title: Re: [Feedback] Mockup for a game using only blue
Post by: MysteryMeat on February 05, 2020, 09:44:28 pm
for a monochromatic art style, the biggest most important thing is Contrast. I'd make it so that the walls are a darker blue and the floors are a white/lighter blue so that the character is more easily visible in the scene.
Title: Re: [Feedback] Mockup for a game using only blue
Post by: Chonky Pixel on February 06, 2020, 10:17:55 am
Exactly that! Backgrounds should probably be lower contrast (the shades should be close together) to the foreground characters.

For a masterclass in (not quite but almost) monochromatic character and background work, have a look at videos of Hollow Knight. The backgrounds almost seem like you're looking through a mist. You're not getting dark blacks or bright whites, you're getting grey blacks and grey whites. (Or whatever the theme colour is for the area). The main character is often using the same colours in its palette, but the whites are brighter and the darks are darker. This makes the character pop out of the image and focusses your attention.

They also use other techniques like lighting (there's a very diffuse light that follows the character, again focussing your attention on the bright part of the screen where the action is.) And heavy use of high contrast outlines, which works for the style.

Title: Re: [Feedback] Mockup for a game using only blue
Post by: Chonky Pixel on February 06, 2020, 01:14:53 pm
So I'm not sure about your irregular tile alignment. It's too regular! Having entire rows out of alignment makes it look like a game or artist error rather than showing the age and disrepair of the surface.

I might approach it like this:

Draw your tiles to be completely regular to start with. Make sure they have a pixel or so gap between them. Now you can take the occasional tile and move it out of alignment.

Make sure you take your tile grid into account. If you want a 1px gap between your tiles, you may use the rightmost column and bottom row of pixels in your tile to be the 'gap' pixels. This means that moving your tile left or up will push it into the next tile in that direction, crossing the tile boundary. this would make creating a tile sheet and coding it up in a game a lot more complex. Either use a 2px gap and completely surround your tiles or move the tile within its boundaries - 1px right and/or down.

Let me know if this doesn't make sense. If you're interested I'll give a demonstration. There are some tricks you can use to get a slightly 3D irregular look.
Title: Re: [Feedback] Mockup for a game using only blue
Post by: tecnologgamer on February 07, 2020, 01:44:48 pm
(https://i.ibb.co/jhN4bvq/Estum-Inferno.png)

I try to make a better contrast, also I add outline around character to spotlight her, besides I'm still not sure if the floor tile seems damaged.
Title: Re: [Feedback] Mockup for a game using only blue
Post by: Chonky Pixel on February 08, 2020, 01:37:35 pm
There are improvements that could be made to pretty much every element of this piece, but let's start with the palette. It looks like you're making light green-blues (candle/face) and light purple-blues (hood, leftmost bricks), which will help differentiate different elements of the scene, but in my opinion, they clash. Often with a palette, it can look good if the darker colours move more to the cold parts of the spectrum (blue) and the lighter colours towards the warmer (red/orange).

Most of the image doesn't give any impression of depth, apart from the candle. However, the 3D effect there is a bit confused.

The flame and its surroundings are the darkest part of the candle. Unless this is part of the story somehow it seems the wrong way round.

You're using highly contrasting colours on your tiles to make both the surface detail and the cracks. The shapes you're using to do so are also a bit noisy. This makes them look like deliberate designs on the tiles, and makes the image more confusing to look at.

This is just a palette change, with a subtle hue shift across the blue, and a separate, smaller palette for the desaturated greys (for the alternating tiles)
(https://i.imgur.com/0qcJ4cg.png)

Using two shades close to each tile's background colour, I've made some smoother surface detail for them. This is mainly by making larger shapes with the lighter shade and then smaller shapes with the darker shade. What makes good shapes? Shapes made by pixels of the same colour next to each other are called "clusters" and there are rules and techniques you can learn to start off making them look good. But a lot of it is practice and trial and error. I'm sure you can find some good tutorials on clusters if you look around. A good starting point might be the pixel art primer on Pixel Joint. http://pixeljoint.com/forum/forum_posts.asp?TID=11299
You may notice that the character is already a little bit easier to see because the background has less contrast. And that's without changing the colours of the main character, or the main colour of the tiles.
(https://i.imgur.com/LpDv1ne.png)

Here I added some shadows to corners or edges of some tiles, to make it look like some are higher than others. I also added some cracks. To make the cracks look better, disrupt the edges of the tiles (as if some pieces have cracked off and been lost) where the crack meets the edge. Also, pick one side of the crack and make it lighter than the other. That will make it look like it's catching the light.
(https://i.imgur.com/oN9Kl1y.png)

These are some alternative shapes you can use to base your candle on. Doing this is quick work with the ellipse tool. The difference is that ellipses give a good impression of something circular seen at an angle, while the candle base you used looks like a rectangle with rounded corners.
(https://i.imgur.com/c8EZECd.png)

I didn't want to spend too much time on this, but here's an idea for a candle. The drip is the same shade as the rest of the wax, I'm just using other shades to define shadow and highlights. Candles can have an internal glow where the flame lights up the inside of the wax. However, the wax in front of the flame looks darker in comparison, as it's silhouetted against the flame. Flames are bright! They are made of concentric shapes starting at the tip of the wick. The part most in shadow will be the lower part of the candle, as it's furthest away from the flame.
(https://i.imgur.com/5owkpEj.png)

If you find any of this helpful, let me know and I'll have a go at the main character. Currently, it has no depth and is completely symmetrical. This makes it look like something constructed rather than something natural, to me at least.

Edit: Silly me, drawing a flame from memory. I forgot the brightest part of the flame is above the wick.

(https://i.imgur.com/9a0U0nr.png)
Title: Re: [Feedback] Mockup for a game using only blue
Post by: tecnologgamer on February 21, 2020, 12:14:44 pm
Hey guys, sorry for late response, my internet get turned off for two weeks, that why I don't response. I follow your tips @ChonkyPixel, I remade the candle, but the shade I don't know, I'm not much good in metal texture and follow your tips about
clusters and use near colors from the colors of floor to make shape that are from the object itself, I just didn't found where you put some shadows to make an 3D effect.

(https://i.ibb.co/FBLhDLK/LpDv1ne.png)
Title: Re: [Feedback] Mockup for a game using only blue
Post by: Chonky Pixel on February 23, 2020, 11:51:29 am
I think you shared the wrong image. :)
Title: Re: [Feedback] Mockup for a game using only blue
Post by: tecnologgamer on February 23, 2020, 04:23:14 pm
Oh boy!

Well, I follow your tips, even try to move the tiles to other on other after understand some concepts that you explained, specially about the clusters.

(https://i.ibb.co/Y8BjChb/2.png)
Title: Re: [Feedback] Mockup for a game using only blue
Post by: Chonky Pixel on February 24, 2020, 11:19:30 am
OK, let's discuss the tiles first.

The darker tiles are looking a lot better than your originals to me. :)

The light tiles have a darker shade on them describing some line detail. They look noisy, and have some odd shapes. I would use a colour closer to the rest of the tile, and smooth the shapes. My preference would be for fewer pixels jutting out of lines like thorns. Also, I would probably use shapes that were thicker than lines to begin with.

Where you have cracks, you suddenly use colours a lot brighter than the rest of the tile. There's no need for this, you can get the effect while staying within the same palette. Also, if you look at mine, one side of the crack will be brighter than the other. You're lighting both sides, which is confusing from a lighting point of view.

Some tiles have been displaced so they're overlapping other tiles. This might make things difficult for the game engine, as if you're using a standard tiling system you'll need a different version of each tile it overlaps. There are other ways to get around this of course, so you may want to do this anyway, but you can make life easier for yourself (or the developer) if you keep your tiles within their boundaries.

If you are going to go this route, you can do better than using an outline around the displaced tile. Imagine it is a 3D shape, and which edges you might see. Make edges that you can see brighter if they point towards the light. An edge could just be a single pixel width. If you wouldn't see an edge, don't use an outline. If there would be a shadow, make that area darker.

I don't have much time but I might do an edit if I have time later.