AuthorTopic: [WIP][C+C] platform tileset  (Read 12848 times)

Offline japie81

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

[WIP][C+C] platform tileset

on: April 10, 2015, 10:30:27 pm
I'm working on a tileset for a platformer, and so far i have this:



Any thoughts on how to improve it? The shading on the tree is horrible, but i wanted to expand the tileset first before improving that. I would like to make some kind of distinction between a background layer and a foreground layer (where the player would be able to walk) with those rocks, but i'm not really sure how.
Also i had the idea that the player could jump/walk on the trees or maybe use them to bounce on or something so they could have a cool animation (probably not as cool as i'm hoping for since i'm very much of an amateur), so its alright for them to stand out so much.
Any tips and ideas would be very helpful.
« Last Edit: April 10, 2015, 10:44:49 pm by japie81 »

Offline Skaz

  • 0010
  • *
  • Posts: 111
  • Karma: +0/-0
    • View Profile
    • My DeviantArt

Re: platform tileset

Reply #1 on: April 10, 2015, 10:47:26 pm
To give you some advices on achieving background / foreground distinction, you can use atmospheric perspective. In a nutshell, the further, the less saturated, the lighter.


Or go the other way, light foreground, dark background. The only thing that matters is contrast. Never should you fail to tell if something is on the same plan than the character, or if it is in the back.

As far as walking on top of trees is concerned, a good way to show the player where he could walk is, again, contrast. Look at this DK country screen shot, it summarize the dark background / light foreground, as well as showing a clear path. Ground is very light, trees you can walk on are also lighter. It's all about contrast. Close your eyes barely entirely until you only see the lighter part of the image. What did you notice ? then do the same on your tile set. What stands out ?

Offline japie81

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

Re: [WIP][C+C] platform tileset

Reply #2 on: April 10, 2015, 10:59:45 pm
Thanks for the advice. I was actually a little inspired by (the colorfulness of) donkey kong country, so great reference.
I was also thinking about something like this, what i ment with having a foreground and background layer of rock tiles. I notice what you pointed out about saturation here as well. I wouldnt know where to start if i wanted to turn my rock tiles into something like this though.


Heres a little mockup of what i started out with.

Offline Skaz

  • 0010
  • *
  • Posts: 111
  • Karma: +0/-0
    • View Profile
    • My DeviantArt

Re: [WIP][C+C] platform tileset

Reply #3 on: April 10, 2015, 11:15:18 pm
Well, you can see it clearly on your reference screen shot, the actual ground is lighter than the rock itself. So you feel the path. I'd say, work a bit on the rock, make it darker, less contrasted, and make the grass on top of it stands out. I faced the exact same problem, for what it's worth, I can show you what was my attempt at solving it:



My background rocks were still too light. But the actual ground stands out, so when navigating you can't get confused, you know where walls, ceiling and ground is.

Offline japie81

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

Re: [WIP][C+C] platform tileset

Reply #4 on: April 10, 2015, 11:24:45 pm
I see how that could work, and it definitely works in your game, that looks great, i like the dwarf too.
I'll have a go at it and will update how it turned out, thanks.

Offline japie81

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

Re: [WIP][C+C] platform tileset

Reply #5 on: April 11, 2015, 08:45:03 pm


I'm quite happy with the grass now. Not sure about the background, perhaps a different pattern would work better, as this is just the same tile positioned slightly diferent. I would also like to make transitions between foreground and background so it would look more like it's all belonging to the same rock.

Offline Seiseki

  • 0011
  • **
  • Posts: 915
  • Karma: +1/-0
  • Starmancer
    • OminuxGames
    • http://pixeljoint.com/p/35207.htm
    • StarmancerGame
    • View Profile
    • Starmancer Patreon

Re: [WIP][C+C] platform tileset

Reply #6 on: April 11, 2015, 09:01:38 pm
The rocks are grabbing all the attention now, the top of the platforms should be the important part because it's where the player will run and jump on top of.
The pattern itself is also quite overwhelming..

Offline japie81

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

Re: [WIP][C+C] platform tileset

Reply #7 on: April 11, 2015, 09:10:23 pm
what about something like this? (quick edit)

Offline CelioHogane

  • 0010
  • *
  • Posts: 108
  • Karma: +0/-0
    • View Profile

Re: [WIP][C+C] platform tileset

Reply #8 on: April 11, 2015, 09:23:31 pm
fix the grey pixel in the center of every square, and, hmmm, ¿maybe add a second layer of rocks a little more dark to make the transtition less abrupted?

Offline Seiseki

  • 0011
  • **
  • Posts: 915
  • Karma: +1/-0
  • Starmancer
    • OminuxGames
    • http://pixeljoint.com/p/35207.htm
    • StarmancerGame
    • View Profile
    • Starmancer Patreon

Re: [WIP][C+C] platform tileset

Reply #9 on: April 11, 2015, 09:40:46 pm
That's a lot better!  :y:
You should look into simplifying the background as well.

Offline Skaz

  • 0010
  • *
  • Posts: 111
  • Karma: +0/-0
    • View Profile
    • My DeviantArt

Re: [WIP][C+C] platform tileset

Reply #10 on: April 11, 2015, 10:12:16 pm
Yeah, you lost a lot of texture in your rocks, but I think its a needed sacrifice for readability. Now for the trees, the very top, the walkable space, should be light, and the leaves should be darker. This way it appears logical to walk on top of it.

A dirty edit to show my point :

Offline japie81

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

Re: [WIP][C+C] platform tileset

Reply #11 on: April 11, 2015, 10:14:07 pm



It looks awkward at the bottom above the water, but i think something like this is probably what i should be going for.

About the trees, I was thinking the same thing but I dont want them to look too flat. I might just forget about having the player walk on them but maybe just make them move when the player jumps through them, and perhaps sometimes a hidden item could fall out or something like that.
« Last Edit: April 11, 2015, 10:38:47 pm by japie81 »

Offline japie81

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

Re: [WIP][C+C] platform tileset

Reply #12 on: April 11, 2015, 10:56:16 pm
I didnt make inner corners yet, but you get the idea


Or maybe something like this?
« Last Edit: April 11, 2015, 11:33:17 pm by japie81 »

Offline CelioHogane

  • 0010
  • *
  • Posts: 108
  • Karma: +0/-0
    • View Profile

Re: [WIP][C+C] platform tileset

Reply #13 on: April 11, 2015, 11:41:50 pm
Yeah, now it looks way better.

Offline japie81

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

Re: [WIP][C+C] platform tileset

Reply #14 on: April 12, 2015, 12:28:05 am
Any thoughts on how to do the waterline for those rocks in the background? I already lowered the water where it's not on the foreground rocks by 4 pixels to make things look less out of perspective (as compared to the last pics)

Offline Cheetah

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

Re: [WIP][C+C] platform tileset

Reply #15 on: April 12, 2015, 01:06:12 am
Have you checked out the Open Pixel Project? It seems like you are going for a really similar look.

http://www.pixeljoint.com/forum/forum_topics.asp?FID=23

Offline japie81

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

Re: [WIP][C+C] platform tileset

Reply #16 on: April 12, 2015, 01:16:01 am
I think i've seen a mockup of that jungle tileset before, but its a nice reference. Perhaps I can steal a few ideas from it, thanks!

Offline japie81

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

Re: [WIP][C+C] platform tileset

Reply #17 on: April 12, 2015, 03:01:03 pm


Fixed the background rock tiles. I'm not sure what should go behind that layer though. Plain blue sky seems a bit boring, so I think there should be something between the rocks and sky. Tree roots and plants come to mind, but they would have to be very undetailed and saturated I guess.

Offline Skaz

  • 0010
  • *
  • Posts: 111
  • Karma: +0/-0
    • View Profile
    • My DeviantArt

Re: [WIP][C+C] platform tileset

Reply #18 on: April 12, 2015, 04:08:14 pm
Wayyyyy better :)

A detail that comes to my mind : are the side of the rock block actually blocking? You have put some platform that continue through rock. If the sides of the block are indeed blocking, the player can't go there. I have a simple rule, if you can see ground, you can walk on it. If you want to allow the player to go through the block, make a variant with very dark sides. Visually, it will be easily understandable.

As for the background, the silhouette of a forest maybe? Or a gradient for the sky, would look less flat. Or both?

Offline japie81

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

Re: [WIP][C+C] platform tileset

Reply #19 on: April 12, 2015, 07:44:49 pm
I understand what you mean about the sides of those platforms, I'll try a darker edge like you mentioned and see how it looks.

Any pointers on the waterfall, is it too bright?


update:
« Last Edit: April 12, 2015, 09:24:35 pm by japie81 »

Offline Kazuya Mochu

  • 0010
  • *
  • Posts: 436
  • Karma: +0/-0
  • ^thx Larwick
    • View Profile
    • my portfolio website

Re: [WIP][C+C] platform tileset

Reply #20 on: April 13, 2015, 09:11:51 am
So much better! The level is much less cluttered now, the less noisy, it reads really well and just overall looks cleaner
Image size doesn't matter! It's what you do with your pixels that counts!

Offline japie81

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

Re: [WIP][C+C] platform tileset

Reply #21 on: April 13, 2015, 02:35:00 pm
I made somewhat of a concept for a player character

Offline Decroded

  • 0100
  • ***
  • Posts: 1285
  • Karma: +3/-0
  • Oh hai
    • View Profile

Re: [WIP][C+C] platform tileset

Reply #22 on: April 14, 2015, 12:24:53 pm
I made somewhat of a concept for a player character

good start red hair will stand out
just remember its not a requirement to outline every bit in solid black but that's ur call.
also u don't need to use a gradient on on arms for example, just clustering solid colors with a bit of AA is usually adequate shading at this res.

Would be nice to see a but more of the face instead of so covered by hair

I wonder if the feet not being horizontally aligned will match the front-on view of the platforms.

Offline japie81

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

Re: [WIP][C+C] platform tileset

Reply #23 on: April 14, 2015, 02:48:25 pm
I'm worried that without an outline the sprite will not read very good in front of the background, even with this blue-ish outline it doesnt really stand out yet.
Good advice on the shading, I have a habit of trying to shade even the smallest bits which usually doesnt work out that nice. And yes, I should probably move the hair back a few pixels to make room for eyes at least.
About the feet not being horizontally aligned, I think I should slightly show the tops of the platforms since the water is not exactly front-on either, so I will adjust the tiles a bit.


(don't mind the horribly dithered background, I quickly generated it and it looks shit)
« Last Edit: April 14, 2015, 03:31:44 pm by japie81 »

Offline Seiseki

  • 0011
  • **
  • Posts: 915
  • Karma: +1/-0
  • Starmancer
    • OminuxGames
    • http://pixeljoint.com/p/35207.htm
    • StarmancerGame
    • View Profile
    • Starmancer Patreon

Re: [WIP][C+C] platform tileset

Reply #24 on: April 14, 2015, 04:34:46 pm
The character doesn't pop as much as the terrain, try adding more of those bright colors like you have in the grass and rocks.

Offline japie81

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

Re: [WIP][C+C] platform tileset

Reply #25 on: April 14, 2015, 05:41:13 pm
Yeah you are right, it reads a lot better already.


Still doesnt look quite good though
« Last Edit: April 14, 2015, 05:53:11 pm by japie81 »

Offline japie81

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

Re: [WIP][C+C] platform tileset

Reply #26 on: April 14, 2015, 06:45:57 pm

« Last Edit: April 14, 2015, 08:07:19 pm by japie81 »

Offline BlackTerror

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

Re: [WIP][C+C] platform tileset

Reply #27 on: April 14, 2015, 08:01:34 pm
I don't like how the distant background rocks are lighter and more contrasting than the near background rocks, it feels like an optical illusion. Even with this bright saturated gradient background. I'd try reversing their respective highlight colors.

Offline japie81

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

Re: [WIP][C+C] platform tileset

Reply #28 on: April 14, 2015, 08:08:30 pm
Yeah, I see what you mean now that you mentioned it. Thanks for pointing that out.

Offline Seiseki

  • 0011
  • **
  • Posts: 915
  • Karma: +1/-0
  • Starmancer
    • OminuxGames
    • http://pixeljoint.com/p/35207.htm
    • StarmancerGame
    • View Profile
    • Starmancer Patreon

Re: [WIP][C+C] platform tileset

Reply #29 on: April 14, 2015, 08:45:56 pm
Haha, always the bouncy boob compulsion, even at this pixel level.

Her face looks somewhat scary though.
Here's an edit:

Offline Decroded

  • 0100
  • ***
  • Posts: 1285
  • Karma: +3/-0
  • Oh hai
    • View Profile

Re: [WIP][C+C] platform tileset

Reply #30 on: April 14, 2015, 10:09:06 pm
I don't like how the distant background rocks are lighter and more contrasting than the near background rocks, it feels like an optical illusion. Even with this bright saturated gradient background. I'd try reversing their respective highlight colors.
its not that far off imo its the brightness of the rim rocks that's throwing it off.

all that probably needs to be done is duplicate the mid - ground layer then tool-assisted desaturation and hue shift and possibly contrast reduction (might not br necessary), and as always a manual tweak of colours at the end.

Offline japie81

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

Re: [WIP][C+C] platform tileset

Reply #31 on: April 15, 2015, 06:54:46 pm
I made the rocks on the third layer a little darker, and worked on the character sprite a bit



I think perhaps it needs less outline still, also not sure about the face/eyes. The old ones (left) were crap, but i like the kind of sad look it gave her. Any advice?

edit:
« Last Edit: April 15, 2015, 08:05:02 pm by japie81 »

Offline Skaz

  • 0010
  • *
  • Posts: 111
  • Karma: +0/-0
    • View Profile
    • My DeviantArt

Re: [WIP][C+C] platform tileset

Reply #32 on: April 15, 2015, 09:43:43 pm
Maybe go for a square, all black eyes ? With maybe a single white pixel for light reflection. Leaves room for expression with the eyebrows. At such a small size, the idea of the eye is more important than the eye itself ^^ Maybe a (suggested) mouth too? I make sprites too small to even consider add eyes, so sorry if I go overboard with you character :P

Offline japie81

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

Re: [WIP][C+C] platform tileset

Reply #33 on: April 15, 2015, 10:11:59 pm


I'll try and find some sprites with different eye styles to compare and try some different ones

Offline Wes

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

Re: [WIP][C+C] platform tileset

Reply #34 on: April 15, 2015, 10:31:13 pm
okay i was kind of lazy with this and just puushed a screenshot from graphicsgale instead of saving it as an image, so apologies for the sloppiness of the presentation.

also my thing isnt amazing, and the colors are a bit strange in parts, but that's because it's just a quick edit. so hopefully this succeeds in showing you the direction I'd take this:



colors: make the character POP. imo currently your character really kinda fades in with the background. the POP-iness also gives her personality. and that makes it more relatable for the player.

you also had some funky feral stuff going on with the claw hands and imo the legs and feet just weren't working well in that kind of pose. felt off.

good luck man

Offline japie81

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

Re: [WIP][C+C] platform tileset

Reply #35 on: April 17, 2015, 09:16:50 pm
Thanks, yeah it still doesnt pop as much as I would want it too. The problem is that if I make the shades too light it looks very flat, and I also like to have the far away arm and leg a little darker because it makes them easier to tell apart during walk cycles and such. I'll  update what I have so far later.

Offline japie81

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

Re: [WIP][C+C] platform tileset

Reply #36 on: April 19, 2015, 12:27:26 pm
I made the hair and skin a bit lighter, and made a walk animation that doesnt look very good yet.
Here's what I got so far:



« Last Edit: April 19, 2015, 12:34:33 pm by japie81 »