Jump to content

Need advice on a tiling background


Matt F
 Share

Recommended Posts

Hey there. I'm just starting to get a feel for Phaser and I'm creating a game which scrolls vertically rather than horizontally. I created a hilly sort of background image which would ideally scroll with the camera a bit against a more slowly-scrolling sky background.

 

I'm thinking there are 3 options here to achieve what I'm looking for:

  1. Create the background as a Sprite and copy it horizontally
  2. Create the background as a TileSprite and pad it with transparent space to fill the height of the scene
  3. Create the background as a TileSprite and (if possible) tile it on the x-axis but not the y-axis

The 3rd options seems the simplest, but looking at the API it seems there's no option to control this.

 

Any ideas, guys? I've been working with option 2 at the moment but for some reason I can't position it properly.

 

Thanks!

Link to comment
Share on other sites

A TileSprite will only show as much of the image as is defined by its size - this means if you want it to only tile on one axis, you just set the other axis's size to match the image contained, and only scroll in the axis you want to scroll. I'd really avoid filling it out with transparent pixels as although they can't be seen, they are drawn by the renderer nonetheless and will lower your game performance.

Link to comment
Share on other sites

Thanks for that.  It's working just fine now.  It doesn't tile and scrolls with the camera nicely.

 

Two issues:

  1. There's a seam at the top of the background sprite where it would normally tile. I decreased the TileSprite height to see if it could be some artifact from my image, but the seam always follows the top of the sprite. Am I able to get rid of that?
  2. In tinkering with my background placement I seem to have broken something, as the tile map now scrolls with the camera. I can't undo this one for some reason. I updated to the latest version of Phaser during this process, but downgrading didn't change anything either. I'm looking around for any funky syntax, but it all looks all right. Is there anything I could check here?

Thanks again.

Link to comment
Share on other sites

1. This will almost certainly be in your image - check it carefully at the edges to see if you have semi-transparent or off-colour pixels.

2. Ensure that the TileSprite has fixedToCamera = true, though I think there have been some changes in the latest versions which may be affected this too.

Link to comment
Share on other sites

So I loaded up the background image in GIMP and took a big ol' eraser to the top, but had no luck removing the seam!  Actually, it seems to disappear if the camera is above a certain height and isn't moving.

 

As for the second issue, I think I was a bit unclear.  I'm actually talking about my Tiled tileset/map layer.  I ripped all that code from examples so I'm not sure what's going on.  Perhaps fixing this would fix the seam issue.

Link to comment
Share on other sites

i had the very same problem with tilesprites ... even transparent tilesprites that didn't fill the whole world would create a "seam"  (a thin line at the top)  but not all the time.. only on jumping because i programmed parallax in x and y direction related to the camera position..  without the parallax (that means no y movement) the line was gone..  in my case this is a repaint issue or something.. not related to browser or canvas/webgl..  it's just there as long as the tiled background is moving in the y direction ...

Link to comment
Share on other sites

Oh yeah? So it's exclusively for vertical scrolling? Hm, well, it's something I can live with for now, but I'll do some research and see if I can find a solution.

 

@lewster32 Sure! There's my excuse to get this thing on Github already. https://github.com/mfugere/star-dreams

 

Hopefully that'll suffice. If you can't run it I'll try to clone it into my public Dropbox or something.

Link to comment
Share on other sites

Okay, I've spotted the problem - it's a common issue. When you're positioning the background, you're not doing it with integer values, and so a sliver of the bottom of the texture is appearing at the top (edge bleed) due to it not being pixel-perfect. You can solve this in two ways, either round your background position:

bgs[0].y = Math.round((game.camera.y * 0.9) + 224);

Or add a row of transparent pixels as padding to the bottom of the image.

 

I'm actually wondering why you're using a TileSprite at all in this situation, unless you mean for the sprite to repeat left and right? If not, or you only mean to allow the character to move a small amount left or right, in this situation I'd have the background as an image/sprite which is just moved, rather than a TileSprite which is scrolled. In any case you'd still need to account for the edge bleed if using non-integer positioning or any kind of scaling.

Link to comment
Share on other sites

Aha! That'll do it. Thanks for the explanation.

 

That's what I was wondering initially. I figured my backgrounds would never be too complex so it might be optimal to take a small slice and repeat it in the X direction, rather than make an image spanning the entire width of the stage (which won't scroll). I might change my mind.

 

Are you seeing the tileset glitch I'm talking about? Once you jump high enough for the screen to start scrolling, it's like the collision tiles themselves move with the camera, while the tile images stay put.

Link to comment
Share on other sites

 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...