Game Development Reference
In-Depth Information
Figure 6-5.
Individual flame textures
Loading the textures
In this example, we will need multiple images. In most cases, your application will already have a way of
loading resources and you should use that one. For our examples, a very simple function will do. It takes
an array of URLs and loads them as images. Once the images are all loaded, it will invoke the callback
with an array of images.
Note that in production code, you will need to add error handling to this loader function.
function loadImages(srcs, callback){
var loaded = 0,
imgs;
function onload() { if(++loaded == srcs.length) callback(images);}
for(var i = 0; i < srcs.length; i++) {
var src = srcs[i],
img = new Image();
imgs.push(img);
img.onload = onload;
img.src = src;
}
}
Implementing the emitter
Our fire emitter should emit flame particles around a point similar to the fireworks. But whereas the
firework emitter emitted bursts of particles, we need to emit particles continuously to create a fire
(otherwise, you will get an explosion!). We don't want to spawn all the particles at the exact same location
either, but with some random variation.
function emit(system, images, width, height){
// emit the particle at the center of the canvas with some random
// variation
var position = new Vec2(width/2+fuzzy(5), height/2+fuzzy(5)+height/4),
particle = new Particle(position),
alpha = fuzzy(Math.PI),
// note that here we use a proper linear distribution unlike in the
