Animation frames

If we want to create a particle with a multi-frame animation, we can add the number of frames here. This feature assumes a horizontal strip sprite sheet and will divide the loaded image file evenly on the x axis. When this value is 1, there is no animation because there is only a single frame. The frame time for the animation will be evenly divided across the individual particle's time to live. In other words, if you have a ten-frame animation and the particle lifetime is 1,000 milliseconds, each frame of the animation will display for 100 milliseconds (1,000/10).

Here are the HTML elements:

<span class="label">animation frames:</span>
<input type="number" id="animation_frames" max="64" min="1" step="1" value="1" class="em_input"><br/>

Now that we have defined our HTML, let's take a look at the JavaScript portion of our code.