p5play Version 3
p5play takes full advantage of new JavaScript features added during the 7 years since p5.play v1 was created. v3 also uses a JavaScript port of Box2D called planck.js to simulate physics, allowing for ~3x the amount of sprites on screen compared to previous versions!
p5play is the successor to p5.play (v1), which was created by Paolo Pedercini and other collaborators including Brad Buchanan, Atul Varma, and Jared Sprague. p5play (v3) uses portions of the original APIs but the underlying code was completely rewritten.
A ton of new features have been added so users could develop more interesting and complex games. Yet, it's just as easy, or in some cases even easier, to use p5play to make simple projects.
When I (@quinton-ashley) became the new p5play project lead in May 2022, there hadn't been a major update in seven years!
CODE.org's fork contains many nice improvements, most notably the addition of rotatable rigid physics bodies. It's been used by millions of students all over the world! But despite being a great education platform, p5.play v1 was a bit disappointing for students (and educators) that wanted to make more complex games. Part of the problem was its inefficient and very limited physics simulation.
Back in 2015, GPU rendering was the bottleneck for web based gaming, so the developers of p5.play v1 prioritized making a great education platform and didn't care so much about accurate physic simulation, since most hardware couldn't have handled the extra load anyway. Yet, on modern computers and mobile devices, 2D canvas rendering is blazing fast!
Because p5play is first and foremost an educational platform, it needs to be able to teach students how to use the current version of JavaScript, not what JS programming used to be like. I want p5play to be a useful and relevant tool for students and educators for many years to come. In order to achieve these goals, v3 couldn't retain backwards compatibility with older versions
All sprites have dynamic physics bodies that can collide by default.
All sprites with physics colliders can sense mouse interactions: clicking, pressing, hovering, etc. The mouseActive boolean has no effect.
Groups don't just store sprites anymore, they can be used to create them! Sprites created using a group inherit traits of that group, this is a way for beginners to "soft extend" the Sprite class.
All properties with (x, y) components use the dot syntax prop.x and prop.y for consistency. Previous versions inconsistently used the propX and propY paradigm, which is confusing for beginners.
-
Physics body colliders can be rotated! (drop example)
-
Create floor and wall sprites by giving the Sprite constructor a list of vertexes or line lengths and angles (chain colliders).
-
Sprites can go really fast without clipping through walls. (tunneling example)
-
Sprites can be kinematic. (tumbler example)
-
moveandmoveTowardsfunctions added. (displace example) -
Polygon physics body colliders can be created by using a list of vertexes or line lengths and angles. (hexagon example + polygons example)
https://github.com/quinton-ashley/p5play/projects/1
The default angle mode is now DEGREES. Changing it to RADIANS is also fully supported.
The Sprite/Group functions bounce and displace are deprecated. collide (collides, colliding, collided) will be used for all physics collision callbacks, overlap (overlaps, overlapping, overlapped) are used for non-colliding sprites.
The Sprite constructor new Sprite() will auto-assign the shape of the collider based on the arguments it is provided. Shapes are 'box', 'circle', 'polygon', and 'chain'. planck physics body types are 'dynamic', 'static', or 'kinematic'. Optionally an image label or animation label can be used as the first parameter. More details and examples are provided in the Learn reference pages and docs. This updated constructor replaces v2's setCollider function.
sprite.addCollider function enables advanced users to create physics bodies with multiple colliders.
sprite.touching object was replaced by the colliding and overlapping functions.
sprite.mirrorX function was replaced by a boolean property mirror.x for ease of use.
sprite.mirrorY function was replaced by a boolean property mirror.y for ease of use.
sprite.immovable was deprecated, the name of this property is confusing since these sprites still can be moved programmatically, just not by collisions with other sprites.
sprite.limitSpeed and sprite.maxSpeed were removed because a generalized hard speed limit can easily break collisions and cause users to misunderstand how a sprite's velocity vector works. But, users could still make their own speed limits specific to their games.
sprite.setDefaultCollider was removed, it's no longer necessary thanks to the updated Sprite constructor.
sprite.overlapPixel and sprite.overlapPoint were removed, use of these methods leads to design patterns that are inefficient. Users can make custom polygon colliders instead. In the future I also want to add an edge tracing function that can make custom colliders from sprite images.
sprite.originalWidth and sprite.originalHeight were removed because they seem unnecessary for most use cases. If users need these properties for a game they can easily add them.
sprite.rotateToDirection was removed, just use sprite.rotation = sprite.direction in p5.js draw.
For ease of use, some properties of the Sprite's physics body are accessible via getters and setters of the Sprite class. The following properties were renamed to be more beginner/kid friendly.
restitution, a scale from 0 to 1, is lawyer/physics professor speak for bounciness
bullet, a boolean value which ensures very fast objects do not tunnel, became isSuperFast
linearDamping, the amount an object resists being moved, is called drag
angle is rotation