Using the P5.play Library for a JS Game
I came across the P5 Library while a partner and I were building out a falling object game in JavaScript.
It was my first time using a library, so I thought I would share the basics of what I learned this week!
What is p5 and p5.play?
P5.play is an extension of the P5 library, which allows you to create and utilize a canvas with objects on it.
The actual ‘game window’ with the falling object is rendered on what is known as a canvas. This canvas is a window where objects can be ‘drawn’ or rendered and animated so that they appear to move, etc.
In our game, we had images that we wanted to fall from the top of the canvas to the bottom. The user will click on the appropriate images to accumulate points, similar to the above.
Why did we decide to use P5?
We decided that using the library would be an easier route when we ran into a problem creating Event Listeners on our objects using only the canvas and RequestAnimationFrame function. We could not find a way to attach our Event Listener, without the objects being appended to the html.
P5.play allowed us to get around this issue by providing the ability to create ‘sprites’ and add ‘Event Listeners’ such as ‘onMousePressed’ and ‘onMouseover’.
In our case, we would use the onMousePressed function for our sprites, so that when a sprite was clicked, it would be removed and add a point to the user’s scores.
In this blog, I will write out the 3 basic steps to get you up and running on a similar P5 project.
- Download the P5 library: https://p5js.org/download/ and the P5play library: https://molleindustria.github.io/p5.play/
Add these two files to the libraries folder of your app.
Last, add a <script> tag to the<head> your index.html file to include the library when your sketch loads.
2. Write out your function setup()
In this function, you create the canvas and add any elements that will go inside.
function setup() {
//set the dimensions of your canvas
createCanvas(720, 400);
//create your sprites
newSprite = p.createSprite(width/2, height/6)
}
3. Write out your function draw()
In this function, you can set the color of your canvas background and specify the location of your sprites on the canvas.
function draw() {
// You may want to include this clear function at the top, if you have a moving object. This will clear your sprite each time, so that a trail does not appear as it moves.
clear()
// next, you should set the background color of your canvas
background(50);
// finally, draw your sprites
drawSprites()
After you draw your sprites, you can call the necessary functions and event listeners on them. As you can see below, for each sprite, we added a onMousePressed event listener that will remove that sprite.
}
Note: You may be wondering why my functions above have a ‘p.’ in front of them. This is because we decided to use the instance mode of P5.
Why was this necessary? Well, our game has 3 different levels — easy, intermediate, and hard. By keeping our p5 functions out of the global scope, we were able to more easily add in necessary modifications (such as passing in an accelerated speed) according to level.
As you can see, you will need to put all of your p5 functions into one big function. From there, you can pass in the argument that will need to be changed.
To learn more about the Instantiation route for p5 and what to add into your function to make it work, see below!
