Matt F Posted November 15, 2014 Share Posted November 15, 2014 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:Create the background as a Sprite and copy it horizontally Create the background as a TileSprite and pad it with transparent space to fill the height of the scene Create the background as a TileSprite and (if possible) tile it on the x-axis but not the y-axisThe 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 More sharing options...
lewster32 Posted November 16, 2014 Share Posted November 16, 2014 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 More sharing options...
Matt F Posted November 17, 2014 Author Share Posted November 17, 2014 Thanks for that. It's working just fine now. It doesn't tile and scrolls with the camera nicely. Two issues: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? 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 More sharing options...
lewster32 Posted November 17, 2014 Share Posted November 17, 2014 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 More sharing options...
Matt F Posted November 17, 2014 Author Share Posted November 17, 2014 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 More sharing options...
Matt F Posted November 21, 2014 Author Share Posted November 21, 2014 I'm still not sure what to do about this one. The only thing I can add is that the size of the game window seems to affect how far "offset" the tiles are from their respective images. I used Tiled to create the JSON, by the way. Link to comment Share on other sites More sharing options...
lewster32 Posted November 22, 2014 Share Posted November 22, 2014 Any chance you could upload a demo? Link to comment Share on other sites More sharing options...
valueerror Posted November 22, 2014 Share Posted November 22, 2014 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 More sharing options...
Matt F Posted November 24, 2014 Author Share Posted November 24, 2014 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 More sharing options...
lewster32 Posted November 24, 2014 Share Posted November 24, 2014 Hmm, the github link doesn't appear to be working... Link to comment Share on other sites More sharing options...
Matt F Posted November 24, 2014 Author Share Posted November 24, 2014 Yes...it appears they hid my profile under suspicion of robots. Sorry about that. Just contacted support informing them of all the human skin that I have. Link to comment Share on other sites More sharing options...
lewster32 Posted November 24, 2014 Share Posted November 24, 2014 Metal endoskeleton surrounded by living flesh maybe? Link to comment Share on other sites More sharing options...
Matt F Posted November 24, 2014 Author Share Posted November 24, 2014 That is wrong and preposterous and you should be evisceratedashamed. At any rate, that's the problem solved just now so feel free to try that Github link again. Link to comment Share on other sites More sharing options...
lewster32 Posted November 25, 2014 Share Posted November 25, 2014 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. valueerror 1 Link to comment Share on other sites More sharing options...
Matt F Posted November 25, 2014 Author Share Posted November 25, 2014 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 More sharing options...
lewster32 Posted November 25, 2014 Share Posted November 25, 2014 That's a bug, fixed in the dev version of Phaser. Link to comment Share on other sites More sharing options...
Matt F Posted November 25, 2014 Author Share Posted November 25, 2014 *does the "it's not me" dance* Cool, I'll use dev for now until the next release is out. Thanks! Link to comment Share on other sites More sharing options...
Recommended Posts