Introduction to Interactive Program and Game Development

In this tutorial, we’re going to introduce the JavaScript p5play library and give you the basic knowledge you need to start developing creative and interactive programs with it. Here is a quick link to our CodeHS documentation for the library, which includes the official p5play reference guide, if you just want to get right into the code and syntax. Learn more about p5play here: https://p5play.org/

What is the p5play Library?

The p5play library is a JavaScript library that facilitates the development of dynamic and physics-based animations, simulations, and games. Below are a few of its powerful features:

• It has a built in physics engine that allows the developer to easily turn on gravity, detect collisions between objects, and adjust object properties like size, mass, friction, and bounciness.

• It includes a tile system that aids in the placement of objects around the screen.

• It has the functionality to create 2d animated sprites using a series of still images.

The p5play Program Structure

Most of your p5play programs will follow a basic structure that looks like this:

Let’s talk through each part:

1. The top of your program is where you will declare any global variables for characters, objects, etc that you want multiple functions in your program to access.

2. The setup() function is a special p5play function that will automatically run once at the beginning of your program. This is where you will put code to set up your program, like creating the canvas and initializing your scene elements and game flow.

3. The draw() function is another special p5play function that automatically runs 60 times per second for the duration of your program. It will start after the setup() function runs. This is where your code for animating your objects and creating an interactive scene lives.

4. At the bottom of your program is a great spot to define all of the custom helper functions that you might use throughout these programs. These will likely be called from your setup() and draw() functions.

There is also an optional preload() function that you can define in section #1 above. This function can load elements like music, images, animations, and sprites before the setup() function is called.

The p5play Canvas

The p5play canvas is just like an artist’s canvas – it’s the space where you display your beautiful works of programming! You initialize your canvas with a width and height in the beginning of the setup() function with the code:

new Canvas(width, height);

There are other ways to customize the canvas dimensions, like removing dimensions to scale to the window, or using '3:4' instead to set up the largest possible size of that aspect ratio, so be sure to read through docs if you want to learn more specifics.

Once you have created the canvas in the setup() function, you can give each frame a background color by including the following in the draw() function:

background(COLOR);

COLOR can be any accepted color string, hex color code, or RGB values.

Check out the example below to see this in action. Try changing the dimensions and color of the canvas. Notice that we also include the p5play command clear() at the top of the draw() function. This will be important as you start animating objects, since it clears the past frame before drawing the new one.

p5play Sprites

One of the most significant contributions of the p5play library are its sprite objects. A p5play sprite is simply a graphical object with properties. We can change these properties to alter or animate the sprite on the canvas.

What does this mean in a game? Take a look at the screenshot below:

Everything you see on the canvas, from the character, to the platforms, to the floating boxes are all sprites! They have certain properties related to their size, position, and color that we’ve adjusted to look a certain way.

To create a p5play sprite, you can use the code below to declare it and save it to a variable:

let box = new Sprite();

With the sprite established, you can then set any number of its properties. We’ve listed a handful below, but again, be sure to check out our docs for more.

Appearance Properties

By default, sprites appear as graphical rectangles or circles with properties like width, height, radius, color, and x-y positions. Check out the example below that adds a box and ball to the canvas. Can you change the size, position, and color of the objects?

Physics Properties

Sprites also have a handful of physics-based properties that affect how the sprite interacts with the world and the other sprites around it. Examples include: mass, friction, bounciness, speed, and collider. The collider property in particular focuses on how sprites deal with gravity and collisions with other sprites. Below is a summary of the options:

Note that the dynamic collider is the default collider for sprites. Check out the example below that shows a ball colliding several other sprites. Change the physics property values and see what happens! Notice that on line 4 we have world.gravity.y = 10;. This turns on gravity in the vertical direction.

User and Sprite Interactions

The p5play library includes boolean expressions that allow you to easily incorporate user interactions in your program. Below lists a few the expressions that checks for keyboard and mouse inputs:

Keyboard Inputs

• kb.presses(key letter or name) - this statement will be true at the moment the user presses the specified key.

• kb.pressing(key letter or name) - this statement will be true the entire time the user is pressing the specified key.

• Examples:
  kb.presses('w'); - will equal true when the user presses the ‘w’ key.
  kb.pressing('space'); - will equal true while the user is pressing the spacebar.
  
  

Mouse Inputs

• sprite.mouse.presses() - this statement will be true at the moment the user clicks the mouse button on the sprite.
• sprite.mouse.pressing() - this statement will be true the entire time the user is pressing the mouse button on the sprite.

• sprite.mouse.dragging() - this statement will be true if the user clicked on the sprite, and with the button down, is trying to drag it around.

• Examples:
  tree.mouse.presses(); - will equal true the moment the user clicks on the sprite named “tree”.
  ball.mouse.dragging(); - will equal true while the user is trying to drag the sprite named “ball” around.
  
  

You can also customize what happens when two sprites touch each other. Here are a few of those options.

Sprite Interactions

• sprite1.overlaps(sprite2) - this statement will be true at the moment sprite1 begins to overlap with sprite2.
• sprite1.overlapping(sprite2) - this statement will be true the entire time sprite1 is overlapping with sprite2.
• sprite1.collides(sprite2) - this statement will be true at the moment sprite1 collides with sprite2.
• sprite1.colliding(sprite2) - this statement will be true the entire time sprite1 is colliding with sprite2.
  
  

Check out the example below that employs some of these expressions. Try dragging the ball into the rectangles. Can you drag the rectangles too? What happens when you press the up and down arrow keys?

p5play Groups

The p5play library has an awesome feature called Groups that allows us to group similar sprites and define all of their shared properties in one place. For example, take a look at the code below. Each ball in the group has the same color, diameter, Y-position, Y-velocity, and bounciness. By creating a Group for these balls, we can define all of these properties in one place:

let ballGroup = new Group();
ballGroup.diameter = 20;
ballGroup.y = -20;
ballGroup.vel.y = 2;
ballGroup.bounciness = 0.5;
ballGroup.color = 'lightblue';

Once the group is defined, it’s super easy to create a new sprite from it:

let ball = new ballGroup.Sprite();

Take a look at the animation below that periodically creates a ball that falls from the sky. Notice how we use the variable ballGroup to change properties of all of the balls at once. Before you run the program, can you guess what will happen when you press the “r” or “u” keys?

p5play Tile System

The p5play library has another really powerful feature that makes creating certain scenes and games a lot easier! p5play Tiles uses a grid-like structure to enable us to place sprites in our scene with ease. See the basic setup here, where each number represents a cell where a sprite can be placed:

You can use periods “.” (or spaces ” “) for blank locations in the grid, and then assign any other symbol to a group or individual sprite to place it in the grid.

For example, in the program below, we create a group brickGroup, with specific properties, and then assign it a tile symbol of “=”. This allows us to create brick sprites in our Tile grid with the “=” symbol. Try modifying where the bricks appear in the tile system. Can you create a new group and add them to the tile system?

Sprite Images and Animations

In most games, the sprites that players control or interact with are still or animated images. This creates a much more dynamic and interesting visual experience for the player. The p5play library allows you to easily upload images and spritesheets – the image frames of an animation – and attach them to a sprite.

The first step is to load the image files into your program. You can do this with the loadImage() function, saving the result to a variable. Doing this in the preload() function will ensure that the image is loaded before the rest of the program runs.

let characterImage;

function preload() {
    characterImage = loadImage("URL or path of image file");    
}

Once the image is loaded, you can use a sprite’s .img property if it’s a still image, or the sprite’s addAni() method and .ani property to create an animation. The addAni method requires a few parameters that are based on the spritesheet being used. The below example shows a flying animation being created for a bat sprite:

Check out the example below that uses still images for the ground and backdrop, and several animations for the character. Can you see how we are using the preload, setup, and draw functions to create the scene and interactions? Can you find where we set the values of the .img and .ani properties on our sprites? Can you determine what keys need to be pressed to activate each of the three character animations?

Conclusion

You now have a glimpse of how you can use the p5play library to create fun animations and games. Be sure to refer back to this tutorial, and our docs and p5play’s reference page, as you dive in! Have fun!!