How Do I Make my Background Less...Distracting?

Hello fellow GDevelopers,

I am trying to do a fun and simple mobile game where you slide’n’jump: rpgTesting1 | Play on

I have a “placeholder” background for the first level but I have two problems:

  1. It is way too distracting
  2. Handling such a big image in piskel makes my computer slows down to the point that it “pauses” (sorry I can’t think of the right term in English)

If you try to play please use your mobile phone, it doesn’t work as intended on pc, thank you.

Hi, I am not an artist but you could make your background image less distracting by lowering the saturation and contrast. Your player sprite should be more saturated and in a color that is not in the background. Additionally you could draw an outline around the character but that depends on the art style of your game.

If your image is so big you should consider to cut it in smaller pieces. Piskel is great for making pixel art but for some tasks you need something else.

Edit: It is also a good idea to choose a color palette and to restrict the number of colors you can use for your game/level. For your background you could choose one or two colors and for your character sprite one or two that make a contrast.

1 Like

Blur and lighen the background. By doing so, you give the game a sense of depth and better contrast between the player object and the background.

Or give the background a horizon. This creates some visual relief from the complex buildings. I still recommend blurring and lightening here.

Or use a simpler background (I very much recommend that you do :slight_smile:). It doesn’t need to be as simple as my quick mock-up, but the main focus will be on the player and the platforms; the background should complement and not distract or, worse, make it hard to see what’s happening.

1 Like

Wow didn’t expect an answer from the famous youtuber worriedpixels, I’ve seen your videos many times!!

I think you gave me a very complete answer, I’ll try to take a more minimalist approach to backgrounds.

How did you accomplish “the look” on that last picture??

1 Like

Haha, I’m not famous :smiley: but thank you very much!

For the last image, I selected 3 colours from your background (two shades of purple/lilac and one grey). I then chose a green for the player square that has the same saturation and brightness as one of the background towers. The sky is a gradient that I made from a photo I took. It’s the one I use in my game.

The buildings could be done as a tile, and the gradient background could be a very small jpeg that is enlarged in GDevelop to the size you need.

This means your background images could be quite small, in terms of image size and file size, but still look quite nice.

I forgot to say: I gave the player an outline using a lighter version of the green.

1 Like