General Programming Question - Dealing with large numbers of inactive off-screen objects.
I have a possibly dumb general programming question... I'm having trouble finding any answer that makes sense on Google, and my holiday brain seems to be failing me, so I'm hoping one of you more experienced programmers can point me in the right direction. Also, its always educational to see how other people deal with problems.
A quick summary of my problem: I have a growing number of entities in a program, and only a few need to be on the screen at any one time. However, checking which of the objects need to be shown on the screen is slowing the whole thing down. What's an efficient way of dealing with this?
More details:
I had a dumb idea of writing a game to run in a browser using only HTML5 canvases and JavaScript. Since I don't have much experience working in JavaScript, I decided to try make something really simple first to learn how things work before diving into the deep end and making an actual game. So, I started working on a simple toy that draws all of the planets and moons in the solar system with all of the distances and sizes to scale. I'm trying out EaselJS to handle all the drawing, which I think is working well.
You can see what I've got so far at sylvermyst.com/prototyping/jstoys/SolarSystem.
Like I said, I started this to learn stuff, so I wasn't all that concerned about optimisation and performance when I started out. It runs beautifully on my i7 desktop in Chrome, but the frame rate drops a little in Firefox. On my ageing laptop, the frame rate is pathetic regardless of which browser I use. I'm concerned that as I add more stuff, the performance will only decrease. I'm pretty sure the problem is the way I check for on- and off-screen objects, and it's something I'd have to overcome if I write a game, so I don't want to ignore it.
What I'm currently doing is looping through an array containing every single object during for each frame and checking the object's position relative to the screen, which I knew at the time would be a bad idea. I've tried grouping the objects into a hierarchy (i.e. making moons children of their planet objects), but I ran into problems because sometimes children need to be visible when the parent is not.
I'm sure there's something obvious that I'm missing, because I'm pretty certain this is a very common thing that games need to deal with, but before I've always used a more powerful game engine which has dealt with the problem for me.
[rule]
Edit: Sometimes writing out your problem helps find a solution. Within 30 seconds of posting this, I realised that the parent object in a hierarchy could have a property defining the range in which its children lie. Then I'd only have to check the children if part of that range of the parent is on the screen... Duh... Still, I'd like to see if anyone has another approach.
A quick summary of my problem: I have a growing number of entities in a program, and only a few need to be on the screen at any one time. However, checking which of the objects need to be shown on the screen is slowing the whole thing down. What's an efficient way of dealing with this?
More details:
I had a dumb idea of writing a game to run in a browser using only HTML5 canvases and JavaScript. Since I don't have much experience working in JavaScript, I decided to try make something really simple first to learn how things work before diving into the deep end and making an actual game. So, I started working on a simple toy that draws all of the planets and moons in the solar system with all of the distances and sizes to scale. I'm trying out EaselJS to handle all the drawing, which I think is working well.
You can see what I've got so far at sylvermyst.com/prototyping/jstoys/SolarSystem.
Like I said, I started this to learn stuff, so I wasn't all that concerned about optimisation and performance when I started out. It runs beautifully on my i7 desktop in Chrome, but the frame rate drops a little in Firefox. On my ageing laptop, the frame rate is pathetic regardless of which browser I use. I'm concerned that as I add more stuff, the performance will only decrease. I'm pretty sure the problem is the way I check for on- and off-screen objects, and it's something I'd have to overcome if I write a game, so I don't want to ignore it.
What I'm currently doing is looping through an array containing every single object during for each frame and checking the object's position relative to the screen, which I knew at the time would be a bad idea. I've tried grouping the objects into a hierarchy (i.e. making moons children of their planet objects), but I ran into problems because sometimes children need to be visible when the parent is not.
I'm sure there's something obvious that I'm missing, because I'm pretty certain this is a very common thing that games need to deal with, but before I've always used a more powerful game engine which has dealt with the problem for me.
[rule]
Edit: Sometimes writing out your problem helps find a solution. Within 30 seconds of posting this, I realised that the parent object in a hierarchy could have a property defining the range in which its children lie. Then I'd only have to check the children if part of that range of the parent is on the screen... Duh... Still, I'd like to see if anyone has another approach.
Comments
Also, what calculation do you do for screen check?
The reason I ask is for 2D, a screen check should be very fast, and you should be able to do several hundred (or more) even in JavaScript, so I'm wondering where the issue comes from in the first place.
If that is the problem the hierarchical method you suggest would work well; quadtrees would also work, or even a uniform grid.
I'm going to have to look through my code again very carefully tomorrow and see if I can figure out if there's anything else that may be causing the problem.
(Edit: BTW I learned all this through Chrome's development tools: from the menu, Tools | Development Tools | Profiler, in case you don't know about it.)
I'd ruled out the grid before because like you say, removing the AdjustGrid function (which clears and redraws the entire grid) had almost no affect on the performance. I upped the framerate limit to 60 fps, and I can see that there's a jump from 50 fps down to 30 fps when it switches from the widest grid spacing to the narrowest. You're definitely right that it's just drawing the grid that's causing the problem. I guess I have to find a better way to do it...