Sprite vs Background, ongoing battle

[Stwelin]

For all you game developers and artists, maybe you know or have been through this issue. I've run into the the issue of a sprite showing up poorly on different shades of backgrounds.

The original sprite has no outline, and the shades are fairly close to 50/50, or at least that is how they read. here is the character:


So the game has fairly dark background, except in a case such as this, the character will be ontop of a rather large object that is not as dark, and it reads somewhat poorly. maybe i have been staring at it too long. (i know the green reads alright, but the pants/hat area bugs me badly.)



I really don't want to take the cheap way out with a black outline.

So what do you guys and gals suggest? 
(as always, edits welcome.)

Cheers,
Stwelin

Edits/Updates:

[AdamAtomic]

i'd just make the purple parts lighter, or use a different color there - purple is VERY dark generally speaking, and will only really stand out against incredibly dark backgrounds properly.  If you squint, you can still make out the green and skin tones pretty easily, its just the purple that gets lost.

[Andy Tran]

 Looking nice. I'd say use the black outline. It makes him stand out more.  

[Xion]

Can you give him a cast shadow that shows up darkly on the bg?
Or give some other indication of his position, like every time he takes a step a puff of dust pops up?
Put some lights on the bg that casts it into a different color...?
I dunno, just some ideas.

[Ryona]

If you really don't want to change anything about the character's appearance, I'd suggest to make the character very animated so that he'd be easy to spot. Even when he's standing idly, he should move around a bit like look from side to side, dust him himself off, flip a coin, etc...

Cute character by the way. 

[Stwelin]

Thanks for the responses.

Adam: i tried messing around with the purple, but i cannot get it to the point were it is saturated how i like it, but still shows up.

Xion: I like the shadow casting idea, I think i may just have the game draw the same sprite behind him at a certain transparency or color. I might take an intuitive approach and only have it draw it if the pixels around him at above a certain brightness. 

Ryona: Thank you! I think i will have him do some idle stuff, actually. maybe a yo-yo.

[Stwelin]

Sorry for the doublepost, here's a little update.

[leel]

hehe i love the stretchable pocket!  very cute ^_^  though the yo-yo looks a little big imo,

[Xion]

Yeah, I think a 2x2 yoyo would be cool...
But then again the point is to draw attention so the player knows where the character is, so I guess its fine like it is.

[sharprm]

Thats a cool animation. Hope you do more like he blows bubble gum etc.

[junkboy]

Isn't it a bit inconsistent if the main characters lacks outlines while the BG object has them?

That idle animation is really sweet btw. 

[Ryumaru]

i think  a 2 x 2 yo yo would be fine, and to indicate spinning you could have darker shades like so:
frame one
l
  l
frame 2
  l
l


if that makes any sense.

[Stwelin]

Thanks for the input on the idle animation, i'll take that all into consideration, but posting such minor edits would be pointless. it's only a few pixels afterall.

Here is an update, including an example of the tileset. I really want some input focusing on the palette with this one. I've been playing around with the colors for ages and cannot find anything i like.

[Andy Tran]

 Wow, awesome mock up there man. I think the character fits with it. Good luck on making your game.

[Stwelin]

The screenshots are taken from the program running in GameMaker, the program which i am also using to code it.

Here is a screenshot of the game running:



I added some background silhouettes, added another color to the tiles and messed around with the palette, i would still really appreciate input on the tiles, btw.  And also changed the color of the sky.  Note that the fire on the meteor there is based on 1-color particles, and does not have to do with my pixel art, really, it's just a bunch of randomly generated circles.

[snader]

the tiles are VERY busy, and imho don't fit with the character. i think you should look foor something simpler, flatter and less shaded
the meteor fits the character pretty well though, probably because its rather flat colours as wel

[Delgneith]

I have to agree that the ground tiles are very distracting. If I were you I'd only show the "ground" about 1 tiles depth, or MAYBE 2 down. You don't want it too deep or it's very distracting. There's something else about the actual way you shaded the ground that seems off. I'm not sure I can think of it offhand.

Oh another point is that the background seems to look very similar to what vedsten was doing in his latest mockup. With the trees and mountains. http://www.wayofthepixel.net/pixelation/index.php?topic=3019.0

Not bad otherwise.

[Stwelin]

I actually did get the idea for the tree/jungle stills in the back from vedsten's platform mockup, i tried to do my own sort of style with it, but the mountains in the background have been a constant since i started the game weeks ago, mainly because the entire civilization resides inside of a hollow mountain. ( for example: the pod in the first post is a type of dwelling which is suspended inside of the mountain.  ) But yes, when i saw that thread i thought those sort of silhouettes would add more atmosphere.  The game is actually an adventure and exploration game, so there are many various environments, this forest type scene won't be a constant throughout the entire thing.

So far on the tileset i've taken out the highlights to allow it to stay consistent with the character, as well as darkening the purple, i'd post it, but it's a minor change.

[fawel]

I'm just curious- are you using the fox engine, or one of your own?

Very nice tiles- I will critique them I like to think of tilesets as one of my fortes

Simply to make level dsign more simple, and to make the levels seem overall less busy, I would completely ditch the second "interior" tileset, and build it into the first.  This way you can also build in an autotiler (scribble the level, and when the level creates itself, it cretes a tile depending on it's location, then if there are objects surrounding itself on four sides, it deletes itself, sorta thing- I'll send you an example if you like)

The grass, first of all, needs to be darker.  It also needs to hang down over the edges, at the moment it looks like it's mowed.

http://img457.imageshack.us/img457/327/tilepng11ku2.png
So that's a rough edit of what I mean.  Edit- broken image, so I posted a link instead.  Hope it works <_<

Also, study some of these, to improve your own

As a game Download the game version of this tileset












yes, some showoff, but I really do think these will help you.

Awesome character and animations, btw!

[Andy Tran]

 Impressive.  Hwever, the mockup on the bottom is too contrasted too much. I would reduce the contrast. Make the colors less dull by varying the hues. That's all I got, cya.

[Stwelin]

Thanks fawel. I coded my own engine, and i've always done so. I've been a programmer for a much longer time than a pixel artist. I did think about doing an autotiler, but there are some kinks that i need to work out. For example, the edit you did doesn't include the little 'diagonal' tiles that are on the 4 corners of the second set in my tiles, if you had a ledge like this:

   |
   |____
  x

Where the "x" is would be a blank tile, and the ones to the right of it and above it would end abrubtly.

I am thinking of giving the "block" or "platform" instance a variable that will change depending on how it's positioned and what surrounds it. Then, a block that is where the "x" is could check the variables of the blocks around it, and then it would know to become a cornerstone, persay.

Thanks for the example. i really appreciate the ideas.

(oh, btw, i am using the hspeed function in gamemaker to move the character, but i have not worked out ramps/slopes yet, not sure if it's entirely possible if you use anything but X displacement, however, i like the mario-esque smoothness and friction you get from using horizontal speed.)

[fawel]

Do not use hspeed, use jump to position(x+3 for keypress right, etc0 , theres a dnd function for it.  That way when you do slopes, you can code " x+3, y+1 "  It's kind of complicated, but I really recommend you look at the foxengine to get a better idea of how it works.

Foxengine

(I know this isn't pixel-related, just trying to help)

[Stwelin]

That's the thing, i think that when you do x displacement it makes the game look really tacky. i like having friction and it gives the player better feel for control.  I hate the fact that going up slopes using X displacement also makes you go like 2 times as fast as on flat ground.

on a more 'on-topic' note, here are some screenshots with updates:



You'll notice i've taken out the highlights on the tiles to make the style match the character more. That also gives an example of the circular menu system which i've implemented. you carry 6 items at a time. as i said before it's an adventure/puzzle/exploration game.

[Xion]

I used GM for a hot second forever ago, and it prob'ly changed alot since then, but can you make it so that...

If you're on a slope and pressing the movement button, your maximum horizontal speed lowers, but the y + 1 or something? Or maybe make it so that if you're in contact with a slope, something like "slope = true," the character behaves differently with the movement button presses...? Like, if slope = 0, move like normal, but if slope = 1 & key pressed, horizontal movement = relative speed + 1 & vertical movement = horizontal speed/2...?
So that way, when he's going up the slope with acceleration, his horizontal speed won't exceed the actual angle of the slope.

Well, if that can't be done, I apologize for injecting this problem with my stupidity.

Oh, by the way, those screenshots look freaking delicious...and did you ever fix the sprite+bg problem?

[Stwelin]

To be honest GM is really pretty buggy when it comes to using its built in functions such as 'hspeed' and all those things. The code should work in theory, but it's a bitch to actually get GM to do it correctly. (pardon my language) I know how to do it if you use a simple code like:

Code: [Select]

if left_pressed = true
{
x -= 1
}
because the charcter's 'hspeed' is always 0 when you use that method, eliminating the possibility that he will clip into the wall, which is basically what happens when you use hspeed, and it's only correctable when dealing with non-slope obstacles. I try to get away from the drag+drop feature so i have control over the scripting. i mainly use it because i am too lazy to learn a better dev. language. I am thinking of trying out pygame, but the level design would be a nightmare. (GM gives a nice little implement to put together levels and rooms.)

But let's get away from the coding, i'll deal without slopes for the time being. I did fix the sprite and background problem for the most part. the character actaually has an alpha-fade shadow now, although it's sort of countering the pixelart, but nothing too noticeable. (just enough to keep the character in the foreground) plus with the idle animations and all that, it should be no problem.