AuthorTopic: Mars Tileset Help/Feedback  (Read 720 times)

Offline Jmrhdb

  • 0001
  • *
  • Posts: 14
  • Karma: +0/-0
    • HelpMyGameComeTure
    • View Profile

Mars Tileset Help/Feedback

on: February 09, 2020, 05:58:14 am
So unfortunately, I can't afford any artist for a project I'm working on leaving me to do all the artwork myself. I've been taking classics on Udemy for the last 2 month and I feel like iv'e gotten a little bit better at pixel art.

So this is a Planet Mars inspired tileset I made in the last few day. I'm not that happy with how it came out, but I was hoping I could get some feedback and learn a few new things  :)



The three character are there for scale, I didn't make any of them

So what is some feedback (or criticism) on it so far?

Thanks!

Offline Chonky Pixel

  • 0001
  • *
  • Posts: 73
  • Karma: +0/-0
    • tequila_ben
    • http://pixeljoint.com/p/187855.htm
    • https://www.facebook.com/chonkypixel/?modal=admin_todo_tour
    • View Profile
    • Chonky Pixel

Re: Mars Tileset Help/Feedback

Reply #1 on: February 09, 2020, 10:31:16 am
There's some good work here, which could be made better with a little cleaning up. Here's a few general points:

If you find yourself adding single pixels, or double pixels, surrounded by space, you're probably adding noise. Noise doesn't tend to convey information, and leads to a messier result. Have a long think about whether noise is required in your image. For example:

The sun probably doesn't need noise, or frilly edges.
The single-pixel rocks in the distance don't look convincing. You could move the mountains down so you don't need the single-pixel rock layer, or make the layers below wider.
The foreground sand kinda looks perforated or stitched.
The highlights on the rocks. Sometimes a gap in a rim highlight followed by a single pixel can be effective. Here, however, highlights wrap around too many edges of the rocks and are too noisy.

Distance:

The mountains in the background are using contrast to differentiate distance. Further away = lower contrast. This is great, although you could probably go a little further with it. The rocks in the foreground are only using size to indicate distance. They could do with some of the same kind of treatment.

Horizontal lines for shading between colours... I've seen them work when used sparingly, but there's a lot of them here and I find them a little jarring. Personal taste though. I tend to prefer larger expanses of a single colour broken up by objects in the scene, with shading kept as much to the edges of the shaded area as possible. YMMV. That goes for the foreground sand too. Too many shades makes it look like layers of paper or cloth to me. Don't be afraid of using areas of the same colour. If you need texture, suggest it in small patches or around edges. Trying to apply it to huge areas like this can end up adding noise to your image. Consider making the foreground sand a single shade, then adding silhouette images of rocks to the foreground where they'd appear in between the character and the camera.

Lighting: one of your rocks has a face that is being lit from the wrong angle (large smooth one, bottom-right). As I said before, your highlights are going round too many edges so it looks like all your rocks have rings all over them. Use your highlights more sparingly and only across one edge, where it would catch the sunlight.

Where shadows in the mountains meet the edge of the shape, disrupt the edge of the mountain to sell the shadow. Think about what shape the mountain would have to be to cast a shadow like that.

Your two layers of mountains are constructed differently. The rear ones break the effect of lighting that you've worked so hard to attain for the foreground ones.

I hope this doesn't come across as too negative, and shout if you need anything explained with images. Keep up the good work!

Offline Jmrhdb

  • 0001
  • *
  • Posts: 14
  • Karma: +0/-0
    • HelpMyGameComeTure
    • View Profile

Re: Mars Tileset Help/Feedback

Reply #2 on: February 09, 2020, 10:21:22 pm
Thanks for the long and detailed replay! And its not negative to me as I wanted flaws in the picture pointed out so I can learn from them and fix them :)

Haha I completely missed how the lighting on the rock was facing the wrong way. I was trying make the rocks more round by adding highlights all around the edges but saving the highlights on only one side makes since.
For the first mountain layer, I tried to copy over the shading from the reference picture I used but I guess it didn't come out right so it will have to be reshaded. Also I don't under stand what you meant by "Where shadows in the mountains meet the edge of the shape, disrupt the edge of the mountain to sell the shadow". And as for the the final mountain layer I tried to make it look like shape edges but it came out wrong.

Again thank for the detailed replay!

Offline Jmrhdb

  • 0001
  • *
  • Posts: 14
  • Karma: +0/-0
    • HelpMyGameComeTure
    • View Profile

Re: Mars Tileset Help/Feedback

Reply #3 on: February 10, 2020, 03:28:48 am
So I spent some time fixing the picture. I didn't address everything like the background sand because I could not for the life of me figure out how to fix the sand so I left it for right now.
The foreground sand needs a lot of work lol but I think its slightly better then the old one

« Last Edit: February 10, 2020, 06:05:55 am by Jmrhdb »

Offline eishiya

  • 0100
  • ***
  • Posts: 1186
  • Karma: +2/-0
    • http://pixeljoint.com/p/28889.htm
    • View Profile
    • Webcomic: Black Dram

Re: Mars Tileset Help/Feedback

Reply #4 on: February 10, 2020, 01:39:52 pm
Chonky addressed a lot of things already, so I'd like to focus on more broad issues:

The rocks are all evenly distributed in the background, so they look very artificially placed. Vary the space between them more, have some bigger gaps and tighter clusters. That will be challenging if you also want to avoid obvious repetition, but perhaps when you're happy with your rock style, you can make more variant tiles with different arrangements to avoid repetition.

Don't be afraid to have rocks crossing tile boundaries. They'll just make full rocks when tiled anyway. That can free you up to have more interesting arrangements, and to make more varied rocks when you have different tiles that "complete" the rocks in different ways.

The high horizon line doesn't match your character sprite (I think the big blue one is the main one?). It looks like we should be looking somewhat down at them because the horizon is so high, but we're not, so the result looks like the character is leaning into the terrain. To match the character, the horizon should be lower than their head, in line with their torso somewhere. If you don't want to have a lot of sky in your scene, you could make the terrain hilly rather than flat.

If the rocks are meant to be parallax layers, I think some of the tiles in front should overlap some of the tiles in back to look more 3D. Old-skool games didn't have overlap in their parallax layers for technical reasons, but overlap helps a lot with selling the illusion of depth. This lack of overlap especially hurts the transition from the near layer of rocks to the next one, since it goes from having a lot of empty space between big rocks to being filled with tiny rocks.


And more specific stuff related to what Chonky said:
None of your rocks cast shadows, and you still have those odd edge highlights. Edges get highlighted like that typically when the light source is in front of the object, i.e. behind the viewer. Since your light source is in the scene, such highlights don't make sense. You don't need edge highlights to make the rocks look 3D anyway, you could probably drop that highlight colour entirely and have a less distracting, more voluminous looking background.

The rocks are high-contrast and distracting as a result. Some less-contrasting colours for the rocks would be great. The rocks in the distance should have even less contrast since the dust in the atmosphere would obscure/scatter their light somewhat.

Here's a small edit to reduce the rock contrast and to have the distant rocks fade out more. I also removed some of the single-pixel details in the foreground rocks, so they look less noisy.

Offline Chonky Pixel

  • 0001
  • *
  • Posts: 73
  • Karma: +0/-0
    • tequila_ben
    • http://pixeljoint.com/p/187855.htm
    • https://www.facebook.com/chonkypixel/?modal=admin_todo_tour
    • View Profile
    • Chonky Pixel

Re: Mars Tileset Help/Feedback

Reply #5 on: February 10, 2020, 09:16:43 pm
I can't believe I missed the shadows!

Some very good points there, and that edit makes the rocks look so much cleaner.

Here's a small edit where I try to give some 3D shapes to those mountains. Think of your mountain like a big rock, which it is. It has a shape, and sides that will either catch the light or be in shadow. Imagine that shape, then define it with light and shade. I've only put in a small number of rock shapes, but what I hope is that you see it as looking more 3D than before.

For the rear mountains I've used the cheat method: just draw a wiggly line from the peak to the ground and make the half nearest the sun bright. They don't necessarily go together, it's just a demonstration.



I left the one on the right alone, for comparison.

Offline Chonky Pixel

  • 0001
  • *
  • Posts: 73
  • Karma: +0/-0
    • tequila_ben
    • http://pixeljoint.com/p/187855.htm
    • https://www.facebook.com/chonkypixel/?modal=admin_todo_tour
    • View Profile
    • Chonky Pixel

Re: Mars Tileset Help/Feedback

Reply #6 on: February 10, 2020, 09:34:28 pm
As for your edits, Jmrhdb, I much prefer the lower sand texture in the new one. It's still a bit noisy, but it's closer to having shape and texture defined by light and shade. It's also a good start at a ground tile for platforming.

I don't think the sun needs rings. I would probably experiment with a smaller sun in just one bright colour, with some light antialiasing, to see how that looked. I mean, the sun looks pretty small from this planet and Mars is further away than we are. The sun is also high in the sky, which tends to make the sun and moon look smaller.  (It's an optical illusion, as you'll probably have found out if you've ever tried to photograph a giant moon low in the sky.)

Offline Jmrhdb

  • 0001
  • *
  • Posts: 14
  • Karma: +0/-0
    • HelpMyGameComeTure
    • View Profile

Re: Mars Tileset Help/Feedback

Reply #7 on: February 11, 2020, 01:28:21 am
Hey, thanks eishiya for the tips and the edit!
And yes I was trying to set up the rocks for a distance parallax effect, and I tried to over lap the closer rock with the more distance ones but it didn't look quite right (though it was before I added contrast for distance )so left it.

I haven't figured out a way to put a shadows on the sand yet but I'm getting there haha.

One last thing is that I'm trying to give the rocks more detail and texture thats why I left the highlights but I will try again with the edits you made.

Thanks! :)

Offline Jmrhdb

  • 0001
  • *
  • Posts: 14
  • Karma: +0/-0
    • HelpMyGameComeTure
    • View Profile

Re: Mars Tileset Help/Feedback

Reply #8 on: February 11, 2020, 01:53:26 am
Chonky Pixel,

For the lower sand, I tried to ovoid single spaced pixels like you mentioned in your other post, however when trying to give it texture I guess it came out as noise. What would you do to fix it?

Good points on the sun ill defiantly fix it.

Offline eishiya

  • 0100
  • ***
  • Posts: 1186
  • Karma: +2/-0
    • http://pixeljoint.com/p/28889.htm
    • View Profile
    • Webcomic: Black Dram

Re: Mars Tileset Help/Feedback

Reply #9 on: February 11, 2020, 03:00:53 am
Try to avoid the temptation to add more detail to unimportant background elements. More often than not, that extra detail doesn't actually help, and only distracts.

Offline Jmrhdb

  • 0001
  • *
  • Posts: 14
  • Karma: +0/-0
    • HelpMyGameComeTure
    • View Profile

Re: Mars Tileset Help/Feedback

Reply #10 on: February 11, 2020, 06:14:58 am
Try to avoid the temptation to add more detail to unimportant background elements. More often than not, that extra detail doesn't actually help, and only distracts.

Got it

Offline Chonky Pixel

  • 0001
  • *
  • Posts: 73
  • Karma: +0/-0
    • tequila_ben
    • http://pixeljoint.com/p/187855.htm
    • https://www.facebook.com/chonkypixel/?modal=admin_todo_tour
    • View Profile
    • Chonky Pixel

Re: Mars Tileset Help/Feedback

Reply #11 on: February 11, 2020, 01:40:07 pm
Chonky Pixel,

For the lower sand, I tried to ovoid single spaced pixels like you mentioned in your other post, however when trying to give it texture I guess it came out as noise. What would you do to fix it?

Good points on the sun ill defiantly fix it.

With the new lower sand texture, just the removal of a couple of dark pixels (they're joined diagonally) will help really help remove noise. Think in terms of 'clusters' of pixels of the same shade. A cluster, where all the pixels are touching, can have shape and definition. A single pixel does not. In my opinion, sometimes a pixel joined diagonally to another pixel can 'count' towards a cluster, but if it's just two pixels alone, usually not. This might all sound a bit odd, but clusters are one of the keys to good pixel art.

As for grander strategies, you've tried the main two now. Previously you tried putting a texture across the whole area. The newer verison gives a platform for the characters to walk on.

As this is for a game, you could concentrate on the latter. Maybe develop your texture into something made of stones or similar, then build out that tile set for use as floating platforms and the like. What's good about it so far is that it looks a bit like it's made of something solid. The light and shade suggests form, unlike the previous texture that didn't quite know what it was. You could develop the pattern by working on the clusters and pushing that 3D effect further.

Your original look seems more "Streets of Rage" than platformer. You could imagine your characters being placed lower on the screen and they'd seem closer. If you want this effect, you could try thinking of the sand as seen from a distance.

If you remember all those films, cartoons, TV series etc. where people find themselves in a sandy desert, what comes to mind? For me it's not a lot of detailed texture, it's some very large wiggly shapes. Much like the more distant mountains in my edit, you get sand dunes that are characterised by being smooth, the detail coming from ripples of sand that are whipped up by the wind. On a smaller scale, you will probably still see low ripples. There won't be much detail because sand can't form very complex shapes unless it's wet or has vegetation growing in it. But you'd still get something like those rear mountains on a lower, smaller scale.

Some inspiration:

This guy on Twitter is pretty incredible. This is an old background of his, but demonstrates the rippling sand effect. You can see that the grainy sand texture is implied by the occasional bit of crosshatching.
https://twitter.com/Contra_Bonos/status/1219022388496674816/photo/1


General sand and ripply stuff.
https://www.google.com/search?q=sand+dunes+ripples&tbm=isch&source=iu&ictx=1&fir=JsSCuOUYCNpIvM%253A%252CwKapMrqyHM3O6M%252C_&vet=1&usg=AI4_-kQ8dj63Uc-soEYHbwlcetJbZVmYTw&sa=X&ved=2ahUKEwjIlLya0MnnAhU8UxUIHTnLBlgQ9QEwAnoECAoQIA#imgrc=JsSCuOUYCNpIvM

« Last Edit: February 11, 2020, 01:47:56 pm by Chonky Pixel »

Offline Jmrhdb

  • 0001
  • *
  • Posts: 14
  • Karma: +0/-0
    • HelpMyGameComeTure
    • View Profile

Re: Mars Tileset Help/Feedback

Reply #12 on: February 13, 2020, 01:35:40 am
I went and fixed a few more things, but its still very far from being presentable in a game. I tried to fill the background with wavy sand (without the rocks) like Chonky Pixel suggested but I could not get it to look right with the distance perspective.
I did make a wave sand texture but like I said it doesn't work well in the picture and believe me I tried several different times to make it work but Its to difficult for me to do it. If anyone would like to take up the challenge and make it work that would be really cool.

Anyway for now im going to call it here and work on other things but thanks for all the help! :)





Offline Chonky Pixel

  • 0001
  • *
  • Posts: 73
  • Karma: +0/-0
    • tequila_ben
    • http://pixeljoint.com/p/187855.htm
    • https://www.facebook.com/chonkypixel/?modal=admin_todo_tour
    • View Profile
    • Chonky Pixel

Re: Mars Tileset Help/Feedback

Reply #13 on: February 13, 2020, 10:07:47 am
Apologies, I tend to ramble on and I obviously wasn't clear. I was suggesting the wavy sand as a replacement for the foreground, lower part instead of the ground texture you have there currently. For the background, a non-textured look is fine. Apologies if I sent you down the wrong path.

I would concentrate on rock placement (as suggested by Eishiya) as it's still looking very regular and unnatural.

See here:

https://www.newsweek.com/life-mars-microbes-chilean-desert-822195

Your wavy sand does indeed look wavy. Well done on that! :) The waves are on a small scale and you could probably get the same or a better effect with less detail, but it's a great start.

I'm having a think about how I would approach adding texture to the background sand. As it stands, the patches of light and shade you're using are starting to hint at something with shape and form, but they don't quite come together. Imagine you want to get across the idea of the sandy waves, but you don't want to spray that texture all over the background (and parallax would make it look very odd while scrolling anyway.)

However, you've now had practice making your sandy wave shapes, so you could imagine that the occasional wave stands out a little. Maybe it catches the light just right, or it's a bit bigger than the others. How would it affect the scene?

 - The bases of the rocks might show build-ups of sand on one side, and wavy bottoms.
 - The rock shadows might be disrupted by the waves in the sand.
 - You might lightly define short segments of these occasional waves in the sand here and there.

Currently the rocks look a little like they're floating, perhaps because of the flat bottoms and the shadows that seem to be disconnected from the left side of the rocks. Having the sand interact with them and their shadows might help you create a more cohesive scene.

I may make an edit later if I have time.
« Last Edit: February 13, 2020, 10:21:48 am by Chonky Pixel »

Offline Chonky Pixel

  • 0001
  • *
  • Posts: 73
  • Karma: +0/-0
    • tequila_ben
    • http://pixeljoint.com/p/187855.htm
    • https://www.facebook.com/chonkypixel/?modal=admin_todo_tour
    • View Profile
    • Chonky Pixel

Re: Mars Tileset Help/Feedback

Reply #14 on: February 13, 2020, 03:32:02 pm


I made a quick edit to the rightmost four rocks on the bottom layer, to stop the rocks getting that floaty effect.

Offline Jmrhdb

  • 0001
  • *
  • Posts: 14
  • Karma: +0/-0
    • HelpMyGameComeTure
    • View Profile

Re: Mars Tileset Help/Feedback

Reply #15 on: February 15, 2020, 05:34:28 am
Thanks for the edit Chonkey!

The rock placement is off because I made them tillable so I could put them in any layout without them starting to look like there repeating and for the parallax effect.
In the future ill probably start this scene over again from scratch since I tend to do that when I feel like my art isn't coming out the way I want it. On second attempts I usually get it just right.