ShotgunJed Posted July 10, 2017 Share Posted July 10, 2017 I know this has been asked a few times, but I cannot seem to get it to work in my implementation. I use this code to control the camera: stage.pivot.x = user.position.x; stage.pivot.y = user.position.y; stage.position.x = renderer.width/2; stage.position.y = renderer.height/2; Given an object in a stage, how would I detect it being outside of the camera? I tried using: // Works, moving the camera to the right will hide objects as they // touch the left side of the screen if (worldTransform.tx < 0) { item.visible = false; } // Doesn't work at all. Objects touching the right side of the screen // will continue to be visible // I haven't even included the code where they become visible again // and it still doesn't make it invisible if (worldTransform.tx > 900) { item.visible = false; } but it doesn't seem to work. I always get the same value every time I log it in the console, even in my game loop and when I move the camera (it prints the same value thousands of times in Chrome's console). How do you detect objects outside of the "camera's" view? Quote Link to comment Share on other sites More sharing options...
Exca Posted July 10, 2017 Share Posted July 10, 2017 I use a script like this: for( var i = 0; i < allObjects.length; i++) { var object = allObjects[i]; var bounds = object.getBounds(); object.renderable = bounds.x >= viewport.x && bounds.y>=viewport.y && bounds.x+bounds.width <= viewport.height && bounds.y+bounds.height <= viewport.width; } Using visible = false means that your transforms do not get updated, that's the reason why worldtransform.tx is not working. Renderable keeps updating the transform but just skips the rendering. ShotgunJed and ivan.popelyshev 2 Quote Link to comment Share on other sites More sharing options...
Taz Posted July 10, 2017 Share Posted July 10, 2017 Wont screen be better practice than view thou? Otherwise when resolution is greater than 1, objects will take too long to be culled and will become renderable too soon, right? (assuming viewport is app.view or renderer.view). EDIT: By screen I mean using app.screen or renderer.screen instead of using view dimensions since those screen dimensions aren't affected by resolution but the view dimensions are Quote Link to comment Share on other sites More sharing options...
ShotgunJed Posted July 11, 2017 Author Share Posted July 11, 2017 15 hours ago, Exca said: I use a script like this: for( var i = 0; i < allObjects.length; i++) { var object = allObjects[i]; var bounds = object.getBounds(); object.renderable = bounds.x >= viewport.x && bounds.y>=viewport.y && bounds.x+bounds.width <= viewport.height && bounds.y+bounds.height <= viewport.width; } Using visible = false means that your transforms do not get updated, that's the reason why worldtransform.tx is not working. Renderable keeps updating the transform but just skips the rendering. Where do you get your viewport object from? Quote Link to comment Share on other sites More sharing options...
caymanbruce Posted July 11, 2017 Share Posted July 11, 2017 29 minutes ago, ShotgunJed said: Where do you get your viewport object from? i think viewport means the camera object you mentioned in your question. Quote Link to comment Share on other sites More sharing options...
ShotgunJed Posted July 11, 2017 Author Share Posted July 11, 2017 4 minutes ago, caymanbruce said: i think viewport means the camera object you mentioned in your question. Oh. I don't know where the viewport information is stored within pixi.js, but I did something like this: tile.renderable = bounds.x >= 0 && bounds.y >= 0 && bounds.x + bounds.width <= 1920 && bounds.y + bounds.height <= 1080; It works for now, but since I'm using hard-coded values, I know for sure it won't work for other monitors different than mine. Do you know of any object or function that gets the height and width of the current window/screen? Quote Link to comment Share on other sites More sharing options...
Taz Posted July 11, 2017 Share Posted July 11, 2017 app.screen is good for screen culling - app.screen.width and app.screen.height are the same size that you set app.renderer to (if you use app.view or app.renderer.width and height, it will work only when resolution is 1 since the dimensions get multiiplied by resolution). Quote Link to comment Share on other sites More sharing options...
Exca Posted July 11, 2017 Share Posted July 11, 2017 Oh yeah, viewport is my own object that basically stores the info about what areas to render. Usually the size of the renderer. Quote Link to comment Share on other sites More sharing options...
unrealnl Posted December 19, 2018 Share Posted December 19, 2018 This an old post, but since it does not offer a complete solution I'm dropping this link here: https://github.com/ErikSom/PixiCulling Feel free to explore the source as it might offer a more complete solution to culling. Additionally there is this one, which looks great as well: https://github.com/davidfig/pixi-cull Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.