Pixelation
Critique => Pixel Art => Topic started by: KaiserPixel on February 10, 2018, 05:41:34 pm
-
Hi everybody :)
I have created my first tiles (32x32) and I would like some advice on how to improve them
(https://i.imgur.com/y4MrnuV.png?1)(https://i.imgur.com/LWUXoNC.png)
I want to do something futuristic, so advice about color or anything is welcome. :)
last edit full map currently:
(https://i.imgur.com/a9mpwhK.png)
-
Your sprites appear to be side-view, but your environment is RPG view, so the characters don't look like they're standing up in the world. To match the projection of the environment, we should see the characters more from above. Alternatively, you could change the projection of your environment to create the illusion of a lower "camera", by having the horizontal north-south space compressed more than the horizontal west-east space. This could have some unfortunate gameplay implications, though.
The background tiles and characters appear to be at different pixel scales, i.e. the "pixels" are different sizes in them. Some of the background elements are also at different scales than others (e.g. the lamps are made out of giant pixels). This looks strange and unpolished. Make and use your art at a consistent scale.
The background's looking rather dull colour-wise. You have all these neon signs, but there's no feeling that they emit any colour, because the environment is so neutral. Try making the pavement, buildings, etc more saturated. You could also create some special tiles showing the glowing effects of the signs and especially the doors, which would also help create a sense of depth in the scene better than in-engine lighting could.
The characters get a bit lost in the background because they have about the same overall level of contrast as the background. Try reducing the value range in the background to mostly midtones, with the exception of the important parts, such as interactive objects.
The scene is difficult to read, it's not clear at a glance what's walkable ground, what's a wall, and what's interactive. It's possible to figure out by taking a closer look, but it would likely make navigating your world tiring. Make sure that important gameplay distinctions are easily distinguished visually. For example, trees, buildings, and walls in Hyper Light Drifter are usually red/purple or light grey, making them very obvious against the green, blue, and dark grey ground. Many 16bit RPGs would have dark houses and light ground or vice versa, to make each screenful read very clearly to the player. The exact colours you use can of course vary from place to place, what's important is that in each area, the distinctions are clear.
The environment feels unnatural because it's so perfect and blocky. Create imperfections, transitions, etc. For example, buildings rarely just have the exact same texture from the ground to the roof, there are usually visible transitions into the ground and into the roof, reflecting the construction of the building. Doors are rarely flush against the ground too, there are often steps or at least some sort of threshold. These kinds of details are large-scale enough to not be distracting noise, but lend a lot of believability to a setting.
Are the buildings meant to be realistically scaled for the characters, or are they meant to be small so that the maps aren't too big? I'm afraid it's rather unclear.
-
Thanks for the tips :), I have redone the most of the tileset
I have placed the sprites at their normal scale (upss!)
watching hyper light drifter and that's the perspective I want to achieve.
update version:
(https://i.imgur.com/JupRUOy.png)
I will continue adding some details that I omitted and then I will update
opinions?
-
I think it's an improvement aesthetically! The buildings look much more cohesive since they're no longer made out of distinct tiles, and the blue lines on the pavement look interesting.
You're not "selling" the perspective just yet. Since it looks like you're going for a low-ish camera, things should appear squished vertically, meaning a "square" on the ground will appear wider than it is tall. This means that the vertical roads should be wider than the horizontal ones. You can still achieve this with square tiles, of course.
The dark roofs of the buildings blend into the ground. Making them be closer in colour to the walls would make the buildings read more as cohesive, unambiguous whole shapes. The roofs can still be darker than the walls, but they should probably be lighter than the ground, since the rest of the building is also lighter.
Here's an edit where I adjusted the building colours and the structure of the roads:
(https://i.imgur.com/VenXdgq.png)
I made the buildings lower-contrast and darker overall, as they were overwhelming the characters (and probably still are!). Making bright, colourful settings is challenging because it's easy for the characters to get lost. Experiment with lower-contrast colours in the background and more popping colours (and maybe outlines) on the characters to find a way to make the characters stand out clearly from the backgrounds.
I redid the green pavement edges to give them some volume. The vertical surfaces are now shaded and the horizontal surfaces are light. I think this looks less flat than having a dark green strip along the road and a light green strip on the pedestrian side. Notice how for the pavement edge tiles that are below the road, I added the textures onto those tiles instead of using a separate tiles like on all the other edges. This helps create the illusion that the pavement rises higher than the road surface, and makes it easier to make the horizontal roads a bit more squished than the vertical ones.
I replaced the dark green with a bluer, darker green so that it contrasts better from the light green, making the shadows read better.
I got rid of the light blue on the sidewalks, as it was creating too much contrast in what should probably be a "plain" walking surface. I think it still looks very detailed and cool even with just the darker blue.
I made the road dividers all just flat dark green, as they're flat on the ground and shouldn't look 3D. I chose dark green instead of light green because it doesn't contrast as much from the pavement and thus doesn't draw unnecessary attention to the dividers. I made the road dividers wider in the vertical tiles. This means using additional tiles, but I think it helps with the perspective. To compensate, I reduced your pedestrian crossing set from using 6 tiles to using just 1.
Lastly, it seems that your street lights were facing sideways rather than down xP From above, we should see the tops of them.
Edit: What are you aiming for with the windows? Are they glowing blue, or is that glass? Glass is reflective, it's not inherently blue. From above, the windows would probably not be reflecting the sky, but rather the street, which is relatively dark. You could probably achieve more realism by making the windows just dark or grey, without any overt reflections or highlights. You could suggest vague reflections with some low-contrast blobs using colours from the rest of the scene.
-
Thanks eishiya for the tips :)
well, I added somethings
I played a little with the contrast, I also placed the main character in 4 versions (black outline, original and others with slightly brighter tones), opinions or advice ????
I placed a flying car although I think I have to adjust the view, maybe a little more leaning forward?
choosee a dark tone for windows with some street tones
(https://i.imgur.com/e7npJDF.png)
some help?
thanks in advance.
-
Great improvements on the buildings! The plain windows work well. Consider having some of them lit up for variety.
Good idea to replace the road arrows into corner-lines. It looks like the width on them is inconsistent with the horizontal divider lines though xP
The car does look a bit odd, I think we should see more of the front (or back, for cars moving upward). The shadow underneath the car also looks strange, the position suggests that the car is close to the ground, but the shadow's small size suggests that the car is far away from the ground. The shadow also seems a bit too dark where it overlaps the green road markings, I think we should see the markings more easily.
This is more of a nitpick, but I figure I should throw it out there because it's what I'd think about as a player: Why do the roads turn so sharply? Sharp turns like that would require the car to slow to a crawl and would probably look unnatural once the cars are in motion. Such turns work for intersections, but they're hardly ever found along single roads, and even intersections usually widen at the actual intersection to accommodate turns. I think at least you should have some road tiles at 45 degrees to make smoother turns. It would mean creating more sprites for the cars, but with just horizontal, vertical, and 45 degrees, it wouldn't be too many sprites.
Alternatively, you could avoid having roads bend at all, and just have straight roads with intersections. Midtown Manhattan largely gets away with that, it's full of + and T intersections.
For the characters, I think the black outline is the most effective, especially since it looks like the backgrounds will be all over the place with their values, so you can't rely on the characters' values alone to make them stand out.
-
I think you should really skew the proportions of every horizontal surface (ground, etc)
quick edits below:
road dividers (width, and especially frequency)
curb width
removed "step" for curb when going in direction of road (people would stumble if there was a step up)
(http://i65.tinypic.com/migdwo.jpg)
I didn't have the time to do it, but even the roads going up-down should be much wider than the roads going left-right.
-
thank you both for your advice :)
I modified the perspective in the buildings, some advice?. I also drew a new car trying to give it to certain inclination.
new version:
(https://i.imgur.com/hXA9gva.png)
-
You can push the perspective on the sprites a bit.
(https://imgur.com/wHVchB5.png)
Also, made the boots more metal (contrast=metal) and shoved pixels around to clarify some stuff.
-
looks like some kind of syndicate game, it's quite awesome for your first tiles. - That's my humble programmer's view ;)
-
You can push the perspective on the sprites a bit.
(https://imgur.com/wHVchB5.png)
Also, made the boots more metal (contrast=metal) and shoved pixels around to clarify some stuff.
hey cool, I tried to do the 8 directions (still in process :-[), to see how it looks on the map, my intention is that it can move freely
a new enemy created by a partner (it's a programmer too) sprite its not finished yet and he still also learning pixel art
update:
(https://i.imgur.com/AfvYJPM.png)
Thanks everyone for your help!
looks like some kind of syndicate game, it's quite awesome for your first tiles. - That's my humble programmer's view ;)
Thanks :)
new update (just character):
(https://i.imgur.com/8i44a97.png)
What do you think?
4 or 8 directions movement?
Thanks in advance :)
-
The east/west sprites are nearly identical to the SW/SE sprites. Surely you can make them more distinct? Perhaps draw them more in profile rather thgan 3/4 view?
The north/south sprites are rather boring because of how symmetrical they are. Few people stand with perfect symmetry, let the character rest their weight on one leg. The south-facing sprite seems to have very different shadows from the rest.
The heels on the NW/NE sprites look very curved, it doesn't look like we're seeing the heels from above, but rather that the heels themselves are sort of off the ground. I think this is a combination of the shadows on the feet, and the fact that they then go into a horizontal line rather than an angled one, so it doesn't really read like a foot seen from slightly-above.
-
The east/west sprites are nearly identical to the SW/SE sprites. Surely you can make them more distinct? Perhaps draw them more in profile rather thgan 3/4 view?
The north/south sprites are rather boring because of how symmetrical they are. Few people stand with perfect symmetry, let the character rest their weight on one leg. The south-facing sprite seems to have very different shadows from the rest.
The heels on the NW/NE sprites look very curved, it doesn't look like we're seeing the heels from above, but rather that the heels themselves are sort of off the ground. I think this is a combination of the shadows on the feet, and the fact that they then go into a horizontal line rather than an angled one, so it doesn't really read like a foot seen from slightly-above.
Hi, thanks eishiya :)
here my update on the character (N-S and NW-NE)
E and W I would not want to modify it many (by the view on the map)
(https://i.imgur.com/ojtVFpP.png)
...and here an update on the map:
I have added more details to the buildings also this past weekend I started to practice drawing trees and shrubs, I wanted to place some that looked artificial(hologram like), some tips here? :blind:
(https://i.imgur.com/W3IMq9J.png)
-
Watch your consistency between the different views of the character. For example, the trousers get wider and the boots get narrower in the back and front views. The lighting is also inconsistent.
I quite like the details! The city's starting to look like a city. Watch your road widths though - as I and yrizoud said earlier, the roads running vertically should be wider than the ones running horizontally, due to the low camera angle (simulated perspective distortion).
For the hologram trees, try something like this, perhaps?
(https://i.imgur.com/jK8Se9N.gif)
This is just a two-frame animation, each frame showing alternate lines of the tree. The lines are at full opacity, but because it switches between the frames rapidly, it creates the illusion of transparency while also having that "scanline" look that people associate with holograms. It's also more interesting than just a static image. If the tree is too opaque or too high-contrast like this, you could lower the opacity on the entire sprite (in-engine ideally, so that you can fine-tune the opacity to the location).
If you want the holograms to be static, maybe make alternate scanlines brighter/darker instead of having them all be the same? Visible scanlines make everything look like a screen/hologram 8]
As an additional detail, maybe have some sort of base under the holographic trees, so that they don't just look like they're magically projected out of nowhere? It's not important, but it would add more believability to the setting.
-
Watch your consistency between the different views of the character. For example, the trousers get wider and the boots get narrower in the back and front views. The lighting is also inconsistent.
I quite like the details! The city's starting to look like a city. Watch your road widths though - as I and yrizoud said earlier, the roads running vertically should be wider than the ones running horizontally, due to the low camera angle (simulated perspective distortion).
For the hologram trees, try something like this, perhaps?
(https://i.imgur.com/jK8Se9N.gif)
This is just a two-frame animation, each frame showing alternate lines of the tree. The lines are at full opacity, but because it switches between the frames rapidly, it creates the illusion of transparency while also having that "scanline" look that people associate with holograms. It's also more interesting than just a static image. If the tree is too opaque or too high-contrast like this, you could lower the opacity on the entire sprite (in-engine ideally, so that you can fine-tune the opacity to the location).
If you want the holograms to be static, maybe make alternate scanlines brighter/darker instead of having them all be the same? Visible scanlines make everything look like a screen/hologram 8]
As an additional detail, maybe have some sort of base under the holographic trees, so that they don't just look like they're magically projected out of nowhere? It's not important, but it would add more believability to the setting.
hey, thanks :)
about the trees, I was trying something like that, then I'll put something in the tree base like the bushes, thanks for the tips
here my update on N-S:
(https://i.imgur.com/KH6LZDh.png)(https://i.imgur.com/0xDPHa1.png)
I tried to keep the shape in the legs :-[ and the shadows (or folds) come from top to bottom (N-S) :mean:
in the next map update I'll modify the roads ;D
last edit, first post update with full map:
(https://i.imgur.com/H5Nyti4.png)