-
-
Notifications
You must be signed in to change notification settings - Fork 188
p5play Version 3
p5play (version 3) is a completely new library that retains, in spirit and in the API, some aspects of the original p5.play (version 1).
p5play takes advantage of new JavaScript features and ecosystem developments in the 7 years since p5.play v1 was released.
Most importantly, p5play uses a JavaScript port of Box2D called planck.js to simulate physics, allowing for ~3x the amount of sprites on screen! Sprites can also have multiple colliders, sensors, and joints!
A lot of other 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!
p5.play (version 1), initially released in 2015, was created by Paolo Pedercini and other collaborators including Brad Buchanan, Atul Varma, and Jared Sprague.
CODE.org's fork by Brad Buchanan had 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 bespoke 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, modern JS engines and 2D canvas rendering is decently fast!
I thought that using Box2D physics simulation in the browser had become feasible. My goal was to make p5play a better bridge between Scratch and Unity.
Paolo Pedercini liked my work on p5play version 3 and transferred the repository to me (@quinton-ashley) on February 3rd, 2023.
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. Because JavaScript had become so much more capable and flexible as a programming language and platform, I felt that I needed to take advantage of the opportunity to make radical improvements without retaining 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)
The default angle mode is now DEGREES. Changing it to RADIANS is also 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 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