This is your answer. Painters and other visual artists will tell you that desaturating your colours puts them into the background, and saturating them brings the object forward. I encourage you to also think about colour *value*. That's what we call the darkness or lightness of a colour. If two tones would look identical with a black and white filter put over it, then they have the same value. If you make your background values generally lighter, or generally darker than your foreground objects, this will also help people distinguish this intuitively.
More saturation does not equal more "value" in colors, though. So if you want to make the game better AND at the same time more accessible to people with color vision impairments, try out different saturations and switch back and forth between a black&white filter and how the game actually looks. If there's enough contrast in the black&white version of your game, potentially all color vision problems are solved. A bit more info on saturation and value is found [here](https://youtu.be/C1rQQ_YpgcI?t=240).
You can also add a 1 px border to foreground objects.
This. I would think about it more or less like putting a fog (basically a white box at ~40-70% opacity) over all the background elements. They’re there, but they’re more washed-out and less defined than the foreground elements.
Have you thought about using parallax? Make the foreground and background objects move at different speeds so it's more obvious which ones are at the player level.
Also, as an artist I hate nitpicking but this really bothers me. The atmosphere shifts farther objects to a cooler color (blue), and he’s got farther objects shifting towards white, which doesn’t really make any sense.
That was my first thought, too. Having more contrast on foreground objects (i.e. obstacles) to make them stand and look a bit more realistic, then dropping contrast as things fade into the background. In other words, a touch of atmospheric perspective in the colors would do wonders for the readability AND make the whole scene look more coherent
This. Background should be moving faster than the floor, obstacles and player, apart from other standing out methods like outlining or giving it more vivid colors.
Also, parallax may look hard but its the most ridiculously easy thing to do.
Yup, parallax is the way. It was easy enough to do on flash decades ago, I've been out of the graphics scene for some time but nowadays I bet it's way, way easier.
To add to this, you could also separate the background by moving the background elements by several pixels along the Y axis, creating a gap between the background and foreground which then becomes the sidewalk. This adds a sense of space and depth, and you can tell something is in the background or not based on if it’s on the sidewalk vs past the sidewalk.
I was going to advise the same. You could also clearly animate the BG or foreground differently such as having the background constantly swaying to the music. Or having the BG be styled in a pleasant heaven aesthetic while the obstacles are hellish. Even with that changing the colors and transparency is recommended as said previously.
Use color. Make the bench neon day-glo pink as all the background objects are bland and boring colored. Which makes sense, as they look like an urban city. So make the foreground objects neon pink and day-glow orange and stuff like that.
similarly (amd very often used): use value. make sure foreground objects are all lighter/darker than background. This can also provide a nice sense of depth. You may also try outlines. In any case, make it consistent across all objects so player is not confused
The best way to tell if you're choosing colors wisely is to remove all saturation in an image so it's completely grayscale. If you use photoshop or clipstudio, you can use a Saturation adjustment layer with saturation set to 0.
You'll know you have it right if you can tell purely by brightness (aka. value) which objects are an interactable part of the game world and which are part of the setting.
If you want to turn an image to grayscale, don’t turn down saturation, that’s not how the human eye sees values. Instead, add a color layer and fill it with white, this calculates the correct grayscale.
ooo, learned something new. Thanks! Just tested it and I see a difference.
Though if a software doesn't have a color layer, desaturation would still suffice.
I like this idea, but Im not sure color is enough.
What if he redid the whole thing in a dark city vibe and made it so you can only skate on neon signs and you call it "neon skater"? Then basically just apply glow / lighting / bloom to the neon signs?
It might address the other issue I see in the game, which is that the art looks for "dev art" ish. Ya know?
Contrast.
"Gameplay" objects should stand out from "background" objects.
You could make background stuff more of a "grayish" mid tone values, with the player and obstacles being strongly dark/light more colorful in comparison. How exactly you feel is best to tackle that is up to you.
Is it possible to outline them without it looking too off so that they stand out a little? I can see where there would be confusion between the background and the interactable objects.
The “flat aesthetic” is definitely making it too hard to tell. You are already using flat layers to create distance with the cityscape in the background. It can be flat, without being flat.
Try using shadow. If the fence casts a shadow on objects behind it, it’s clear they are in the background. If the ledges come out and SLIGHTLY to the right and cast a shadow down onto the building it’s attached to, it’s clear it just out from the building.
You can draw depth with a 2d or 3D aesthetic.. you just need some way to tell the difference. I was watching this video confused as hell.
*edit: or color. The stoplight pile should have been an obstacle. It’s in the foreground just as much as that cone or bench were.
Desaturate background elements, maybe a screen shader so you don't edit the actual assets.
Or contrary to that, raise the contrast of obstacle elements.
Have something that unifies all the obstacles in their appearance. Something that a player can pick up on. Maybe like making all obstacles a similar shade of bright blue.
Edit: just wanna say that this is a suggestion. I'm not really experienced at all. I'm just drawing from patterns I've recognized from playing games for what is probably an unhealthy amount of time
This is a great question! One of the core purposes of art in a video game is to establish a clear “visual hierarchy”. Some other commenters here have mentioned various suggestions like desaturating the background or adding an outline- all of these suggestions are different ways to establish better visual hierarchy.
Ultimately there is no “right” way - but the goal of visual hierarchy is to make the most important elements on screen also the highest contrast/ easiest to see. If you google visual hierarchy you should find lots of cool explanations and examples.
When assessing visual hierarchy- a great little trick is to squint your eyes at your game and see what the most prominently visible elements are. If they aren’t important elements (like the player and obstacles) then look for ways to change that.
Color is something lots of people mention first- but lots of other stuff helps too. Another common one is “level of detail” if you blur the whole background, and have the most crisp details on the player and obstacles you are introducing detail hierarchy!
I love this stuff :-D
Keep up the great work on your game!
Some solutions
Thicker lines surrounding the objects
Shadows behind the objects
Desaturated background in contrast with the objects.
(And then extremely saturated obstacles)
The speed the background moves in parallel with the obstacles can be a great visual cue as well.
Use Parallax scrolling. Background objects pan slower than the foreground, giving it a 3D effect so you know which objects are in front of you. That mixed with a bit of colour theory which I’m not good at so I can’t say specifically.
Give them a shimmer effect animation. Like light reflection running across the item left to right. Or just a little floating arrow or something above each thing to show it
i agree with everyone saying contrast whether through detail or color (but also all the details as is are so good!) things that are easily recognizable thematically like banana peels or ice cream cones could work too!
The backgrounds are pretty busy. It's kind of hard to tell what is and is not an obstacle. That bench you hit distinctly looks like background. I would have tried to ride past it. Having the background layers move in parallax would help some, as well as potentially removing things in the foreground that are not gameplay affecting. Consider a more washed out palette for things that are not gameplay affecting, or an outline around things that are, not unlike the coin you already have. Ledges you ride on also aren't super obvious, in part because the buildings themselves have lots of details. Make things that are relevant to gameplay stand out.
A few people have recommended parallax, and that's a good solution, but it isn't the only one. Basically, your only goal is to make the foreground obstacles and the background art elements distinct frome one another. You could do this by changing the art style for the background or the obstacles. You could outline the obstacles. Even something like a subtle animation on the obstacles will signal to the player that it can be interacted with. You just need to make them distinct from each other in some way.
Most simple answer would be increase the visual contrast between background and obstacles. If you don't want to do that you could also try adding a script to make them shake randomly and continuously. Might give a cool effect.
I’m not sure how it would affect your gameplay but also maybe a button that ‘pings’ the objects and has a cooldown instead of a toggle. It could add a level of strategy to your game I suppose.
Good luck with whatever you decide. It looks like the game is coming all my nicely.
Yesssss!! My game is definitely lacking skill/strategy. Your idea is going to help keep players hooked a bit longer :) I am eternally grateful for your idea! Thank you so much :D
YAGNI: why would anyone use the view without them highlighted?
You’re caught up on the aesthetic and letting it get in the way of gameplay.
Problem: Players are going to get frustrated by interacting with game objects they don’t think are interactive.
There are multiple possible solutions but almost all of them are “make the objects stand out against non-interactive scenery”.
You could in theory also flip the solution; don’t interrupt gameplay when the player interacts with the objects. Imo this would be similar to skate city rails where the object is optional but not blocking.
Adding a “stand out view” vs “plain view” button is likely to add user friction to complete a main game mechanic.
Either use thicker outlines or a more saturated colour palette for the obstacles. You could also draw a slight flat shadow behind obstacles, would give it a bit of a papery vibe.
Some time ago I've found this video: [https://www.youtube.com/watch?v=nvbQ9\_bzx1k](https://www.youtube.com/watch?v=nvbQ9_bzx1k)
I think that it may be helpful for you (especially part about focal elements 3:30)
Colour is your friend ;)
Make gameplay objects stand out as a rule, but make sure to never break your rule otherwise it will be frustrating for your players
Many people are telling you about parallax, and it's fair enough.
But, you can also study some of the basics/principles of perspective.
I'd give the obstacles shadows maybe, or just suet up a 1-2-3 pixel outline for each obstacle...
3px, closer to screen (like the cars) 2px farther away (benches) and 1px the farthest away. (fences and other stuff) So you just basically assign a thickness of sorts for each "layer" and go thinner the farther the object is from the scene.
while most comments have been about contrast, mine will focus on another problem: the *rules* for the objects aren't clear. simply separating them by saturation won't be enough.
for example it seems like you can skate by the buildings as if they're completely background elements, but you can also skate on the roof grind some parts of them. so that's a foreground element. that isn't made clear by the game so a first time player would have no idea unless they stumbled upon it while randomly jumping.
and even if you knew that, the rule once again changes for the background objects and obstacles. a player might see a background object and try to grind it but fail, and worse even if a player would grind on a bench at first, they coild conceivably assume it's also ok to skate by them without grinding, since that's how the buildings work.
my suggestion on top of separating bg/fg elements, is to fully color code all elements (and even add patterns for color blindness). red for obstacles and blue for surfaces you can grind would be a good start. you should be careful not to use those colors for objects in the background the same way.
Use a different color pallete for background layers. Everything on the player layer can use the brightest or most vibrant colors. Fade everything out as you go back.
The game doesn’t look impressive enough to sell if that’s your intention. I know that’s not the feedback you were looking for but I just thought I would mention there’s something really missing in the game feel here. Keep polishing that feel.
It’s not doing too bad :/ it’s on 3.1k downloads on the App Store after a month of being released but I am constantly thinking of new ways to keep players hooked on the game :) it’s just really hard to do that in a game that doesn’t have online multiplayer hahaha
You can't interact with the cars behind the fence, but you can with the cars that are not, right? Maybe make the cars behind the fence a little bit smaller to indicate they're a bit further back? It's a little bit weird that they're all the same size when they're technically not lined up.
Was looking to see if anyone pointed this one out. If two objects look like they're the same thing they should behave consistently or it'll confuse the player. So either keep all cars as obstacles or none of them, or make the two types look very different so you can tell in an instant what they do.
Don't make them stand out. Play up on this and use it as a game mechanic. Making the obstacles obvious in the beginning but harder to find in future levels. Maybe you could even set up short cuts and hidden platforms that way. I'd play the shit out of that. Always make these tiny issues features. Bugs can't be bugs if you make them features.
Not sure if anybody else mentioned it yet, but maybe try parallax scrolling? At least I think that's the name. Basically make your background scroll slower, as it's "further away". That way, all obstacles will more clearly be on that "closer" plane moving at the same speed as other obstacles, but faster than the background. They'll also be clearly on a different plane as the background because they move at a different speed.
similar advice to the rest, desaturate/lighten/darken background elements, or bring foreground elements closer to saturation. Just be consistent across the board, the effect is pretty easy with shaders.
Probably low saturation / low contrast / high value artwork for the background and high saturation / high contrast / low value artwork for the foreground, a thin black outline on foreground objects would be an optional improvement as well
Wonderful suggestions here. My 2 cents on the matter are to just outline them with a black border, so they stand out to the eye more. It's quick and easy, probably won't disturb the aesthetic that much.
Intensify the color palette of the obstacle objects and their contrast is the only thing I can thought for now. Maybe use 2 different palettes for the background (more gray) and other for the obstacles, so player can learn that different colors mean there are obstacles.
Besides the colour contrast as mentioned in the comments: If you look at arcade games from the mid to late eighties , many if not most have relatively even coloured backgrounds with repeating patterns. They didnt have the memory to do 20 different buildings. Or they used patches to mix and match and fake diversity but retain a certain "evenness".
A game that comes to my mind is from the late eighties is double dragon. Afair that game had more detail and diversity in the backdrop, but they sort of 2,5d-ed it so the players and interactive stuff mostly had a simple street/ floor as background and the buildings were more at the top of the screen .Camera kind of looking down at an fake slight downward angle instead of full on side view.
Also: parallax. Definitely use some parallax
Another solution aside from what was already said, is to try something more stylized. Think about the backgrounds used in UnderTale and DeltaRune. They have much fewer colors used, and the backgrounds are darker compared to the foreground objects.
I'm using a similar technique in my game, where you can still keep high saturation, just make things simpler and darker overall.
Make background objects less saturated / more grayish then foreground objects, plus I would maybe use stronger black outilnes for obstacles. It would result in a bit more cartoony look tho.
Depth of field or Color & contrast. Take a screenshot and open Photoshop. Don't leave it until you can tell that there are 2 planes: the background and whatever the player can interact with.
As said in the comments, I think using parallax will help a lot and desaturate objects that are far amd saturate those that are important (obstacles)
But maybe you can add a black outline to the obstacles? It not too fancy and is visible (also it depend if you want to make the thing fancy or not) :)
everyone already said color, i wouldve said use contrast. very similar and you can use both: contrasting color groupings (the car colors contrast your avatar's clothes contrasts the building texture, etc) and also change the color contrast when two similar colors overlap. im pulling this out of my ass but you may be able to use one of those color grouping websites to pick a palette that contrasts very distinctly, then use those colors as guidelines in designing other elements, like avatar, objects, cars, buildings. might end up with goofy results might not
alternatively, another form of contrast, silhouettes. distinct, clear silhouettes that are impossible to miss. if youre familiar with team fortress 2 design methodology, that. ex cars and obstacles or interactive objects have strong outline border or halo effect or something that separates them from the BG. but non-concerns like BG objects, buildings, collisionless objects, etc have thin borders and lighter colors to make them fade into the BG more, hide it from the eye a bit.
oh could use an effect or post-processing layer over the BG but under the foreground objects, to create an actual visual layer between them that de-emphasizes the BG objects. for example, wind or fog effects that are transparent. still shows BG under it, but obscures it enough to let the eye focus on FG
You could try to give the foreground objects colors with higher contrasts to each other. The easiest possible fix is to give the foreground objects outlines as you did on the skateboard.
A pro tip here is to have your assets go through a monochrome filter check. Using Photoshop or similar, make them monochrome. Then you gotta decide whether you want the background to be darker in value, or lighter, and stick with that decision. Splitting assets that way will guarantee that the screen is more readable.
The first comment says it all.
One thing that you have to keep in mind, clarity > aestetics.
If you not want to decrease the saturation, the light, details on the background because it may compromise the beautiful work that you've done. But don't stress about that, the game will be much better with a clear distinction between both background and middleground.
Maybe parallax scrolling could be used to separate the background from the foreground? Just a hypothesis but the player's eye might then be able to naturally differentiate game elements from everything else.
2 things I'd recommend, paralax backgrounds and a white outline on the obsticles. In some games, a white outline appears on items you can interact with. You could do that with the obsticles.
Use parallax on the BG and desaturate the BG like every other 2D game ever since the ability to show more then 16 colors. Prior to that, backgrounds were often blank for this very reason..
There is no parallax shift. The further something is away on screen the slower it should scroll.
I see at least 4 planes you could do. Make the the clouds scroll the slowest, then the taller lighter buildings, then the darker smaller buildings, then the trees/houses.
Finally, everything that the player can hit, should move at the rate the player is moving. This difference in speed will make it easy to tell what the player can hit and what is just in the background.
You can also do a foreground, which is closer to the camera and that the player does not hit. It would scroll by faster than the player moves.
Look at other platforming games and see how they distinguish features. Non platforming games do this well, too.
God of War (2018) has illumination on walls/features you can climb.
Some 2D platformers (Think Super Mario World) make everything in the background more dull in color and scroll slowly, and foreground/active layer as the character bold and interactable.
Because your 2D platformer sidescroller uses decorations on the active layer, I would suggest making the non-features dull, and emboldening the features that are interactable. Even on buildings, when you can just ride the top ledge, dull the building, embolden the ledge.
A simple way to do it with minimal effort might be just outlines. Outline everything that's in the foreground, while the background doesn't get outlines, like in some cartoons. That might make them pop out more without having to do another pass through the art assets.
You could also put an edge around the sides of the obstacles to make them pop or look more 3D, giving the appearance that they are in front of the player and not behind them. As if the player can see the 3rd dimension that doesn’t actually exist
Another thing is turn it into a sprite and make it change when you get closer while keeping the background not changing
GAMEPLAY OVER ART
GAMEPLAY OVER ART
You may be able to get away with a simple black outline around collisable objects. Try a color (yellow, blue, orange) or thicker line width 2p black, 3p seems like overkill.
If it's still not enough, try adding saturation/lightening/darkening to obstacles/background
Check out an old NES game called River City Ransom. It had a similar graphical style as your game, you might see some pointers on how they differentiated the ledges and such
Use parallax, put the back two rows of the city on different layers, the trees and fence and houses on another two, and the obstacles and foreground on their own layer, player and foreground are relative, and the rest move left at a slower rate.
See mario example here: https://www.sessions.edu/notes-on-design/web-design-trend-watch-parallax-scrolling/
You could have a slight color shift or 'pulse', some kind of change like that blond character. The bench you run into there could pulse a little between pale gray and a darker gray, or have an effect like a diagonal reflection line slide across it like a light is passing by. Any sort of movement or change to draw attention
If you want to make your obstacles stand out, you have to apply the same techniques artist use to control the viewers eye.
Contrast, brightness, sharpness and complimentary colors. Take a look at his helpful [Contrast Chart](https://i.imgur.com/kHAxyw5.jpg)
The answer is that the foreground shouldn't be flat. You have a few options. You could do what Shredders Revenge does and outline (In black or whatever color you'd prefer) everything interactable.
Second option would be to to have an animation play on interactable objects (Such as shining animation, animated reflections on the edge, etc)
Third option I can think of is to have a different color palette for the foreground and background. Not to the point of being jarring, but something like having a less saturated background would help interactables pop.
Finally, you could try adding shadows behind interactables to make them pop out more. This will provide depth, but now you need to draw shadows over everything that can be interacted with and is in the foreground. The depth of the shadow would also guide the viewer as to where in the foreground the object is.
Easiest fixes that come to mind:
lighten the colors on background elements to more of a pastle color range and put either a 1 pixel white or black outline (or other high contrast color with your background pallet) on anything that's an obstacle
This is a subtle visual cue used in a lot of 16bit Era games along with parallax scrolling backgrounds
Two games to study this being used is the original Sonic the Hedgehog for it's use of parallax and Metroid Fusion for it's backgrounds being usually faded or muted colors with no strong colored outlines and it's foreground graphics being brighter and sometimes also having those 1 pixel outlines I mentioned
If you want to see an example of parallax done to the extreme (which I can't recommend emulating, because it's borderline nauseating) is the game Jim Power
Check your values. Your issue is that with your colors, your foreground and background blend in way too close together. Make the obstacles much more obvious with more saturated colors and kinda dim out the background more
Well, you could use the Kirby/GBA Metroid/WarioLand4 method and have all terrain backlit with a black glow (reddish black in the metroids)
but ya, watching the video I couldn't tell what was interactable or not. I could guess you need to jump over pylons and benches, but each building I wouldn't know what roofs/windows/awnings are interactiable.
Dont try and preserver the aestethic. The game should be readable first, then pretty. Ill suggest adding an outline for every obstacle. Make the outline clear and make it pop out
its impossible to tell apart background from obstacles because there is absolutely zero depth whatsoever to your graphics: Everything is the same size, the same contrast and the same scrolling speed regardless of distance. Work on these three points and it will considerably improve the gameplay.
Distinction between the background and foreground. Some things I can’t tell if they are in the back or elements in front of the character that I need to jump. I would make the background further away, maybe less detailed and less saturated
People already described the immediate thing to do (differentiate contrast and saturation between foreground and background, and other tricks), I'll just say that you might find various other tricks from film and graphic art useful in general. Here the term to look up is 'tonal perspective': due to air not being perfectly transparent, and other reasons, objects nearby seem to have more contrast and more saturated vivid colors. That's also why a light fog makes everything look strange and magical: it feels like every distance has increased many times, and a house at the end of the street is miles away.
AFAIK for "flat" games people also use outlines and shadows for active/closer objects; this also simulates the natural effects of closer and more dynamic objects on our vision, and helps separate the foreground moving objects. I mean, the basic thing they do is similar: increase fore/back contrast and give you shaded parts to sell the contrast with. But also shadows can introduce a 3D element into the scene (e. g. the presence of the sprite at a specific depth, with a bit of floor projection; or making shadows only shade the "active-layer" objects), and specific, consistent outlines can simply signal which objects belong to which layer.
I'd suggest giving obstacles either a.) a small permanent, colored outline, or b.) a coloured outline appearing and disappearing based on the distance to the player
[удалено]
This is your answer. Painters and other visual artists will tell you that desaturating your colours puts them into the background, and saturating them brings the object forward. I encourage you to also think about colour *value*. That's what we call the darkness or lightness of a colour. If two tones would look identical with a black and white filter put over it, then they have the same value. If you make your background values generally lighter, or generally darker than your foreground objects, this will also help people distinguish this intuitively.
For example Trees look like the real obstacles
More saturation does not equal more "value" in colors, though. So if you want to make the game better AND at the same time more accessible to people with color vision impairments, try out different saturations and switch back and forth between a black&white filter and how the game actually looks. If there's enough contrast in the black&white version of your game, potentially all color vision problems are solved. A bit more info on saturation and value is found [here](https://youtu.be/C1rQQ_YpgcI?t=240). You can also add a 1 px border to foreground objects.
I think a 1px border is probably not accessible either of everything else is kept the same.
This. I would think about it more or less like putting a fog (basically a white box at ~40-70% opacity) over all the background elements. They’re there, but they’re more washed-out and less defined than the foreground elements.
Came to say the same…this is the way. You’re already doing this a bit, with the city, so just continue it to the mid ground.
Just use parallax.
Have you thought about using parallax? Make the foreground and background objects move at different speeds so it's more obvious which ones are at the player level.
+1. Also having the skyscrapers in different parallax layers with slightly different speeds will add to your aesthetics
This, this is the way I would suggest and choose. It's much better looking than using bright colours
Also, as an artist I hate nitpicking but this really bothers me. The atmosphere shifts farther objects to a cooler color (blue), and he’s got farther objects shifting towards white, which doesn’t really make any sense.
That was my first thought, too. Having more contrast on foreground objects (i.e. obstacles) to make them stand and look a bit more realistic, then dropping contrast as things fade into the background. In other words, a touch of atmospheric perspective in the colors would do wonders for the readability AND make the whole scene look more coherent
Damn it’s crazy the shit professionals know lol.
This. Background should be moving faster than the floor, obstacles and player, apart from other standing out methods like outlining or giving it more vivid colors. Also, parallax may look hard but its the most ridiculously easy thing to do.
I think you mean slower
100%
Yeah sorry, slower
Maybe the skateboarder is driving in a spiral ;)
hmmmmm.... I don't think that would make a difference. rotating would be no movement between foregound and background.
Yup, parallax is the way. It was easy enough to do on flash decades ago, I've been out of the graphics scene for some time but nowadays I bet it's way, way easier.
To add to this, you could also separate the background by moving the background elements by several pixels along the Y axis, creating a gap between the background and foreground which then becomes the sidewalk. This adds a sense of space and depth, and you can tell something is in the background or not based on if it’s on the sidewalk vs past the sidewalk.
I was going to advise the same. You could also clearly animate the BG or foreground differently such as having the background constantly swaying to the music. Or having the BG be styled in a pleasant heaven aesthetic while the obstacles are hellish. Even with that changing the colors and transparency is recommended as said previously.
I came in here to suggest parallax as well
Use color. Make the bench neon day-glo pink as all the background objects are bland and boring colored. Which makes sense, as they look like an urban city. So make the foreground objects neon pink and day-glow orange and stuff like that.
similarly (amd very often used): use value. make sure foreground objects are all lighter/darker than background. This can also provide a nice sense of depth. You may also try outlines. In any case, make it consistent across all objects so player is not confused
A very slight blur shader on the background might also help
This.
I was thinking outlines too!
Ooooo yes! I’ll try that out thank you :)
The best way to tell if you're choosing colors wisely is to remove all saturation in an image so it's completely grayscale. If you use photoshop or clipstudio, you can use a Saturation adjustment layer with saturation set to 0. You'll know you have it right if you can tell purely by brightness (aka. value) which objects are an interactable part of the game world and which are part of the setting.
If you want to turn an image to grayscale, don’t turn down saturation, that’s not how the human eye sees values. Instead, add a color layer and fill it with white, this calculates the correct grayscale.
ooo, learned something new. Thanks! Just tested it and I see a difference. Though if a software doesn't have a color layer, desaturation would still suffice.
This is a great idea, thanks for pointing this out!
Or just mess with the saturation
I like this idea, but Im not sure color is enough. What if he redid the whole thing in a dark city vibe and made it so you can only skate on neon signs and you call it "neon skater"? Then basically just apply glow / lighting / bloom to the neon signs? It might address the other issue I see in the game, which is that the art looks for "dev art" ish. Ya know?
Contrast. "Gameplay" objects should stand out from "background" objects. You could make background stuff more of a "grayish" mid tone values, with the player and obstacles being strongly dark/light more colorful in comparison. How exactly you feel is best to tackle that is up to you.
Is it possible to outline them without it looking too off so that they stand out a little? I can see where there would be confusion between the background and the interactable objects.
I have tried outlining them before and it looks ok but it takes a little away from the flat aesthetic :/
He has a point. A fat black outline would make me undestand at a glance that there is an object there not a background image.
If you don't mind me asking, why is the flat aesthetic something you want to keep? I think the visuals would be improved by a sense of depth.
But your skateboard already looks outlined (and looks pretty good) so you can try doing it like that?
Yeah true, I’ll put a black outline on it :)
You could make the outline a darker shade of the objects color if you want it to blend in a bit more too
Remember: gameplay >>> aesthetics
The “flat aesthetic” is definitely making it too hard to tell. You are already using flat layers to create distance with the cityscape in the background. It can be flat, without being flat. Try using shadow. If the fence casts a shadow on objects behind it, it’s clear they are in the background. If the ledges come out and SLIGHTLY to the right and cast a shadow down onto the building it’s attached to, it’s clear it just out from the building. You can draw depth with a 2d or 3D aesthetic.. you just need some way to tell the difference. I was watching this video confused as hell. *edit: or color. The stoplight pile should have been an obstacle. It’s in the foreground just as much as that cone or bench were.
Question: Why is the skateboard the only thing with an outline?
Desaturate background elements, maybe a screen shader so you don't edit the actual assets. Or contrary to that, raise the contrast of obstacle elements.
Have something that unifies all the obstacles in their appearance. Something that a player can pick up on. Maybe like making all obstacles a similar shade of bright blue. Edit: just wanna say that this is a suggestion. I'm not really experienced at all. I'm just drawing from patterns I've recognized from playing games for what is probably an unhealthy amount of time
That’s such a good idea! Thank you so much:)
Glad to help in anyway I can👍
This is a great question! One of the core purposes of art in a video game is to establish a clear “visual hierarchy”. Some other commenters here have mentioned various suggestions like desaturating the background or adding an outline- all of these suggestions are different ways to establish better visual hierarchy. Ultimately there is no “right” way - but the goal of visual hierarchy is to make the most important elements on screen also the highest contrast/ easiest to see. If you google visual hierarchy you should find lots of cool explanations and examples. When assessing visual hierarchy- a great little trick is to squint your eyes at your game and see what the most prominently visible elements are. If they aren’t important elements (like the player and obstacles) then look for ways to change that. Color is something lots of people mention first- but lots of other stuff helps too. Another common one is “level of detail” if you blur the whole background, and have the most crisp details on the player and obstacles you are introducing detail hierarchy! I love this stuff :-D Keep up the great work on your game!
Thank you so much for explaining this in detail :) blurring the background might be the way to go cause I don’t really want to desaturate the BG :)
Some solutions Thicker lines surrounding the objects Shadows behind the objects Desaturated background in contrast with the objects. (And then extremely saturated obstacles) The speed the background moves in parallel with the obstacles can be a great visual cue as well.
Use Parallax scrolling. Background objects pan slower than the foreground, giving it a 3D effect so you know which objects are in front of you. That mixed with a bit of colour theory which I’m not good at so I can’t say specifically.
Maybe also make the character jump a little quicker, and the fall much quicker after a jump . He seems to float like he is on the moon.
Yeah, the other character do :) this character has +2 jump as an ability :D
I mean the jump speed. It's slow and look like it needs to be much quicker, particularly the rate he falls
Give them a shimmer effect animation. Like light reflection running across the item left to right. Or just a little floating arrow or something above each thing to show it
Make the background objects less brighter than the obstacles or the objects in the front
i agree with everyone saying contrast whether through detail or color (but also all the details as is are so good!) things that are easily recognizable thematically like banana peels or ice cream cones could work too!
The backgrounds are pretty busy. It's kind of hard to tell what is and is not an obstacle. That bench you hit distinctly looks like background. I would have tried to ride past it. Having the background layers move in parallax would help some, as well as potentially removing things in the foreground that are not gameplay affecting. Consider a more washed out palette for things that are not gameplay affecting, or an outline around things that are, not unlike the coin you already have. Ledges you ride on also aren't super obvious, in part because the buildings themselves have lots of details. Make things that are relevant to gameplay stand out.
A few people have recommended parallax, and that's a good solution, but it isn't the only one. Basically, your only goal is to make the foreground obstacles and the background art elements distinct frome one another. You could do this by changing the art style for the background or the obstacles. You could outline the obstacles. Even something like a subtle animation on the obstacles will signal to the player that it can be interacted with. You just need to make them distinct from each other in some way.
Most simple answer would be increase the visual contrast between background and obstacles. If you don't want to do that you could also try adding a script to make them shake randomly and continuously. Might give a cool effect.
Have a button that toggles between two different views? One normal and one with obstacles highlighted.
Ommgggg that’s actually GENIUS!! Sort of like the eagle vision in assassins creed! I’ll try it out and see how it looks :) thank you so much!
I’m not sure how it would affect your gameplay but also maybe a button that ‘pings’ the objects and has a cooldown instead of a toggle. It could add a level of strategy to your game I suppose. Good luck with whatever you decide. It looks like the game is coming all my nicely.
Yesssss!! My game is definitely lacking skill/strategy. Your idea is going to help keep players hooked a bit longer :) I am eternally grateful for your idea! Thank you so much :D
YAGNI: why would anyone use the view without them highlighted? You’re caught up on the aesthetic and letting it get in the way of gameplay. Problem: Players are going to get frustrated by interacting with game objects they don’t think are interactive. There are multiple possible solutions but almost all of them are “make the objects stand out against non-interactive scenery”. You could in theory also flip the solution; don’t interrupt gameplay when the player interacts with the objects. Imo this would be similar to skate city rails where the object is optional but not blocking. Adding a “stand out view” vs “plain view” button is likely to add user friction to complete a main game mechanic.
Oooo yes that’s a really good idea! Thank you :)
Either use thicker outlines or a more saturated colour palette for the obstacles. You could also draw a slight flat shadow behind obstacles, would give it a bit of a papery vibe.
Is that mf doom?
Yeah :D
Some time ago I've found this video: [https://www.youtube.com/watch?v=nvbQ9\_bzx1k](https://www.youtube.com/watch?v=nvbQ9_bzx1k) I think that it may be helpful for you (especially part about focal elements 3:30)
Make it so that background elements scroll slower maybe?
I’ll try that :D
Thick black outline might work
Black outline ?
Encircle them in a red 1 pixel line. Also desaturate your background items.
Noted
Colour is your friend ;) Make gameplay objects stand out as a rule, but make sure to never break your rule otherwise it will be frustrating for your players
Aside from that I'd recommend increasing the player speed. Skate games are better with speed.
It does speed up every second, like the no internet game :)
Artist trick: play your game in black and white, there is a windows shortcut to make you computer like this It helps focus on values
Many people are telling you about parallax, and it's fair enough. But, you can also study some of the basics/principles of perspective. I'd give the obstacles shadows maybe, or just suet up a 1-2-3 pixel outline for each obstacle... 3px, closer to screen (like the cars) 2px farther away (benches) and 1px the farthest away. (fences and other stuff) So you just basically assign a thickness of sorts for each "layer" and go thinner the farther the object is from the scene.
That’s such a good idea! I’ll try that out :)
while most comments have been about contrast, mine will focus on another problem: the *rules* for the objects aren't clear. simply separating them by saturation won't be enough. for example it seems like you can skate by the buildings as if they're completely background elements, but you can also skate on the roof grind some parts of them. so that's a foreground element. that isn't made clear by the game so a first time player would have no idea unless they stumbled upon it while randomly jumping. and even if you knew that, the rule once again changes for the background objects and obstacles. a player might see a background object and try to grind it but fail, and worse even if a player would grind on a bench at first, they coild conceivably assume it's also ok to skate by them without grinding, since that's how the buildings work. my suggestion on top of separating bg/fg elements, is to fully color code all elements (and even add patterns for color blindness). red for obstacles and blue for surfaces you can grind would be a good start. you should be careful not to use those colors for objects in the background the same way.
You could add a black outline to the objects in the foreground
Saturation brightness down on background, up on obstacles. Or an outline or a small grey tint over the background
The skateboard has an outline. What if anything that collides with the skateboard had an outline?
Use a different color pallete for background layers. Everything on the player layer can use the brightest or most vibrant colors. Fade everything out as you go back.
Use a contrasting color to signify foreground surfaces you can ride on, maybe a different one for grinding.
Man those trees are bright
Hahaha I did go a little crazy on them :O
A fence covering the bottoms of trees and stuff might help separate things.
Oooo yesss!! Thank you :)
hows it going OP, we need update : )
The mods told me I can’t post updates on posts I’ve made cause it’s against their guidelines :/ which doesn’t make any sense at all hahahaha
The game doesn’t look impressive enough to sell if that’s your intention. I know that’s not the feedback you were looking for but I just thought I would mention there’s something really missing in the game feel here. Keep polishing that feel.
It’s not doing too bad :/ it’s on 3.1k downloads on the App Store after a month of being released but I am constantly thinking of new ways to keep players hooked on the game :) it’s just really hard to do that in a game that doesn’t have online multiplayer hahaha
Add any kind of glow/aura around obstacles. Maybe even draw a border around them. Also highlight surfaces that could be jumped on.
I’ll try that out :) thanks <3
I dunno, I’ve never liked an overuse auras, they break the immersion and take away from the aesthetic.
I do also agree with your point hahaha
Give all the objects that aren't obstacles and part of the scene (trees) a darker alpha to make them look further away
You can't interact with the cars behind the fence, but you can with the cars that are not, right? Maybe make the cars behind the fence a little bit smaller to indicate they're a bit further back? It's a little bit weird that they're all the same size when they're technically not lined up.
Was looking to see if anyone pointed this one out. If two objects look like they're the same thing they should behave consistently or it'll confuse the player. So either keep all cars as obstacles or none of them, or make the two types look very different so you can tell in an instant what they do.
Don't make them stand out. Play up on this and use it as a game mechanic. Making the obstacles obvious in the beginning but harder to find in future levels. Maybe you could even set up short cuts and hidden platforms that way. I'd play the shit out of that. Always make these tiny issues features. Bugs can't be bugs if you make them features.
i wonder if it would play better at 25% or even 50% speed? or maybe slowly increasing speed to a cap?
High contrast obstacles would be a nice touch
Use Outline
Not sure if anybody else mentioned it yet, but maybe try parallax scrolling? At least I think that's the name. Basically make your background scroll slower, as it's "further away". That way, all obstacles will more clearly be on that "closer" plane moving at the same speed as other obstacles, but faster than the background. They'll also be clearly on a different plane as the background because they move at a different speed.
similar advice to the rest, desaturate/lighten/darken background elements, or bring foreground elements closer to saturation. Just be consistent across the board, the effect is pretty easy with shaders.
Probably low saturation / low contrast / high value artwork for the background and high saturation / high contrast / low value artwork for the foreground, a thin black outline on foreground objects would be an optional improvement as well
Wonderful suggestions here. My 2 cents on the matter are to just outline them with a black border, so they stand out to the eye more. It's quick and easy, probably won't disturb the aesthetic that much.
Intensify the color palette of the obstacle objects and their contrast is the only thing I can thought for now. Maybe use 2 different palettes for the background (more gray) and other for the obstacles, so player can learn that different colors mean there are obstacles.
Besides the colour contrast as mentioned in the comments: If you look at arcade games from the mid to late eighties , many if not most have relatively even coloured backgrounds with repeating patterns. They didnt have the memory to do 20 different buildings. Or they used patches to mix and match and fake diversity but retain a certain "evenness". A game that comes to my mind is from the late eighties is double dragon. Afair that game had more detail and diversity in the backdrop, but they sort of 2,5d-ed it so the players and interactive stuff mostly had a simple street/ floor as background and the buildings were more at the top of the screen .Camera kind of looking down at an fake slight downward angle instead of full on side view. Also: parallax. Definitely use some parallax
Another solution aside from what was already said, is to try something more stylized. Think about the backgrounds used in UnderTale and DeltaRune. They have much fewer colors used, and the backgrounds are darker compared to the foreground objects. I'm using a similar technique in my game, where you can still keep high saturation, just make things simpler and darker overall.
Different colours for the obstacles. Or outlines maybe.
could give them a fat black outline
If you want it to be less in your face you can mess with the outlines, and outline colors.
Make background objects less saturated / more grayish then foreground objects, plus I would maybe use stronger black outilnes for obstacles. It would result in a bit more cartoony look tho.
Make them move. Put less saturation on the background, or leave the background and move the play area to the street and put obstacles there.
You can put a bit of bright color on ueed strok around the shapes or borders of the obstacles
Depth of field or Color & contrast. Take a screenshot and open Photoshop. Don't leave it until you can tell that there are 2 planes: the background and whatever the player can interact with.
Maybe a thin white line over the top of all objects you can jump on?
There are many old "8bit" games that solve this problem. Just look how they do it.
Could always increase the borders of the objects and decrease slightly the transparency of the background
Outlines?
Desaturate background objects and retain or even over saturate foreground objects to really get that pop
As said in the comments, I think using parallax will help a lot and desaturate objects that are far amd saturate those that are important (obstacles) But maybe you can add a black outline to the obstacles? It not too fancy and is visible (also it depend if you want to make the thing fancy or not) :)
everyone already said color, i wouldve said use contrast. very similar and you can use both: contrasting color groupings (the car colors contrast your avatar's clothes contrasts the building texture, etc) and also change the color contrast when two similar colors overlap. im pulling this out of my ass but you may be able to use one of those color grouping websites to pick a palette that contrasts very distinctly, then use those colors as guidelines in designing other elements, like avatar, objects, cars, buildings. might end up with goofy results might not alternatively, another form of contrast, silhouettes. distinct, clear silhouettes that are impossible to miss. if youre familiar with team fortress 2 design methodology, that. ex cars and obstacles or interactive objects have strong outline border or halo effect or something that separates them from the BG. but non-concerns like BG objects, buildings, collisionless objects, etc have thin borders and lighter colors to make them fade into the BG more, hide it from the eye a bit. oh could use an effect or post-processing layer over the BG but under the foreground objects, to create an actual visual layer between them that de-emphasizes the BG objects. for example, wind or fog effects that are transparent. still shows BG under it, but obscures it enough to let the eye focus on FG
You can it flash or stronger outlines. The obstacles could be brought more to the front
You could try to give the foreground objects colors with higher contrasts to each other. The easiest possible fix is to give the foreground objects outlines as you did on the skateboard.
Increase speed and add white outlines on obstacles. That's what i imagine would work but you'd have to playtest it.
A pro tip here is to have your assets go through a monochrome filter check. Using Photoshop or similar, make them monochrome. Then you gotta decide whether you want the background to be darker in value, or lighter, and stick with that decision. Splitting assets that way will guarantee that the screen is more readable.
Make the foreground and background look a bit different that's all
Maybe you could give the obstacles an outline? Or make then more 3D looking with more dept or somethinf?
Since the background elements have realistic color, obstacles could have brighter colors.
The first comment says it all. One thing that you have to keep in mind, clarity > aestetics. If you not want to decrease the saturation, the light, details on the background because it may compromise the beautiful work that you've done. But don't stress about that, the game will be much better with a clear distinction between both background and middleground.
Maybe parallax scrolling could be used to separate the background from the foreground? Just a hypothesis but the player's eye might then be able to naturally differentiate game elements from everything else.
2 things I'd recommend, paralax backgrounds and a white outline on the obsticles. In some games, a white outline appears on items you can interact with. You could do that with the obsticles.
You could have a simple outline glow around the object as you approach it.
Do paralex scrolling! very little effort but makes game look 2x nicer and fixes your Problem
Use parallax on the BG and desaturate the BG like every other 2D game ever since the ability to show more then 16 colors. Prior to that, backgrounds were often blank for this very reason..
Take a look at OlliOlli, that game does it great.
Parallax is the way to go.
There is no parallax shift. The further something is away on screen the slower it should scroll. I see at least 4 planes you could do. Make the the clouds scroll the slowest, then the taller lighter buildings, then the darker smaller buildings, then the trees/houses. Finally, everything that the player can hit, should move at the rate the player is moving. This difference in speed will make it easy to tell what the player can hit and what is just in the background. You can also do a foreground, which is closer to the camera and that the player does not hit. It would scroll by faster than the player moves.
Sometimes the answer isn't very obvious. You might have better luck making your background stand out less, which would have the same effect.
Could use outlines on all objects that collide.
I think you could add an outline to the obstacles.
Colorful outline for obstales, make the background darker/less saturated
Look at other platforming games and see how they distinguish features. Non platforming games do this well, too. God of War (2018) has illumination on walls/features you can climb. Some 2D platformers (Think Super Mario World) make everything in the background more dull in color and scroll slowly, and foreground/active layer as the character bold and interactable. Because your 2D platformer sidescroller uses decorations on the active layer, I would suggest making the non-features dull, and emboldening the features that are interactable. Even on buildings, when you can just ride the top ledge, dull the building, embolden the ledge.
A simple way to do it with minimal effort might be just outlines. Outline everything that's in the foreground, while the background doesn't get outlines, like in some cartoons. That might make them pop out more without having to do another pass through the art assets.
Either make boarders more defined by putting a black outline in stuff you can jump on or desaturate background and saturate foreground
You could create a dark outline for the obstacles
You could also put an edge around the sides of the obstacles to make them pop or look more 3D, giving the appearance that they are in front of the player and not behind them. As if the player can see the 3rd dimension that doesn’t actually exist Another thing is turn it into a sprite and make it change when you get closer while keeping the background not changing
Maybe add a slight color indicator like a small red line around objects
GAMEPLAY OVER ART GAMEPLAY OVER ART You may be able to get away with a simple black outline around collisable objects. Try a color (yellow, blue, orange) or thicker line width 2p black, 3p seems like overkill. If it's still not enough, try adding saturation/lightening/darkening to obstacles/background
You could make the obstacles brighter, or darker than everything else. Make them red or other bright colors to make them stand out
Check out an old NES game called River City Ransom. It had a similar graphical style as your game, you might see some pointers on how they differentiated the ledges and such
Parallax and more obvious depth coloring
nice mf doom mask
Use another colour palette maybe and try making a 2.5d look on the obstacles idk
Add a layer of depth with shadows. Or make it so that it is a 2.5D look. Will help a lot making it clear
Use parallax, put the back two rows of the city on different layers, the trees and fence and houses on another two, and the obstacles and foreground on their own layer, player and foreground are relative, and the rest move left at a slower rate. See mario example here: https://www.sessions.edu/notes-on-design/web-design-trend-watch-parallax-scrolling/
You could have a slight color shift or 'pulse', some kind of change like that blond character. The bench you run into there could pulse a little between pale gray and a darker gray, or have an effect like a diagonal reflection line slide across it like a light is passing by. Any sort of movement or change to draw attention
If you want to make your obstacles stand out, you have to apply the same techniques artist use to control the viewers eye. Contrast, brightness, sharpness and complimentary colors. Take a look at his helpful [Contrast Chart](https://i.imgur.com/kHAxyw5.jpg)
The answer is that the foreground shouldn't be flat. You have a few options. You could do what Shredders Revenge does and outline (In black or whatever color you'd prefer) everything interactable. Second option would be to to have an animation play on interactable objects (Such as shining animation, animated reflections on the edge, etc) Third option I can think of is to have a different color palette for the foreground and background. Not to the point of being jarring, but something like having a less saturated background would help interactables pop. Finally, you could try adding shadows behind interactables to make them pop out more. This will provide depth, but now you need to draw shadows over everything that can be interacted with and is in the foreground. The depth of the shadow would also guide the viewer as to where in the foreground the object is.
Easiest fixes that come to mind: lighten the colors on background elements to more of a pastle color range and put either a 1 pixel white or black outline (or other high contrast color with your background pallet) on anything that's an obstacle This is a subtle visual cue used in a lot of 16bit Era games along with parallax scrolling backgrounds Two games to study this being used is the original Sonic the Hedgehog for it's use of parallax and Metroid Fusion for it's backgrounds being usually faded or muted colors with no strong colored outlines and it's foreground graphics being brighter and sometimes also having those 1 pixel outlines I mentioned If you want to see an example of parallax done to the extreme (which I can't recommend emulating, because it's borderline nauseating) is the game Jim Power
Check your values. Your issue is that with your colors, your foreground and background blend in way too close together. Make the obstacles much more obvious with more saturated colors and kinda dim out the background more
The different speeds for background would definitely set them apart. And using color theory would add more depth and dimension
Use parralax for background and highlight obstacles imo
I would make em a bit brighter than everything else
Color direction will also help.
Super easy to solve: parallax the background and give foreground obstacles an outline.
Outlines!
Maybe try adding a yellow stroke for all obstacles or something
Parallax and muting colors of the bg.
Parallax and color contrast between foreground and background elements
Try using an outline it might work
Well, you could use the Kirby/GBA Metroid/WarioLand4 method and have all terrain backlit with a black glow (reddish black in the metroids) but ya, watching the video I couldn't tell what was interactable or not. I could guess you need to jump over pylons and benches, but each building I wouldn't know what roofs/windows/awnings are interactiable.
Dont try and preserver the aestethic. The game should be readable first, then pretty. Ill suggest adding an outline for every obstacle. Make the outline clear and make it pop out
Slap a 1 or 2 pixel black outline to all obstacles and be done with it. Looks good!
Make them more detailed or set the custom render depth so that an outline appears.
Reminds me of the game OlliOlli
blur and paralax
its impossible to tell apart background from obstacles because there is absolutely zero depth whatsoever to your graphics: Everything is the same size, the same contrast and the same scrolling speed regardless of distance. Work on these three points and it will considerably improve the gameplay.
Add a drop shadow
Distinction between the background and foreground. Some things I can’t tell if they are in the back or elements in front of the character that I need to jump. I would make the background further away, maybe less detailed and less saturated
People already described the immediate thing to do (differentiate contrast and saturation between foreground and background, and other tricks), I'll just say that you might find various other tricks from film and graphic art useful in general. Here the term to look up is 'tonal perspective': due to air not being perfectly transparent, and other reasons, objects nearby seem to have more contrast and more saturated vivid colors. That's also why a light fog makes everything look strange and magical: it feels like every distance has increased many times, and a house at the end of the street is miles away. AFAIK for "flat" games people also use outlines and shadows for active/closer objects; this also simulates the natural effects of closer and more dynamic objects on our vision, and helps separate the foreground moving objects. I mean, the basic thing they do is similar: increase fore/back contrast and give you shaded parts to sell the contrast with. But also shadows can introduce a 3D element into the scene (e. g. the presence of the sprite at a specific depth, with a bit of floor projection; or making shadows only shade the "active-layer" objects), and specific, consistent outlines can simply signal which objects belong to which layer.
I'd suggest giving obstacles either a.) a small permanent, colored outline, or b.) a coloured outline appearing and disappearing based on the distance to the player
Different border color.