Game Development Reference
In-Depth Information
size(400,200);
}
void draw() {
background(0);
fill(250);
ellipse(mouseX,mouseY,ellipseSize,ellipseSize);
ellipseSize++;
if(ellipseSize==100){
alert("the ellipse is 100!");
}
}
</script>
<canvas id="processingCanvas"></canvas>
</body>
</html>
Switching between the JavaScript and Processing code couldn't be easier. You can also pass variables
and values from JavaScript into the Processing code. This functionality makes Processing.js a great
choice for people who already know JavaScript. You get a very powerful graphics library that plays nicely
with the canvas tag.
Using audio
Audio is another feature that nearly anyone making a game will need. In A to B, I made use of both
background music and small audio bits throughout the game. To incorporate audio into your HTML game,
you must make use of another new feature of HTML5, the audio tag.
First, you must create your audio tags, which is done in the body of your HTML. By default, the audio tags
will create mini audio players that will appear on screen. You can turn these off in your stylesheet.
<audio id="sound1"><source src="boom.mp3"></audio>
This is a basic audio tag. However, there are a few properties that you can define within the tag that are
really helpful. For example, I wanted my background soundtrack to loop repeatedly throughout the game
and play automatically once it loaded.
<audio id="soundtrack" autoplay loop><source src="snowfall.mp3"></audio>
Once you have created your audio object, you are ready to insert it into your Processing code. You can
place this anywhere, just make sure you use the proper variable names.
document.getElementById("sound1").play();
Since different browsers utilize different audio codecs, it is important to have multiple types of audio files to
ensure cross-browser compatibility. Use a free application like Audacity to convert your audio file to other
formats. For example, if you wanted to have an MP3 version and a WAV version, it would look like this:
<audio id="sound1"><source src="boom.mp3"><source src="boom.wav"></audio>
The browser will choose whichever audio file that it supports to load.
