How do I remove black lines occurring in my parallax

0 favourites
  • 12 posts
From the Asset Store
solution for games like "fruit ninja" and drawing applications
  • Hello, I am very new to this program, not surprisingly I've already encountered my first problem that I cannot seem to solve. So it's nice to meet all of you! <img src="{SMILIES_PATH}/icon_e_smile.gif" alt=":)" title="Smile">

    The problem I'm having occurred when added vertical parallax to the background tiles. a black line runs across the entire screen at certain heights. How do I get rid of this.

    http://imgur.com/jWw8oDS

    I've already tried cropping the transparent border with the tool in the imagine editor.

    I've also searched for this problem in the forum here but I don't seem to understand the solution given, it told me to set the Y Height on the image to -20. then re size and re position. but that didn't solve it and it made the tile uneven. :S

    Any assistance would be greatly appreciated

  • I've had this issue. Try making the image slightly larger than the canvas area in an image editing program. I'm not talking about the canvas size in C2. I'm talking about the actual canvas size of the image. I generally use adobe Fireworks. Also try adjusting the size of the image. You have to play with it a little bit to get it right.

  • The size of my furthest layer in the back is 7072 x 1908 and thus that is my canvas size.

    Each subsequent layer is 7072 x (Height). All of the heights are intentionally not larger than the canvas so that I can also achieve vertical parallax.

    I've tried re-sizing each to be longer than 7072 but that does not seem to have changed anything I'm still getting the same lines.

  • Can you post a capx?

  • http://www.filedropper.com/spidersweari ... ame1v00001

    Thanks, I appreciate you taking a look at it.

  • I took a loot at it. The answer to your problem is it's a graphical problem common to tiled background objects. It's the bottom row of pixels wrapping around to the top. Either shrink the object in C2 by one pixel vertically or bump the entire source image up one or two pixels.

    As a side note, though, you're going to run into all kinds of problems designing your backgrounds with such gigantic images. You're immediately cutting out a TON of low-mid tier machines (and nearly all mobile). You ought to find ways to make smaller chunks (images) and place them side-by-side. A stack of absurdly large images is just generally really bad practice. This is particularly true since they're not really all that filled with detail or anything to justify even large images. I'd stick to nothing larger than 2048x2048 (though I don't have a single image even remotely close to that size in my entire game) because anything past that will cause issues on some hardware.

    You have a simple layout and already your video ram use is six times my full-sized game with thousands of objects. So I'm not saying you shouldn't do a high-res game (mine is kind of medium), but not like this.

  • Thanks for the info!

    If I break the images into smaller bits and string them together will that cause the same problems with the video ram or is it only because we are using such large images that the problems are occurring?

    I'm running a fairly high end machine so it's pretty smooth for me but I don't want to make sure everything is optimized to work on as many builds as possible.

  • I'm also having a really hard time executing what you're saying. I'm a sound guy I can mix with the best of them but I can't for the life of me figure out exactly how to change it to be larger I've tried re-sizing the imagine in both C2 and a photo editing program to no avail. I'm also having a very hard time communicating to my artist exactly what needs to be done to the image to fix this problem.

    If it's not too much to ask from someone who knows ZERO about photo/image editing.

    -I've used the re size tool in C2 image editor to shave a pixel off or add a few pixels on. the default is set to 'stretch', I've tried switching that to align center but that doesn't seem to work either. Am I missing something that I have to manually adjust to make this work?

  • bump the entire source image up one or two pixels..

    Does this mean I have to add a transparent pixel or two to the top and bottom or just re size the whole image

  • The entire image just needs to be moved up a pixel either in the C2 image editor or elsewhere. So don't resize or anything for your solution. Select the entire image and move it up so that the bottom pixel row is transparent.

    But, more importantly, video cards can only store images in their memory ("vram" or video ram) in power-of-two sizes. This means 2x2, 4x4, 8x8, 16x16, 32x32, 64x64, 128x128, 256x256, 512x512, 1024x1024, 2048x2048 (this is the cutoff for iphone 4 and some low-end gpus), 4096x4096 (this is the cutoff for modern iphones and ipads to my knowledge as well as many gpus), 8192x8192 (absurd, but high-end gpu's can do it.) Any image you make that is above any of those numbers will be rounded up to the next size. So a 520x540 image will be padded out on the graphics card to a 1024x1024 image (with transparent/invisible pixels filling in the rest of the space. This is stored uncompressed like a bitmap on the card. So youre 7,000-something pixel wide image is being loaded as 8,192 pixels wide. If the gpu only can do square images, then 8192x8192. If it can do rectangular power-of-two textures, then you fare a little better.

    But the real answer is that your artist needs to be producing art within the constraints of actual game performance. It should never be a 7000-pixel wide image. Your background images are already Tiled Backgrounds (which mean they would repeat their texture instead of stretching/resizing), so your art should be in something like 1024x1024 chunks that can be repeated/looped seamlessly horizontally. This way, you can load that one image and then tile it out across the map. If you want more variation, make a few of them that share a common edge and then you can butt them up side-by-side in addition to having them tile/loop horizontally.

  • Try Construct 3

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

    Try Now Construct 3 users don't see these ads
  • SmashKAB Here, this is a quick and crude example to show you what I'm talking about. I didn't bother creating unique objects for the layers--I just used a shader to speed things up. You can see the transparent pixels at the bottom of the images. I also used a solid-color tile to fill in the rest under that. I have snap to grid on in the capx to make positioning easier.

    Anyways, here's a quick capx of what I'm talking about. (uses C2 218)

    And here's a live version of it to run/test in your browser.

  • Excellent. Problem solved. Thank you for taking the time to explain this for us.

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