World
Each instance of p5play has its own world object, that can be used to control the
Box2D physics simulation. Its most important property is gravity, which has x and y
components.
Note that the physics simulation is deterministic. That means if you run the same code twice, unless you're using random values, you'll get the same result!
Sleeping
world.allowSleeping is true by default.
A sprite starts "sleeping" when it stops moving and doesn't collide with anything new. "Sleeping" sprites get ignored during physics simulation, which usually prevents the Box2D physics engine solver from having to make unnecessary calculations. While this is good for performance, sometimes it can cause problems.
You can wake up a sleeping sprite by setting sprite.sleeping to false. You can also
disable sleeping on a per sprite basis by setting sprite.allowSleeping to false.
Controlling Time
By default, after each time the p5.js draw function is run, p5play calls three functions in this order:
allSprites.draw(): draws all spritesworld.step(): progresses the physics simulationallSprites.update(): updates animations and mouse events
But you can also take manual control of these processes by calling them yourself.
In the mini-example, click to toggle slow-motion!
sprite.draw and group.draw
You can use the sprite.draw and group.draw functions to manually control
when individual sprites and groups are drawn inside the p5.js draw loop. Any sprites not drawn
manually will be automatically drawn at the end of the p5.js draw loop, unless the sprite's autoDraw
property is set to false directly or by one of its parent groups. To prevent automatic drawing
completely set allSprites.autoDraw = false.
Note that if you want to manually draw sprites you'll also have to manually turn the camera on and off.
world.step
The world.step function checks for collisions and calculates the positions and
velocities of all sprites after progressing the physics simulation by 1/60th of a second by default.
Sprites can't be progressed forward in time individually.
Before you use world.step in your p5.js draw function, be sure to draw all the sprites.
Otherwise, they will be drawn in the wrong position!
Set world.autoStep = false to disable automatic stepping. Then you can call
world.step manually whenever you want to progress the physics simulation.
sprite.update and group.update
What does sprite.update do? It's responsible for updating the sprite's animation and
mouse events. It also runs the user's custom update functions if they set any. To prevent automatic
updating completely set allSprites.autoUpdate = false.
Why is this functionality separated from the world step? Because on a pause screen the physics world could be paused, but pause menu UI animations and mouse events could still be processed.
Performance Testing
The renderStats function displays the number of sprites drawn, an approximation of the
current FPS as well as the average, minimum, and maximum FPS achieved during the previous second.
FPS in this context refers to how many frames per second your computer can generate, including physics calculations and any other processes necessary to generate a frame, but not including the delay between when frames are actually shown on the screen. The higher the FPS, the better your game is performing.
You can use this function for approximate performance testing. For more accurate results, use your web browser's performance testing tools.
Generally having less sprites and using a smaller canvas will make your game perform better. For
better performance don't use the p5.js clear function or sample the colors of pixels in
your canvas using canvas.get.