JavaScript game engine that uses p5.js for graphics and Box2D for physics.
Use these links in your projects to always get the latest version of p5play:
https://p5play.org/v3/planck.min.js
https://p5play.org/v3/p5play.js
Setting group.image to an arrow function works now.
sprite.image and group.image have to determine if the input string is a file path or emoji. My test to determine that was not so sophisticated, just checking if the length of the string were less than 4. But some emojis have a really long unicode char lengths:
"👋🏻".length; // => Expected 1, got 4. "👨👩👧👧".length; // => Expected 1, got 11. "🤽🏿♀️".length; // => Expected 1, got 7. credits: https://github.com/jericirenej/emoji-string-length
Now p5play just checks if the string includes a ".", then it's an image file.
group.image works now! What an oversight haha.
No images? 🫥 No problem! 😄 You can use any emoji as the image for your sprite. The size of the emoji image will be based on the sprite's size. Great for quick prototyping! 🧪 https://p5play.org/learn/sprite.html?page=2
sprite.image = '🏀';
Also implemented #322. The setter of sprite.image no longer creates a single frame animation behind the scenes, it just stores the image. Some pretty common questions on the discord server were how to offset an image from the center of the sprite and how to scale it. I figured these features should be introduced sooner on Sprite page 2.
Deprecated sprite.addImage, group.addImage, and similar functions because it's unclear that p5play is making single frame animations inside these functions which are actually just aliased to sprite.addAni anyway.
Implemented #321 spirte.canvasPos requested by a user on discord (can't find them!)
Fixed #320
Also the memory leak fix from v3.21.7 has been confirmed to work!
Use these links in your projects to always get the latest version of p5play:
https://p5play.org/v3/planck.min.js
https://p5play.org/v3/p5play.js
Added sprite.gravityScale
Removed ".png" extension check which doesn't work if image names have "?" params.
When a sprite with a collider type of "d", "s", or "k" is changed to "none", or vice versa, the sprite will maintain its current position, speed, rotation, and rotation speed.
If you want to have the sprite lose it's speed or rotationSpeed after the collider type change, simply set them to zero manually.
https://aijs.io/editor?user=quinton-ashley&project=colliderEditing_demo
It just wouldn't be a new minor release bump if I didn't forget to manually update the version number at the top of the file lol.
Fixed bug that caused new Sprite() with no input params to crash inside preload.
Hopefully fixed a memory leak that would cause p5play to bring frame rate to a crawl on some devices after a few minutes!
Breaking change to the getter for sprite.direction. When a sprite stopped moving it used to get the sprite's rotation. I realized after talking to some users on discord that this behavior is too confusing and doesn't make sense in many situations. Now a sprite's direction and rotation are completely separate. A sprite's direction setting persists, even if it stops moving. To retain old behavior simply set sprite.direction = sprite.rotation.
Turtle sprites have direction tied to rotation and the examples that use the turtles now explain this.
Fix for sound not activating on first touch on iO, needed to call userStartAudio in ontouchstart.
Added sprite.gravityScale
Removed ".png" extension check which doesn't work if image names have "?" params.
When a sprite with a collider type of "d", "s", or "k" is changed to "none", or vice versa, the sprite will maintain its current position, speed, rotation, and rotation speed.
If you want to have the sprite lose it's speed or rotationSpeed after the collider type change, simply set them to zero manually.
https://aijs.io/editor?user=quinton-ashley&project=colliderEditing_demo
It just wouldn't be a new minor release bump if I didn't forget to manually update the version number at the top of the file lol.
Fixed bug that caused new Sprite() with no input params to crash inside preload.
contros.swap should also update contro in p5.js if contros[0] is changed.
More sophisticated feature detection for Contro object's hasAnalogTriggers property
The way I had implemented contro did not work properly with p5. Fixed it real quick!
Added world.meterSize.
Fixed camera support with p5's webgl mode.
Upgraded the controllers array, now aliased to contros (with an "s") instead of contro.
contro will still attempt to get input from the first controller but if it doesn't exist, it'll get a mock controller. The mock controller object can be used for testing or even TAS purposes.
I also publicly exposed Contro as a public class in case users want to make additional mock controllers. Added getter hasAnalogTriggers to controller objects.
Added contros.onConnect, contros.onDisconnect, contros.swap, and contros.remove functions.
Fixed some mistakes that had broken the camera for canvas 2d mode.
I still need to implement proper support for the camera in p5's webgl mode.
p5 webgl mode support is ready for beta testing!
new Canvas(400, 400, 'webgl');
p5play canvas presets can still be used but must be specified before the mode param:
new Canvas(400, 400, 'fullscreen', 'webgl');
Also fixed a q5.js bug with sprite.strokeWeight = 0, which should just make chain colliders not be drawn.
Added world.rayCast and world.rayCastAll functions.
https://p5play.org/docs/World.html#rayCast
Demo: https://aijs.io/editor?user=quinton-ashley&project=p5play_world_rayCast_demo
Added world.physicsTime and world.realTime
Added sprite.distanceTo
https://p5play.org/docs/Sprite.html#distanceTo
Thanks to @codingMASTER398 for his help and PR #314 !
Fixed bug with frameRate function override.
Fixed bug that caused sprite.mass setter to crash due to changes in v3.20.1. Oof my bad, I didn't consider it.
Also sprite.resetMass will now only reset the sprite's mass, not its center of mass.
The renderStats function is now deprecated in favor of setting a boolean property p5play.renderStats. This makes it easier to render stats, no need to run renderStats every frame, its much better to just be able to toggle it on and off, which can simply be done in the console. renderStats didn't actually draw the stats anyways, it just set a flag for p5play to draw them after the user's draw loop and all sprites were drawn.
Fixed #312. In p5play my goal was always to have the sprite's center (position), center of mass, and center of rotation all be the same point. So to ensure this is true, addCollider will not change the sprite's center of mass. Users can then use a separate function for that: resetCenterOfMass
Also I tweaked sprite.rotate so that it will not snap to the angle amount prematurely. It also will slow the sprite on the last frame of rotation if the remaining angular distance is not divisible by the rotation speed. This prevents the sprite from having to rotationally teleport too far, ideally a negligible amount or not at all, when set to the exact destination angle. The v3.20.0 implmentation broke my hourglass demo, now it's working great!
Fixed renderStats crashing if not used on frame 1.
Use these links in your projects to always get the latest version of p5play:
https://p5play.org/v3/planck.min.js
https://p5play.org/v3/p5play.js
Added world.rayCast and world.rayCastAll functions.
https://p5play.org/docs/World.html#rayCast
Demo: https://aijs.io/editor?user=quinton-ashley&project=p5play_world_rayCast_demo
Added world.physicsTime and world.realTime
Added sprite.distanceTo
https://p5play.org/docs/Sprite.html#distanceTo
Thanks to @codingMASTER398 for his help and PR #314 !
Fixed bug with frameRate function override.
Fixed major bug in sprite.mass setter caused by changes in v3.20.1. Oof my bad, I didn't consider it.
Also sprite.resetMass will now only reset the sprite's mass, not its center of mass.
The renderStats function is now deprecated in favor of setting a boolean property p5play.renderStats. This makes it easier to render stats, no need to edit the code to toggle them on and off, since this can now be done via the console. Also renderStats didn't actually draw the stats, it just set a flag for p5play to draw them after the user's draw loop and all sprites were drawn.
Fixed #312. In p5play my goal was always to have the sprite's center (position), center of mass, and center of rotation all be the same point. So to ensure this is true, addCollider will not change the sprite's center of mass. Users can then use a separate function for that: resetCenterOfMass
Also I tweaked sprite.rotate so that it will not snap to the angle amount prematurely. It also will slow the sprite on the last frame of rotation if the remaining angular distance is not divisible by the rotation speed. This prevents the sprite from having to rotationally teleport too far, ideally a negligible amount or not at all, when set to the exact destination angle. The v3.20.0 implmentation broke my hourglass demo, now it's working great!
Fixed renderStats crashing if not used on frame 1.
Use these links in your projects to always get the latest version of p5play:
https://p5play.org/v3/planck.min.js
https://p5play.org/v3/p5play.js
Documented p5play's touches array!
https://p5play.org/learn/input.html?page=5
Fixed #298
Implemented #258 kb.visible = true only works if done inside the p5/q5 touchStarted function.
Fixed this but only with p5.js #296
Forgot to add the fix to #270 into the new release. Re-added...
Fixed bug with touches not ending. A variable name was wrong in one place.
Fixed crash with "pixelated" preset when using p5play with p5.js. I forgot one line of code ah. Thanks to @ coding on Discord for reporting the error.
The future is here: p5play v3.19 now supports HDR color space when used with q5.js! :sparkles: https://github.com/quinton-ashley/q5.js https://github.com/quinton-ashley/q5.js/issues/24
Thusly, p5play.org has been upgraded to display vibrant colors and images on HDR devices. :eyes: https://p5play.org
Check out my "HDR Web Design Guide" for more info on how to use HDR in your own projects. :handshake: https://quinton-ashley.github.io/hdr-web-design-guide/
New feature: sprite.opacity which changes the opacity of the sprite, whether it's drawn using shapes or images.
Keep this a secret for now, but I also added p5play style input functions pressing and dragging for touch objects in the touches array. I will announce this feature on Discord after I write documentation for it. 😅
https://p5play.org/learn/input_devices.html?page=5
Use these links in your projects to always get the latest version of p5play:
https://p5play.org/v3/planck.min.js
https://p5play.org/v3/p5play.js
sprite.life is now based on world.timeScale instead of frameCount. Fixes #308
Fixed renderStats not working with p5.js and made the rect bigger to fit the additional line of text that shows the display frame rate.
Fixed #307 rotateTo is now straightforward, just rotate the sprite to whatever angle at whatever speed you give it. rotateMinTo will rotate the sprite the minimum angular distance to the destination angle, using the given rotation speed as an absolute speed, flipping the direction of rotation as needed.
No longer shows the "made with p5play" on replit.dev pages.
Properly implemented rotationSpeed. In planck angularVelocity is specified in angles per second. Therefore to properly set rotationSpeed the user's angle value must be multiplied by 60 (fps) then divided by 57.2958 to convert to radians. Previously this function didn't do any calculation and the results were visually similar when used with the default degree mode. I'm not sure how I didn't catch this, but no one else ever reported the issue either. Glad it's fixed now!
p5play now calls mousePressed on first touches, as it should.
Various tweaks were made to make p5play not throw errors if window or document are not defined node.js.
A template for using p5play in a node.js server with q5, canvas, and jsdom packages will be published soon!
Documented p5play's touches array!
https://p5play.org/learn/input.html?page=5
Fixed #298
Implemented #258 kb.visible = true only works if done inside the p5/q5 touchStarted function.
Fixed this but only with p5.js #296
Forgot to add the fix to #270 into the new release. Re-added...
Fixed bug with touches not ending. A variable name was wrong in one place.
Fixed crash with "pixelated" preset when using p5play with p5.js. I forgot one line of code ah. Thanks to @ coding on Discord for reporting the error.
The future is here: p5play v3.19 now supports HDR color space when used with q5.js! :sparkles: https://github.com/quinton-ashley/q5.js https://github.com/quinton-ashley/q5.js/issues/24
Thusly, p5play.org has been upgraded to display vibrant colors and images on HDR devices. :eyes: https://p5play.org
Check out my "HDR Web Design Guide" for more info on how to use HDR in your own projects. :handshake: https://quinton-ashley.github.io/hdr-web-design-guide/
New feature: sprite.opacity which changes the opacity of the sprite, whether it's drawn using shapes or images.
Keep this a secret for now, but I also added p5play style input functions pressing and dragging for touch objects in the touches array. I will announce this feature on Discord after I write documentation for it. 😅
https://p5play.org/learn/input_devices.html?page=5
Fixes #310
sprite.life is now based on world.timeScale instead of frameCount. Fixes #308
Fixed renderStats not working with p5.js and made the rect bigger to fit the additional line of text that shows the display frame rate.
Also when sprite.debug is true, sensors will be drawn with bright yellow to differentiate them from colliders which are bright green.
Implemented world.timeScale which can be used to control the physics simulation.
https://p5play.org/learn/world.html?page=1
Fixed #307 rotateTo is now straightforward, just rotate the sprite to whatever angle at whatever speed you give it. rotateMinTo will rotate the sprite the minimum angular distance to the destination angle, using the given rotation speed as an absolute speed, flipping the direction of rotation as needed.
No longer shows the "made with p5play" on replit.dev pages.
Properly implemented rotationSpeed. In planck angularVelocity is specified in angles per second. Therefore to properly set rotationSpeed the user's angle value must be multiplied by 60 (fps) then divided by 57.2958 to convert to radians. Previously this function didn't do any calculation and the results were visually similar when used with the default degree mode. I'm not sure how I didn't catch this, but no one else ever reported the issue either. Glad it's fixed now!
p5play now calls mousePressed on first touches, as it should.
Various tweaks were made to make p5play not throw errors if window or document are not defined node.js.
A template for using p5play in a node.js server with q5, canvas, and jsdom packages will be published soon!
Documented p5play's touches array!
https://p5play.org/learn/input.html?page=5
Fixed #298
Implemented #258 kb.visible = true only works if done inside the p5/q5 touchStarted function.
Fixed this but only with p5.js #296
Forgot to add the fix to #270 into the new release. Re-added...
Fixed bug with touches not ending. A variable name was wrong in one place.
Fixed crash with "pixelated" preset when using p5play with p5.js. I forgot one line of code ah. Thanks to @ coding on Discord for reporting the error.
The future is here: p5play v3.19 now supports HDR color space when used with q5.js! :sparkles: https://github.com/quinton-ashley/q5.js https://github.com/quinton-ashley/q5.js/issues/24
Thusly, p5play.org has been upgraded to display vibrant colors and images on HDR devices. :eyes: https://p5play.org
Check out my "HDR Web Design Guide" for more info on how to use HDR in your own projects. :handshake: https://quinton-ashley.github.io/hdr-web-design-guide/
New feature: sprite.opacity which changes the opacity of the sprite, whether it's drawn using shapes or images.
Keep this a secret for now, but I also added p5play style input functions pressing and dragging for touch objects in the touches array. I will announce this feature on Discord after I write documentation for it. 😅
https://p5play.org/learn/input_devices.html?page=5
Upgraded p5play's license from the GPLv3 to the AGPLv3. See LICENSING.md for more info.
The fullscreen and pixelated (no scalar) canvas presets are now programmed to decide to scale width or height to 100% by comparing the aspect ratio of the canvas to the aspect ratio of the window.
if (c.w / c.h > window.innerWidth / window.innerHeight) style += 'width: 100%!important; height: auto!important;';
else style += 'height: 100%!important; width: auto!important;';
Fixed #281
I added a new feature to make it easier to make tile based games. When using sprite.move with a sprite that has a tileSize (not equal to 1), and an input distance that's divisible by 0.5, and an input direction name or cardinal direction angle, then the distance the sprite moves will be rounded up to the nearest half tile.
Also improved the canvas "fullscreen" preset and wrote documentation for it. https://p5play.org/learn/canvas.html?page=0
Reverted some incorrect changes to move and moveTo. For better performance, I tried making it so that if a sprite is moved in a cardinal direction, the calculations for one axis of movement would be skipped, but these functions still need to override that axis of movement. In the docs it says inputting direction in these functions should be equivalent to changing the sprite.direction property, like this:
sprite.move(1, 'left');
// is equivalent to
sprite.direction = 'left';
sprite.move(1);
For non-imperative movement, applyForce can be used.
Fixed sprite.moveTo function errors introduced in v3.17.
Changed the implementation of the sleep function, when run without arguments it now resolve it's promise after the next world step is complete, instead of using requestAnimationFrame. Pretty much the same result in normal use cases but it could allow users to run world.step separate from the canvas display rate and have functions like move and moveTo still work. Previously they were tied to the frame rate too.
Upgraded p5play's rotated text caching system to work exclusively with p5.js v1.9.0 (latest) and any future releases.
This is because p5.js' devs made some breaking changes to p5.Graphics.get which makes the current implementation of text caching in p5play incompatible with older versions of p5.js.
Use these links in your projects to always get the latest version of p5play:
https://p5play.org/v3/planck.min.js
https://p5play.org/v3/p5play.js
The fullscreen and pixelated (no scalar) canvas presets are now programmed to decide to scale width or height to 100% by comparing the aspect ratio of the canvas to the aspect ratio of the window.
if (c.w / c.h > window.innerWidth / window.innerHeight) style += 'width: 100%!important; height: auto!important;';
else style += 'height: 100%!important; width: auto!important;';
Fixed #281
I added a new feature to make it easier to make tile based games. When using sprite.move with a sprite that has a tileSize (not equal to 1), distance is divisible by 0.5, and a direction name or cardinal direction angle is given, the distance the sprite moves will be rounded up to the nearest half tile.
Also improved the canvas "fullscreen" preset and wrote documentation for it. https://p5play.org/learn/canvas.html?page=0
Reverted some incorrect changes to move and moveTo. For better performance, I tried making it so that if a sprite is moved in a cardinal direction, the calculations for one axis of movement would be skipped, but these functions still need to override that axis of movement. In the docs it says inputting direction in these functions should be equivalent to changing the sprite.direction property, like this:
sprite.move(1, 'left');
// is equivalent to
sprite.direction = 'left';
sprite.move(1);
For non-imperative movement, applyForce can be used.
Fixed sprite.moveTo function errors introduced in v3.17.
Changed the implementation of the sleep function, when run without arguments it now resolve it's promise after the next world step is complete, instead of using requestAnimationFrame. Pretty much the same result in normal use cases but it could allow users to run world.step separate from the canvas display rate and have functions like move and moveTo still work. Previously they were tied to the frame rate too.
Upgraded p5play's rotated text caching system to work exclusively with p5.js v1.9.0 (latest) and any future releases.
This is because p5.js' devs made some breaking changes to p5.Graphics.get which makes the current implementation of text caching in p5play incompatible with older versions of p5.js.