ForgeableSum Posted September 16, 2015 Share Posted September 16, 2015 So I have a small problem. In my game, I am tiling images orthogonally. The widths/height of my tiles don't exactly fit into the game worlds dimensions - that is, a tile (the last one on the x or y axis) is often hanging off the edge of the game world, outside of the world bounds. I don't want this stuff do be rendered because I want the player to be able to see outside of the game world (where there is just empty space). How do I tell Phaser to not render stuff outside the game world? Link to comment Share on other sites More sharing options...
MichaelD Posted September 16, 2015 Share Posted September 16, 2015 Well there is this: http://phaser.io/examples/v2/sprites/collide-world-bounds if the objects are having a physics body. If not, you could check like thisvar isOutside = (object.x+object.width > game.width) || (object.y+object.height > game.height); Link to comment Share on other sites More sharing options...
wayfinder Posted September 16, 2015 Share Posted September 16, 2015 Are you talking about cutting off all pixels outside the world bounds while still drawing the portions of images that are inside the bounds? Or would it be enough to just not draw anything outside the world bounds, with the implication that portions of elements that are partially inside would disappear as well? Link to comment Share on other sites More sharing options...
drhayes Posted September 16, 2015 Share Posted September 16, 2015 Maybe by setting the camera bounds a bit tighter? Link to comment Share on other sites More sharing options...
Fenopiù Posted December 1, 2017 Share Posted December 1, 2017 On 16/9/2015 at 4:38 PM, wayfinder said: Are you talking about cutting off all pixels outside the world bounds while still drawing the portions of images that are inside the bounds? Or would it be enough to just not draw anything outside the world bounds, with the implication that portions of elements that are partially inside would disappear as well? It's a very old post but I've the same issue. I would like to render moving images in an imaginary box (i.e. box who is big from 50, 50 to 600, 600), when part of these images goes outside of that box, those parts have non to be rendered. So, if I have the box above and an image who is big 20x20, if the image position is 580,590 I want that the part in the box (20x10) is rendered and the part outside the box not. How can I implement that? I've created the box but I really don't know how to tell Phaser to render these images only inside this box (and still render other images, like background, a this box doesn't exist at all). Link to comment Share on other sites More sharing options...
Fenopiù Posted December 4, 2017 Share Posted December 4, 2017 Ok, I've found this example who seems to have the right solution for me: https://phaser.io/examples/v2/sprites/sprite-group-mask But it just seems. Same code, for the example works, for my game doesn't. Example code: // A mask is a Graphics object var mask = game.add.graphics(0, 100); // Shapes drawn to the Graphics object must be filled. mask.beginFill(0xffffff); // Here we'll draw a rectangle for each group sprite mask.drawRect(130, 0, 140, 200); mask.drawRect(330, 0, 140, 200); mask.drawRect(530, 0, 140, 200); // And apply it to the Group itself group.mask = mask; It work correctly and 60FPS. My code: // A mask is a Graphics object var mask = game.add.graphics(0, 0); // Shapes drawn to the Graphics object must be filled. //mask.beginFill(0xffffff); mask.drawRect(x, y, xx - x, yy - y) // And apply it to the Group itself simb.mask = mask; if (image.search('SIMB') == -1){ images.create(x, y, image); } else { simb.create(x, y, image); } The problems are: If I comment "mask.beginFill(0xffffff);" nothing showed up and my FPS goes to 10FPS; If I put "mask.beginFill(0xffffff);" (like in the example) I just saw e blank rectangle (correct size and position) and my FPS goes to 10FPS; Without the mask thing and the if, FPS are 60FPS stable. What happens? Link to comment Share on other sites More sharing options...
Fenopiù Posted December 4, 2017 Share Posted December 4, 2017 Solution found!!!!!!I've simply added a: mask.alpha = 0; after the mask.beginFill and now I'have my images showed wher I want! Link to comment Share on other sites More sharing options...
ForgeableSum Posted January 21, 2018 Author Share Posted January 21, 2018 hmm, I've stumbled across this problem again many years later. I'd love to find a way to simply stop rendering stuff outside the game world like a crop on a group or a crop on the world. So far the only workarounds I could come up with is cropping the individual sprites when they reach the edge of the world. I don't like @Fenopiù's solution because creating an entire new graphics object adds webgl draw calls and is therefore detrimental to performance. Link to comment Share on other sites More sharing options...
Fenopiù Posted January 22, 2018 Share Posted January 22, 2018 15 hours ago, feudalwars said: hmm, I've stumbled across this problem again many years later. I'd love to find a way to simply stop rendering stuff outside the game world like a crop on a group or a crop on the world. So far the only workarounds I could come up with is cropping the individual sprites when they reach the edge of the world. I don't like @Fenopiù's solution because creating an entire new graphics object adds webgl draw calls and is therefore detrimental to performance. After a while I've moved to crop all images outside the rectangle instead of mask them. Link to comment Share on other sites More sharing options...
Recommended Posts