-
-
Notifications
You must be signed in to change notification settings - Fork 180
p5play Version 3
p5play v3 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 behind the scenes to simulate physics, allowing for ~3x the amount of sprites on screen compared to previous versions!
A ton of new features were added to version 3 so users could develop more interesting and complex games. Yet, it's just as easy, or even easier, to use v3 to make simple projects.
When I (@quinton-ashley) became the new p5play project lead in May 2022, there hadn't been a major update to p5play in seven years!
CODE.org's fork of p5play contains many nice improvements, most notably the addition of rotatable rigid physics bodies. It has been used by millions of students all over the world! But despite being a great education platform, all previous versions of p5play were a bit disappointing for students (and educators) that wanted to make more complex games. Part of the problem was p5play's inefficient physics simulation.
On older computers frame draws were bottle-necked by GPU rendering, not scripting, so the developers of p5play prioritized making a great education platform and didn't care so much about efficiency or accurate physic simulation. Yet, on modern computers, even on mobile devices, 2D canvas rendering is blazing fast. Scripting has become the bottleneck for JavaScript game development on modern hardware.
I created p5play version 3 for the next generation of programmers! What does that mean?
JavaScript has changed a lot over the past seven years. With p5play v2 my goal was to make a legacy version that retains full backwards compatibility, while still doing a major internal update so p5play could utilize ES6 classes. ES6 came out in 2015 though... p5play really should've been using them from the start.
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 can'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.
group.clear was removed, it was confusingly named and its function, removing sprites from a group but not from the sketch, is not very useful in any case that I can imagine. Sprites can be removed with the group.remove or group.removeAll functions.
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