Game Development Reference
In-Depth Information
Importing and loading images
For anyone out there that wants to make a game, it is quite likely that you will want to have some sort of
images involved. In order to incorporate them in your Processing.js code, it is handled a bit differently than
with building web sites. The following is a sample code that will import two images and then display them
on the screen. Also, two slashes ( // ) means a comment in Processing. I will use the comments in line to
describe what is going on.
<script type="application/processing">
//first we have to preload the images from the directory, assuming they are in the root
folder
/* @pjs preload="snow.png , squiggle.png"; */
//next, we must make some variables that will reference these images
PImage theSnow, theSquig;
void setup(){
size(400,200);
//in Processing, you must load the images inside of the setup function
theSnow = loadImage("snow.png");
theSquig = loadImage("squiggle.png");
}
void draw(){
background(255);
//displaying the images simply pass the function the variable and a location
image(theSnow,0,0);
image(theSquig,mouseX,mouseY);
}
</script>
One thing to note is that when you preload and load the images, you must make sure to include the proper
path to the file. For example, if the picture is in a sub-folder called pictures , in both places it would look
like "/pictures/theBall.jpg" .
High-score list with jQuery
In order to implement a high-score list, you need to create a database. Once a database is created and
you have written the PHP file that talks to the database, you can make calls to the database within the
Processing code. Normally this would not work because PHP is a server-side language, while JavaScript
is client-side; but thanks to the magic of jQuery, it is possible. Simply use the jQuery $.post function. The
following is my code:
 
Search WWH ::




Custom Search