Scrolling Tiled Background C2

0 favourites
From the Asset Store
Classic style beat'em up template. Punch & Kick foes across the screen.
  • So, I have created a nice Egyptian background (640x480) that I would like to scroll left continuously and I've looked over Classic code until I have thoroughly confused my feeble little brain cells! <img src="smileys/smiley5.gif" border="0" align="middle" /> The last example I looked at was here:

    I know my tiled background is large but it contains pyramids, a Sphinx, palms, etc and it will tile seamlessly if I can just get it to scroll, dang-it!

    Anyone willing to help out a boob, (oops!) er, I mean noob? HeHe...

    Thanking you in advance!

  • TBScrollingExample.capx

    This principle works for any object (sprites, etc...)

    It is generaly not advised to have a big background image (as in the tiled texture being big).

    You could very well use several layers.

    Your bottom layer would contain a TiledBackground (with the sky color for example).

    On an upper layer, you would put several smaller sprites (containing your scenery like pyramids, palmtrees, etc... with a transparent background) and make THOSE sprites scroll.

    That would make the trick as well, would allow you some multi-parralax effect.

  • Thank you soooo much for the help, Kyatric! Worked like a charm!

    I do see a gap occasionally but if I recall correctly, I think this was discussed somewhere else and I think it was said that it disappears after export, is that correct?

    So, here is another question... What is the general rule for Sprites and Tiled Backgrounds as far as size? Meaning, they should be no larger than...(pix by pix size and/or byte size)??

    My background has all been digitally painted on a single layer so I will either have to slice it up and then put it all back together in C2 and then apply the scroll effect to it or start all over with from scratch! Yuck...

    I have all my actual game sprites saved individually, just not my nice large bewful background! <img src="smileys/smiley19.gif" border="0" align="middle" />

    A final note for others wishing to use Kyatric's example, I had to update to the latest release 58 as it did not work on ver 57.

    Thanks again, I really appreciate your willingness to help! It is most appreciated!

  • Hello again,

    So I have been busy making my other components for my game and I have been thinking about what I need to do in order to accomplish the suggestions Kyatric made with the background I previously created.

    I'm okay with creating the sky, placing it on the bottom layer and adding the sphinx, pyramids, palm trees and other images by virtue of sprites on other layers, but I'm having trouble deciding how best to recreate my original image using this method, mainly because of the rolling sand dunes.

    I'm posting my background image and am once again asking for suggestions on how best to replicate or recreate the sand dunes with a tile and still manage to keep it from looking like it is being repeated over and over again. I'm guessing it might be best achieved by stretching and contracting the tile, maybe...

    Any suggestions from the pros would be greatly appreciated! Here's my image:

    <img src="" border="0" />

    Thoughts and recommendations are welcome! Thanks in advance for all the words of wisdom!

  • I am having the same problem also maybe it's a bug. <img src="smileys/smiley19.gif" border="0" align="middle" /> No mater what I try I get the same gap.

    <img src="" border="0" />

  • Hello Wink,

    I recall reading somewhere that once you exported your game the gap disappeared. I actually haven't tried it yet because I am also creating the same game as a test to try to get it working with the parallaxing layers as suggested by Kyatric but my little player keeps running off the screen and falling into the abyss!

    Try exporting and see if that works, maybe we can get some knowledgeable folks to explain the gap and maybe educate us a little on parallaxing layers and missing players! <img src="smileys/smiley1.gif" border="0" align="middle" />

    Have a nice weekend and best of luck with closing the gap in your game!

  • Wink and MeJustMe: if you post capx of your projecs, it might be easier to give you some help.

  • Try Construct 3

    Develop games in your browser. Powerful, performant & highly capable.

    Try Now Construct 3 users don't see these ads
  • Hi MeJustMe

    I tried exporting my game, and that is the screen shot from the exported game. At first I thought it might be a photoshop issue because sometimes photoshop will leave a 1px empty space on the right side of an image so I cropped the background 1px in from the sides. But the result is the same.

    Try giving the bound to layout behavior to your little sprite that keeps running off.

    Anyway good luck with your game. I might just start on a different game for now something I know I can make with little issues. lol

    Ok thanks Kyatric I will in a few minutes.

  • Thanks, Wink... I'll give that a try and see if it works.

    Hello Kyatric! How are you? I appreciate the response and will surely post my capx if the suggestion to bound the layout on the layer my player is on does not work. I'm trying really hard to learn by looking at the examples provided, but sometimes the more you read and the more you change things, the worse it gets! lol....

    Have a nice weekend and I'm sure I'll be supplying my capx just as soon as my hair thins enough that I can see my scalp!! Don't want give up and quit trying too soon! haha...

  • Ok here is my capx

  • Wink: is your browser firefox ?

    Try to set event2 => TiledBackground.X to TiledBackground.X - int(60*dt)

    The int() function makes it so that the result of the operation is always an integer (not a float).

    This seems to make the "gap" disappear".

  • Thank you so much Kyatric. <img src="smileys/smiley4.gif" border="0" align="middle" /> That fixed it.

    Yes I have been using firefox but I also have Chrome, Explorer, Opera, and Safari. All of them were giving me the same issue but not anymore thanks to your fix.

    Thanks again

  • I'm running Firefox as well and that fixed by problem with the gap in my other game but I have made a duplicate of the game to test parallaxing layers and I tried setting the bound to layout on the sprite but that didn't work with parallax so now my little player still drops off into the abyss! I was not sure if we could tile backgrounds (like the sky and dunes) as you had shown us and still use parallax with our other sprites. (??)

    Thanks for helping us with the gap, Kyatric. It is most appreciated!

    Here's my capx with the parallax layers. I have them set for minimum movement just to see if I could get it to work. Basically I want this particular view to tile repeatedly for the first level of my game, with my player not plummeting off the right-hand side of the screen!

    Advice to achieve this would be greatly appreciated! Thanks in advance for your time.


    Have a nice weekend!

  • I'm not sure parallax is the best way to go.

    To see some platformer/parallax use, check out C2's example folder.

    To your issue :


    Seamless scrolling (not fullproof though, gap has come back, I'm not sure why).

    Guess it's a good base to work from though.

  • Hello Kyatric,

    Thanks so much for taking time to provide the example. Yes, I noticed the gap returned and sometimes it appears as if they actually overlap on occasion during the scroll as well.

    I concur with you that this may not be the most prudent way to proceed and I have searched the forum and see that layout size shouldn't be an issue so perhaps I will just duplicate the sprites (dunes, clouds, etc) and make my layout large enough to complete this portion (level) of the game with the parallaxing layers to achieve the 3D effect on the distant objects/scenery/ground, etc; saving the actual platform effects for another game level entirely.

    I am obviously missing a large portion of the concept to the platform games unless they are actually duplicating sprites in order to achieve the appearance of the scrolling effects that you see in so many of them, and implementing a large layout to achieve the illusion. I was under the assumption that things were happening in the background via the infinite tiling/scrolling layers.

    I have opened most of the examples already, which could very well be adding to my confusion. I get something working just right and then think I'll try something else and before you know it, I've torn everything up. I suppose we can just call that, part of the learning process!

    Thanks again for all you do, it's truly appreciated!

Jump to:
Active Users
There are 1 visitors browsing this topic (0 users and 1 guests)