[Behavior] Parallax background for side-scrolling games

Post your completed addons to share with the community

Post » Sun Feb 05, 2017 3:07 am

Zebbi wrote:@Zed2100 I had another idea about having a feature where you could put a sprite/background in and have a paralaxer that splits the image up into horizontal slices: Image
If you notice the background, the water has rows and rows of water, all split up to give a psedo 3d look. I can do this manually: Image but it would be incredibly convenient to have the plugin do this for me, just specify how many slices and how much to offset each slices paralax by. You could even do vertical slices for tall games.


I think that's just a visual trick, there are probably only 3 or 4 backgrounds in there with parallax, they are cleverly animated to look like water.

As for the feature that you described (slicing the background and making every part move with parallax), I feel that it is out of the scope of the addon. You can animate your water in such a way that you'd only need a few backgrounds, then you can easily use the ParallaxBGSprite behavior with them. This will not only be easier to implement, but will also save you some precious rendering time, with less sprites on screen your game will perform better. Especially on mobile.
ImageImage
B
43
S
13
G
10
Posts: 164
Reputation: 7,650

Post » Sun Feb 05, 2017 3:30 pm

Zed2100 wrote:
Zebbi wrote:@Zed2100 I had another idea about having a feature where you could put a sprite/background in and have a paralaxer that splits the image up into horizontal slices: Image
If you notice the background, the water has rows and rows of water, all split up to give a psedo 3d look. I can do this manually: Image but it would be incredibly convenient to have the plugin do this for me, just specify how many slices and how much to offset each slices paralax by. You could even do vertical slices for tall games.


I think that's just a visual trick, there are probably only 3 or 4 backgrounds in there with parallax, they are cleverly animated to look like water.

As for the feature that you described (slicing the background and making every part move with parallax), I feel that it is out of the scope of the addon. You can animate your water in such a way that you'd only need a few backgrounds, then you can easily use the ParallaxBGSprite behavior with them. This will not only be easier to implement, but will also save you some precious rendering time, with less sprites on screen your game will perform better. Especially on mobile.

If you check out sonic in an emulator, you can definitely see there's slices that move at different paralaxes at about every 3 or 4 pixels, that water is cut into about 20 different pieces. I've done a new version that looks great with your plugin, but it requires manually slicing and that might be difficult to manage and maintain for some folks. I agree it might be something that's outside the scope of this plugin, but I think it would Definately be worth considering for perhaps a new plugin or even another extension of this plugin?
B
41
S
12
G
14
Posts: 1,118
Reputation: 11,255

Post » Sun Feb 05, 2017 7:59 pm

B
33
S
18
G
28
Posts: 2,493
Reputation: 20,950

Post » Sun Feb 05, 2017 11:44 pm

@Zebbi sure, it could be a great idea for another plugin or effect, since it is a water effect first, before having anything to do with backgrounds. As for the current plugin, my focus is on general purpose layered backgrounds with parallax that are simple to use. I want to keep this focus so that any developer who needs bgs for her side scrolling game could use it.

To be honest, it is the first time that I notice the water effect in Sonic, I guess it has to do with how fast the game is, the environments move so fast that you barely have time to "stop and smell the roses". Thanks for mentioning it, it is very beautiful indeed.
ImageImage
B
43
S
13
G
10
Posts: 164
Reputation: 7,650

Post » Mon Feb 06, 2017 9:28 pm

Zed2100 wrote:@Zebbi sure, it could be a great idea for another plugin or effect, since it is a water effect first, before having anything to do with backgrounds. As for the current plugin, my focus is on general purpose layered backgrounds with parallax that are simple to use. I want to keep this focus so that any developer who needs bgs for her side scrolling game could use it.

To be honest, it is the first time that I notice the water effect in Sonic, I guess it has to do with how fast the game is, the environments move so fast that you barely have time to "stop and smell the roses". Thanks for mentioning it, it is very beautiful indeed.


No problem! Here's what I made on Saturday night with the plugin, sorry for the delay, been busy with things!
Image
Please watch this video for a full 60fps, smooth version:
https://youtu.be/iOvR7CHgAPE
I split up my grass at the bottom into about 8 pieces, 4px tall each, and just offset them and adjusted the parallax. The water was done with a single 12x6px rectangle of water, with 3 slightly different wave animations. Just after the frame loads (to account for the loop that builds the parallax) I have every single instance choose a random animations.

Now, I had to do the moon with a layer all on it's own as the parallaxer had trouble positioning just one to the far right-hand side, I gave quite a long sprite seperation so as no duplicates would be visible and gave it a really slow parallax (or even no parallax so it stays still) but it kept going into the centre of the screen. Is this a bug or just how it works?

I also tried adding the sprite parallaxer to the moving clouds (so the clouds moved in the breeze but also parallaxed accordingly) but they wouldn't move and all clustered together in the centre, so those had to have their own layer as well. Would be nice to have been able to keep everything on one layer, but I'm not sure if these are bugs or just me pushing the plugin to it's limits!
B
41
S
12
G
14
Posts: 1,118
Reputation: 11,255

Post » Mon Feb 06, 2017 10:58 pm

@Zebbi that's impressive! Great work!

As I explained earlier, the ParallaxBGSprite behavior will override the position of the sprites, and will tile them. Instead, you should use the WrapHorizontal behavior for the clouds and the moon.

Generally, for single sprites, the solution is to place them in their own layer, and change the parallax values of that layer, then add the WrapHorizontal (or the official Wrap) behavior to them. Only use ParallaxBG or ParallaxBGSprite for backgrounds that are not moving and that need to be tiled.

If you want me to take a closer look at your problem, feel free to send me your capx at [email protected]
ImageImage
B
43
S
13
G
10
Posts: 164
Reputation: 7,650

Post » Mon Feb 06, 2017 11:10 pm

Zed2100 wrote:@Zebbi that's impressive! Great work!

As I explained earlier, the ParallaxBGSprite behavior will override the position of the sprites, and will tile them. Instead, you should use the WrapHorizontal behavior for the clouds and the moon.

Generally, for single sprites, the solution is to place them in their own layer, and change the parallax values of that layer, then add the WrapHorizontal (or the official Wrap) behavior to them. Only use ParallaxBG or ParallaxBGSprite for backgrounds that are not moving and that need to be tiled.

If you want me to take a closer look at your problem, feel free to send me your capx at [email protected]

That's absolutely fine, that's exactly what I did, use wrap and parallax them on their own layers :D YOu could probably create a full 3D look if you split a sprite on every pixel, but the grass is very convincing with virtually no Venetian blind effect. As an interesting contrast to 99Instances example, the parallax plugin technique I've used runs extremely well with no lag or slowdown whatsoever.
B
41
S
12
G
14
Posts: 1,118
Reputation: 11,255

Post » Sun Feb 26, 2017 6:16 pm

@Zed2100 I notice the positions get screwed up if I change the height of the layout. I tried setting the position of the objects based on the layoutheight - (whatever Y would make the object show up in the right place) but the plugin seems to do all it's repositioning based on the initial position set in the editor. Right now, for a 3000 height layout, I've got the objects positioned at about 2500, which is nowhere near where they appear from the initial player start, and they have to be re positioned everytime I change the layout height (which is the main problem, the trial and error). Any way I can set these positions for good?
B
41
S
12
G
14
Posts: 1,118
Reputation: 11,255

Post » Sun Feb 26, 2017 6:52 pm

Zebbi wrote:@Zed2100 I notice the positions get screwed up if I change the height of the layout. I tried setting the position of the objects based on the layoutheight - (whatever Y would make the object show up in the right place) but the plugin seems to do all it's repositioning based on the initial position set in the editor. Right now, for a 3000 height layout, I've got the objects positioned at about 2500, which is nowhere near where they appear from the initial player start, and they have to be re positioned everytime I change the layout height (which is the main problem, the trial and error). Any way I can set these positions for good?


I'm assuming you encountered this problem at edit-time.

The plugin cannot change the position of the backgrounds in the editor, this is a limitation of the Construct 2 plugin SDK.

Even if it were possible, that would be impractical. So if you change the size of your layout, you'll have to manually place the backgrounds at the bottom.

If you want to do it through the event sheet (e.g placing backgrounds at bottom on layout start), you will need to also update the initial Y position of the background by using the action: Reset Initial Y-Coordinate.
ImageImage
B
43
S
13
G
10
Posts: 164
Reputation: 7,650

Post » Sun Feb 26, 2017 7:00 pm

Zed2100 wrote:
Zebbi wrote:@Zed2100 I notice the positions get screwed up if I change the height of the layout. I tried setting the position of the objects based on the layoutheight - (whatever Y would make the object show up in the right place) but the plugin seems to do all it's repositioning based on the initial position set in the editor. Right now, for a 3000 height layout, I've got the objects positioned at about 2500, which is nowhere near where they appear from the initial player start, and they have to be re positioned everytime I change the layout height (which is the main problem, the trial and error). Any way I can set these positions for good?


I'm assuming you encountered this problem at edit-time.

The plugin cannot change the position of the backgrounds in the editor, this is a limitation of the Construct 2 plugin SDK.

Even if it were possible, that would be impractical. So if you change the size of your layout, you'll have to manually place the backgrounds at the bottom.

If you want to do it through the event sheet (e.g placing backgrounds at bottom on layout start), you will need to also update the initial Y position of the background by using the action: Reset Initial Y-Coordinate.

Ahh, I see, I didn't know there was a reset initial coordiante setting! Thanks for that, I'll have a play with it ;) It's also quite trial-and-error to find the right position on huge layouts for objects with a faster than 100/100 parallax, is there some kind of method to aid with finding the right spot? (yes, I imagined there wouldn't be any way of actually updating the preview position in the editor)
B
41
S
12
G
14
Posts: 1,118
Reputation: 11,255

PreviousNext

Return to Completed Addons

Who is online

Users browsing this forum: cssiqueira and 2 guests