Lets talk about > Very Complex parallax backgrounds

CorianderGames · September 29, 2021, 9:10am

So for sure if you’re in here you already know what is a parallax backgrounds, basically it’s that fake depth feeling in 2d games.
First off: I know there are layers in GD and I know you can make a parallax background.

But when I’m talking about Complex I mean games like Rayman Legands for example…
Like in here, I took a screenshot of a parallax backgrounds in the game (it was from a video on youtube)

Now as you can see the crazy amount of layers in this single scene…
How to achieve similar or even just close effect like this in GDevelop?
Like I can do the art no issues with that, the issue I’m having is how to make a parallax background out of the scene that I drew ?
The issue with GD at the moment is that it doesn’t have a 3D space to work in and see the layers separated like in the photo.

It’s going to crazy hard to test this out in engine!
Also testing a parallax background is kind of annoying like for example:
When you’re drawing your scene you don’t exactly know what the player will see when he jumps, like which layer will be moving and so on in engine because you’re drawing in PS

I have an idea but I don’t know if it will work or if it’s even worth it but how about this:
I create my art as normal, everything is on separate layers (This alone is very very complicated)
Now I take these layers (I have no idea how when you have like 2 million layers to work with) and open up a 3D program (I have no idea what program, if you know an easy one let me know about it) then I set up the layers then I add the character in and center the camera and on him and move him a bit up and down and left and right to see if the parallax background is working correctly inside that 3D program. I have no idea if this the right way to do it honestly but I’m just thinking here like, how though? this crazy amount of details to work with…

So here are my questions:

1- How to handle complex parallax backgrounds in GD in general, what is your ideas for this? I want you to get creative as possible, like imagine you need to create a scene with 6 or 7 separate backgrounds, what are the steps you’re going to take to achieve that?

2- You drew a great looking very detailed scene, how do you make this scene a parallax background in the first place, like what layers goes with what? how do you merge this scene to get exactly the right amount of layers you need in the scene? like when there are so many many layers to work with, how to handle this to create a parallax background out of it? this is going to be crazy hard and very time consuming to do…

3- How to test a complex parallax background inside GD ? or like easiest way to test it out, this is probably the most important question, how to know you’re drawing the right perspective and not making the pictures go out of bounds when the player jumps for example?
I mean in the photo up there, they draw just the things that appear to the camera and nothing else, how is that even possible? how did they test that? did they like test the game then see this picture falling out of bounds then adjusting it and test again and so on or what exactly, if that’s the case then wow that will take 5 years alone to do ?

Now for my next game if I feel like that parallax background is going to be super hard to do and very complicated, I might unfortunately drop it off from the whole game as I want to focus more on the gameplay and so on… working alone is already hard you know, but I might have other things to do to give depth to the scenes a bit more I’m not sure yet if parallax background is going to be something, but honestly when you have detailed environments it’s just going to be crazy hard to make it a parallax background, I’m not really sure, I know that parallax backgrounds give a great feeling in games but like I don’t really know, imagine working with maybe 6-8 layers in each scene and you have like 50 - 150 scenes, it’s just going to be impossible…

I hope there is a simpler way to it though, maybe I’m complicating things, hope you can help me with this.

Thank you as always and I’ll be reading your ideas and everything here…

Silver-Streak · September 29, 2021, 9:14am

Hmm… there is nothing special or 3D about the screenshot you showed. That is just an “exploded” view of normal parallaxing backgrounds. The image you provided only appears to have about 6 real layers.

You can do this today the same way any parallaxing is done in GDevelop.
Make a layer for each background layer, and make that background layer follow the camera of the main baxkground layer, but multiplied by a smaller and smaller decimal the further away the image is from the foreground.

CorianderGames · September 29, 2021, 7:41pm

@Silver-Streak

Hmm… well after trying for almost 10 hours today I can say that it is possible…
Thing is… it’s really hard and very time consuming.
I might also make it only horizontally not vertically, It’s already complicated enough horizontally.
Going for both directions is just going to be crazy difficult to test and edit, I don’t want to make it impossible for my self…

Anyway I made each layer as a separate tiled object and I used the change offset event and that way when I press left or right to move the image offset change based on the player position and I make the far layer move slower than the closest one and so on…

It’s doable that all I can say, the scene I was working on has around 14 layers… but I’m sure I can merge some of these layers together to reduce to the number of layers, might end up at like 10 or 9 can’t really tell atm…

But overall it’s possible just not very fun when you have so much details to go through…

The most difficult thing about it is not the art but how many layers are there and like you have to keep track of 10 pictures on top of each others and their position and so on… it’s so frustrating and very messy.

I’m impressed by the games that have a detailed parallax effect tbh, it really makes you wonder how much time and work it took for that effect alone…

Anyway If anyone else have another suggestion to make the process a bit easier, I’d love to hear it…

Silver-Streak · September 29, 2021, 8:08pm

I’m not quite sure what you mean. Parallax is 2 event actions per layer if you’re doing it horizontally and vertically.

(No Condition) | Change Camera Center X of Layer (Layernamehere): 
 Set to CameraX("baselayernamehere",0)*0.1 (or whatever percentage you want here)
               | Change Camera Center Y of Layer (Layernamehere): 
 Set to CameraY("baselayernamehere",0)*0.1 (or whatever percentage you want here)

You just do that for each new layer you’ve made, and that’s it. If you don’t want to do vertical, just remove the CameraY event action. It will now follow the main layer’s camera.

To make sure it’s aligned, you just place your image exactly where the base layer image is as well, then move it left (or up/down) whatever extra percentage needed. The slower you’re having the parallax layer move, the higher percentage it needs to be moved left in the scene. This will be based off one screen length. So in the example above, it’s moving 10% of the normal speed, meaning that you need to ensure it is 90% further left than the base layer. It should be a one-time placement.

CorianderGames · September 29, 2021, 9:07pm

@Silver-Streak

Alright I try this again and let you know what happened

But I don’t get that though, could you explain more?

Silver-Streak · September 29, 2021, 9:18pm

Here’s a scenario:

You have two layers (base and parallax)
Your game resolution is 800x600
The parallax layer moves 50% slower (CameraX(“base”,0)*0.5)

In this case, your art on the “parallax” layer be set up so it’s X origin point is -400 (800 * 0.5 = 400, so you want to be 400 left of the 0 x point, therefore -400). This will ensure the two layers are aligned when the scene first starts at 0,0. If you just set up your art on both layers as if they were at 0,0, then the parallax layer art will be misaligned (you’ll have empty space) when you’re on the left-most side of the game scene.

This only works if you’re going to be moving left to right from the start of the scene. If your level goes both directions, you’ll instead need to have art on the parallax layer that is both -400 the 0,0 point, AND +400 longer than the largest X position on the base layer.

CorianderGames · September 29, 2021, 10:39pm

@Silver-Streak I think I get what you mean now,

So I might do something in order to not have “empty space” because this is my biggest issue so far with parallax in general, I use the event which centers the camera between 2 points (top left and bottom right) so I might just move those 2 points closer into the scene to keep the parallax going as normal and without having the “empty space” issue…

Also I have another question:
The slower the layer is, the less I need to draw out of bounds and the faster it moves the more I need to draw out of bounds? is that correct?
You said 800 * 0.5 = 400 (which is 50% slower) so I need to have -400 and +400 on both sides, what you mean by that is that I have to draw more art on both sides basically, right?

This seems very tricky to do, like for every single scene doing this stuff, it’s going to be crazy but I mean it’s possible still…

CorianderGames · September 29, 2021, 10:43pm

@Silver-Streak
Btw how taxing is parallax in terms of performance?
Does using more layers have an impact on performance?

Silver-Streak · September 29, 2021, 11:43pm

Using more of anything in any engine will always impact performance.

However, unless you’re talking hundreds of layers or using single massive images per layer, there shouldn’t be any perceptible difference between adding regular objects to the scene without parallax.

CorianderGames · September 30, 2021, 12:05am

@Silver-Streak I see yeah…
Well I want to thank you so much for helping out and answering my questions as always.
After going deeper into parallax this whole week and trying it out I’m not really sure if I will use this kind of complex parallax to be honest, too much work… takes too much time and makes the work environment so messy, I just don’t really feel like it, it looks good but not worth it when it could make the development time so much longer, I like focusing more on the gameplay and so on, this is the most important aspect anyway.

But I’ll have other ideas and tricks that will give the world a bit more depth to it.
Parallax is just so complex for me, working all alone is hard enough, when you’re working on detailed environment, it’s just crazy to make it parallax, so complex and testing it out and editing the art and stuff, it’s just a ton of work, I mean in Miko it would have been possible, but I didn’t add it because of performance issues, when I added parallax into the levels, the game would lag a lot and for my next game I don’t think parallax will happen unfortunately.

But other tricks will be there and it will look almost as good and I’ll do my best to make it feel that it has that depth to it.

Anyway thanks a lot for helping me with this.

Eiklahc · September 30, 2021, 12:20am

takes too much time and makes the work environment so messy, I just don’t really feel like it

For what it’s worth we have our Parallax on an external scene so it doesn’t get in the way of the level objects.
Then at the beginning of the scene, we load in the external scene and set what images we need for that level.

CorianderGames · September 30, 2021, 12:41am

@Eiklahc Wait … that’s actually kind of genius, I never thought about that.
Alright that might make it a lot more cleaner.

Could you explain more details to me?
Like where exactly do you have the backgrounds in the empty space, is it on 0,0 or any where else or how did you achieve the parallax for your game in general and so on, would love to hear more from you.

Eiklahc · September 30, 2021, 1:16am

There’s really not much to say as it’s a fairly simple setup.

I just treat the external scene as if I would normally and and add all the layers and duplicate them alot on either side of the view area.
I was originally going to use the tiled object so I could stretch out each image as much as I want, however decided to go with the standard object as it would allow me to dynamically change each layers image depending on the level.

Gdev should cull any of the objects not being rendered, so I am not too worried (at this point) about having the large amount of background objects in this scene.

The external scene zoomed WAAAAY out.

Each layer has it’s own object.

Then I update the scene and set the level theme (what image I use for each layer)

I am sure there are better ways to accomplish this, but it works pretty well currently.

CorianderGames · September 30, 2021, 4:55am

@Eiklahc Thank you so much for the detailed answer.
I just got one request which is I’d like if you could explain more what exactly is happening with these events? what exactly is lerp and what does it do as I never used it before?
The issue that I’m having is that I can’t just repeat the background like in the picture…

MrMen · September 30, 2021, 5:17am

Sorry in advance if this is nitpicking, but if it’s interactable, then doesn’t that by definition not make it a background in the traditional sense - which is something more akin to a backdrop? Background is what occurs away from the action which doesn’t impact or affect what’s happening in the foreground.

In parallax scrolling, the the various layers are moving at different speeds relative to the player. If you add platforms to a background layer, then either the platform will have to move at the same speed as the player, taking it away from the background layer, or it moves at the background speed which will be a bizarre behaviour for the player character.

CorianderGames · September 30, 2021, 5:59am

@MrMen sorry didn’t mean that for sure, it was a typo, what I meant is that there are interactble objects in the scene, so it’s going to be difficult to align these objects with the external layout.

The external layout is going to be the backgrounds but then you have in the original scene the platforms and interactable objects, how to align everything together is what makes me confused…