Game Development Reference
In-Depth Information
Figure 6-9.
Nesting of particles in a flat array. All the particles are packed into a single array.
Removing particles from the middle of an array is very expensive. This is why we will leave dead particles
(
age > MAX_AGE
) in the array and just skip them when drawing. While this makes the system a lot slower
when there is only one particle, it won't affect the performance when reaching the maximal number of
particles. Because the size of our array is finite, we will simply override the oldest particle when spawning
a new one. To do this, we use our array like a ring buffer. The code for this is very simple:
particles_i = (particles_i+NFIELDS) % PARTICLES_LENGTH;
where
particles_i
is the position of the first field of the particle,
NFIELDS
is the number of fields (5), and
PARTICLES_LENGTH
is the total size of the array (the total number of particles times the number of fields
per particle).
requestAnimationFrame
window.setInterval
is not ideal for animations. The most obvious reason for this is that it is still called
when the page is not visible. Another reason is synchronization with screen refreshes. If the screen is
updated at regular intervals, you really want your updates to be aligned with those to get a smooth result.
The solution to this problem is to use
requestAnimationFrame()
. As the specification is still a draft, you will
have to use the prefixed versions for each browser; if it is not supported, you should fall back to
setInterval
or
setTimeout
.
requestAnimationFrame
is currently supported by Firefox, Chrome, and IE10.
You can do the following simple snippet of code:
